Skip to content

Commit 6c9af8d

Browse files
roryhenroryhen
authored
add solid-js example (#2)
1 parent 1a74c9e commit 6c9af8d

File tree

9 files changed

+271
-6
lines changed

9 files changed

+271
-6
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
| `hono` | [examples/hono](./examples/hono/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/hono?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/hono hono-app` |
1919
| `node-compat` | [examples/node-compat](./examples/node-compat/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/node-compat?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/node-compat node-compat-app` |
2020
| `react-ssr` | [examples/react-ssr](./examples/react-ssr/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/react-ssr?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/react-ssr react-ssr-app` |
21+
| `solid-ssr` | [examples/solid-ssr](./examples/solid-ssr/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/solid-ssr?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/solid-ssr solid-ssr-app` |
2122
| `tanstack-start-react` | [examples/tanstack-start-react](./examples/tanstack-start-react/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/tanstack-start-react?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/tanstack-start-react tanstack-start-react-app` |
2223
| `vue-ssr` | [examples/vue-ssr](./examples/vue-ssr/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/vue-ssr?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/vue-ssr vue-ssr-app` |
2324

‎examples/solid-ssr/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "nitro-vite-solid-ssr",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"build": "vite build",
6+
"dev": "vite dev"
7+
},
8+
"devDependencies": {
9+
"nitro": "npm:nitro-nightly",
10+
"solid-js": "^1.9.9",
11+
"vite": "^7",
12+
"vite-plugin-solid": "^2.11.8"
13+
}
14+
}

‎examples/solid-ssr/src/App.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/// <reference types="vite/client" />
2+
import { createSignal } from "solid-js";
3+
4+
export default () => {
5+
const [count, setCount] = createSignal(0);
6+
7+
return (
8+
<div>
9+
<h1>Hello, Solid!</h1>
10+
<button onClick={() => setCount((count) => count + 1)}>
11+
Count: {count()}
12+
</button>
13+
</div>
14+
);
15+
};

‎examples/solid-ssr/src/client.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/// <reference types="vite/client" />
2+
import { hydrate } from "solid-js/web";
3+
import "./styles.css";
4+
5+
const App = await import("./App.jsx").then((mod) => mod.default);
6+
7+
hydrate(() => <App />, document.querySelector("#app")!);

‎examples/solid-ssr/src/server.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { renderToStringAsync, generateHydrationScript } from "solid-js/web";
2+
import App from "./App.jsx";
3+
4+
export default {
5+
async fetch(req: Request): Promise<Response> {
6+
const appHTML = await renderToStringAsync(() => <App />);
7+
return new Response(indexHTML(appHTML), {
8+
headers: {
9+
"Content-Type": "text/html",
10+
},
11+
});
12+
},
13+
};
14+
15+
function indexHTML(appHTML: string) {
16+
return /* html */ `<!doctype html>
17+
<html lang="en">
18+
<head>
19+
<meta charset="UTF-8" />
20+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
21+
<title>Vite + Nitro + Solid</title>
22+
${
23+
import.meta.env?.DEV
24+
? '<script type="module" src="/@vite/client"></script>'
25+
: ""
26+
}
27+
</head>
28+
<body>
29+
<div id="app">${appHTML}</div>
30+
<script type="module" src="${resolveEntry("src/client.tsx")}"></script>
31+
${generateHydrationScript()}
32+
</body>
33+
</html>`;
34+
}
35+
36+
function resolveEntry(entry: string): string {
37+
if (import.meta.env?.PROD) {
38+
const manifest = globalThis.__VITE_MANIFEST__;
39+
const file = manifest?.[entry]?.file;
40+
if (!file) {
41+
throw new Error(
42+
manifest
43+
? `Entry "${entry}" not found in Vite manifest.`
44+
: "Vite manifest is not available.",
45+
);
46+
}
47+
return `/${file}`;
48+
}
49+
return `/${entry}`;
50+
}

‎examples/solid-ssr/src/styles.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
div {
2+
font-family: system-ui, Arial, sans-serif;
3+
font-size: 20px;
4+
margin-bottom: 10px;
5+
}
6+
7+
button {
8+
background-color: rgb(147 197 253);
9+
color: rgb(15 23 42);
10+
border: none;
11+
padding: 10px 20px;
12+
font-size: 16px;
13+
cursor: pointer;
14+
border-radius: 5px;
15+
}
16+
17+
button:hover {
18+
background-color: rgb(191 219 254);
19+
}

‎examples/solid-ssr/tsconfig.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"strict": true,
4+
"target": "ESNext",
5+
"module": "ESNext",
6+
"moduleResolution": "node",
7+
"allowSyntheticDefaultImports": true,
8+
"esModuleInterop": true,
9+
"jsx": "preserve",
10+
"jsxImportSource": "solid-js",
11+
"types": ["vite/client"],
12+
"noEmit": true,
13+
"isolatedModules": true
14+
}
15+
}

‎examples/solid-ssr/vite.config.mjs

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import solid from "vite-plugin-solid";
2+
import { defineConfig } from "vite";
3+
import { nitro } from "nitro/vite";
4+
5+
export default defineConfig({
6+
plugins: [solid({ ssr: true }), nitro()],
7+
esbuild: {
8+
jsx: "preserve",
9+
jsxImportSource: "solid-js",
10+
},
11+
environments: {
12+
client: {
13+
build: { rollupOptions: { input: "./src/client.tsx" } },
14+
},
15+
},
16+
});

0 commit comments

Comments
 (0)