@evjs/cli 0.0.1-rc.18 → 0.0.1-rc.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -8
- package/dist/create-webpack-config.js +5 -2
- package/dist/index.js +5 -91
- package/package.json +7 -10
- package/templates/basic-csr/README.md +0 -23
- package/templates/basic-csr/index.html +0 -11
- package/templates/basic-csr/package.json +0 -21
- package/templates/basic-csr/src/main.tsx +0 -22
- package/templates/basic-csr/src/pages/__root.tsx +0 -28
- package/templates/basic-csr/src/pages/about.tsx +0 -19
- package/templates/basic-csr/src/pages/home.tsx +0 -19
- package/templates/basic-csr/src/pages/posts/index.tsx +0 -63
- package/templates/basic-csr/tsconfig.json +0 -17
- package/templates/basic-server-fns/README.md +0 -24
- package/templates/basic-server-fns/index.html +0 -11
- package/templates/basic-server-fns/package.json +0 -21
- package/templates/basic-server-fns/src/api/users.server.ts +0 -31
- package/templates/basic-server-fns/src/main.tsx +0 -12
- package/templates/basic-server-fns/src/routes.tsx +0 -108
- package/templates/basic-server-fns/tsconfig.json +0 -16
- package/templates/complex-routing/README.md +0 -27
- package/templates/complex-routing/index.html +0 -11
- package/templates/complex-routing/package.json +0 -21
- package/templates/complex-routing/src/api/data.server.ts +0 -86
- package/templates/complex-routing/src/main.tsx +0 -29
- package/templates/complex-routing/src/pages/__root.tsx +0 -60
- package/templates/complex-routing/src/pages/catch.tsx +0 -26
- package/templates/complex-routing/src/pages/dashboard.tsx +0 -81
- package/templates/complex-routing/src/pages/home.tsx +0 -35
- package/templates/complex-routing/src/pages/posts/index.tsx +0 -104
- package/templates/complex-routing/src/pages/search.tsx +0 -71
- package/templates/complex-routing/src/pages/user.tsx +0 -32
- package/templates/complex-routing/tsconfig.json +0 -13
- package/templates/configured-server-fns/README.md +0 -24
- package/templates/configured-server-fns/ev.config.ts +0 -56
- package/templates/configured-server-fns/index.html +0 -11
- package/templates/configured-server-fns/package.json +0 -21
- package/templates/configured-server-fns/src/api/users.server.ts +0 -22
- package/templates/configured-server-fns/src/main.tsx +0 -12
- package/templates/configured-server-fns/src/routes.tsx +0 -111
- package/templates/configured-server-fns/tsconfig.json +0 -16
- package/templates/with-tailwind/ev.config.ts +0 -20
- package/templates/with-tailwind/index.html +0 -11
- package/templates/with-tailwind/package.json +0 -28
- package/templates/with-tailwind/postcss.config.mjs +0 -5
- package/templates/with-tailwind/src/main.tsx +0 -15
- package/templates/with-tailwind/src/pages/__root.tsx +0 -30
- package/templates/with-tailwind/src/pages/home.tsx +0 -85
- package/templates/with-tailwind/src/styles.css +0 -2
- package/templates/with-tailwind/tsconfig.json +0 -17
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { createRoute, Link, query } from "@evjs/runtime/client";
|
|
2
|
-
import { getUser } from "../api/data.server";
|
|
3
|
-
import { rootRoute } from "./__root";
|
|
4
|
-
|
|
5
|
-
const styles = {
|
|
6
|
-
card: { border: "1px solid #e5e7eb", borderRadius: 8, padding: "1rem" },
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
function UserProfile() {
|
|
10
|
-
const { username } = userRoute.useParams();
|
|
11
|
-
const { data: user } = query(getUser).useQuery(username);
|
|
12
|
-
|
|
13
|
-
if (!user) return <p>Loading...</p>;
|
|
14
|
-
return (
|
|
15
|
-
<div style={styles.card}>
|
|
16
|
-
<h2>{user.name}</h2>
|
|
17
|
-
<p style={{ color: "#6b7280" }}>@{user.username}</p>
|
|
18
|
-
<p>{user.bio}</p>
|
|
19
|
-
<Link to="/posts">← Back to posts</Link>
|
|
20
|
-
</div>
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export const userRoute = createRoute({
|
|
25
|
-
getParentRoute: () => rootRoute,
|
|
26
|
-
path: "/users/$username",
|
|
27
|
-
loader: ({ params, context }) =>
|
|
28
|
-
context.queryClient.ensureQueryData(
|
|
29
|
-
query(getUser).queryOptions(params.username),
|
|
30
|
-
),
|
|
31
|
-
component: UserProfile,
|
|
32
|
-
});
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
# configured-server-fns
|
|
2
|
-
|
|
3
|
-
Server functions with `ev.config.ts` and module-level query/mutation proxies.
|
|
4
|
-
|
|
5
|
-
## Run
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm run dev -w example-configured-server-fns
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Key Files
|
|
12
|
-
|
|
13
|
-
| File | Purpose |
|
|
14
|
-
|------|---------|
|
|
15
|
-
| `ev.config.ts` | Custom ports and settings |
|
|
16
|
-
| `src/routes.tsx` | Routes with `createQueryProxy` / `createMutationProxy` |
|
|
17
|
-
| `src/api/users.server.ts` | User CRUD functions |
|
|
18
|
-
|
|
19
|
-
## What It Demonstrates
|
|
20
|
-
|
|
21
|
-
- `ev.config.ts` with `defineConfig` for custom ports
|
|
22
|
-
- `createQueryProxy(module)` for grouped queries
|
|
23
|
-
- `createMutationProxy(module)` for grouped mutations
|
|
24
|
-
- Direct mutation args: `mutate({ name, email })` (not array-wrapped)
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { defineConfig } from "@evjs/cli";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Advanced ev.config.ts example.
|
|
5
|
-
*
|
|
6
|
-
* This file demonstrates all available configuration options.
|
|
7
|
-
* All fields are optional — evjs works out of the box.
|
|
8
|
-
*/
|
|
9
|
-
export default defineConfig({
|
|
10
|
-
client: {
|
|
11
|
-
// Client entry point (default: "./src/main.tsx")
|
|
12
|
-
entry: "./src/main.tsx",
|
|
13
|
-
|
|
14
|
-
// HTML template (default: "./index.html")
|
|
15
|
-
html: "./index.html",
|
|
16
|
-
|
|
17
|
-
// Dev server options (merged with built-in defaults)
|
|
18
|
-
dev: {
|
|
19
|
-
// Dev server port (default: 3000)
|
|
20
|
-
port: 4000,
|
|
21
|
-
|
|
22
|
-
// Any dev server options can be added here:
|
|
23
|
-
// https: true,
|
|
24
|
-
// open: true,
|
|
25
|
-
// historyApiFallback: true,
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
// Transport configuration for server function calls
|
|
29
|
-
transport: {
|
|
30
|
-
// Base URL for server function endpoint (default: same origin)
|
|
31
|
-
// baseUrl: "https://api.example.com",
|
|
32
|
-
|
|
33
|
-
// Server function endpoint path (default: "/api/fn")
|
|
34
|
-
endpoint: "/api/fn",
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
server: {
|
|
39
|
-
// Server function endpoint path (default: "/api/fn")
|
|
40
|
-
endpoint: "/api/fn",
|
|
41
|
-
|
|
42
|
-
// Server backend command (default: "node")
|
|
43
|
-
// Supports: "node", "bun", "deno run --allow-net", etc.
|
|
44
|
-
backend: "node",
|
|
45
|
-
|
|
46
|
-
// Middleware module paths to auto-register in server entry
|
|
47
|
-
// These are imported and applied in order
|
|
48
|
-
// middleware: ["./src/middleware/auth.ts", "./src/middleware/cors.ts"],
|
|
49
|
-
|
|
50
|
-
// Dev server options
|
|
51
|
-
dev: {
|
|
52
|
-
// API server port in dev mode (default: 3001)
|
|
53
|
-
port: 4001,
|
|
54
|
-
},
|
|
55
|
-
},
|
|
56
|
-
});
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>Configured Server Functions Example</title>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<div id="app"></div>
|
|
10
|
-
</body>
|
|
11
|
-
</html>
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "example-configured-server-fns",
|
|
3
|
-
"version": "0.0.1-rc.18",
|
|
4
|
-
"private": true,
|
|
5
|
-
"scripts": {
|
|
6
|
-
"dev": "ev dev",
|
|
7
|
-
"build": "ev build",
|
|
8
|
-
"check-types": "tsc --noEmit"
|
|
9
|
-
},
|
|
10
|
-
"dependencies": {
|
|
11
|
-
"@evjs/runtime": "*",
|
|
12
|
-
"react": "^19.2.4",
|
|
13
|
-
"react-dom": "^19.2.4"
|
|
14
|
-
},
|
|
15
|
-
"devDependencies": {
|
|
16
|
-
"@evjs/cli": "*",
|
|
17
|
-
"@types/react": "^19.1.8",
|
|
18
|
-
"@types/react-dom": "^19.1.8",
|
|
19
|
-
"typescript": "^5.7.3"
|
|
20
|
-
}
|
|
21
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use server";
|
|
2
|
-
|
|
3
|
-
/** Simulated user database. */
|
|
4
|
-
const users = [
|
|
5
|
-
{ id: "1", name: "Alice", email: "alice@example.com" },
|
|
6
|
-
{ id: "2", name: "Bob", email: "bob@example.com" },
|
|
7
|
-
{ id: "3", name: "Charlie", email: "charlie@example.com" },
|
|
8
|
-
];
|
|
9
|
-
|
|
10
|
-
/** Get all users. */
|
|
11
|
-
export async function getUsers() {
|
|
12
|
-
await new Promise((r) => setTimeout(r, 100));
|
|
13
|
-
return users;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/** Create a new user. */
|
|
17
|
-
export async function createUser(data: { name: string; email: string }) {
|
|
18
|
-
await new Promise((r) => setTimeout(r, 50));
|
|
19
|
-
const newUser = { id: String(users.length + 1), ...data };
|
|
20
|
-
users.push(newUser);
|
|
21
|
-
return newUser;
|
|
22
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { createApp } from "@evjs/runtime/client";
|
|
2
|
-
import { routeTree } from "./routes";
|
|
3
|
-
|
|
4
|
-
const app = createApp({ routeTree });
|
|
5
|
-
|
|
6
|
-
declare module "@tanstack/react-router" {
|
|
7
|
-
interface Register {
|
|
8
|
-
router: typeof app.router;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
app.render("#app");
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
createAppRootRoute,
|
|
3
|
-
createMutationProxy,
|
|
4
|
-
createQueryProxy,
|
|
5
|
-
createRoute,
|
|
6
|
-
Link,
|
|
7
|
-
Outlet,
|
|
8
|
-
useQueryClient,
|
|
9
|
-
} from "@evjs/runtime/client";
|
|
10
|
-
import { useState } from "react";
|
|
11
|
-
import * as usersApi from "./api/users.server";
|
|
12
|
-
|
|
13
|
-
// ── API Proxy ──
|
|
14
|
-
|
|
15
|
-
const api = {
|
|
16
|
-
users: {
|
|
17
|
-
query: createQueryProxy(usersApi),
|
|
18
|
-
mutation: createMutationProxy(usersApi),
|
|
19
|
-
},
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
// ── Root Route ──
|
|
23
|
-
|
|
24
|
-
function Root() {
|
|
25
|
-
return (
|
|
26
|
-
<div style={{ fontFamily: "system-ui, sans-serif", padding: "1rem" }}>
|
|
27
|
-
<h1>Configured Server Functions</h1>
|
|
28
|
-
<p style={{ color: "#666" }}>
|
|
29
|
-
This example uses <code>ev.config.ts</code> for custom ports and
|
|
30
|
-
settings.
|
|
31
|
-
</p>
|
|
32
|
-
<nav style={{ display: "flex", gap: "1rem", marginBottom: "1rem" }}>
|
|
33
|
-
<Link to="/">Users</Link>
|
|
34
|
-
</nav>
|
|
35
|
-
<Outlet />
|
|
36
|
-
</div>
|
|
37
|
-
);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
const rootRoute = createAppRootRoute({ component: Root });
|
|
41
|
-
|
|
42
|
-
// ── Users Route ──
|
|
43
|
-
|
|
44
|
-
function UsersPage() {
|
|
45
|
-
const [name, setName] = useState("");
|
|
46
|
-
const [email, setEmail] = useState("");
|
|
47
|
-
|
|
48
|
-
const { data: users = [], isLoading } = api.users.query.getUsers.useQuery();
|
|
49
|
-
|
|
50
|
-
const queryClient = useQueryClient();
|
|
51
|
-
const { mutateAsync: doCreateUser } =
|
|
52
|
-
api.users.mutation.createUser.useMutation({
|
|
53
|
-
onSuccess: () => {
|
|
54
|
-
queryClient.invalidateQueries({
|
|
55
|
-
queryKey: api.users.query.getUsers.queryKey(),
|
|
56
|
-
});
|
|
57
|
-
},
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
async function handleCreate(e: { preventDefault: () => void }) {
|
|
61
|
-
e.preventDefault();
|
|
62
|
-
if (!name || !email) return;
|
|
63
|
-
await doCreateUser({ name, email });
|
|
64
|
-
setName("");
|
|
65
|
-
setEmail("");
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
if (isLoading) return <p>Loading users from server…</p>;
|
|
69
|
-
|
|
70
|
-
return (
|
|
71
|
-
<div>
|
|
72
|
-
<h2>Users (via Query Proxy)</h2>
|
|
73
|
-
<ul>
|
|
74
|
-
{users.map((u: { id: string; name: string; email: string }) => (
|
|
75
|
-
<li key={u.id}>
|
|
76
|
-
{u.name} — {u.email}
|
|
77
|
-
</li>
|
|
78
|
-
))}
|
|
79
|
-
</ul>
|
|
80
|
-
|
|
81
|
-
<h3>Add User</h3>
|
|
82
|
-
<form onSubmit={handleCreate} style={{ display: "flex", gap: "0.5rem" }}>
|
|
83
|
-
<input
|
|
84
|
-
placeholder="Name"
|
|
85
|
-
value={name}
|
|
86
|
-
onChange={(e) => setName(e.target.value)}
|
|
87
|
-
/>
|
|
88
|
-
<input
|
|
89
|
-
placeholder="Email"
|
|
90
|
-
value={email}
|
|
91
|
-
onChange={(e) => setEmail(e.target.value)}
|
|
92
|
-
/>
|
|
93
|
-
<button type="submit">Create</button>
|
|
94
|
-
</form>
|
|
95
|
-
</div>
|
|
96
|
-
);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
const usersRoute = createRoute({
|
|
100
|
-
getParentRoute: () => rootRoute,
|
|
101
|
-
path: "/",
|
|
102
|
-
component: UsersPage,
|
|
103
|
-
loader: ({ context }) =>
|
|
104
|
-
context.queryClient.ensureQueryData(
|
|
105
|
-
api.users.query.getUsers.queryOptions(),
|
|
106
|
-
),
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
// ── Route Tree ──
|
|
110
|
-
|
|
111
|
-
export const routeTree = rootRoute.addChildren([usersRoute]);
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"include": ["src"],
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"target": "ESNext",
|
|
5
|
-
"jsx": "react-jsx",
|
|
6
|
-
"module": "ESNext",
|
|
7
|
-
"lib": ["ESNext", "DOM", "DOM.Iterable"],
|
|
8
|
-
"moduleResolution": "Bundler",
|
|
9
|
-
"outDir": "./dist",
|
|
10
|
-
"rootDir": "./src",
|
|
11
|
-
"skipLibCheck": true,
|
|
12
|
-
"strict": true,
|
|
13
|
-
"noEmit": true,
|
|
14
|
-
"verbatimModuleSyntax": true
|
|
15
|
-
}
|
|
16
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { defineConfig } from "@evjs/cli";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Example: Using client plugins to add Tailwind CSS support.
|
|
5
|
-
*/
|
|
6
|
-
export default defineConfig({
|
|
7
|
-
client: {
|
|
8
|
-
plugins: [
|
|
9
|
-
{
|
|
10
|
-
name: "tailwind",
|
|
11
|
-
loaders: [
|
|
12
|
-
{
|
|
13
|
-
test: /\.css$/,
|
|
14
|
-
use: ["style-loader", "css-loader", "postcss-loader"],
|
|
15
|
-
},
|
|
16
|
-
],
|
|
17
|
-
},
|
|
18
|
-
],
|
|
19
|
-
},
|
|
20
|
-
});
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "example-with-tailwind",
|
|
3
|
-
"version": "0.0.1-rc.18",
|
|
4
|
-
"private": true,
|
|
5
|
-
"scripts": {
|
|
6
|
-
"dev": "ev dev",
|
|
7
|
-
"build": "ev build",
|
|
8
|
-
"check-types": "tsc --noEmit"
|
|
9
|
-
},
|
|
10
|
-
"dependencies": {
|
|
11
|
-
"@evjs/runtime": "*",
|
|
12
|
-
"@tailwindcss/typography": "^0.5.19",
|
|
13
|
-
"react": "^19.2.4",
|
|
14
|
-
"react-dom": "^19.2.4"
|
|
15
|
-
},
|
|
16
|
-
"devDependencies": {
|
|
17
|
-
"@evjs/cli": "*",
|
|
18
|
-
"@tailwindcss/postcss": "^4.1.10",
|
|
19
|
-
"@types/react": "^19.0.8",
|
|
20
|
-
"@types/react-dom": "^19.0.3",
|
|
21
|
-
"css-loader": "^7.1.2",
|
|
22
|
-
"postcss": "^8.5.6",
|
|
23
|
-
"postcss-loader": "^8.1.1",
|
|
24
|
-
"style-loader": "^4.0.0",
|
|
25
|
-
"tailwindcss": "^4.1.10",
|
|
26
|
-
"typescript": "^5.7.3"
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { createApp } from "@evjs/runtime/client";
|
|
2
|
-
import { rootRoute } from "./pages/__root";
|
|
3
|
-
import { homeRoute } from "./pages/home";
|
|
4
|
-
|
|
5
|
-
const routeTree = rootRoute.addChildren([homeRoute]);
|
|
6
|
-
|
|
7
|
-
const app = createApp({ routeTree });
|
|
8
|
-
|
|
9
|
-
declare module "@tanstack/react-router" {
|
|
10
|
-
interface Register {
|
|
11
|
-
router: typeof app.router;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
app.render("#app");
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { createRootRoute, Link, Outlet } from "@evjs/runtime/client";
|
|
2
|
-
import "../styles.css";
|
|
3
|
-
|
|
4
|
-
function Root() {
|
|
5
|
-
return (
|
|
6
|
-
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
|
|
7
|
-
<nav className="border-b border-white/10 backdrop-blur-sm bg-white/5">
|
|
8
|
-
<div className="max-w-4xl mx-auto px-6 py-4 flex items-center gap-6">
|
|
9
|
-
<Link
|
|
10
|
-
to="/"
|
|
11
|
-
className="text-lg font-bold bg-gradient-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent"
|
|
12
|
-
>
|
|
13
|
-
evjs
|
|
14
|
-
</Link>
|
|
15
|
-
<Link
|
|
16
|
-
to="/"
|
|
17
|
-
className="text-sm text-slate-300 hover:text-white transition-colors"
|
|
18
|
-
>
|
|
19
|
-
Home
|
|
20
|
-
</Link>
|
|
21
|
-
</div>
|
|
22
|
-
</nav>
|
|
23
|
-
<Outlet />
|
|
24
|
-
</div>
|
|
25
|
-
);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export const rootRoute = createRootRoute({
|
|
29
|
-
component: Root,
|
|
30
|
-
});
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { createRoute } from "@evjs/runtime/client";
|
|
2
|
-
import { rootRoute } from "./__root";
|
|
3
|
-
|
|
4
|
-
export const homeRoute = createRoute({
|
|
5
|
-
getParentRoute: () => rootRoute,
|
|
6
|
-
path: "/",
|
|
7
|
-
component: () => (
|
|
8
|
-
<main className="max-w-4xl mx-auto px-6 py-16">
|
|
9
|
-
{/* Hero */}
|
|
10
|
-
<div className="text-center mb-16">
|
|
11
|
-
<h1
|
|
12
|
-
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"
|
|
13
|
-
data-testid="title"
|
|
14
|
-
>
|
|
15
|
-
Tailwind Plugin Example
|
|
16
|
-
</h1>
|
|
17
|
-
<p
|
|
18
|
-
className="mt-4 text-lg text-slate-400 max-w-xl mx-auto"
|
|
19
|
-
data-testid="subtitle"
|
|
20
|
-
>
|
|
21
|
-
Styled with Tailwind CSS v4 via the evjs plugin system — no webpack
|
|
22
|
-
config needed.
|
|
23
|
-
</p>
|
|
24
|
-
</div>
|
|
25
|
-
|
|
26
|
-
{/* Feature cards */}
|
|
27
|
-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
|
|
28
|
-
<div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-6 hover:bg-white/10 transition-colors">
|
|
29
|
-
<div className="text-3xl mb-3">🔌</div>
|
|
30
|
-
<h3 className="font-semibold text-white mb-1">Plugin Loaders</h3>
|
|
31
|
-
<p className="text-sm text-slate-400">
|
|
32
|
-
Declare loaders in ev.config.ts. The framework handles the rest.
|
|
33
|
-
</p>
|
|
34
|
-
</div>
|
|
35
|
-
|
|
36
|
-
<div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-6 hover:bg-white/10 transition-colors">
|
|
37
|
-
<div className="text-3xl mb-3">🎨</div>
|
|
38
|
-
<h3 className="font-semibold text-white mb-1">Tailwind CSS v4</h3>
|
|
39
|
-
<p className="text-sm text-slate-400">
|
|
40
|
-
Full utility-first styling with zero configuration overhead.
|
|
41
|
-
</p>
|
|
42
|
-
</div>
|
|
43
|
-
|
|
44
|
-
<div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-6 hover:bg-white/10 transition-colors">
|
|
45
|
-
<div className="text-3xl mb-3">⚡</div>
|
|
46
|
-
<h3 className="font-semibold text-white mb-1">Zero Config</h3>
|
|
47
|
-
<p className="text-sm text-slate-400">
|
|
48
|
-
evjs works out of the box. Plugins extend it cleanly.
|
|
49
|
-
</p>
|
|
50
|
-
</div>
|
|
51
|
-
</div>
|
|
52
|
-
|
|
53
|
-
{/* Typography plugin demo */}
|
|
54
|
-
<div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-8 mb-16">
|
|
55
|
-
<div className="prose prose-invert max-w-none" data-testid="prose">
|
|
56
|
-
<h2>Typography Plugin</h2>
|
|
57
|
-
<p>
|
|
58
|
-
This section uses <code>@tailwindcss/typography</code> via the{" "}
|
|
59
|
-
<code>prose</code> class. It automatically styles headings,
|
|
60
|
-
paragraphs, code blocks, lists, and more with beautiful defaults.
|
|
61
|
-
</p>
|
|
62
|
-
<ul>
|
|
63
|
-
<li>Automatic heading styles</li>
|
|
64
|
-
<li>Beautiful paragraph spacing</li>
|
|
65
|
-
<li>
|
|
66
|
-
Styled <code>code</code> elements
|
|
67
|
-
</li>
|
|
68
|
-
</ul>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
|
|
72
|
-
{/* Config preview */}
|
|
73
|
-
<div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-6">
|
|
74
|
-
<h2 className="text-lg font-semibold text-white mb-4">ev.config.ts</h2>
|
|
75
|
-
<pre className="text-sm text-slate-300 bg-black/30 rounded-lg p-4 overflow-x-auto">
|
|
76
|
-
<code>{`export default defineConfig({
|
|
77
|
-
client: {
|
|
78
|
-
plugins: [tailwind()],
|
|
79
|
-
},
|
|
80
|
-
});`}</code>
|
|
81
|
-
</pre>
|
|
82
|
-
</div>
|
|
83
|
-
</main>
|
|
84
|
-
),
|
|
85
|
-
});
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ESNext",
|
|
4
|
-
"jsx": "react-jsx",
|
|
5
|
-
"module": "ESNext",
|
|
6
|
-
"lib": ["ESNext", "DOM", "DOM.Iterable"],
|
|
7
|
-
"moduleResolution": "Bundler",
|
|
8
|
-
"verbatimModuleSyntax": true,
|
|
9
|
-
"noEmit": true,
|
|
10
|
-
"skipLibCheck": true,
|
|
11
|
-
"strict": true,
|
|
12
|
-
"noUnusedLocals": true,
|
|
13
|
-
"noUnusedParameters": true,
|
|
14
|
-
"noFallthroughCasesInSwitch": true
|
|
15
|
-
},
|
|
16
|
-
"include": ["src"]
|
|
17
|
-
}
|