feat(core): generalize elements (#1199)

elements are actually used beside react nodes. For now, we hack with an
array. But, this should support it better, even though it loses some
type checks.

e2e/fixtures/define-router/src/entries.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 import { unstable_defineRouter as defineRouter } from 'waku/router/server';
 import { Slot, Children } from 'waku/minimal/client';
 
@@ -8,7 +7,7 @@ import FooPage from './routes/foo/page.js';
 import { readFile } from 'node:fs/promises';
 
 const STATIC_PATHS = ['/', '/foo'];
-const PATH_PAGE: Record<string, ReactNode> = {
+const PATH_PAGE: Record<string, unknown> = {
   '/': <Page />,
   '/foo': <FooPage />,
 };

examples/35_nesting/src/entries.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 import { unstable_defineEntries as defineEntries } from 'waku/minimal/server';
 import { Slot } from 'waku/minimal/client';
 import { unstable_createAsyncIterable as createAsyncIterable } from 'waku/server';
@@ -13,7 +12,7 @@ export default defineEntries({
       const params = new URLSearchParams(
         input.rscPath || 'App=Waku&InnerApp=0',
       );
-      const result: Record<string, ReactNode> = {};
+      const result: Record<string, unknown> = {};
       if (params.has('App')) {
         result.App = <App name={params.get('App')!} />;
       }

packages/waku/src/lib/builder/build.ts

@@ -571,7 +571,7 @@ const emitStaticFiles = async (
         options?.moduleIdCallback,
       ),
     renderHtml: async (
-      elements: Record<string, ReactNode>,
+      elements: Record<string, unknown>,
       html: ReactNode,
       options: { rscPath: string; htmlHead?: string },
     ) => {

packages/waku/src/lib/middleware/handler.ts

@@ -133,7 +133,7 @@ export const handler: Middleware = (options) => {
       renderRsc: (elements: Record<string, unknown>) =>
         renderRsc(config, ctx, elements),
       renderHtml: async (
-        elements: Record<string, ReactNode>,
+        elements: Record<string, unknown>,
         html: ReactNode,
         options: { rscPath: string; actionResult?: unknown },
       ) => {

packages/waku/src/lib/renderers/html.ts

@@ -14,7 +14,7 @@ import { renderRsc, renderRscElement, getExtractFormState } from './rsc.js';
 // TODO move types somewhere
 import type { HandlerContext } from '../middleware/types.js';
 
-type Elements = Record<string, ReactNode>;
+type Elements = Record<string, unknown>;
 
 const fakeFetchCode = `
 Promise.resolve(new Response(new ReadableStream({
@@ -229,7 +229,7 @@ export async function renderHtml(
         ServerRoot as FunctionComponent<
           Omit<ComponentProps<typeof ServerRoot>, 'children'>
         >,
-        { elements: elementsPromise },
+        { elementsPromise },
         htmlNode as any,
       ),
       {

packages/waku/src/lib/types.ts

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 import type { Config } from '../config.js';
 import type { PathSpec } from '../lib/utils/path.js';
 
-type Elements = Record<string, ReactNode>;
+type Elements = Record<string, unknown>;
 
 type RenderRsc<Opts = unknown> = (
   elements: Record<string, unknown>,

packages/waku/src/minimal/client.ts

@@ -49,43 +49,44 @@ const checkStatus = async (
   return response;
 };
 
-type Elements = Promise<Record<string, ReactNode>>;
+type Elements = Record<string, unknown>;
 
 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): Elements => {
-  const getResult = () => {
-    const promise: Elements = new Promise((resolve, reject) => {
-      Promise.all([a, b])
-        .then(([a, b]) => {
-          const nextElements = { ...a, ...b };
-          delete nextElements._value;
-          resolve(nextElements);
-        })
-        .catch((e) => reject(e));
+const mergeElementsPromise = (
+  a: Promise<Elements>,
+  b: Promise<Elements>,
+): Promise<Elements> => {
+  const getResult = () =>
+    Promise.all([a, b]).then(([a, b]) => {
+      const nextElements = { ...a, ...b };
+      delete nextElements._value;
+      return nextElements;
     });
-    return promise;
-  };
   const cache2 = getCached(() => new WeakMap(), cache1, a);
   return getCached(getResult, cache2, b);
 };
 
-type SetElements = (updater: (prev: Elements) => Elements) => void;
+type SetElements = (
+  updater: (prev: Promise<Elements>) => Promise<Elements>,
+) => void;
 type EnhanceFetch = (fetchFn: typeof fetch) => typeof fetch;
 type EnhanceCreateData = (
-  createData: (
-    responsePromise: Promise<Response>,
-  ) => Promise<Record<string, ReactNode>>,
-) => (responsePromise: Promise<Response>) => Promise<Record<string, ReactNode>>;
+  createData: (responsePromise: Promise<Response>) => Promise<Elements>,
+) => (responsePromise: Promise<Response>) => Promise<Elements>;
 
 const ENTRY = 'e';
 const SET_ELEMENTS = 's';
 const ENHANCE_FETCH = 'f';
 const ENHANCE_CREATE_DATA = 'd';
 
 type FetchCache = {
-  [ENTRY]?: [rscPath: string, rscParams: unknown, elements: Elements];
+  [ENTRY]?: [
+    rscPath: string,
+    rscParams: unknown,
+    elementsPromise: Promise<Elements>,
+  ];
   [SET_ELEMENTS]?: SetElements;
   [ENHANCE_FETCH]?: EnhanceFetch | undefined;
   [ENHANCE_CREATE_DATA]?: EnhanceCreateData | undefined;
@@ -105,7 +106,7 @@ export const callServerRsc = async (
   const enhanceFetch = fetchCache[ENHANCE_FETCH] || ((f) => f);
   const enhanceCreateData = fetchCache[ENHANCE_CREATE_DATA] || ((d) => d);
   const createData = (responsePromise: Promise<Response>) =>
-    createFromFetch<Awaited<Elements>>(checkStatus(responsePromise), {
+    createFromFetch<Elements>(checkStatus(responsePromise), {
       callServer: (funcId: string, args: unknown[]) =>
         callServerRsc(funcId, args, fetchCache),
     });
@@ -119,7 +120,7 @@ export const callServerRsc = async (
   const data = enhanceCreateData(createData)(responsePromise);
   const value = (await data)._value;
   // FIXME this causes rerenders even if data is empty
-  fetchCache[SET_ELEMENTS]?.((prev) => mergeElements(prev, data));
+  fetchCache[SET_ELEMENTS]?.((prev) => mergeElementsPromise(prev, data));
   return value;
 };
 
@@ -144,14 +145,14 @@ export const fetchRsc = (
   rscPath: string,
   rscParams?: unknown,
   fetchCache = defaultFetchCache,
-): Elements => {
+): Promise<Elements> => {
   const entry = fetchCache[ENTRY];
   if (entry && entry[0] === rscPath && entry[1] === rscParams) {
     return entry[2];
   }
   const enhanceCreateData = fetchCache[ENHANCE_CREATE_DATA] || ((d) => d);
   const createData = (responsePromise: Promise<Response>) =>
-    createFromFetch<Awaited<Elements>>(checkStatus(responsePromise), {
+    createFromFetch<Elements>(checkStatus(responsePromise), {
       callServer: (funcId: string, args: unknown[]) =>
         callServerRsc(funcId, args, fetchCache),
     });
@@ -190,7 +191,7 @@ const RefetchContext = createContext<
 >(() => {
   throw new Error('Missing Root component');
 });
-const ElementsContext = createContext<Elements | null>(null);
+const ElementsContext = createContext<Promise<Elements> | null>(null);
 
 export const Root = ({
   initialRscPath,
@@ -220,7 +221,7 @@ export const Root = ({
       // clear cache entry before fetching
       delete fetchCache[ENTRY];
       const data = fetchRsc(rscPath, rscParams, fetchCache);
-      setElements((prev) => mergeElements(prev, data));
+      setElements((prev) => mergeElementsPromise(prev, data));
     },
     [fetchCache],
   );
@@ -241,34 +242,49 @@ export const useRefetch = () => use(RefetchContext);
 const ChildrenContext = createContext<ReactNode>(undefined);
 const ChildrenContextProvider = memo(ChildrenContext.Provider);
 
+export const useElement = (id: string) => {
+  const elementsPromise = use(ElementsContext);
+  if (!elementsPromise) {
+    throw new Error('Missing Root component');
+  }
+  const elements = use(elementsPromise);
+  if (id in elements && elements[id] == undefined) {
+    throw new Error('Element cannot be undefined, use null instead: ' + id);
+  }
+  return elements[id];
+};
+
 const InnerSlot = ({
   id,
-  elementsPromise,
   children,
   setFallback,
   unstable_fallback,
 }: {
   id: string;
-  elementsPromise: Elements;
   children?: ReactNode;
   setFallback?: (fallback: ReactNode) => void;
   unstable_fallback?: ReactNode;
 }) => {
-  const elements = use(elementsPromise);
-  const hasElement = id in elements;
-  const element = elements[id];
+  const element = useElement(id);
+  const isValidElement = element !== undefined;
   useEffect(() => {
-    if (hasElement && setFallback) {
-      setFallback(element);
+    if (isValidElement && setFallback) {
+      // FIXME is there `isReactNode` type checker?
+      setFallback(element as ReactNode);
     }
-  }, [hasElement, element, setFallback]);
-  if (!hasElement) {
+  }, [isValidElement, element, setFallback]);
+  if (!isValidElement) {
     if (unstable_fallback) {
       return unstable_fallback;
     }
-    throw new Error('No such element: ' + id);
+    throw new Error('Invalid element: ' + id);
   }
-  return createElement(ChildrenContextProvider, { value: children }, element);
+  return createElement(
+    ChildrenContextProvider,
+    { value: children },
+    // FIXME is there `isReactNode` type checker?
+    element as ReactNode,
+  );
 };
 
 const ThrowError = ({ error }: { error: unknown }) => {
@@ -327,22 +343,14 @@ export const Slot = ({
   unstable_fallback?: ReactNode;
 }) => {
   const [fallback, setFallback] = useState<ReactNode>();
-  const elementsPromise = use(ElementsContext);
-  if (!elementsPromise) {
-    throw new Error('Missing Root component');
-  }
   if (unstable_fallbackToPrev) {
     return createElement(
       Fallback,
       { fallback } as never,
-      createElement(InnerSlot, { id, elementsPromise, setFallback }, children),
+      createElement(InnerSlot, { id, setFallback }, children),
     );
   }
-  return createElement(
-    InnerSlot,
-    { id, elementsPromise, unstable_fallback },
-    children,
-  );
+  return createElement(InnerSlot, { id, unstable_fallback }, children);
 };
 
 export const Children = () => use(ChildrenContext);
@@ -352,15 +360,15 @@ export const Children = () => use(ChildrenContext);
  * This is not a public API.
  */
 export const ServerRootInternal = ({
-  elements,
+  elementsPromise,
   children,
 }: {
-  elements: Elements;
+  elementsPromise: Promise<Elements>;
   children: ReactNode;
 }) =>
   createElement(
     ElementsContext.Provider,
-    { value: elements },
+    { value: elementsPromise },
     ...DEFAULT_HTML_HEAD,
     children,
   );

packages/waku/src/router/client.ts

@@ -443,7 +443,6 @@ export function Router({
   const locationListeners = (routerData[0] ||= new Set());
   const staticPathSet = (routerData[1] ||= new Set());
   const cachedIdSet = (routerData[2] ||= new Set());
-  const has404 = (routerData[3] ||= false);
   const unstable_enhanceFetch =
     (fetchFn: typeof fetch) =>
     (input: RequestInfo | URL, init: RequestInit = {}) => {
@@ -460,9 +459,10 @@ export function Router({
     (
       createData: (
         responsePromise: Promise<Response>,
-      ) => Promise<Record<string, ReactNode>>,
+      ) => Promise<Record<string, unknown>>,
     ) =>
     async (responsePromise: Promise<Response>) => {
+      const has404 = (routerData[3] ||= false);
       const response = await responsePromise;
       if (response.status === 404 && has404) {
         // HACK this is still an experimental logic. It's very fragile.

packages/waku/src/router/create-pages.ts

@@ -587,7 +587,7 @@ export const createPages = <
 
       const pathSpec = parsePathWithSlug(routePath);
       const mapping = getPathMapping(pathSpec, path);
-      const result: Record<string, ReactNode> = {
+      const result: Record<string, unknown> = {
         [`page:${routePath}`]: createElement(
           pageComponent,
           { ...mapping, ...(query ? { query } : {}), path },

packages/waku/src/router/define-router.ts

@@ -92,7 +92,7 @@ export function unstable_defineRouter(fns: {
   ) => Promise<{
     rootElement: ReactNode;
     routeElement: ReactNode;
-    elements: Record<SlotId, ReactNode>;
+    elements: Record<SlotId, unknown>;
   }>;
   getApiConfig?: () => Promise<
     Iterable<{
@@ -265,7 +265,7 @@ export function unstable_defineRouter(fns: {
       return renderRsc(entries);
     }
     if (input.type === 'function') {
-      let elementsPromise: Promise<Record<string, ReactNode>> = Promise.resolve(
+      let elementsPromise: Promise<Record<string, unknown>> = Promise.resolve(
         {},
       );
       let rendered = false;
@@ -357,7 +357,7 @@ export function unstable_defineRouter(fns: {
       const path2moduleIds: Record<string, string[]> = {};
       const moduleIdsForPrefetch = new WeakMap<PathSpec, Set<string>>();
       // FIXME this approach keeps all entries in memory during the loop
-      const entriesCache = new Map<string, Record<string, ReactNode>>();
+      const entriesCache = new Map<string, Record<string, unknown>>();
       await Promise.all(
         pathConfig.map(async ({ pathSpec, pathname, pattern, specs }) => {
           if (specs.isApi) {