diff --git a/examples/vite-assets/package.json b/examples/vite-assets/package.json new file mode 100644 index 0000000000..18036929e1 --- /dev/null +++ b/examples/vite-assets/package.json @@ -0,0 +1,21 @@ +{ + "name": "nitro-playground", + "version": "1.0.0", + "type": "module", + "scripts": { + "build": "vite build", + "preview": "vite preview", + "dev": "vite dev" + }, + "devDependencies": { + "@preact/preset-vite": "^2.10.2", + "@tailwindcss/vite": "^4.1.14", + "nitro": "npm:nitro-nightly", + "tailwindcss": "^4.1.14", + "vite": "^7.1.8" + }, + "dependencies": { + "preact": "^10.27.2", + "preact-render-to-string": "^6.6.2" + } +} diff --git a/examples/vite-assets/src/counter.tsx b/examples/vite-assets/src/counter.tsx new file mode 100644 index 0000000000..d5953dccab --- /dev/null +++ b/examples/vite-assets/src/counter.tsx @@ -0,0 +1,8 @@ +import { useState } from "preact/hooks"; + +export function Counter() { + const [count, setCount] = useState(0); + return ( + + ); +} diff --git a/examples/vite-assets/src/entry-client.tsx b/examples/vite-assets/src/entry-client.tsx new file mode 100644 index 0000000000..182d2f8e14 --- /dev/null +++ b/examples/vite-assets/src/entry-client.tsx @@ -0,0 +1,8 @@ +import { hydrate } from "preact"; +import { Counter } from "./counter"; + +function main() { + hydrate(, document.querySelector("#counter")!); +} + +main(); diff --git a/examples/vite-assets/src/entry-server.tsx b/examples/vite-assets/src/entry-server.tsx new file mode 100644 index 0000000000..1e37bd2d0c --- /dev/null +++ b/examples/vite-assets/src/entry-server.tsx @@ -0,0 +1,44 @@ +import "./styles.css"; +import { renderToReadableStream } from "preact-render-to-string/stream"; +import { Counter } from "./counter"; + +import type {} from "@hiogawa/vite-plugin-fullstack/types"; + +import clientAssets from "./entry-client?assets=client"; +import serverAssets from "./entry-server?assets=ssr"; + +export default { + async fetch(request: Request) { + const url = new URL(request.url); + const htmlStream = renderToReadableStream(); + return new Response(htmlStream, { + headers: { "Content-Type": "text/html;charset=utf-8" }, + }); + }, +}; + +function Root(props: { url: URL }) { + const assets = clientAssets.merge(serverAssets); + return ( + + + + Vite Assets Example + {assets.css.map((attr) => ( + + ))} + {assets.js.map((attr) => ( + + ))} +