waku 0.20.2-alpha.1 → 0.20.2

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/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/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/package.json

@@ -1,10 +1,7 @@
 {
   "name": "waku",
   "description": "⛩️ The minimal React framework",
-  "version": "0.20.2-alpha.1",
-  "publishConfig": {
-    "tag": "next"
-  },
+  "version": "0.20.2",
   "type": "module",
   "author": "Daishi Kato",
   "homepage": "https://waku.gg",
@@ -86,9 +83,9 @@
     "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/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/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/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 = [