waku 0.19.0 → 0.19.1

package/README.md

@@ -15,7 +15,7 @@ visit [waku.gg](https://waku.gg) or `npm create waku@latest`
 
 **Waku** _(wah-ku)_ or **わく** means “framework” in Japanese. As the minimal React framework, it aims to accelerate the work of developers at startups and agencies building small to medium-sized React projects. These include marketing websites, light ecommerce, and web applications.
 
-We recommend other frameworks for heavy ecommerce or enterprise applications. Waku is a lightweight alternative designed to bring a fun developer experience to the modern React server components era. Yes, let’s make React development fun again!
+We recommend other frameworks for heavy ecommerce or enterprise applications. Waku is a lightweight alternative designed to bring a fun developer experience to the modern React server components era. Yes, let’s make React development fun!
 
 > Waku is in rapid development and some features are currently missing. Please try it on non-production projects and report any issues you may encounter. Expect that there will be some breaking changes on the road towards a stable v1 release. Contributors are welcome.
 
@@ -31,13 +31,13 @@ npm create waku@latest
 
 Let's face it: React is getting complicated. But not without good reason!
 
-While there's a bit of a learning curve to modern React rendering, it introduces powerful new patterns of composability that are only made possible with the advent of React server components. So stick with us.
+While there's a bit of a learning curve to modern React rendering, it introduces powerful new patterns of composability that are only possible with the advent of React server components. So stick with us.
 
 Future versions of Waku may provide additional APIs to abstract away some of the complexity for an improved developer experience.
 
 #### Server components
 
-Waku follows React conventions including support for [server components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) and [server actions](https://react.dev/reference/react/use-server). Server components can be made async to securely perform server-side logic and data fetching, but have no interactivity.
+Waku supports [server components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) and [server actions](https://react.dev/reference/react/use-server). Server components can be made async and can securely perform server-side logic and data fetching. Feel free to use heavy dependencies since they aren't included in the client bundle. They have no interactivity or access to browser APIs since they run exclusively on the server.
 
 ```tsx
 // server component
@@ -54,7 +54,7 @@ export const StorePage = async () => {
 
 #### Client components
 
-Client components are specified with the `'use client'` directive at the top of the file. They can use all traditional React features such as state, effects, and event handlers.
+A `'use client'` directive placed at the top of a file will create a server-client boundary when the module is imported into a server component. All components imported below the boundary will be hydrated to run in the browser as well. They can use all traditional React features such as state, effects, and event handlers.
 
 ```tsx
 // client component
@@ -74,13 +74,48 @@ export const Counter = () => {
 };
 ```
 
+#### Shared components
+
+Simple React components that [meet all of the rules](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#sharing-code-between-server-and-client) of both server and client components can be imported into either server or client components without affecting the server-client boundary.
+
+```tsx
+// shared component
+export const Headline = ({ children }) => {
+  return <h3>{children}</h3>;
+};
+```
+
 #### Weaving patterns
 
-Server components can import client components and doing so will create a server-client boundary. Client components cannot import server components, but they can accept server components as props such as `children`.
+Server components can import client components and doing so will create a server-client boundary. Client components cannot import server components, but they can accept server components as props such as `children`. For example, you may want to add global context providers this way.
+
+```tsx
+// ./src/templates/root-layout.tsx
+import { Providers } from '../components/providers.js';
+
+export const RootLayout = async ({ children }) => {
+  return (
+    <Providers>
+      <main>{children}</main>
+    </Providers>
+  );
+};
+```
+
+```tsx
+// ./src/components/providers.tsx
+'use client';
+
+import { Provider } from 'jotai';
+
+export const Providers = ({ children }) => {
+  return <Provider>{children}</Provider>;
+};
+```
 
 #### Server-side rendering
 
-Waku provides static prerendering (SSG) or server-side rendering (SSR) options for layouts and pages including their server _and_ client components. Client components are then hydrated in the browser to support events, effects, and so on.
+Waku provides static prerendering (SSG) or server-side rendering (SSR) options for layouts and pages including both their server and client components.
 
 #### Further reading
 
@@ -90,7 +125,9 @@ To learn more about the modern React architecture, we recommend [Making Sense of
 
 The entry point for routing in Waku projects is `./src/entries.tsx`. Export the `createPages` function to create your layouts and pages programatically.
 
-Both `createLayout` and `createPage` accept a configuration object to specify the route path, React component, and render method (`'static'` for SSG or `'dynamic'` for SSR). Layout components must accept a `children` prop.
+Both `createLayout` and `createPage` accept a configuration object to specify the route path, React component, and render method. Waku currently supports two options: `'static'` for static prerendering (SSG) or `'dynamic'` for server-side rendering (SSR).
+
+For example, you can statically prerender a global header and footer in the root layout at build time, but dynamically render the rest of a home page at request time for personalized user experiences.
 
 ```tsx
 // ./src/entries.tsx
@@ -244,7 +281,9 @@ export default createPages(async ({ createPage }) => {
 
 #### Catch-all routes
 
-Catch-all or "wildcard" routes (e.g., `/app/[...catchAll]`) have indefinite segments. Wildcard routes receive a prop with segment values as an ordered array. For example, the `/app/profile/settings` route would receive a `catchAll` prop with the value `['profile', 'settings']`. These values can then be used to determine what to render in the component.
+Catch-all or "wildcard" routes (e.g., `/app/[...catchAll]`) have indefinite segments. Wildcard routes receive a prop with segment values as an ordered array.
+
+For example, the `/app/profile/settings` route would receive a `catchAll` prop with the value `['profile', 'settings']`. These values can then be used to determine what to render in the component.
 
 ```tsx
 // ./src/entries.tsx
@@ -323,7 +362,7 @@ export const Providers = ({ children }) => {
 
 #### Other layouts
 
-Layouts are also helpful further down the tree. For example you could add a layout at `path: '/blog` to add a sidebar to both the blog index and all blog article pages.
+Layouts are also helpful further down the tree. For example, you could add a layout at `path: '/blog` to add a sidebar to both the blog index and all blog article pages.
 
 ```tsx
 // ./src/entries.tsx
@@ -347,10 +386,10 @@ import { Sidebar } from '../components/sidebar.js';
 
 export const BlogLayout = async ({ children }) => {
   return (
-    <>
+    <div className="flex">
       <div>{children}</div>
       <Sidebar />
-    </>
+    </div>
   );
 };
 ```
@@ -377,13 +416,13 @@ export const HomePage = async () => {
 
 Static assets such as images, fonts, stylesheets, and scripts can be placed in a special `./public` folder of the Waku project root directory. The public directory structure is served relative to the `/` base path.
 
-For example an image added to `./public/images/logo.svg` can be rendered via `<img src="/images/logo.svg" />`.
+For example, an image added to `./public/images/logo.svg` can be rendered via `<img src="/images/logo.svg" />`.
 
 ## Data fetching
 
 ### Server
 
-All of the wonderful patterns of React server components are supported. For example you can compile MDX files or perform code syntax highlighting on the server with zero impact on the client bundle size.
+All of the wonderful patterns of React server components are supported. For example, you can compile MDX files or perform code syntax highlighting on the server with zero impact on the client bundle size.
 
 ```tsx
 // ./src/templates/blog-article-page.tsx
@@ -395,8 +434,8 @@ export const BlogArticlePage = async ({ slug }) => {
 
   return (
     <>
-      <title>{article.frontmatter.title}</h3>
-      <h1>{article.frontmatter.title}</h3>
+      <title>{article.frontmatter.title}</title>
+      <h1>{article.frontmatter.title}</h1>
       <MDX>{article.content}</MDX>
     </>
   );
@@ -444,6 +483,35 @@ export const HomePage = async () => {
 };
 ```
 
+Metadata could also be generated programatically.
+
+```tsx
+// ./src/templates/home-page.tsx
+export const HomePage = async () => {
+  return (
+    <>
+      <Head />
+      <div>{/* ...*/}</div>
+    </>
+  );
+};
+
+const Head = async () => {
+  const metadata = await getMetadata();
+
+  return (
+    <>
+      <title>{metadata.title}</title>
+      <meta property="description" content={metadata.description} />
+    </>
+  );
+};
+
+const getMetadata = async () => {
+  /* ... */
+};
+```
+
 ## Styling
 
 ### Global styles
@@ -578,7 +646,7 @@ npx wrangler dev # or deploy
 
 ```
 npm run build -- --with-deno
-DENO_DEPLOY_TOKEN=... deployctl deploy --project=... --prod serve.ts --exclude node_modules
+DENO_DEPLOY_TOKEN=... deployctl deploy --project=... --prod dist/serve.js --exclude node_modules
 ```
 
 ## Community

package/dist/cli.js

@@ -92,21 +92,17 @@ async function runBuild(options) {
         ...options,
         config,
         env: process.env,
-        vercel: values['with-vercel'] ?? !!process.env.VERCEL ? {
-            type: values['with-vercel-static'] ? 'static' : 'serverless'
-        } : undefined,
-        cloudflare: !!values['with-cloudflare'],
-        deno: !!values['with-deno']
+        deploy: (values['with-vercel'] ?? !!process.env.VERCEL ? values['with-vercel-static'] ? 'vercel-static' : 'vercel-serverless' : undefined) || (values['with-cloudflare'] ? 'cloudflare' : undefined) || (values['with-deno'] ? 'deno' : undefined)
     });
 }
 async function runStart(options) {
     const { distDir, publicDir, entriesJs } = await resolveConfig(config);
-    const entries = import(pathToFileURL(path.resolve(distDir, entriesJs)).toString());
+    const loadEntries = ()=>import(pathToFileURL(path.resolve(distDir, entriesJs)).toString());
     const app = new Hono();
     app.use('*', honoPrdMiddleware({
         ...options,
         config,
-        entries,
+        loadEntries,
         env: process.env
     }));
     app.use('*', serveStatic({

package/dist/client.d.ts

@@ -5,11 +5,20 @@ declare global {
     }
 }
 type Elements = Promise<Record<string, ReactNode>>;
-export declare const fetchRSC: (input: string, searchParamsString: string, rerender: (fn: (prev: Elements) => Elements) => void) => Elements;
+type SetElements = (fn: (prev: Elements) => Elements) => void;
+type CacheEntry = [
+    input: string,
+    searchParamsString: string,
+    setElements: SetElements,
+    elements: Elements
+];
+declare const fetchCache: [CacheEntry?];
+export declare const fetchRSC: (input: string, searchParamsString: string, setElements: SetElements, cache?: [CacheEntry?]) => Elements;
 export declare const prefetchRSC: (input: string, searchParamsString: string) => void;
-export declare const Root: ({ initialInput, initialSearchParamsString, children, }: {
+export declare const Root: ({ initialInput, initialSearchParamsString, cache, children, }: {
     initialInput?: string;
     initialSearchParamsString?: string;
+    cache?: typeof fetchCache;
     children: ReactNode;
 }) => import("react").FunctionComponentElement<import("react").ProviderProps<(input: string, searchParams?: URLSearchParams) => void>>;
 export declare const useRefetch: () => (input: string, searchParams?: URLSearchParams) => void;

package/dist/client.js

@@ -1,6 +1,6 @@
 /// <reference types="react/canary" />
 'use client';
-import { cache, createContext, createElement, memo, use, useCallback, useState, startTransition } from 'react';
+import { createContext, createElement, memo, use, useCallback, useState, startTransition } from 'react';
 import RSDWClient from 'react-server-dom-webpack/client';
 import { encodeInput } from './lib/renderers/utils.js';
 const { createFromFetch, encodeReply } = RSDWClient;
@@ -14,15 +14,27 @@ const checkStatus = async (responsePromise)=>{
     }
     return response;
 };
-const mergeElements = cache(async (a, b)=>{
-    const nextElements = {
-        ...await a,
-        ...await b
+const getCached = (c, m, k)=>(m.has(k) ? m : m.set(k, c())).get(k);
+const cache1 = new WeakMap();
+const mergeElements = (a, b)=>{
+    const getResult = async ()=>{
+        const nextElements = {
+            ...await a,
+            ...await b
+        };
+        delete nextElements._value;
+        return nextElements;
     };
-    delete nextElements._value;
-    return nextElements;
-});
-export const fetchRSC = cache((input, searchParamsString, rerender)=>{
+    const cache2 = getCached(()=>new WeakMap(), cache1, a);
+    return getCached(getResult, cache2, b);
+};
+const fetchCache = [];
+export const fetchRSC = (input, searchParamsString, setElements, cache = fetchCache)=>{
+    let entry = cache[0];
+    if (entry && entry[0] === input && entry[1] === searchParamsString) {
+        entry[2] = setElements;
+        return entry[3];
+    }
     const options = {
         async callServer (actionId, args) {
             const response = fetch(BASE_PATH + encodeInput(encodeURIComponent(actionId)), {
@@ -30,9 +42,10 @@ export const fetchRSC = cache((input, searchParamsString, rerender)=>{
                 body: await encodeReply(args)
             });
             const data = createFromFetch(checkStatus(response), options);
+            const setElements = entry[2];
             startTransition(()=>{
                 // FIXME this causes rerenders even if data is empty
-                rerender((prev)=>mergeElements(prev, data));
+                setElements((prev)=>mergeElements(prev, data));
             });
             return (await data)._value;
         }
@@ -42,43 +55,32 @@ export const fetchRSC = cache((input, searchParamsString, rerender)=>{
     const response = prefetched[url] || fetch(url);
     delete prefetched[url];
     const data = createFromFetch(checkStatus(response), options);
+    cache[0] = entry = [
+        input,
+        searchParamsString,
+        setElements,
+        data
+    ];
     return data;
-});
-export const prefetchRSC = cache((input, searchParamsString)=>{
+};
+export const prefetchRSC = (input, searchParamsString)=>{
     const prefetched = globalThis.__WAKU_PREFETCHED__ ||= {};
     const url = BASE_PATH + encodeInput(input) + (searchParamsString ? '?' + searchParamsString : '');
     if (!(url in prefetched)) {
         prefetched[url] = fetch(url);
     }
-});
+};
 const RefetchContext = createContext(()=>{
     throw new Error('Missing Root component');
 });
 const ElementsContext = createContext(null);
-// HACK there should be a better way...
-const createRerender = cache(()=>{
-    let rerender;
-    const stableRerender = (fn)=>{
-        rerender?.(fn);
-    };
-    const getRerender = ()=>stableRerender;
-    const setRerender = (newRerender)=>{
-        rerender = newRerender;
-    };
-    return [
-        getRerender,
-        setRerender
-    ];
-});
-export const Root = ({ initialInput, initialSearchParamsString, children })=>{
-    const [getRerender, setRerender] = createRerender();
-    const [elements, setElements] = useState(()=>fetchRSC(initialInput || '', initialSearchParamsString || '', getRerender()));
-    setRerender(setElements);
+export const Root = ({ initialInput, initialSearchParamsString, cache, children })=>{
+    const [elements, setElements] = useState(()=>fetchRSC(initialInput || '', initialSearchParamsString || '', (fn)=>setElements(fn), cache));
     const refetch = useCallback((input, searchParams)=>{
-        const data = fetchRSC(input, searchParams?.toString() || '', getRerender());
+        const data = fetchRSC(input, searchParams?.toString() || '', setElements, cache);
         setElements((prev)=>mergeElements(prev, data));
     }, [
-        getRerender
+        cache
     ]);
     return createElement(RefetchContext.Provider, {
         value: refetch

package/dist/config.d.ts

@@ -44,6 +44,12 @@ export interface Config {
      * Defaults to "entries.js".
      */
     entriesJs?: string;
+    /**
+     * The serve.js file relative distDir.
+     * This file is used for deployment.
+     * Defaults to "serve.js".
+     */
+    serveJs?: string;
     /**
      * Prefix for HTTP requests to indicate RSC requests.
      * Defaults to "RSC".

package/dist/dev.d.ts

@@ -1,4 +1,4 @@
-export { honoMiddleware } from './lib/middleware/hono-dev.js';
-export { connectMiddleware } from './lib/middleware/connect-dev.js';
+export { honoMiddleware as unstable_honoMiddleware } from './lib/middleware/hono-dev.js';
+export { connectMiddleware as unstable_connectMiddleware } from './lib/middleware/connect-dev.js';
 export { createHandler as unstable_createHandler } from './lib/handlers/handler-dev.js';
 export { build } from './lib/builder/build.js';

package/dist/dev.js

@@ -1,4 +1,4 @@
-export { honoMiddleware } from './lib/middleware/hono-dev.js';
-export { connectMiddleware } from './lib/middleware/connect-dev.js';
+export { honoMiddleware as unstable_honoMiddleware } from './lib/middleware/hono-dev.js';
+export { connectMiddleware as unstable_connectMiddleware } from './lib/middleware/connect-dev.js';
 export { createHandler as unstable_createHandler } from './lib/handlers/handler-dev.js';
 export { build } from './lib/builder/build.js';

package/dist/lib/builder/build.d.ts

@@ -3,9 +3,5 @@ export declare function build(options: {
     config?: Config;
     ssr?: boolean;
     env?: Record<string, string>;
-    vercel?: {
-        type: 'static' | 'serverless';
-    } | undefined;
-    cloudflare?: boolean;
-    deno?: boolean;
+    deploy?: 'vercel-static' | 'vercel-serverless' | 'cloudflare' | 'deno' | undefined;
 }): Promise<void>;

package/dist/lib/builder/build.js

@@ -15,11 +15,10 @@ import { rscIndexPlugin } from '../plugins/vite-plugin-rsc-index.js';
 import { rscAnalyzePlugin } from '../plugins/vite-plugin-rsc-analyze.js';
 import { nonjsResolvePlugin } from '../plugins/vite-plugin-nonjs-resolve.js';
 import { rscTransformPlugin } from '../plugins/vite-plugin-rsc-transform.js';
-import { rscEntriesPlugin } from '../plugins/vite-plugin-rsc-entries.js';
+import { rscServePlugin } from '../plugins/vite-plugin-rsc-serve.js';
 import { rscEnvPlugin } from '../plugins/vite-plugin-rsc-env.js';
 import { emitVercelOutput } from './output-vercel.js';
 import { emitCloudflareOutput } from './output-cloudflare.js';
-import { emitDenoOutput } from './output-deno.js';
 // TODO this file and functions in it are too long. will fix.
 const WAKU_CLIENT = 'waku-client';
 // Upstream issue: https://github.com/rollup/rollup/issues/4699
@@ -91,7 +90,7 @@ const analyzeEntries = async (entriesFile)=>{
         serverEntryFiles
     };
 };
-const buildServerBundle = async (rootDir, config, entriesFile, distEntriesFile, commonEntryFiles, clientEntryFiles, serverEntryFiles, reExportHonoMiddleware, reExportConnectMiddleware)=>{
+const buildServerBundle = async (rootDir, config, entriesFile, distEntriesFile, commonEntryFiles, clientEntryFiles, serverEntryFiles, ssr, serve)=>{
     const serverBuildOutput = await buildVite({
         plugins: [
             nonjsResolvePlugin(),
@@ -105,14 +104,17 @@ const buildServerBundle = async (rootDir, config, entriesFile, distEntriesFile,
                 },
                 serverEntryFiles
             }),
-            rscEntriesPlugin({
-                entriesFile,
-                reExportHonoMiddleware,
-                reExportConnectMiddleware
-            }),
             rscEnvPlugin({
                 config
-            })
+            }),
+            ...serve ? [
+                rscServePlugin({
+                    ...config,
+                    entriesFile,
+                    srcServeFile: decodeFilePathFromAbsolute(joinPath(fileURLToFilePath(import.meta.url), `../serve-${serve}.js`)),
+                    ssr
+                })
+            ] : []
         ],
         ssr: {
             resolve: {
@@ -125,6 +127,10 @@ const buildServerBundle = async (rootDir, config, entriesFile, distEntriesFile,
                     'workerd'
                 ]
             },
+            external: [
+                'hono',
+                'hono/cloudflare-workers'
+            ],
             noExternal: /^(?!node:)/
         },
         define: {
@@ -365,6 +371,7 @@ const emitHtmlFiles = async (rootDir, config, distEntriesFile, buildConfig, getC
         }
         return destHtmlFile;
     }));
+    htmlFiles.unshift(publicIndexHtmlFile);
     const loadHtmlHeadCode = `
 export function loadHtmlHead(pathname) {
   return ${JSON.stringify(htmlHeadMap)}[pathname] || ${JSON.stringify(publicIndexHtmlHead)};
@@ -396,17 +403,13 @@ export async function build(options) {
     const entriesFile = resolveFileName(joinPath(rootDir, config.srcDir, config.entriesJs));
     const distEntriesFile = resolveFileName(joinPath(rootDir, config.distDir, config.entriesJs));
     const { commonEntryFiles, clientEntryFiles, serverEntryFiles } = await analyzeEntries(entriesFile);
-    const serverBuildOutput = await buildServerBundle(rootDir, config, entriesFile, distEntriesFile, commonEntryFiles, clientEntryFiles, serverEntryFiles, !!options.cloudflare || !!options.deno, !!options.vercel);
+    const serverBuildOutput = await buildServerBundle(rootDir, config, entriesFile, distEntriesFile, commonEntryFiles, clientEntryFiles, serverEntryFiles, !!options.ssr, (options.deploy === 'vercel-serverless' ? 'vercel' : false) || (options.deploy === 'cloudflare' ? 'cloudflare' : false) || (options.deploy === 'deno' ? 'deno' : false));
     await buildClientBundle(rootDir, config, commonEntryFiles, clientEntryFiles, serverBuildOutput, !!options.ssr);
     const { buildConfig, getClientModules, rscFiles } = await emitRscFiles(rootDir, config, distEntriesFile);
     const { htmlFiles } = await emitHtmlFiles(rootDir, config, distEntriesFile, buildConfig, getClientModules, !!options.ssr);
-    if (options.vercel) {
-        await emitVercelOutput(rootDir, config, rscFiles, htmlFiles, !!options.ssr, options.vercel.type);
-    }
-    if (options.cloudflare) {
-        await emitCloudflareOutput(rootDir, config, !!options.ssr);
-    }
-    if (options.deno) {
-        await emitDenoOutput(rootDir, config, !!options.ssr);
+    if (options.deploy?.startsWith('vercel-')) {
+        await emitVercelOutput(rootDir, config, rscFiles, htmlFiles, !!options.ssr, options.deploy.slice('vercel-'.length));
+    } else if (options.deploy === 'cloudflare') {
+        await emitCloudflareOutput(rootDir, config);
     }
 }

package/dist/lib/builder/output-cloudflare.d.ts

@@ -1,2 +1,2 @@
 import type { ResolvedConfig } from '../config.js';
-export declare const emitCloudflareOutput: (rootDir: string, config: ResolvedConfig, ssr: boolean) => Promise<void>;
+export declare const emitCloudflareOutput: (rootDir: string, config: ResolvedConfig) => Promise<void>;

package/dist/lib/builder/output-cloudflare.js

@@ -1,41 +1,15 @@
 import path from 'node:path';
 import { existsSync, writeFileSync } from 'node:fs';
 // XXX this can be very limited. FIXME if anyone has better knowledge.
-export const emitCloudflareOutput = async (rootDir, config, ssr)=>{
-    const outputDir = path.resolve('.');
-    const relativeRootDir = path.relative(outputDir, rootDir);
-    const entriesFile = path.join(relativeRootDir, config.distDir, config.entriesJs);
-    const publicDir = path.join(relativeRootDir, config.distDir, config.publicDir);
-    if (!existsSync(path.join(outputDir, 'serve.js'))) {
-        writeFileSync(path.join(outputDir, 'serve.js'), `
-import { Hono } from 'hono';
-import { serveStatic } from 'hono/cloudflare-workers';
-
-const entries = import('./${entriesFile}');
-const { honoMiddleware } = await entries;
-let serveWaku;
-
-const app = new Hono();
-app.use('*', (c, next) => serveWaku(c, next));
-app.use('*', serveStatic({ root: './' }));
-export default {
-  async fetch(request, env, ctx) {
-    if (!serveWaku) {
-      serveWaku = honoMiddleware({ entries, ssr: ${ssr}, env });
-    }
-    return app.fetch(request, env, ctx);
-  }
-}
-`);
-    }
-    if (!existsSync(path.join(outputDir, 'wrangler.toml'))) {
-        writeFileSync(path.join(outputDir, 'wrangler.toml'), `
+export const emitCloudflareOutput = async (rootDir, config)=>{
+    if (!existsSync(path.join(rootDir, 'wrangler.toml'))) {
+        writeFileSync(path.join(rootDir, 'wrangler.toml'), `
 name = "waku-project"
-main = "serve.js"
+main = "${config.distDir}/${config.serveJs}"
 compatibility_date = "2023-12-06"
 
 [site]
-bucket = "./${publicDir}"
+bucket = "./${config.distDir}/${config.publicDir}"
 `);
     }
 };

package/dist/lib/builder/output-vercel.js

@@ -4,7 +4,7 @@ import { cpSync, mkdirSync, writeFileSync } from 'node:fs';
 export const emitVercelOutput = async (rootDir, config, rscFiles, htmlFiles, ssr, type)=>{
     const publicDir = path.join(rootDir, config.distDir, config.publicDir);
     const outputDir = path.resolve('.vercel', 'output');
-    cpSync(path.join(rootDir, config.distDir, config.publicDir), path.join(outputDir, 'static'), {
+    cpSync(publicDir, path.join(outputDir, 'static'), {
         recursive: true
     });
     if (type === 'serverless') {
@@ -18,44 +18,13 @@ export const emitVercelOutput = async (rootDir, config, rscFiles, htmlFiles, ssr
         });
         const vcConfigJson = {
             runtime: 'nodejs18.x',
-            handler: 'serve.js',
+            handler: `${config.distDir}/${config.serveJs}`,
             launcherType: 'Nodejs'
         };
         writeFileSync(path.join(serverlessDir, '.vc-config.json'), JSON.stringify(vcConfigJson, null, 2));
         writeFileSync(path.join(serverlessDir, 'package.json'), JSON.stringify({
             type: 'module'
         }, null, 2));
-        writeFileSync(path.join(serverlessDir, 'serve.js'), `
-import path from 'node:path';
-import fs from 'node:fs';
-
-const entries = import(path.resolve('${config.distDir}', '${config.entriesJs}'));
-const { connectMiddleware } = await entries;
-const env = process.env;
-
-export default function handler(req, res) {
-  connectMiddleware({ entries, ssr: ${ssr}, env })(req, res, () => {
-    const { pathname } = new URL(req.url, 'http://localhost');
-    const fname = path.join(
-      '${config.distDir}',
-      '${config.publicDir}',
-      pathname,
-      path.extname(pathname) ? '' : '${config.indexHtml}',
-    );
-    if (fs.existsSync(fname)) {
-      if (fname.endsWith('.html')) {
-        res.setHeader('content-type', 'text/html; charset=utf-8');
-      } else if (fname.endsWith('.txt')) {
-        res.setHeader('content-type', 'text/plain');
-      }
-      fs.createReadStream(fname).pipe(res);
-      return;
-    }
-    res.statusCode = 404;
-    res.end();
-  });
-}
-`);
     }
     const overrides = Object.fromEntries(rscFiles.filter((file)=>!path.extname(file)).map((file)=>[
             path.relative(publicDir, file),

package/dist/lib/builder/serve-cloudflare.d.ts

@@ -0,0 +1,6 @@
+import { Hono } from 'hono';
+declare const app: Hono<import("hono").Env, {}, "/">;
+declare const _default: {
+    fetch(request: Request, env: Record<string, string>, ctx: Parameters<typeof app.fetch>[2]): Promise<Response>;
+};
+export default _default;

package/dist/lib/builder/serve-cloudflare.js

@@ -0,0 +1,23 @@
+import { Hono } from 'hono';
+import { serveStatic } from 'hono/cloudflare-workers';
+import { honoMiddleware } from '../middleware/hono-prd.js';
+const ssr = !!import.meta.env.WAKU_BUILD_SSR;
+const loadEntries = ()=>import(import.meta.env.WAKU_ENTRIES_FILE);
+let serveWaku;
+const app = new Hono();
+app.use('*', (c, next)=>serveWaku(c, next));
+app.use('*', serveStatic({
+    root: './'
+}));
+export default {
+    async fetch (request, env, ctx) {
+        if (!serveWaku) {
+            serveWaku = honoMiddleware({
+                loadEntries,
+                ssr,
+                env
+            });
+        }
+        return app.fetch(request, env, ctx);
+    }
+};

package/dist/lib/builder/serve-deno.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/builder/serve-deno.js

@@ -0,0 +1,22 @@
+/* eslint import/no-unresolved: off */ // @ts-expect-error no types
+import { Hono } from 'https://deno.land/x/hono/mod.ts';
+// @ts-expect-error no types
+import { serveStatic } from 'https://deno.land/x/hono/middleware.ts';
+import { honoMiddleware } from '../middleware/hono-prd.js';
+const ssr = !!import.meta.env.WAKU_BUILD_SSR;
+const distDir = import.meta.env.WAKU_CONFIG_DIST_DIR;
+const publicDir = import.meta.env.WAKU_CONFIG_PUBLIC_DIR;
+const loadEntries = ()=>import(import.meta.env.WAKU_ENTRIES_FILE);
+// @ts-expect-error no types
+const env = Deno.env.toObject();
+const app = new Hono();
+app.use('*', honoMiddleware({
+    loadEntries,
+    ssr,
+    env
+}));
+app.use('*', serveStatic({
+    root: `${distDir}/${publicDir}`
+}));
+// @ts-expect-error no types
+Deno.serve(app.fetch);