Skip to content

Latest commit

 

History

History

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

README.md

@evjs/client

Client-side runtime for the evjs fullstack framework.

Features

  • Type-Safe Routing — Re-exports TanStack Router with custom createApp integration.
  • Data Fetching — Re-exports TanStack Query with built-in server function proxies.
  • Server Function SupportuseQuery(fn) and useMutation(fn) for zero-boilerplate RPC.
  • Unified BootstrapcreateApp({ routeTree }).render("#app").

Install

npm install @evjs/client react react-dom

Quick Start

1. Define Routes

// src/routes.tsx
import { createRoute, createAppRootRoute, Outlet } from "@evjs/client";

export const rootRoute = createAppRootRoute({
  component: () => (
    <div>
      <h1>My App</h1>
      <Outlet />
    </div>
  ),
});

export const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/", // Must be a string literal!
  component: () => <div>Hello World</div>,
});

export const routeTree = rootRoute.addChildren([indexRoute]);

2. Bootstrap App

// src/main.tsx
import { createApp } from "@evjs/client";
import { routeTree } from "./routes";

const app = createApp({ routeTree });
app.render("#app");

Server Functions

Use the "use server" directive in *.server.ts files. @evjs/client provides hooks to call them:

import { useQuery } from "@evjs/client";
import { getPosts } from "./api/posts.server";

function Posts() {
  const { data } = useQuery(getPosts);
  return <ul>{data?.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

API

Routing

  • createApp: Create the main application instance.
  • createRoute: Define a route (enforces string literal paths).
  • createAppRootRoute: Define the root layout.
  • Link, Outlet, useNavigate, useParams, useSearch: Standard TanStack Router components/hooks.

Query

  • useQuery(fn, args?): Wrapper around useSuspenseQuery.
  • useMutation(fn): Wrapper around useMutation.
  • getFnQueryKey(fn, args?): Generate stable query keys for server functions.
  • getFnQueryOptions(fn, args?): Generate options for manual queryClient usage.

Transport

  • initTransport({ baseUrl, endpoint }): Configure the API endpoint for server functions.

License

MIT