@evjs/cli 0.0.1-rc.18 → 0.0.1-rc.27

package/templates/complex-routing/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "example-complex-routing",
-  "version": "0.0.1-rc.18",
-  "private": true,
-  "scripts": {
-    "dev": "ev dev",
-    "build": "ev build",
-    "check-types": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@evjs/runtime": "*",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
-  },
-  "devDependencies": {
-    "@evjs/cli": "*",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "typescript": "^5.7.3"
-  }
-}

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

@@ -1,86 +0,0 @@
-"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

@@ -1,29 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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>
-  ),
-});

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

@@ -1,81 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,13 +0,0 @@
-{
-  "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/README.md

@@ -1,24 +0,0 @@
-# configured-server-fns
-
-Server functions with `ev.config.ts` and module-level query/mutation proxies.
-
-## Run
-
-```bash
-npm run dev -w example-configured-server-fns
-```
-
-## Key Files
-
-| File | Purpose |
-|------|---------|
-| `ev.config.ts` | Custom ports and settings |
-| `src/routes.tsx` | Routes with `createQueryProxy` / `createMutationProxy` |
-| `src/api/users.server.ts` | User CRUD functions |
-
-## What It Demonstrates
-
-- `ev.config.ts` with `defineConfig` for custom ports
-- `createQueryProxy(module)` for grouped queries
-- `createMutationProxy(module)` for grouped mutations
-- Direct mutation args: `mutate({ name, email })` (not array-wrapped)

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

@@ -1,56 +0,0 @@
-import { defineConfig } from "@evjs/cli";
-
-/**
- * Advanced ev.config.ts example.
- *
- * This file demonstrates all available configuration options.
- * All fields are optional — evjs works 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 backend command (default: "node")
-    // Supports: "node", "bun", "deno run --allow-net", etc.
-    backend: "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

@@ -1,11 +0,0 @@
-<!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

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