@evjs/cli 0.0.1-rc.13

package/templates/basic-csr/src/main.tsx

@@ -0,0 +1,22 @@
+import { createApp } from "@evjs/runtime/client";
+import { rootRoute } from "./pages/__root";
+import { aboutRoute } from "./pages/about";
+import { homeRoute } from "./pages/home";
+import { postDetailRoute, postsIndexRoute, postsRoute } from "./pages/posts";
+
+const routeTree = rootRoute.addChildren([
+  homeRoute,
+  aboutRoute,
+  postsRoute.addChildren([postsIndexRoute, postDetailRoute]),
+]);
+
+const app = createApp({ routeTree });
+
+// Register router type for full IDE type-safety on useParams, useSearch, Link, etc.
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof app.router;
+  }
+}
+
+app.render("#app");

package/templates/basic-csr/src/pages/__root.tsx

@@ -0,0 +1,28 @@
+import { createRootRoute, Link, Outlet } from "@evjs/runtime/client";
+
+function Root() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", padding: "1rem" }}>
+      <nav
+        style={{
+          display: "flex",
+          gap: "1rem",
+          borderBottom: "1px solid #e5e7eb",
+          paddingBottom: "0.5rem",
+          marginBottom: "1rem",
+        }}
+      >
+        <Link to="/" style={{ fontWeight: "bold" }}>
+          Home
+        </Link>
+        <Link to="/about">About</Link>
+        <Link to="/posts">Posts</Link>
+      </nav>
+      <Outlet />
+    </div>
+  );
+}
+
+export const rootRoute = createRootRoute({
+  component: Root,
+});

package/templates/basic-csr/src/pages/about.tsx

@@ -0,0 +1,19 @@
+import { createRoute } from "@evjs/runtime/client";
+import { rootRoute } from "./__root";
+
+function About() {
+  return (
+    <div>
+      <h1>About</h1>
+      <p>
+        Code-based routing with TanStack Router via <code>createApp</code>.
+      </p>
+    </div>
+  );
+}
+
+export const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/about",
+  component: About,
+});

package/templates/basic-csr/src/pages/home.tsx

@@ -0,0 +1,19 @@
+import { createRoute } from "@evjs/runtime/client";
+import { rootRoute } from "./__root";
+
+function Home() {
+  return (
+    <div>
+      <h1>Welcome Home!</h1>
+      <p>
+        A basic client-side rendered app built with <code>@evjs/runtime</code>.
+      </p>
+    </div>
+  );
+}
+
+export const homeRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: Home,
+});

package/templates/basic-csr/src/pages/posts/index.tsx

@@ -0,0 +1,63 @@
+import { createRoute, Link, Outlet } from "@evjs/runtime/client";
+import { rootRoute } from "../__root";
+
+const posts = [
+  { id: "1", title: "First Post", body: "Hello world!" },
+  { id: "2", title: "Second Post", body: "Another day, another post." },
+  { id: "3", title: "Third Post", body: "Three's a charm." },
+];
+
+function Posts() {
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <ul style={{ listStyle: "none", padding: 0, minWidth: 160 }}>
+        {posts.map((p) => (
+          <li key={p.id} style={{ marginBottom: "0.25rem" }}>
+            <Link
+              to="/posts/$postId"
+              params={{ postId: p.id }}
+              activeProps={{ style: { fontWeight: "bold" } }}
+            >
+              {p.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <Outlet />
+    </div>
+  );
+}
+
+export const postsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/posts",
+  component: Posts,
+});
+
+function PostsIndex() {
+  return <p style={{ color: "#6b7280" }}>Select a post.</p>;
+}
+
+export const postsIndexRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: "/",
+  component: PostsIndex,
+});
+
+function PostDetail() {
+  const { postId } = postDetailRoute.useParams();
+  const post = posts.find((p) => p.id === postId);
+  if (!post) return <p>Post not found.</p>;
+  return (
+    <div>
+      <h2>{post.title}</h2>
+      <p>{post.body}</p>
+    </div>
+  );
+}
+
+export const postDetailRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: "$postId",
+  component: PostDetail,
+});

package/templates/basic-csr/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "Bundler",
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/templates/basic-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>Server Functions Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

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

