Client-side runtime for the evjs fullstack framework.
- Type-Safe Routing — Re-exports TanStack Router with custom
createAppintegration. - Data Fetching — Re-exports TanStack Query with built-in server function proxies.
- Server Function Support —
useQuery(fn)anduseMutation(fn)for zero-boilerplate RPC. - Unified Bootstrap —
createApp({ routeTree }).render("#app").
npm install @evjs/client react react-dom// 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]);// src/main.tsx
import { createApp } from "@evjs/client";
import { routeTree } from "./routes";
const app = createApp({ routeTree });
app.render("#app");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>;
}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.
useQuery(fn, args?): Wrapper arounduseSuspenseQuery.useMutation(fn): Wrapper arounduseMutation.getFnQueryKey(fn, args?): Generate stable query keys for server functions.getFnQueryOptions(fn, args?): Generate options for manualqueryClientusage.
initTransport({ baseUrl, endpoint }): Configure the API endpoint for server functions.
MIT