waku 0.20.2-alpha.0 → 0.20.2

package/dist/cli.js

@@ -46,6 +46,9 @@ const { values, positionals } = parseArgs({
         'with-aws-lambda': {
             type: 'boolean'
         },
+        'experimental-partial': {
+            type: 'boolean'
+        },
         port: {
             type: 'string',
             short: 'p'
@@ -102,6 +105,7 @@ async function runBuild() {
     await build({
         config,
         env: process.env,
+        partial: !!values['experimental-partial'],
         deploy: (values['with-vercel'] ?? !!process.env.VERCEL ? values['with-vercel-static'] ? 'vercel-static' : 'vercel-serverless' : undefined) || (values['with-netlify'] ?? !!process.env.NETLIFY ? values['with-netlify-static'] ? 'netlify-static' : 'netlify-functions' : undefined) || (values['with-cloudflare'] ? 'cloudflare' : undefined) || (values['with-partykit'] ? 'partykit' : undefined) || (values['with-deno'] ? 'deno' : undefined) || (values['with-aws-lambda'] ? 'aws-lambda' : undefined)
     });
 }

package/dist/client.d.ts

@@ -5,8 +5,10 @@ declare global {
         readonly env: Record<string, string>;
     }
 }
-type Elements = Promise<Record<string, ReactNode>>;
-type SetElements = (updater: Elements | ((prev: Elements) => Elements)) => void;
+type Elements = Promise<Record<string, ReactNode>> & {
+    prev?: Record<string, ReactNode> | undefined;
+};
+type SetElements = (updater: (prev: Elements) => Elements) => void;
 type CacheEntry = [
     input: string,
     searchParamsString: string,
@@ -24,10 +26,11 @@ export declare const Root: ({ initialInput, initialSearchParamsString, cache, un
     children: ReactNode;
 }) => import("react").FunctionComponentElement<import("react").ProviderProps<(input: string, searchParams?: URLSearchParams) => void>>;
 export declare const useRefetch: () => (input: string, searchParams?: URLSearchParams) => void;
-export declare const Slot: ({ id, children, fallback, }: {
+export declare const Slot: ({ id, children, fallback, unstable_shouldRenderPrev, }: {
     id: string;
     children?: ReactNode;
     fallback?: ReactNode;
+    unstable_shouldRenderPrev?: (err: unknown) => boolean;
 }) => string | number | bigint | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<import("react").AwaitedReactNode> | import("react").FunctionComponentElement<import("react").ProviderProps<ReactNode>>;
 export declare const Children: () => ReactNode;
 /**

package/dist/client.js

@@ -17,13 +17,30 @@ const checkStatus = async (responsePromise)=>{
 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;
+    const getResult = ()=>{
+        const promise = new Promise((resolve, reject)=>{
+            Promise.all([
+                a,
+                b
+            ]).then(([a, b])=>{
+                const nextElements = {
+                    ...a,
+                    ...b
+                };
+                delete nextElements._value;
+                promise.prev = a;
+                resolve(nextElements);
+            }).catch((e)=>{
+                a.then((a)=>{
+                    promise.prev = a;
+                    reject(e);
+                }, ()=>{
+                    promise.prev = a.prev;
+                    reject(e);
+                });
+            });
+        });
+        return promise;
     };
     const cache2 = getCached(()=>new WeakMap(), cache1, a);
     return getCached(getResult, cache2, b);
@@ -96,7 +113,7 @@ export const Root = ({ initialInput, initialSearchParamsString, cache, unstable_
 export const useRefetch = ()=>use(RefetchContext);
 const ChildrenContext = createContext(undefined);
 const ChildrenContextProvider = memo(ChildrenContext.Provider);
-export const Slot = ({ id, children, fallback })=>{
+export const Slot = ({ id, children, fallback, unstable_shouldRenderPrev })=>{
     const elementsPromise = use(ElementsContext);
     if (!elementsPromise) {
         throw new Error('Missing Root component');
@@ -105,12 +122,16 @@ export const Slot = ({ id, children, fallback })=>{
     try {
         elements = use(elementsPromise);
     } catch (e) {
-        if (e instanceof Error) {
+        if (e instanceof Error && !('statusCode' in e)) {
             // HACK we assume any error as Not Found,
             // probably caused by history api fallback
             e.statusCode = 404;
         }
-        throw e;
+        if (unstable_shouldRenderPrev?.(e) && elementsPromise.prev) {
+            elements = elementsPromise.prev;
+        } else {
+            throw e;
+        }
     }
     if (!(id in elements)) {
         if (fallback) {

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

@@ -2,5 +2,6 @@ import type { Config } from '../../config.js';
 export declare function build(options: {
     config: Config;
     env?: Record<string, string>;
+    partial?: boolean;
     deploy?: 'vercel-static' | 'vercel-serverless' | 'netlify-static' | 'netlify-functions' | 'cloudflare' | 'partykit' | 'deno' | 'aws-lambda' | undefined;
 }): Promise<void>;

package/dist/lib/builder/build.js

@@ -105,7 +105,7 @@ const analyzeEntries = async (rootDir, config)=>{
     };
 };
 // For RSC
-const buildServerBundle = async (rootDir, config, clientEntryFiles, serverEntryFiles, serverModuleFiles, serve, isNodeCompatible)=>{
+const buildServerBundle = async (rootDir, config, clientEntryFiles, serverEntryFiles, serverModuleFiles, serve, isNodeCompatible, partial)=>{
     const serverBuildOutput = await buildVite({
         plugins: [
             nonjsResolvePlugin(),
@@ -189,6 +189,7 @@ const buildServerBundle = async (rootDir, config, clientEntryFiles, serverEntryF
         },
         publicDir: false,
         build: {
+            emptyOutDir: !partial,
             ssr: true,
             ssrEmitAssets: true,
             target: 'node18',
@@ -210,7 +211,7 @@ const buildServerBundle = async (rootDir, config, clientEntryFiles, serverEntryF
     return serverBuildOutput;
 };
 // For SSR (render client components on server to generate HTML)
-const buildSsrBundle = async (rootDir, config, clientEntryFiles, serverBuildOutput, isNodeCompatible)=>{
+const buildSsrBundle = async (rootDir, config, clientEntryFiles, serverBuildOutput, isNodeCompatible, partial)=>{
     const cssAssets = serverBuildOutput.output.flatMap(({ type, fileName })=>type === 'asset' && fileName.endsWith('.css') ? [
             fileName
         ] : []);
@@ -252,6 +253,7 @@ const buildSsrBundle = async (rootDir, config, clientEntryFiles, serverBuildOutp
         },
         publicDir: false,
         build: {
+            emptyOutDir: !partial,
             ssr: true,
             target: 'node18',
             outDir: joinPath(rootDir, config.distDir, DIST_SSR),
@@ -274,7 +276,7 @@ const buildSsrBundle = async (rootDir, config, clientEntryFiles, serverBuildOutp
     });
 };
 // For Browsers
-const buildClientBundle = async (rootDir, config, clientEntryFiles, serverBuildOutput)=>{
+const buildClientBundle = async (rootDir, config, clientEntryFiles, serverBuildOutput, partial)=>{
     const nonJsAssets = serverBuildOutput.output.flatMap(({ type, fileName })=>type === 'asset' && !fileName.endsWith('.js') ? [
             fileName
         ] : []);
@@ -297,6 +299,7 @@ const buildClientBundle = async (rootDir, config, clientEntryFiles, serverBuildO
             })
         ],
         build: {
+            emptyOutDir: !partial,
             outDir: joinPath(rootDir, config.distDir, DIST_PUBLIC),
             rollupOptions: {
                 onwarn,
@@ -349,6 +352,10 @@ const emitRscFiles = async (rootDir, config, distEntries, buildConfig)=>{
             }
             staticInputSet.add(input);
             const destRscFile = joinPath(rootDir, config.distDir, DIST_PUBLIC, config.rscPath, encodeInput(input));
+            // Skip if the file already exists.
+            if (existsSync(destRscFile)) {
+                continue;
+            }
             await mkdir(joinPath(destRscFile, '..'), {
                 recursive: true
             });
@@ -398,7 +405,7 @@ const emitHtmlFiles = async (rootDir, config, distEntriesFile, distEntries, buil
         let htmlStr = publicIndexHtml;
         let htmlHead = publicIndexHtmlHead;
         if (cssAssets.length) {
-            const cssStr = cssAssets.map((asset)=>`<link rel="stylesheet" href="${asset}">`).join('\n');
+            const cssStr = cssAssets.map((asset)=>`<link rel="stylesheet" href="${config.basePath}${asset}">`).join('\n');
             // HACK is this too naive to inject style code?
             htmlStr = htmlStr.replace(/<\/head>/, cssStr);
             htmlHead += cssStr;
@@ -426,6 +433,10 @@ const emitHtmlFiles = async (rootDir, config, distEntriesFile, distEntries, buil
         pathname = pathSpec2pathname(pathSpec);
         const destHtmlFile = joinPath(rootDir, config.distDir, DIST_PUBLIC, extname(pathname) ? pathname : pathname === '/404' ? '404.html' // HACK special treatment for 404, better way?
          : pathname + '/index.html');
+        // In partial mode, skip if the file already exists.
+        if (existsSync(destHtmlFile)) {
+            return;
+        }
         const htmlReadable = await renderHtml({
             config,
             pathname,
@@ -475,9 +486,9 @@ export async function build(options) {
     const distEntriesFile = joinPath(rootDir, config.distDir, DIST_ENTRIES_JS);
     const isNodeCompatible = options.deploy !== 'cloudflare' && options.deploy !== 'partykit' && options.deploy !== 'deno';
     const { clientEntryFiles, serverEntryFiles, serverModuleFiles } = await analyzeEntries(rootDir, config);
-    const serverBuildOutput = await buildServerBundle(rootDir, config, clientEntryFiles, serverEntryFiles, serverModuleFiles, (options.deploy === 'vercel-serverless' ? 'vercel' : false) || (options.deploy === 'netlify-functions' ? 'netlify' : false) || (options.deploy === 'cloudflare' ? 'cloudflare' : false) || (options.deploy === 'partykit' ? 'partykit' : false) || (options.deploy === 'deno' ? 'deno' : false) || (options.deploy === 'aws-lambda' ? 'aws-lambda' : false), isNodeCompatible);
-    await buildSsrBundle(rootDir, config, clientEntryFiles, serverBuildOutput, isNodeCompatible);
-    const clientBuildOutput = await buildClientBundle(rootDir, config, clientEntryFiles, serverBuildOutput);
+    const serverBuildOutput = await buildServerBundle(rootDir, config, clientEntryFiles, serverEntryFiles, serverModuleFiles, (options.deploy === 'vercel-serverless' ? 'vercel' : false) || (options.deploy === 'netlify-functions' ? 'netlify' : false) || (options.deploy === 'cloudflare' ? 'cloudflare' : false) || (options.deploy === 'partykit' ? 'partykit' : false) || (options.deploy === 'deno' ? 'deno' : false) || (options.deploy === 'aws-lambda' ? 'aws-lambda' : false), isNodeCompatible, !!options.partial);
+    await buildSsrBundle(rootDir, config, clientEntryFiles, serverBuildOutput, isNodeCompatible, !!options.partial);
+    const clientBuildOutput = await buildClientBundle(rootDir, config, clientEntryFiles, serverBuildOutput, !!options.partial);
     const distEntries = await import(filePathToFileURL(distEntriesFile));
     // TODO: Add progress indication for static builds.
     const buildConfig = await getBuildConfig({

package/dist/lib/middleware/dev-server.js

@@ -94,11 +94,7 @@ export const devServer = (options)=>{
             },
             ssr: {
                 external: [
-                    'waku',
-                    'waku/client',
-                    'waku/server',
-                    'waku/router/client',
-                    'waku/router/server'
+                    'waku'
                 ]
             },
             server: {

package/dist/lib/plugins/vite-plugin-rsc-index.js

@@ -71,14 +71,6 @@ ${opts.htmlHead}
         },
         transformIndexHtml () {
             return [
-                // HACK without <base>, some relative assets don't work.
-                // FIXME ideally, we should avoid this.
-                {
-                    tag: 'base',
-                    attrs: {
-                        href: opts.basePath
-                    }
-                },
                 {
                     tag: 'script',
                     attrs: {
@@ -91,7 +83,7 @@ ${opts.htmlHead}
                         tag: 'link',
                         attrs: {
                             rel: 'stylesheet',
-                            href
+                            href: `${opts.basePath}${href}`
                         },
                         injectTo: 'head'
                     }))

package/dist/lib/plugins/vite-plugin-rsc-serve.js

@@ -1,5 +1,6 @@
 import { existsSync } from 'node:fs';
 import path from 'node:path';
+import { normalizePath } from 'vite';
 // HACK: Depending on a different plugin isn't ideal.
 // Maybe we could put in vite config object?
 import { SRC_ENTRIES } from './vite-plugin-rsc-managed.js';
@@ -19,7 +20,7 @@ export function rscServePlugin(opts) {
         name: 'rsc-serve-plugin',
         config (viteConfig) {
             // FIXME This seems too hacky (The use of viteConfig.root, '.', path.resolve and resolveFileName)
-            const entriesFile = resolveFileName(path.resolve(viteConfig.root || '.', opts.srcDir, SRC_ENTRIES + '.js'));
+            const entriesFile = normalizePath(resolveFileName(path.resolve(viteConfig.root || '.', opts.srcDir, SRC_ENTRIES + '.jsx')));
             const { input } = viteConfig.build?.rollupOptions ?? {};
             if (input && !(typeof input === 'string') && !(input instanceof Array)) {
                 input[opts.distServeJs.replace(/\.js$/, '')] = opts.srcServeFile;

package/dist/lib/renderers/dev-worker-impl.js

@@ -5,7 +5,7 @@ import { Server } from 'node:http';
 import { AsyncLocalStorage } from 'node:async_hooks';
 import { createServer as createViteServer } from 'vite';
 import viteReact from '@vitejs/plugin-react';
-import { joinPath, fileURLToFilePath, encodeFilePathToAbsolute } from '../utils/path.js';
+import { joinPath, fileURLToFilePath, encodeFilePathToAbsolute, decodeFilePathFromAbsolute } from '../utils/path.js';
 import { deepFreeze, hasStatusCode } from './utils.js';
 import { renderRsc, getSsrConfig } from './rsc-renderer.js';
 import { nonjsResolvePlugin } from '../plugins/vite-plugin-nonjs-resolve.js';
@@ -29,12 +29,12 @@ const configSrcDir = getEnvironmentData('CONFIG_SRC_DIR');
 const configEntries = getEnvironmentData('CONFIG_ENTRIES');
 const configPrivateDir = getEnvironmentData('CONFIG_PRIVATE_DIR');
 const resolveClientEntryForDev = (id, config, initialModules)=>{
+    let file = id.startsWith('file://') ? decodeFilePathFromAbsolute(fileURLToFilePath(id)) : id;
     for (const moduleNode of initialModules){
-        if (moduleNode.file === id) {
+        if (moduleNode.file === file) {
             return moduleNode.url;
         }
     }
-    let file = id.startsWith('file://') ? fileURLToFilePath(id) : id;
     if (file.startsWith(config.rootDir)) {
         file = file.slice(config.rootDir.length + 1); // '+ 1' to remove '/'
     } else {
@@ -69,7 +69,6 @@ const handleRender = async (mesg)=>{
         }, {
             isDev: true,
             loadServerFile,
-            loadServerModule,
             resolveClientEntry: (id)=>resolveClientEntryForDev(id, {
                     rootDir: vite.config.root,
                     basePath: rest.config.basePath
@@ -191,9 +190,7 @@ const mergedViteConfig = await mergeUserViteConfig({
                 'workerd'
             ]
         },
-        external: [],
-        // FIXME We want to externalize waku, but it fails on windows.
-        noExternal: [
+        external: [
             'waku'
         ]
     },
@@ -214,10 +211,6 @@ const loadServerFile = async (fileURL)=>{
     const vite = await vitePromise;
     return vite.ssrLoadModule(fileURLToFilePath(fileURL));
 };
-const loadServerModule = async (id)=>{
-    const vite = await vitePromise;
-    return vite.ssrLoadModule(id);
-};
 const loadEntries = async (config)=>{
     const vite = await vitePromise;
     const filePath = joinPath(vite.config.root, config.srcDir, configEntries);

package/dist/lib/renderers/rsc-renderer.d.ts

@@ -21,7 +21,6 @@ type RenderRscOpts = {
     isDev: true;
     entries: EntriesDev;
     loadServerFile: (fileURL: string) => Promise<unknown>;
-    loadServerModule: (id: string) => Promise<unknown>;
     resolveClientEntry: (id: string) => string;
 };
 export declare function renderRsc(args: RenderRscArgs, opts: RenderRscOpts): Promise<ReadableStream>;

package/dist/lib/renderers/rsc-renderer.js

@@ -20,7 +20,7 @@ export async function renderRsc(args, opts) {
     const loadServerModule = (key)=>isDev ? import(/* @vite-ignore */ SERVER_MODULE_MAP[key]) : loadModule(key);
     const [{ default: { renderToReadableStream, decodeReply } }, { runWithRenderStore }] = await Promise.all([
         loadServerModule('rsdw-server'),
-        isDev ? opts.loadServerModule(SERVER_MODULE_MAP['waku-server']) : loadModule('waku-server')
+        loadServerModule('waku-server')
     ]);
     const bundlerConfig = new Proxy({}, {
         get (_target, encodedId) {

package/dist/lib/utils/path.js

@@ -8,7 +8,7 @@
 const ABSOLUTE_WIN32_PATH_REGEXP = /^\/[a-zA-Z]:\//;
 export const encodeFilePathToAbsolute = (filePath)=>{
     if (ABSOLUTE_WIN32_PATH_REGEXP.test(filePath)) {
-        throw new Error('Unsupported absolute file path');
+        throw new Error('Unsupported absolute file path: ' + filePath);
     }
     if (filePath.startsWith('/')) {
         return filePath;

package/dist/router/client.js

@@ -193,7 +193,21 @@ const equalRouteProps = (a, b)=>{
     }
     return true;
 };
-function InnerRouter({ routerData }) {
+const RouterSlot = ({ route, routerData, cachedRef, id, fallback, children })=>{
+    const unstable_shouldRenderPrev = (_err)=>{
+        const shouldSkip = routerData[0];
+        const skip = getSkipList(shouldSkip, [
+            id
+        ], route, cachedRef.current);
+        return skip.length > 0;
+    };
+    return createElement(Slot, {
+        id,
+        fallback,
+        unstable_shouldRenderPrev
+    }, children);
+};
+const InnerRouter = ({ routerData })=>{
     const refetch = useRefetch();
     const [route, setRoute] = useState(()=>parseRoute(new URL(window.location.href)));
     const componentIds = getComponentIds(route.path);
@@ -314,7 +328,10 @@ function InnerRouter({ routerData }) {
             behavior: state?.waku_new_path ? 'instant' : 'auto'
         });
     });
-    const children = componentIds.reduceRight((acc, id)=>createElement(Slot, {
+    const children = componentIds.reduceRight((acc, id)=>createElement(RouterSlot, {
+            route,
+            routerData,
+            cachedRef,
             id,
             fallback: acc
         }, acc), null);
@@ -325,7 +342,7 @@ function InnerRouter({ routerData }) {
             prefetchRoute
         }
     }, children);
-}
+};
 const DEFAULT_ROUTER_DATA = [];
 export function Router({ routerData = DEFAULT_ROUTER_DATA }) {
     const route = parseRoute(new URL(window.location.href));

package/dist/router/create-pages.d.ts

@@ -13,7 +13,7 @@ export type CreatePage = <Path extends string, SlugKey extends string, WildSlugK
     component: FunctionComponent<RouteProps>;
 } | {
     render: 'static';
-    path: PathWithSlug<Path, SlugKey>;
+    path: PathWithWildcard<Path, SlugKey, WildSlugKey>;
     staticPaths: string[] | string[][];
     component: FunctionComponent<RouteProps & Record<SlugKey, string>>;
 } | {

package/dist/router/create-pages.js

@@ -42,25 +42,33 @@ export function createPages(fn) {
             ]);
             const id = joinPath(page.path, 'page').replace(/^\//, '');
             registerStaticComponent(id, page.component);
-        } else if (page.render === 'static' && numSlugs > 0 && numWildcards === 0) {
+        } else if (page.render === 'static' && numSlugs > 0) {
             const staticPaths = page.staticPaths.map((item)=>Array.isArray(item) ? item : [
                     item
                 ]);
             for (const staticPath of staticPaths){
-                if (staticPath.length !== numSlugs) {
+                if (staticPath.length !== numSlugs && numWildcards === 0) {
                     throw new Error('staticPaths does not match with slug pattern');
                 }
                 const mapping = {};
                 let slugIndex = 0;
-                const pathItems = pathSpec.map(({ type, name })=>{
-                    if (type !== 'literal') {
-                        const actualName = staticPath[slugIndex++];
-                        if (name) {
-                            mapping[name] = actualName;
-                        }
-                        return actualName;
+                const pathItems = [];
+                pathSpec.forEach(({ type, name })=>{
+                    switch(type){
+                        case 'literal':
+                            pathItems.push(name);
+                            break;
+                        case 'wildcard':
+                            mapping[name] = staticPath.slice(slugIndex);
+                            staticPath.slice(slugIndex++).forEach((slug)=>{
+                                pathItems.push(slug);
+                            });
+                            break;
+                        case 'group':
+                            pathItems.push(staticPath[slugIndex++]);
+                            mapping[name] = pathItems[pathItems.length - 1];
+                            break;
                     }
-                    return name;
                 });
                 staticPathSet.add([
                     page.path,

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "waku",
   "description": "⛩️ The minimal React framework",
-  "version": "0.20.2-alpha.0",
-  "publishConfig": {
-    "tag": "next"
-  },
+  "version": "0.20.2",
   "type": "module",
   "author": "Daishi Kato",
   "homepage": "https://waku.gg",
@@ -70,25 +67,25 @@
     "node": "^20.8.0 || ^18.17.0"
   },
   "dependencies": {
-    "@hono/node-server": "1.9.1",
-    "@swc/core": "1.4.12",
+    "@hono/node-server": "1.11.1",
+    "@swc/core": "1.4.17",
     "@vitejs/plugin-react": "4.2.1",
     "dotenv": "16.4.5",
-    "hono": "4.2.2",
+    "hono": "4.3.2",
     "rsc-html-stream": "0.0.3",
-    "vite": "5.2.8"
+    "vite": "5.2.11"
   },
   "devDependencies": {
-    "@netlify/functions": "^2.6.0",
+    "@netlify/functions": "^2.6.3",
     "@swc/cli": "^0.3.12",
-    "rollup": "^4.14.0",
+    "rollup": "^4.17.2",
     "ts-expect": "^1.3.0",
-    "vitest": "^1.5.0"
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "react": "19.0.0-beta-4508873393-20240430",
-    "react-dom": "19.0.0-beta-4508873393-20240430",
-    "react-server-dom-webpack": "19.0.0-beta-4508873393-20240430"
+    "react": "19.0.0-beta-e7d213dfb0-20240507",
+    "react-dom": "19.0.0-beta-e7d213dfb0-20240507",
+    "react-server-dom-webpack": "19.0.0-beta-e7d213dfb0-20240507"
   },
   "scripts": {
     "dev": "swc src -d dist -w --strip-leading-paths",

package/src/cli.ts

@@ -47,6 +47,9 @@ const { values, positionals } = parseArgs({
     'with-aws-lambda': {
       type: 'boolean',
     },
+    'experimental-partial': {
+      type: 'boolean',
+    },
     port: {
       type: 'string',
       short: 'p',
@@ -103,6 +106,7 @@ async function runBuild() {
   await build({
     config,
     env: process.env as any,
+    partial: !!values['experimental-partial'],
     deploy:
       (values['with-vercel'] ?? !!process.env.VERCEL
         ? values['with-vercel-static']

package/src/client.ts

@@ -39,25 +39,43 @@ const checkStatus = async (
   return response;
 };
 
-type Elements = Promise<Record<string, ReactNode>>;
+type Elements = Promise<Record<string, ReactNode>> & {
+  prev?: Record<string, ReactNode> | undefined;
+};
 
 const getCached = <T>(c: () => T, m: WeakMap<object, T>, k: object): T =>
   (m.has(k) ? m : m.set(k, c())).get(k) as T;
 const cache1 = new WeakMap();
-const mergeElements = (
-  a: Elements,
-  b: Elements | Awaited<Elements>,
-): Elements => {
-  const getResult = async () => {
-    const nextElements = { ...(await a), ...(await b) };
-    delete nextElements._value;
-    return nextElements;
+const mergeElements = (a: Elements, b: Elements): Elements => {
+  const getResult = () => {
+    const promise: Elements = new Promise((resolve, reject) => {
+      Promise.all([a, b])
+        .then(([a, b]) => {
+          const nextElements = { ...a, ...b };
+          delete nextElements._value;
+          promise.prev = a;
+          resolve(nextElements);
+        })
+        .catch((e) => {
+          a.then(
+            (a) => {
+              promise.prev = a;
+              reject(e);
+            },
+            () => {
+              promise.prev = a.prev;
+              reject(e);
+            },
+          );
+        });
+    });
+    return promise;
   };
   const cache2 = getCached(() => new WeakMap(), cache1, a);
   return getCached(getResult, cache2, b);
 };
 
-type SetElements = (updater: Elements | ((prev: Elements) => Elements)) => void;
+type SetElements = (updater: (prev: Elements) => Elements) => void;
 type CacheEntry = [
   input: string,
   searchParamsString: string,
@@ -191,10 +209,12 @@ export const Slot = ({
   id,
   children,
   fallback,
+  unstable_shouldRenderPrev,
 }: {
   id: string;
   children?: ReactNode;
   fallback?: ReactNode;
+  unstable_shouldRenderPrev?: (err: unknown) => boolean;
 }) => {
   const elementsPromise = use(ElementsContext);
   if (!elementsPromise) {
@@ -204,12 +224,16 @@ export const Slot = ({
   try {
     elements = use(elementsPromise);
   } catch (e) {
-    if (e instanceof Error) {
+    if (e instanceof Error && !('statusCode' in e)) {
       // HACK we assume any error as Not Found,
       // probably caused by history api fallback
       (e as any).statusCode = 404;
     }
-    throw e;
+    if (unstable_shouldRenderPrev?.(e) && elementsPromise.prev) {
+      elements = elementsPromise.prev;
+    } else {
+      throw e;
+    }
   }
   if (!(id in elements)) {
     if (fallback) {

package/src/lib/builder/build.ts

@@ -165,6 +165,7 @@ const buildServerBundle = async (
     | 'aws-lambda'
     | false,
   isNodeCompatible: boolean,
+  partial: boolean,
 ) => {
   const serverBuildOutput = await buildVite({
     plugins: [
@@ -247,6 +248,7 @@ const buildServerBundle = async (
     },
     publicDir: false,
     build: {
+      emptyOutDir: !partial,
       ssr: true,
       ssrEmitAssets: true,
       target: 'node18',
@@ -275,6 +277,7 @@ const buildSsrBundle = async (
   clientEntryFiles: Record<string, string>,
   serverBuildOutput: Awaited<ReturnType<typeof buildServerBundle>>,
   isNodeCompatible: boolean,
+  partial: boolean,
 ) => {
   const cssAssets = serverBuildOutput.output.flatMap(({ type, fileName }) =>
     type === 'asset' && fileName.endsWith('.css') ? [fileName] : [],
@@ -310,6 +313,7 @@ const buildSsrBundle = async (
     },
     publicDir: false,
     build: {
+      emptyOutDir: !partial,
       ssr: true,
       target: 'node18',
       outDir: joinPath(rootDir, config.distDir, DIST_SSR),
@@ -343,6 +347,7 @@ const buildClientBundle = async (
   config: ResolvedConfig,
   clientEntryFiles: Record<string, string>,
   serverBuildOutput: Awaited<ReturnType<typeof buildServerBundle>>,
+  partial: boolean,
 ) => {
   const nonJsAssets = serverBuildOutput.output.flatMap(({ type, fileName }) =>
     type === 'asset' && !fileName.endsWith('.js') ? [fileName] : [],
@@ -361,6 +366,7 @@ const buildClientBundle = async (
       rscManagedPlugin({ ...config, addMainToInput: true }),
     ],
     build: {
+      emptyOutDir: !partial,
       outDir: joinPath(rootDir, config.distDir, DIST_PUBLIC),
       rollupOptions: {
         onwarn,
@@ -426,6 +432,10 @@ const emitRscFiles = async (
           config.rscPath,
           encodeInput(input),
         );
+        // Skip if the file already exists.
+        if (existsSync(destRscFile)) {
+          continue;
+        }
         await mkdir(joinPath(destRscFile, '..'), { recursive: true });
         const readable = await renderRsc(
           {
@@ -504,7 +514,10 @@ const emitHtmlFiles = async (
         let htmlHead = publicIndexHtmlHead;
         if (cssAssets.length) {
           const cssStr = cssAssets
-            .map((asset) => `<link rel="stylesheet" href="${asset}">`)
+            .map(
+              (asset) =>
+                `<link rel="stylesheet" href="${config.basePath}${asset}">`,
+            )
             .join('\n');
           // HACK is this too naive to inject style code?
           htmlStr = htmlStr.replace(/<\/head>/, cssStr);
@@ -549,6 +562,10 @@ const emitHtmlFiles = async (
               ? '404.html' // HACK special treatment for 404, better way?
               : pathname + '/index.html',
         );
+        // In partial mode, skip if the file already exists.
+        if (existsSync(destHtmlFile)) {
+          return;
+        }
         const htmlReadable = await renderHtml({
           config,
           pathname,
@@ -606,6 +623,7 @@ export const publicIndexHtml = ${JSON.stringify(publicIndexHtml)};
 export async function build(options: {
   config: Config;
   env?: Record<string, string>;
+  partial?: boolean;
   deploy?:
     | 'vercel-static'
     | 'vercel-serverless'
@@ -643,6 +661,7 @@ export async function build(options: {
       (options.deploy === 'deno' ? 'deno' : false) ||
       (options.deploy === 'aws-lambda' ? 'aws-lambda' : false),
     isNodeCompatible,
+    !!options.partial,
   );
   await buildSsrBundle(
     rootDir,
@@ -650,12 +669,14 @@ export async function build(options: {
     clientEntryFiles,
     serverBuildOutput,
     isNodeCompatible,
+    !!options.partial,
   );
   const clientBuildOutput = await buildClientBundle(
     rootDir,
     config,
     clientEntryFiles,
     serverBuildOutput,
+    !!options.partial,
   );
 
   const distEntries = await import(filePathToFileURL(distEntriesFile));

package/src/lib/middleware/dev-server.ts

@@ -97,13 +97,7 @@ export const devServer: Middleware = (options) => {
         ],
       },
       ssr: {
-        external: [
-          'waku',
-          'waku/client',
-          'waku/server',
-          'waku/router/client',
-          'waku/router/server',
-        ],
+        external: ['waku'],
       },
       server: { middlewareMode: true },
     });

package/src/lib/plugins/vite-plugin-rsc-index.ts

@@ -79,9 +79,6 @@ ${opts.htmlHead}
     },
     transformIndexHtml() {
       return [
-        // HACK without <base>, some relative assets don't work.
-        // FIXME ideally, we should avoid this.
-        { tag: 'base', attrs: { href: opts.basePath } },
         {
           tag: 'script',
           attrs: { type: 'module', async: true },
@@ -89,7 +86,7 @@ ${opts.htmlHead}
         },
         ...(opts.cssAssets || []).map((href) => ({
           tag: 'link',
-          attrs: { rel: 'stylesheet', href },
+          attrs: { rel: 'stylesheet', href: `${opts.basePath}${href}` },
           injectTo: 'head' as const,
         })),
       ];

package/src/lib/plugins/vite-plugin-rsc-serve.ts

@@ -1,5 +1,6 @@
 import { existsSync } from 'node:fs';
 import path from 'node:path';
+import { normalizePath } from 'vite';
 import type { Plugin } from 'vite';
 
 // HACK: Depending on a different plugin isn't ideal.
@@ -37,8 +38,14 @@ export function rscServePlugin(opts: {
     name: 'rsc-serve-plugin',
     config(viteConfig) {
       // FIXME This seems too hacky (The use of viteConfig.root, '.', path.resolve and resolveFileName)
-      const entriesFile = resolveFileName(
-        path.resolve(viteConfig.root || '.', opts.srcDir, SRC_ENTRIES + '.js'),
+      const entriesFile = normalizePath(
+        resolveFileName(
+          path.resolve(
+            viteConfig.root || '.',
+            opts.srcDir,
+            SRC_ENTRIES + '.jsx',
+          ),
+        ),
       );
       const { input } = viteConfig.build?.rollupOptions ?? {};
       if (input && !(typeof input === 'string') && !(input instanceof Array)) {

package/src/lib/renderers/dev-worker-impl.ts

@@ -13,6 +13,7 @@ import {
   joinPath,
   fileURLToFilePath,
   encodeFilePathToAbsolute,
+  decodeFilePathFromAbsolute,
 } from '../utils/path.js';
 import { deepFreeze, hasStatusCode } from './utils.js';
 import type { MessageReq, MessageRes } from './dev-worker-api.js';
@@ -50,12 +51,14 @@ const resolveClientEntryForDev = (
   config: { rootDir: string; basePath: string },
   initialModules: ClonableModuleNode[],
 ) => {
+  let file = id.startsWith('file://')
+    ? decodeFilePathFromAbsolute(fileURLToFilePath(id))
+    : id;
   for (const moduleNode of initialModules) {
-    if (moduleNode.file === id) {
+    if (moduleNode.file === file) {
       return moduleNode.url;
     }
   }
-  let file = id.startsWith('file://') ? fileURLToFilePath(id) : id;
   if (file.startsWith(config.rootDir)) {
     file = file.slice(config.rootDir.length + 1); // '+ 1' to remove '/'
   } else {
@@ -95,7 +98,6 @@ const handleRender = async (mesg: MessageReq & { type: 'render' }) => {
       {
         isDev: true,
         loadServerFile,
-        loadServerModule,
         resolveClientEntry: (id: string) =>
           resolveClientEntryForDev(
             id,
@@ -201,16 +203,7 @@ const mergedViteConfig = await mergeUserViteConfig({
       conditions: ['react-server', 'workerd'],
       externalConditions: ['react-server', 'workerd'],
     },
-    external: [
-      // FIXME We want to externalize waku, but it fails on windows.
-      // 'waku',
-      // 'waku/client',
-      // 'waku/server',
-      // 'waku/router/client',
-      // 'waku/router/server',
-    ],
-    // FIXME We want to externalize waku, but it fails on windows.
-    noExternal: ['waku'],
+    external: ['waku'],
   },
   appType: 'custom',
   server: { middlewareMode: true, hmr: { server: dummyServer } },
@@ -227,11 +220,6 @@ const loadServerFile = async (fileURL: string) => {
   return vite.ssrLoadModule(fileURLToFilePath(fileURL));
 };
 
-const loadServerModule = async (id: string) => {
-  const vite = await vitePromise;
-  return vite.ssrLoadModule(id);
-};
-
 const loadEntries = async (config: { srcDir: string }) => {
   const vite = await vitePromise;
   const filePath = joinPath(vite.config.root, config.srcDir, configEntries);

package/src/lib/renderers/rsc-renderer.ts

@@ -41,7 +41,6 @@ type RenderRscOpts =
       isDev: true;
       entries: EntriesDev;
       loadServerFile: (fileURL: string) => Promise<unknown>;
-      loadServerModule: (id: string) => Promise<unknown>;
       resolveClientEntry: (id: string) => string;
     };
 
@@ -85,11 +84,9 @@ export async function renderRsc(
     { runWithRenderStore },
   ] = await Promise.all([
     loadServerModule<{ default: typeof RSDWServerType }>('rsdw-server'),
-    (isDev
-      ? opts.loadServerModule(SERVER_MODULE_MAP['waku-server'])
-      : loadModule('waku-server')) as Promise<{
-      runWithRenderStore: typeof runWithRenderStoreType;
-    }>,
+    loadServerModule<{ runWithRenderStore: typeof runWithRenderStoreType }>(
+      'waku-server',
+    ),
   ]);
 
   const bundlerConfig = new Proxy(

package/src/lib/utils/path.ts

@@ -10,7 +10,7 @@ const ABSOLUTE_WIN32_PATH_REGEXP = /^\/[a-zA-Z]:\//;
 
 export const encodeFilePathToAbsolute = (filePath: string) => {
   if (ABSOLUTE_WIN32_PATH_REGEXP.test(filePath)) {
-    throw new Error('Unsupported absolute file path');
+    throw new Error('Unsupported absolute file path: ' + filePath);
   }
   if (filePath.startsWith('/')) {
     return filePath;

package/src/router/client.ts

@@ -15,6 +15,7 @@ import {
 import type {
   ComponentProps,
   FunctionComponent,
+  MutableRefObject,
   ReactNode,
   AnchorHTMLAttributes,
   ReactElement,
@@ -286,7 +287,34 @@ const equalRouteProps = (a: RouteProps, b: RouteProps) => {
   return true;
 };
 
-function InnerRouter({ routerData }: { routerData: RouterData }) {
+const RouterSlot = ({
+  route,
+  routerData,
+  cachedRef,
+  id,
+  fallback,
+  children,
+}: {
+  route: RouteProps;
+  routerData: RouterData;
+  cachedRef: MutableRefObject<Record<string, RouteProps>>;
+  id: string;
+  fallback?: ReactNode;
+  children?: ReactNode;
+}) => {
+  const unstable_shouldRenderPrev = (_err: unknown) => {
+    const shouldSkip = routerData[0];
+    const skip = getSkipList(shouldSkip, [id], route, cachedRef.current);
+    return skip.length > 0;
+  };
+  return createElement(
+    Slot,
+    { id, fallback, unstable_shouldRenderPrev },
+    children,
+  );
+};
+
+const InnerRouter = ({ routerData }: { routerData: RouterData }) => {
   const refetch = useRefetch();
 
   const [route, setRoute] = useState(() =>
@@ -418,7 +446,12 @@ function InnerRouter({ routerData }: { routerData: RouterData }) {
   });
 
   const children = componentIds.reduceRight(
-    (acc: ReactNode, id) => createElement(Slot, { id, fallback: acc }, acc),
+    (acc: ReactNode, id) =>
+      createElement(
+        RouterSlot,
+        { route, routerData, cachedRef, id, fallback: acc },
+        acc,
+      ),
     null,
   );
 
@@ -427,7 +460,7 @@ function InnerRouter({ routerData }: { routerData: RouterData }) {
     { value: { route, changeRoute, prefetchRoute } },
     children,
   );
-}
+};
 
 // Note: The router data must be a stable mutable object (array).
 type RouterData = [

package/src/router/create-pages.ts

@@ -82,7 +82,7 @@ export type CreatePage = <
       }
     | {
         render: 'static';
-        path: PathWithSlug<Path, SlugKey>;
+        path: PathWithWildcard<Path, SlugKey, WildSlugKey>;
         staticPaths: string[] | string[][];
         component: FunctionComponent<RouteProps & Record<SlugKey, string>>;
       }
@@ -170,27 +170,35 @@ export function createPages(
       staticPathSet.add([page.path, pathSpec]);
       const id = joinPath(page.path, 'page').replace(/^\//, '');
       registerStaticComponent(id, page.component);
-    } else if (page.render === 'static' && numSlugs > 0 && numWildcards === 0) {
+    } else if (page.render === 'static' && numSlugs > 0) {
       const staticPaths = (
         page as {
           staticPaths: string[] | string[][];
         }
       ).staticPaths.map((item) => (Array.isArray(item) ? item : [item]));
       for (const staticPath of staticPaths) {
-        if (staticPath.length !== numSlugs) {
+        if (staticPath.length !== numSlugs && numWildcards === 0) {
           throw new Error('staticPaths does not match with slug pattern');
         }
-        const mapping: Record<string, string> = {};
+        const mapping: Record<string, string | string[]> = {};
         let slugIndex = 0;
-        const pathItems = pathSpec.map(({ type, name }) => {
-          if (type !== 'literal') {
-            const actualName = staticPath[slugIndex++]!;
-            if (name) {
-              mapping[name] = actualName;
-            }
-            return actualName;
+        const pathItems = [] as string[];
+        pathSpec.forEach(({ type, name }) => {
+          switch (type) {
+            case 'literal':
+              pathItems.push(name!);
+              break;
+            case 'wildcard':
+              mapping[name!] = staticPath.slice(slugIndex);
+              staticPath.slice(slugIndex++).forEach((slug) => {
+                pathItems.push(slug);
+              });
+              break;
+            case 'group':
+              pathItems.push(staticPath[slugIndex++]!);
+              mapping[name!] = pathItems[pathItems.length - 1]!;
+              break;
           }
-          return name;
         });
         staticPathSet.add([
           page.path,