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

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

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

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

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

@@ -1,16 +0,0 @@
-{
-  "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/with-tailwind/ev.config.ts

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

@@ -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>ev — CSS Plugin Example</title>
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>

package/templates/with-tailwind/package.json

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

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

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

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

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

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

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

package/templates/with-tailwind/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "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"]
-}