@@ -0,0 +1,21 @@
+{
+  "name": "example-basic-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/basic-server-fns/src/api/users.server.ts

@@ -0,0 +1,31 @@
+"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() {
+  // Simulate server latency
+  await new Promise((r) => setTimeout(r, 100));
+  return users;
+}
+
+/** Get a single user by ID. */
+export async function getUser(id: string) {
+  await new Promise((r) => setTimeout(r, 50));
+  const user = users.find((u) => u.id === id);
+  if (!user) throw new Error(`User ${id} not found`);
+  return user;
+}
+
+/** 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/basic-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/basic-server-fns/src/routes.tsx

@@ -0,0 +1,108 @@
+import {
+  createRootRoute,
+  createRoute,
+  Link,
+  Outlet,
+} from "@evjs/runtime/client";
+import { useEffect, useState } from "react";
+import { createUser, getUsers } from "./api/users.server";
+
+// ── Root Route ──
+
+function Root() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", padding: "1rem" }}>
+      <h1>Server Functions Example</h1>
+      <nav style={{ display: "flex", gap: "1rem", marginBottom: "1rem" }}>
+        <Link to="/">Users</Link>
+      </nav>
+      <Outlet />
+    </div>
+  );
+}
+
+const rootRoute = createRootRoute({ component: Root });
+
+// ── Users Route ──
+
+function UsersPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+
+  const [users, setUsers] = useState<
+    { id: string; name: string; email: string }[]
+  >([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    let mounted = true;
+    getUsers()
+      .then((data) => {
+        if (mounted) {
+          setUsers(data);
+          setIsLoading(false);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+        if (mounted) setIsLoading(false);
+      });
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  async function handleCreate(e: { preventDefault: () => void }) {
+    e.preventDefault();
+    if (!name || !email) return;
+    try {
+      await createUser({ name, email });
+      setName("");
+      setEmail("");
+      const data = await getUsers();
+      setUsers(data);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  if (isLoading) return <p>Loading users from server…</p>;
+
+  return (
+    <div>
+      <h2>Users (fetched via direct server function call)</h2>
+      <ul>
+        {users.map((u) => (
+          <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,
+});
+
+// ── Route Tree ──
+
+export const routeTree = rootRoute.addChildren([usersRoute]);

package/templates/basic-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
+  }
+}

package/templates/complex-routing/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>evjs — Complex Routing</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

package/templates/complex-routing/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "example-complex-routing",
+  "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.0.8",
+    "@types/react-dom": "^19.0.3",
+    "typescript": "^5.7.3"
+  }
+}

package/templates/complex-routing/src/api/data.server.ts

@@ -0,0 +1,86 @@
+"use server";
+
+// ── Mock data ──
+
+const posts = [
+  {
+    id: "1",
+    title: "Getting Started with evjs",
+    body: "evjs is a zero-config React meta-framework...",
+    author: "alice",
+    tags: ["intro", "tutorial"],
+  },
+  {
+    id: "2",
+    title: "Server Functions Deep Dive",
+    body: 'Server functions use the "use server" directive...',
+    author: "bob",
+    tags: ["server", "advanced"],
+  },
+  {
+    id: "3",
+    title: "Routing Patterns",
+    body: "evjs uses TanStack Router for type-safe routing...",
+    author: "alice",
+    tags: ["routing", "tutorial"],
+  },
+  {
+    id: "4",
+    title: "WebSocket Transport",
+    body: "You can swap HTTP for WebSocket transport...",
+    author: "charlie",
+    tags: ["transport", "advanced"],
+  },
+  {
+    id: "5",
+    title: "Deploying to Edge",
+    body: "Run your evjs app on Deno, Bun, or Workers...",
+    author: "bob",
+    tags: ["deploy", "edge"],
+  },
+];
+
+const users: Record<string, { name: string; bio: string }> = {
+  alice: { name: "Alice", bio: "Core contributor" },
+  bob: { name: "Bob", bio: "Technical writer" },
+  charlie: { name: "Charlie", bio: "DevOps engineer" },
+};
+
+// ── Server functions ──
+
+export async function getPosts(query?: string) {
+  await delay(50);
+  if (!query) return posts;
+  const q = query.toLowerCase();
+  return posts.filter(
+    (p) =>
+      p.title.toLowerCase().includes(q) || p.tags.some((t) => t.includes(q)),
+  );
+}
+
+export async function getPost(id: string) {
+  await delay(50);
+  const post = posts.find((p) => p.id === id);
+  if (!post) throw new Error(`Post ${id} not found`);
+  return post;
+}
+
+export async function getUser(username: string) {
+  await delay(50);
+  const user = users[username];
+  if (!user) throw new Error(`User ${username} not found`);
+  return { username, ...user };
+}
+
+export async function getStats() {
+  await delay(50);
+  return {
+    totalPosts: posts.length,
+    totalUsers: Object.keys(users).length,
+    tags: [...new Set(posts.flatMap((p) => p.tags))],
+  };
+}
+
+function delay(ms: number) {
+  return new Promise((r) => setTimeout(r, ms));
+}

package/templates/complex-routing/src/main.tsx

@@ -0,0 +1,29 @@
+import { createApp } from "@evjs/runtime/client";
+import { rootRoute } from "./pages/__root";
+import { notFoundRoute, redirectRoute } from "./pages/catch";
+import { dashboardLayout, dashboardRoute } from "./pages/dashboard";
+import { homeRoute } from "./pages/home";
+import { postDetailRoute, postsIndexRoute, postsRoute } from "./pages/posts";
+import { searchRoute } from "./pages/search";
+import { userRoute } from "./pages/user";
+
+const routeTree = rootRoute.addChildren([
+  homeRoute,
+  postsRoute.addChildren([postsIndexRoute, postDetailRoute]),
+  userRoute,
+  dashboardLayout.addChildren([dashboardRoute]),
+  searchRoute,
+  redirectRoute,
+  notFoundRoute,
+]);
+
+const app = createApp({ routeTree });
+
+// Register router type for full IDE type-safety on useParams, useSearch, Link, etc.
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof app.router;
+  }
+}
+
+app.render("#app");

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

@@ -0,0 +1,60 @@
+import { createAppRootRoute, Link, Outlet } from "@evjs/runtime/client";
+
+const styles = {
+  app: {
+    fontFamily: "system-ui, sans-serif",
+    maxWidth: 900,
+    margin: "0 auto",
+    padding: "1rem",
+  },
+  nav: {
+    display: "flex",
+    gap: "1rem",
+    padding: "0.75rem 0",
+    borderBottom: "1px solid #e5e7eb",
+    marginBottom: "1rem",
+  },
+  link: { textDecoration: "none", color: "#6b7280" },
+  activeLink: { color: "#111", fontWeight: 600 as const },
+};
+
+function RootLayout() {
+  return (
+    <div style={styles.app}>
+      <nav style={styles.nav}>
+        <Link
+          to="/"
+          style={styles.link}
+          activeProps={{ style: styles.activeLink }}
+        >
+          Home
+        </Link>
+        <Link
+          to="/posts"
+          style={styles.link}
+          activeProps={{ style: styles.activeLink }}
+        >
+          Posts
+        </Link>
+        <Link
+          to="/dashboard"
+          style={styles.link}
+          activeProps={{ style: styles.activeLink }}
+        >
+          Dashboard
+        </Link>
+        <Link
+          to="/search"
+          search={{ q: "" }}
+          style={styles.link}
+          activeProps={{ style: styles.activeLink }}
+        >
+          Search
+        </Link>
+      </nav>
+      <Outlet />
+    </div>
+  );
+}
+
+export const rootRoute = createAppRootRoute({ component: RootLayout });

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

@@ -0,0 +1,26 @@
+import { createRoute, Link, redirect } from "@evjs/runtime/client";
+import { rootRoute } from "./__root";
+
+// ── Redirect: /old-blog → /posts ──
+
+export const redirectRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/old-blog",
+  beforeLoad: () => {
+    throw redirect({ to: "/posts" });
+  },
+});
+
+// ── 404 Catch-all ──
+
+export const notFoundRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "*",
+  component: () => (
+    <div style={{ textAlign: "center", padding: "3rem" }}>
+      <h1 style={{ fontSize: 48 }}>404</h1>
+      <p style={{ color: "#6b7280" }}>Page not found</p>
+      <Link to="/">← Go home</Link>
+    </div>
+  ),
+});