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

package/README.md

@@ -28,7 +28,7 @@ No configuration file is needed. `ev dev` and `ev build` work out of the box wit
 
 ### `ev init [name]`
 
-Templates: `basic-csr`, `basic-server-fns`, `trpc-server-fns`.
+Templates: `basic-csr`, `basic-server-fns`, `configured-server-fns`, `complex-routing`, `with-tailwind`.
 Option: `-t, --template <template>` to skip interactive selection.
 
 ### `ev dev`
@@ -54,6 +54,7 @@ export default defineConfig({
   client: {
     entry: "./src/main.tsx",
     html: "./index.html",
+    plugins: [{ name: "tailwind", loaders: [{ test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] }] }],
     dev: { port: 3000 },
   },
   server: {

package/dist/create-webpack-config.js

@@ -74,6 +74,20 @@ export function createWebpackConfig(config, cwd) {
                         },
                     ],
                 },
+                // Plugin-declared loaders
+                ...(client?.plugins ?? []).flatMap((plugin) => (plugin.loaders ?? []).map((rule) => {
+                    const entries = Array.isArray(rule.use) ? rule.use : [rule.use];
+                    return {
+                        test: rule.test,
+                        ...(rule.exclude ? { exclude: rule.exclude } : {}),
+                        use: entries.map((entry) => typeof entry === "string"
+                            ? { loader: resolveLoader(entry) }
+                            : {
+                                loader: resolveLoader(entry.loader),
+                                ...(entry.options ? { options: entry.options } : {}),
+                            }),
+                    };
+                })),
             ],
         },
         plugins: [

package/dist/index.js

@@ -52,6 +52,10 @@ program
                     title: "Complex Routing (params, search, layouts, loaders)",
                     value: "complex-routing",
                 },
