@evjs/cli 0.0.1-rc.13

package/templates/complex-routing/src/pages/dashboard.tsx

@@ -0,0 +1,81 @@
+import { createRoute, Outlet, query } from "@evjs/runtime/client";
+import { getStats } from "../api/data.server";
+import { rootRoute } from "./__root";
+
+const styles = {
+  card: {
+    border: "1px solid #e5e7eb",
+    borderRadius: 8,
+    padding: "1rem",
+    marginBottom: "0.75rem",
+  },
+  stat: { textAlign: "center" as const, padding: "1rem" },
+  tag: {
+    display: "inline-block",
+    background: "#f3f4f6",
+    borderRadius: 4,
+    padding: "2px 8px",
+    fontSize: 12,
+    marginRight: 4,
+  },
+};
+
+// ── Pathless layout (no URL segment, just shared UI) ──
+
+export const dashboardLayout = createRoute({
+  getParentRoute: () => rootRoute,
+  id: "dashboard-layout",
+  component: () => (
+    <div>
+      <Outlet />
+    </div>
+  ),
+});
+
+// ── Dashboard page (/dashboard) ──
+
+function Dashboard() {
+  const { data: stats } = query(getStats).useQuery();
+  if (!stats) return <p>Loading...</p>;
+  return (
+    <div>
+      <h2>Dashboard</h2>
+      <div style={{ display: "flex", gap: "1rem" }}>
+        <div style={{ ...styles.card, ...styles.stat }}>
+          <div style={{ fontSize: 32, fontWeight: 700 }}>
+            {stats.totalPosts}
+          </div>
+          <div style={{ color: "#6b7280" }}>Posts</div>
+        </div>
+        <div style={{ ...styles.card, ...styles.stat }}>
+          <div style={{ fontSize: 32, fontWeight: 700 }}>
+            {stats.totalUsers}
+          </div>
+          <div style={{ color: "#6b7280" }}>Users</div>
+        </div>
+        <div style={{ ...styles.card, ...styles.stat }}>
+          <div style={{ fontSize: 32, fontWeight: 700 }}>
+            {stats.tags.length}
+          </div>
+          <div style={{ color: "#6b7280" }}>Tags</div>
+        </div>
+      </div>
+      <h3>All Tags</h3>
+      <div>
+        {stats.tags.map((t) => (
+          <span key={t} style={styles.tag}>
+            {t}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const dashboardRoute = createRoute({
+  getParentRoute: () => dashboardLayout,
+  path: "/dashboard",
+  loader: ({ context }) =>
+    context.queryClient.ensureQueryData(query(getStats).queryOptions()),
+  component: Dashboard,
+});

package/templates/complex-routing/src/pages/home.tsx

@@ -0,0 +1,35 @@
+import { createRoute, Link } from "@evjs/runtime/client";
+import { rootRoute } from "./__root";
+
+export const homeRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: () => (
+    <div>
+      <h1>evjs Complex Routing Example</h1>
+      <p>
+        Demonstrates nested layouts, dynamic params, search params, redirects,
+        and server function loaders.
+      </p>
+      <ul>
+        <li>
+          <Link to="/posts">Posts</Link> — nested group with dynamic{" "}
+          <code>$postId</code>
+        </li>
+        <li>
+          <Link to="/dashboard">Dashboard</Link> — pathless layout with server
+          function loader
+        </li>
+        <li>
+          <Link to="/search" search={{ q: "tutorial" }}>
+            Search
+          </Link>{" "}
+          — search params
+        </li>
+        <li>
+          <Link to="/old-blog">Old Blog</Link> — redirect to /posts
+        </li>
+      </ul>
+    </div>
+  ),
+});

package/templates/complex-routing/src/pages/posts/index.tsx

@@ -0,0 +1,104 @@
+import { createRoute, Link, Outlet, query } from "@evjs/runtime/client";
+import { getPost, getPosts } from "../../api/data.server";
+import { rootRoute } from "../__root";
+
+const styles = {
+  sidebar: { display: "flex", gap: "1.5rem" },
+  nav: {
+    minWidth: 180,
+    borderRight: "1px solid #e5e7eb",
+    paddingRight: "1rem",
+  },
+  tag: {
+    display: "inline-block",
+    background: "#f3f4f6",
+    borderRadius: 4,
+    padding: "2px 8px",
+    fontSize: 12,
+    marginRight: 4,
+  },
+};
+
+// ── Posts layout (/posts) ──
+
+function PostsLayout() {
+  const { data: posts } = query(getPosts).useQuery();
+  return (
+    <div style={styles.sidebar}>
+      <div style={styles.nav}>
+        <h3 style={{ marginTop: 0 }}>Posts</h3>
+        <ul style={{ listStyle: "none", padding: 0 }}>
+          {posts?.map((p) => (
+            <li key={p.id} style={{ marginBottom: "0.25rem" }}>
+              <Link
+                to="/posts/$postId"
+                params={{ postId: p.id }}
+                style={{ textDecoration: "none", color: "#374151" }}
+                activeProps={{ style: { fontWeight: "bold", color: "#111" } }}
+              >
+                {p.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div style={{ flex: 1 }}>
+        <Outlet />
+      </div>
+    </div>
+  );
+}
+
+export const postsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/posts",
+  component: PostsLayout,
+});
+
+// ── Posts index (/posts/) ──
+
+export const postsIndexRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: "/",
+  component: () => (
+    <p style={{ color: "#6b7280" }}>← Select a post from the sidebar</p>
+  ),
+});
+
+// ── Post detail (/posts/$postId) ──
+
+function PostDetail() {
+  const { postId } = postDetailRoute.useParams();
+  const { data: post } = query(getPost).useQuery(postId);
+
+  if (!post) return <p>Loading...</p>;
+  return (
+    <div>
+      <h2>{post.title}</h2>
+      <p style={{ color: "#6b7280" }}>
+        by{" "}
+        <Link to="/users/$username" params={{ username: post.author }}>
+          {post.author}
+        </Link>
+      </p>
+      <p>{post.body}</p>
+      <div>
+        {post.tags.map((tag) => (
+          <span key={tag} style={styles.tag}>
+            {tag}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const postDetailRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: "$postId",
+  loader: ({ params, context }) =>
+    context.queryClient.ensureQueryData(
+      query(getPost).queryOptions(params.postId),
+    ),
+  component: PostDetail,
+});

package/templates/complex-routing/src/pages/search.tsx

@@ -0,0 +1,71 @@
+import { createRoute, Link, query } from "@evjs/runtime/client";
+import { getPosts } from "../api/data.server";
+import { rootRoute } from "./__root";
+
+const styles = {
+  card: {
+    border: "1px solid #e5e7eb",
+    borderRadius: 8,
+    padding: "1rem",
+    marginBottom: "0.75rem",
+  },
+};
+
+function SearchPage() {
+  const { q } = searchRoute.useSearch();
+  const { data: results } = query(getPosts).useQuery(q || undefined);
+
+  return (
+    <div>
+      <h2>Search</h2>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          const form = new FormData(e.currentTarget);
+          const q = form.get("q") as string;
+          window.location.search = `?q=${encodeURIComponent(q)}`;
+        }}
+      >
+        <input
+          name="q"
+          defaultValue={q}
+          placeholder="Search posts..."
+          style={{
+            padding: "0.5rem",
+            width: 300,
+            borderRadius: 4,
+            border: "1px solid #d1d5db",
+          }}
+        />
+      </form>
+      <div style={{ marginTop: "1rem" }}>
+        {q && <p style={{ color: "#6b7280" }}>Results for "{q}":</p>}
+        {results?.map((post) => (
+          <div key={post.id} style={styles.card}>
+            <Link
+              to="/posts/$postId"
+              params={{ postId: post.id }}
+              style={{ textDecoration: "none", color: "#111" }}
+            >
+              <strong>{post.title}</strong>
+            </Link>
+            <p
+              style={{ margin: "0.25rem 0 0", color: "#6b7280", fontSize: 14 }}
+            >
+              {post.body}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const searchRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/search",
+  validateSearch: (search: Record<string, unknown>) => ({
+    q: (search.q as string) || "",
+  }),
+  component: SearchPage,
+});

package/templates/complex-routing/src/pages/user.tsx

@@ -0,0 +1,32 @@
+import { createRoute, Link, query } from "@evjs/runtime/client";
+import { getUser } from "../api/data.server";
+import { rootRoute } from "./__root";
+
+const styles = {
+  card: { border: "1px solid #e5e7eb", borderRadius: 8, padding: "1rem" },
+};
+
+function UserProfile() {
+  const { username } = userRoute.useParams();
+  const { data: user } = query(getUser).useQuery(username);
+
+  if (!user) return <p>Loading...</p>;
+  return (
+    <div style={styles.card}>
+      <h2>{user.name}</h2>
+      <p style={{ color: "#6b7280" }}>@{user.username}</p>
+      <p>{user.bio}</p>
+      <Link to="/posts">← Back to posts</Link>
+    </div>
+  );
+}
+
+export const userRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/users/$username",
+  loader: ({ params, context }) =>
+    context.queryClient.ensureQueryData(
+      query(getUser).queryOptions(params.username),
+    ),
+  component: UserProfile,
+});

package/templates/complex-routing/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}

package/templates/configured-server-fns/ev.config.ts

@@ -0,0 +1,56 @@
+import { defineConfig } from "@evjs/cli";
+
+/**
+ * Advanced ev.config.ts example.
+ *
+ * This file demonstrates all available configuration options.
+ * All fields are optional — evjs works zero-config out of the box.
+ */
+export default defineConfig({
+  client: {
+    // Client entry point (default: "./src/main.tsx")
+    entry: "./src/main.tsx",
+
+    // HTML template (default: "./index.html")
+    html: "./index.html",
+
+    // Dev server options (merged with built-in defaults)
+    dev: {
+      // Dev server port (default: 3000)
+      port: 4000,
+
+      // Any dev server options can be added here:
+      // https: true,
+      // open: true,
+      // historyApiFallback: true,
+    },
+
+    // Transport configuration for server function calls
+    transport: {
+      // Base URL for server function endpoint (default: same origin)
+      // baseUrl: "https://api.example.com",
+
+      // Server function endpoint path (default: "/api/fn")
+      endpoint: "/api/fn",
+    },
+  },
+
+  server: {
+    // Server function endpoint path (default: "/api/fn")
+    endpoint: "/api/fn",
+
+    // Server runner module (default: "@evjs/runtime/server/node")
+    // For Deno/Bun/Workers, use: "@evjs/runtime/server/ecma"
+    runner: "@evjs/runtime/server/node",
+
+    // Middleware module paths to auto-register in server entry
+    // These are imported and applied in order
+    // middleware: ["./src/middleware/auth.ts", "./src/middleware/cors.ts"],
+
+    // Dev server options
+    dev: {
+      // API server port in dev mode (default: 3001)
+      port: 4001,
+    },
+  },
+});

package/templates/configured-server-fns/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Configured Server Functions Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/templates/configured-server-fns/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "example-configured-server-fns",
+  "version": "0.0.1-rc.8",
+  "private": true,
+  "scripts": {
+    "dev": "ev dev",
+    "build": "ev build",
+    "check-types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@evjs/runtime": "^0.0.1-rc.13",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@evjs/cli": "^0.0.1-rc.5",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.8",
+    "typescript": "^5.7.3"
+  }
+}

package/templates/configured-server-fns/src/api/users.server.ts

@@ -0,0 +1,22 @@
+"use server";
+
+/** Simulated user database. */
+const users = [
+  { id: "1", name: "Alice", email: "alice@example.com" },
+  { id: "2", name: "Bob", email: "bob@example.com" },
+  { id: "3", name: "Charlie", email: "charlie@example.com" },
+];
+
+/** Get all users. */
+export async function getUsers() {
+  await new Promise((r) => setTimeout(r, 100));
+  return users;
+}
+
+/** Create a new user. */
+export async function createUser(data: { name: string; email: string }) {
+  await new Promise((r) => setTimeout(r, 50));
+  const newUser = { id: String(users.length + 1), ...data };
+  users.push(newUser);
+  return newUser;
+}

package/templates/configured-server-fns/src/main.tsx

@@ -0,0 +1,12 @@
+import { createApp } from "@evjs/runtime/client";
+import { routeTree } from "./routes";
+
+const app = createApp({ routeTree });
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof app.router;
+  }
+}
+
+app.render("#app");

package/templates/configured-server-fns/src/routes.tsx

@@ -0,0 +1,111 @@
+import {
+  createAppRootRoute,
+  createMutationProxy,
+  createQueryProxy,
+  createRoute,
+  Link,
+  Outlet,
+  useQueryClient,
+} from "@evjs/runtime/client";
+import { useState } from "react";
+import * as usersApi from "./api/users.server";
+
+// ── API Proxy ──
+
+const api = {
+  users: {
+    query: createQueryProxy(usersApi),
+    mutation: createMutationProxy(usersApi),
+  },
+};
+
+// ── Root Route ──
+
+function Root() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", padding: "1rem" }}>
+      <h1>Configured Server Functions</h1>
+      <p style={{ color: "#666" }}>
+        This example uses <code>ev.config.ts</code> for custom ports and
+        settings.
+      </p>
+      <nav style={{ display: "flex", gap: "1rem", marginBottom: "1rem" }}>
+        <Link to="/">Users</Link>
+      </nav>
+      <Outlet />
+    </div>
+  );
+}
+
+const rootRoute = createAppRootRoute({ component: Root });
+
+// ── Users Route ──
+
+function UsersPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+
+  const { data: users = [], isLoading } = api.users.query.getUsers.useQuery();
+
+  const queryClient = useQueryClient();
+  const { mutateAsync: doCreateUser } =
+    api.users.mutation.createUser.useMutation({
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: api.users.query.getUsers.queryKey(),
+        });
+      },
+    });
+
+  async function handleCreate(e: { preventDefault: () => void }) {
+    e.preventDefault();
+    if (!name || !email) return;
+    await doCreateUser([{ name, email }]);
+    setName("");
+    setEmail("");
+  }
+
+  if (isLoading) return <p>Loading users from server…</p>;
+
+  return (
+    <div>
+      <h2>Users (via Query Proxy)</h2>
+      <ul>
+        {users.map((u: { id: string; name: string; email: string }) => (
+          <li key={u.id}>
+            {u.name} — {u.email}
+          </li>
+        ))}
+      </ul>
+
+      <h3>Add User</h3>
+      <form onSubmit={handleCreate} style={{ display: "flex", gap: "0.5rem" }}>
+        <input
+          placeholder="Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <input
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <button type="submit">Create</button>
+      </form>
+    </div>
+  );
+}
+
+const usersRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: UsersPage,
+  loader: ({ context }) =>
+    context.queryClient.ensureQueryData(
+      api.users.query.getUsers.queryOptions(),
+    ),
+});
+
+// ── Route Tree ──
+
+export const routeTree = rootRoute.addChildren([usersRoute]);

package/templates/configured-server-fns/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "Bundler",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true
+  }
+}