Skip to content

Commit 4718bf7

Browse files
hi-ogawahi-ogawa
authored
feat(vite): support ?assets import (#3662)
1 parent fa2c167 commit 4718bf7

12 files changed

Lines changed: 632 additions & 3 deletions

File tree

‎examples/vite-assets/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "nitro-playground",
3+
"version": "1.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"build": "vite build",
7+
"preview": "vite preview",
8+
"dev": "vite dev"
9+
},
10+
"devDependencies": {
11+
"@preact/preset-vite": "^2.10.2",
12+
"@tailwindcss/vite": "^4.1.14",
13+
"nitro": "npm:nitro-nightly",
14+
"tailwindcss": "^4.1.14",
15+
"vite": "^7.1.8"
16+
},
17+
"dependencies": {
18+
"preact": "^10.27.2",
19+
"preact-render-to-string": "^6.6.2"
20+
}
21+
}

‎examples/vite-assets/src/counter.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { useState } from "preact/hooks";
2+
3+
export function Counter() {
4+
const [count, setCount] = useState(0);
5+
return (
6+
<button onClick={() => setCount((c) => c + 1)}>Count is {count}</button>
7+
);
8+
}

‎examples/vite-assets/src/entry-client.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { hydrate } from "preact";
2+
import { Counter } from "./counter";
3+
4+
function main() {
5+
hydrate(<Counter />, document.querySelector("#counter")!);
6+
}
7+
8+
main();

‎examples/vite-assets/src/entry-server.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import "./styles.css";
2+
import { renderToReadableStream } from "preact-render-to-string/stream";
3+
import { Counter } from "./counter";
4+
5+
import type {} from "@hiogawa/vite-plugin-fullstack/types";
6+
7+
import clientAssets from "./entry-client?assets=client";
8+
import serverAssets from "./entry-server?assets=ssr";
9+
10+
export default {
11+
async fetch(request: Request) {
12+
const url = new URL(request.url);
13+
const htmlStream = renderToReadableStream(<Root url={url} />);
14+
return new Response(htmlStream, {
15+
headers: { "Content-Type": "text/html;charset=utf-8" },
16+
});
17+
},
18+
};
19+
20+
function Root(props: { url: URL }) {
21+
const assets = clientAssets.merge(serverAssets);
22+
return (
23+
<html lang="en">
24+
<head>
25+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
26+
<title>Vite Assets Example</title>
27+
{assets.css.map((attr) => (
28+
<link key={attr.href} rel="stylesheet" {...attr} />
29+
))}
30+
{assets.js.map((attr) => (
31+
<link key={attr.href} type="modulepreload" {...attr} />
32+
))}
33+
<script type="module" src={assets.entry} />
34+
</head>
35+
<body>
36+
<h1 className="hero">Vite Assets Example</h1>
37+
<p>URL: {props.url.href}</p>
38+
<div id="counter">
39+
<Counter />
40+
</div>
41+
</body>
42+
</html>
43+
);
44+
}

‎examples/vite-assets/src/styles.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.hero {
2+
color: orange;
3+
}
4+
5+
button {
6+
background-color: lightskyblue;
7+
}

‎examples/vite-assets/tsconfig.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"compilerOptions": {
3+
// Module resolution
4+
"target": "ESNext",
5+
"module": "ESNext",
6+
"moduleResolution": "Bundler",
7+
"allowImportingTsExtensions": true,
8+
9+
// JSX
10+
"jsx": "react-jsx",
11+
"jsxImportSource": "preact",
12+
13+
// Core checks
14+
"strict": true,
15+
"noEmit": true,
16+
"skipLibCheck": true,
17+
"resolveJsonModule": true,
18+
"allowSyntheticDefaultImports": true,
19+
20+
// Additional safety
21+
"forceConsistentCasingInFileNames": true,
22+
"noImplicitReturns": true,
23+
"noFallthroughCasesInSwitch": true,
24+
"useUnknownInCatchVariables": true,
25+
"noUnusedLocals": true,
26+
27+
// Libs & paths
28+
"lib": ["ESNext", "DOM"],
29+
"types": ["vite/client", "node"],
30+
"baseUrl": "."
31+
}
32+
}

‎examples/vite-assets/vite.config.ts‎

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

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
"@azure/static-web-apps-cli": "^2.0.7",
7676
"@cloudflare/workers-types": "^4.20251014.0",
7777
"@deno/types": "^0.0.1",
78+
"@hiogawa/vite-plugin-fullstack": "0.0.5",
7879
"@netlify/edge-functions": "^3.0.1",
7980
"@netlify/functions": "^5.0.1",
8081
"@rollup/plugin-alias": "^5.1.1",

0 commit comments

Comments
 (0)