+                {
+                    title: "With Tailwind CSS (plugin loaders example)",
+                    value: "with-tailwind",
+                },
             ],
         },
     ], {
@@ -144,12 +148,15 @@ program
             const manifestPath = path.resolve(cwd, "dist/manifest.json");
             const bootstrapPath = path.resolve(cwd, "dist/server/_dev_start.cjs");
             if (fs.existsSync(manifestPath)) {
+                const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+                // Only start API server if there are actual server functions
+                if (Object.keys(manifest.server?.fns ?? {}).length === 0)
+                    return;
                 apiStarted = true;
                 const backendConfig = evjsConfig?.server?.backend ?? "node";
                 const [backend, ...backendExtraArgs] = backendConfig.split(/\s+/);
                 logger.info `Server bundle detected, starting ${backend} API...`;
                 try {
-                    const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
                     const serverBundlePath = path.resolve(cwd, "dist/server", manifest.server.entry);
                     fs.writeFileSync(bootstrapPath, [
                         `const bundle = require(${JSON.stringify(serverBundlePath)});`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evjs/cli",
-  "version": "0.0.1-rc.17",
+  "version": "0.0.1-rc.18",
   "description": "CLI and configuration layer for the evjs framework",
   "type": "module",
   "main": "./dist/config.js",

package/templates/basic-csr/README.md

@@ -0,0 +1,23 @@
+# basic-csr
+
+Minimal client-side rendering example — no server functions, just routing.
+
+## Run
+
+```bash
+npm run dev -w example-basic-csr
+```
+
+## Key Files
+
+| File | Purpose |
+|------|---------|
+| `src/main.tsx` | App bootstrap with `createApp` |
+| `src/pages/` | Route components (Home, Posts) |
+
+## What It Demonstrates
+
+- `createApp` + `createRoute` from `@evjs/runtime`
+- Client-side routing with TanStack Router
+- Dynamic route params (`$postId`)
+- No server functions — pure CSR

package/templates/basic-csr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-basic-csr",
-  "version": "0.0.0",
+  "version": "0.0.1-rc.18",
   "private": true,
   "scripts": {
     "dev": "ev dev",

package/templates/basic-server-fns/README.md

@@ -0,0 +1,24 @@
+# basic-server-fns
+
+Basic server functions with `query()` / `mutation()` wrappers.
+
+## Run
+
+```bash
+npm run dev -w example-basic-server-fns
+```
+
+## Key Files
+
+| File | Purpose |
+|------|---------|
+| `src/main.tsx` | App bootstrap |
+| `src/routes.tsx` | Routes + components |
+| `src/api/users.server.ts` | `"use server"` CRUD functions |
+
+## What It Demonstrates
+
+- `"use server"` directive for auto-discovered server functions
+- `query(fn).useQuery()` for data fetching
+- `mutation(fn).useMutation()` for mutations
+- `invalidates` for auto cache invalidation on mutation success

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

@@ -1,6 +1,6 @@
 {
   "name": "example-basic-server-fns",
-  "version": "0.0.0",
+  "version": "0.0.1-rc.18",
   "private": true,
   "scripts": {
     "dev": "ev dev",

package/templates/complex-routing/README.md

@@ -0,0 +1,27 @@
+# complex-routing
+
+Advanced routing patterns with TanStack Router.
+
+## Run
+
+```bash
+npm run dev -w example-complex-routing
+```
+
+## Key Files
+
+| File | Purpose |
+|------|---------|
+| `src/main.tsx` | Route tree assembly |
+| `src/pages/__root.tsx` | Root layout with navigation |
+| `src/pages/home.tsx` | Index route |
+| `src/pages/posts/` | Nested routes with loader |
+
+## What It Demonstrates
+
+- Dynamic route params (`$postId`)
+- Pathless layout routes
+- Route loaders with `queryClient.ensureQueryData`
+- Search params with `validateSearch`
+- Catch-all 404 route
+- Type-safe `route.useParams()`

package/templates/complex-routing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-complex-routing",
-  "version": "0.0.0",
+  "version": "0.0.1-rc.18",
   "private": true,
   "scripts": {
     "dev": "ev dev",

package/templates/configured-server-fns/README.md

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

@@ -39,9 +39,9 @@ export default defineConfig({
     // Server function endpoint path (default: "/api/fn")
     endpoint: "/api/fn",
 
-    // Server backend module (default: "@evjs/runtime/server/node")
-    // For Deno/Bun/Workers, use: "@evjs/runtime/server/ecma"
-    backend: "@evjs/runtime/server/node",
+    // 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

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

@@ -1,6 +1,6 @@
 {
   "name": "example-configured-server-fns",
-  "version": "0.0.0",
+  "version": "0.0.1-rc.18",
   "private": true,
   "scripts": {
     "dev": "ev dev",

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

@@ -60,7 +60,7 @@ function UsersPage() {
   async function handleCreate(e: { preventDefault: () => void }) {
     e.preventDefault();
     if (!name || !email) return;
-    await doCreateUser([{ name, email }]);
+    await doCreateUser({ name, email });
     setName("");
     setEmail("");
   }

package/templates/with-tailwind/ev.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "@evjs/cli";
+
+/**
+ * Example: Using client plugins to add Tailwind CSS support.
+ */
+export default defineConfig({
+  client: {
+    plugins: [
+      {
+        name: "tailwind",
+        loaders: [
+          {
+            test: /\.css$/,
+            use: ["style-loader", "css-loader", "postcss-loader"],
+          },
+        ],
+      },
+    ],
+  },
+});

package/templates/with-tailwind/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>ev — CSS Plugin Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/templates/with-tailwind/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "example-with-tailwind",
+  "version": "0.0.1-rc.18",
+  "private": true,
+  "scripts": {
+    "dev": "ev dev",
+    "build": "ev build",
+    "check-types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@evjs/runtime": "*",
+    "@tailwindcss/typography": "^0.5.19",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@evjs/cli": "*",
+    "@tailwindcss/postcss": "^4.1.10",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "css-loader": "^7.1.2",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.1.1",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^4.1.10",
+    "typescript": "^5.7.3"
+  }
+}

package/templates/with-tailwind/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/templates/with-tailwind/src/main.tsx

@@ -0,0 +1,15 @@
+import { createApp } from "@evjs/runtime/client";
+import { rootRoute } from "./pages/__root";
+import { homeRoute } from "./pages/home";
+
+const routeTree = rootRoute.addChildren([homeRoute]);
+
+const app = createApp({ routeTree });
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof app.router;
+  }
+}
+
+app.render("#app");

package/templates/with-tailwind/src/pages/__root.tsx

@@ -0,0 +1,30 @@
+import { createRootRoute, Link, Outlet } from "@evjs/runtime/client";
+import "../styles.css";
+
+function Root() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
+      <nav className="border-b border-white/10 backdrop-blur-sm bg-white/5">
+        <div className="max-w-4xl mx-auto px-6 py-4 flex items-center gap-6">
+          <Link
+            to="/"
+            className="text-lg font-bold bg-gradient-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent"
+          >
+            evjs
+          </Link>
+          <Link
+            to="/"
+            className="text-sm text-slate-300 hover:text-white transition-colors"
+          >
+            Home
+          </Link>
+        </div>
+      </nav>
+      <Outlet />
+    </div>
+  );
+}
+
+export const rootRoute = createRootRoute({
+  component: Root,
+});

package/templates/with-tailwind/src/pages/home.tsx

@@ -0,0 +1,85 @@
+import { createRoute } from "@evjs/runtime/client";
+import { rootRoute } from "./__root";
+
+export const homeRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: () => (
+    <main className="max-w-4xl mx-auto px-6 py-16">
+      {/* Hero */}
+      <div className="text-center mb-16">
+        <h1
+          className="text-5xl font-extrabold tracking-tight bg-gradient-to-r from-blue-400 via-violet-400 to-fuchsia-400 bg-clip-text text-transparent"
+          data-testid="title"
+        >
+          Tailwind Plugin Example
+        </h1>
+        <p
+          className="mt-4 text-lg text-slate-400 max-w-xl mx-auto"
+          data-testid="subtitle"
+        >
+          Styled with Tailwind CSS v4 via the evjs plugin system — no webpack
+          config needed.
+        </p>
+      </div>
+
+      {/* Feature cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
+        <div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-6 hover:bg-white/10 transition-colors">
+          <div className="text-3xl mb-3">🔌</div>
+          <h3 className="font-semibold text-white mb-1">Plugin Loaders</h3>
+          <p className="text-sm text-slate-400">
+            Declare loaders in ev.config.ts. The framework handles the rest.
+          </p>
+        </div>
+
+        <div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-6 hover:bg-white/10 transition-colors">
+          <div className="text-3xl mb-3">🎨</div>
+          <h3 className="font-semibold text-white mb-1">Tailwind CSS v4</h3>
+          <p className="text-sm text-slate-400">
+            Full utility-first styling with zero configuration overhead.
+          </p>
+        </div>
+
+        <div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-6 hover:bg-white/10 transition-colors">
+          <div className="text-3xl mb-3">⚡</div>
+          <h3 className="font-semibold text-white mb-1">Zero Config</h3>
+          <p className="text-sm text-slate-400">
+            evjs works out of the box. Plugins extend it cleanly.
+          </p>
+        </div>
+      </div>
+
+      {/* Typography plugin demo */}
+      <div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-8 mb-16">
+        <div className="prose prose-invert max-w-none" data-testid="prose">
+          <h2>Typography Plugin</h2>
+          <p>
+            This section uses <code>@tailwindcss/typography</code> via the{" "}
+            <code>prose</code> class. It automatically styles headings,
+            paragraphs, code blocks, lists, and more with beautiful defaults.
+          </p>
+          <ul>
+            <li>Automatic heading styles</li>
+            <li>Beautiful paragraph spacing</li>
+            <li>
+              Styled <code>code</code> elements
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      {/* Config preview */}
+      <div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-6">
+        <h2 className="text-lg font-semibold text-white mb-4">ev.config.ts</h2>
+        <pre className="text-sm text-slate-300 bg-black/30 rounded-lg p-4 overflow-x-auto">
+          <code>{`export default defineConfig({
+  client: {
+    plugins: [tailwind()],
+  },
+});`}</code>
+        </pre>
+      </div>
+    </main>
+  ),
+});

package/templates/with-tailwind/src/styles.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";

package/templates/with-tailwind/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"]
+}