@webtypen/webframez-react 0.0.2 → 0.0.4

package/dist/types.d.ts

@@ -9,17 +9,24 @@ export type AbortRouteOptions = {
   payload?: unknown;
 };
 
-export type RouteContext = {
+export type RouteContext<TData = unknown> = {
   pathname: string;
   params: RouteParams;
   searchParams: RouteSearchParams;
   cookies: Record<string, string>;
+  data?: TData;
   abort: (options?: AbortRouteOptions) => never;
 };
 
-export type PageProps = RouteContext;
+export type InferPageData<TDataResolver> =
+  TDataResolver extends (...args: any[]) => any
+    ? Awaited<ReturnType<TDataResolver>>
+    : TDataResolver;
+export type PageProps<TData = unknown> = RouteContext<InferPageData<TData>>;
+export type PagePropsFromData<TDataResolver extends (...args: any[]) => any> =
+  PageProps<InferPageData<TDataResolver>>;
 
-export type ErrorPageProps = RouteContext & {
+export type ErrorPageProps<TData = unknown> = RouteContext<TData> & {
   statusCode: number;
   message: string;
   payload?: unknown;
@@ -49,22 +56,32 @@ export type HeadConfig = {
   links?: HeadLinkTag[];
 };
 
+export type ClientNavigationPayload = {
+  model: ReactNode;
+  head: HeadConfig;
+};
+
 export type HeadResolver<TContext = RouteContext> = (
   context: TContext
 ) => HeadConfig | Promise<HeadConfig>;
 
-export type PageModule = {
-  default: (props: PageProps) => ReactNode;
-  Head?: HeadResolver<RouteContext>;
+export type PageDataResolver<TData = unknown> = (
+  context: RouteContext
+) => TData | Promise<TData>;
+
+export type PageModule<TData = unknown> = {
+  default: (props: PageProps<TData>) => ReactNode | Promise<ReactNode>;
+  Head?: HeadResolver<PageProps<TData>>;
+  Data?: PageDataResolver<TData>;
 };
 
 export type LayoutModule = {
-  default: (props: RouteContext) => ReactNode;
+  default: (props: RouteContext) => ReactNode | Promise<ReactNode>;
   Head?: HeadResolver<RouteContext>;
 };
 
 export type ErrorModule = {
-  default: (props: ErrorPageProps) => ReactNode;
+  default: (props: ErrorPageProps) => ReactNode | Promise<ReactNode>;
   Head?: HeadResolver<ErrorPageProps>;
 };
 

package/dist/webframez-core.cjs

@@ -226,6 +226,10 @@ function readSearchParams(urlSearchParams) {
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/'/g, "&#39;");
 }
+var MANAGED_HEAD_ATTR = "data-webframez-head";
+function createManagedAttributes() {
+  return `${MANAGED_HEAD_ATTR}="true"`;
+}
 function toRouteEntry(pagesDir, filePath) {
   const normalized = filePath.replace(/\\/g, "/");
   if (!normalized.endsWith("/index.js")) {
@@ -294,19 +298,21 @@ function renderHeadToString(head) {
   const tags = [];
   if (head.description) {
     tags.push(
-      `<meta name="description" content="${escapeHtml(head.description)}" />`
+      `<meta ${createManagedAttributes()} name="description" content="${escapeHtml(head.description)}" />`
     );
   }
   if (head.favicon) {
-    tags.push(`<link rel="icon" href="${escapeHtml(head.favicon)}" />`);
+    tags.push(
+      `<link ${createManagedAttributes()} rel="icon" href="${escapeHtml(head.favicon)}" />`
+    );
   }
   for (const meta of head.meta ?? []) {
     const attrs = Object.entries(meta).filter(([, value]) => Boolean(value)).map(([key, value]) => `${key}="${escapeHtml(String(value))}"`).join(" ");
-    tags.push(`<meta ${attrs} />`);
+    tags.push(`<meta ${createManagedAttributes()} ${attrs} />`);
   }
   for (const link of head.links ?? []) {
     const attrs = Object.entries(link).filter(([, value]) => Boolean(value)).map(([key, value]) => `${key}="${escapeHtml(String(value))}"`).join(" ");
-    tags.push(`<link ${attrs} />`);
+    tags.push(`<link ${createManagedAttributes()} ${attrs} />`);
   }
   return tags.join("\n");
 }
@@ -320,6 +326,12 @@ async function resolveHead(candidate, context) {
   }
   return candidate.Head(context);
 }
+async function resolvePageData(candidate, context) {
+  if (!candidate.Data) {
+    return void 0;
+  }
+  return candidate.Data(context);
+}
 function findBestMatch(entries, pathname) {
   const matches = [];
   for (const entry of entries) {
@@ -399,10 +411,11 @@ function createFileRouter(options) {
       };
     }
     const errorModule = resolveModule(errorPath);
-    const errorNode = errorModule.default(errorProps);
+    const errorNode = await errorModule.default(errorProps);
     const layoutHead = layoutModule ? await resolveHead(layoutModule, context) : void 0;
     const errorHead = await resolveHead(errorModule, errorProps);
-    const model = layoutModule ? injectRouteChildren(layoutModule.default(context), errorNode) : errorNode;
+    const layoutNode = layoutModule ? await layoutModule.default(context) : null;
+    const model = layoutNode ? injectRouteChildren(layoutNode, errorNode) : errorNode;
     return {
       statusCode,
       model,
@@ -434,10 +447,17 @@ function createFileRouter(options) {
       activeContext = context;
       const pageModule = resolveModule(match.entry.filePath);
       const layoutModule = import_node_fs.default.existsSync(layoutPath) ? resolveModule(layoutPath) : null;
-      const pageNode = pageModule.default(context);
-      const layoutHead = layoutModule ? await resolveHead(layoutModule, context) : void 0;
-      const pageHead = await resolveHead(pageModule, context);
-      const model = layoutModule ? injectRouteChildren(layoutModule.default(context), pageNode) : pageNode;
+      const pageData = await resolvePageData(pageModule, context);
+      const pageContext = {
+        ...context,
+        data: pageData
+      };
+      activeContext = pageContext;
+      const pageNode = await pageModule.default(pageContext);
+      const layoutHead = layoutModule ? await resolveHead(layoutModule, pageContext) : void 0;
+      const pageHead = await resolveHead(pageModule, pageContext);
+      const layoutNode = layoutModule ? await layoutModule.default(pageContext) : null;
+      const model = layoutNode ? injectRouteChildren(layoutNode, pageNode) : pageNode;
       return {
         statusCode: 200,
         model,
@@ -482,14 +502,26 @@ function stripBasePath(pathname, basePath) {
 }
 function runNodeCommand(args) {
   return new Promise((resolve, reject) => {
-    (0, import_node_child_process.execFile)(process.execPath, args, { timeout: 1e4, maxBuffer: 1024 * 1024 * 5 }, (error, stdout, stderr) => {
-      if (error) {
-        const out = stderr && stderr.trim() !== "" ? stderr : stdout;
-        reject(new Error(out || error.message));
-        return;
+    const execArgs = [
+      "--conditions",
+      "react-server",
+      "-r",
+      "@webtypen/webframez-react/register",
+      ...args
+    ];
+    (0, import_node_child_process.execFile)(
+      process.execPath,
+      execArgs,
+      { timeout: 1e4, maxBuffer: 1024 * 1024 * 5 },
+      (error, stdout, stderr) => {
+        if (error) {
+          const out = stderr && stderr.trim() !== "" ? stderr : stdout;
+          reject(new Error(out || error.message));
+          return;
+        }
+        resolve({ stdout, stderr });
       }
-      resolve({ stdout, stderr });
-    });
+    );
   });
 }
 async function renderInitialHtmlInWorker(options) {
@@ -513,7 +545,7 @@ Module._resolveFilename = function(request, parent, isMain, options) {
   }
   return originalResolveFilename.call(this, request, parent, isMain, options);
 };
-const { createFileRouter } = require("webframez-react/router");
+const { createFileRouter } = require("@webtypen/webframez-react/router");
 const reactDomPkg = require.resolve("react-dom/package.json", {
   paths: [process.cwd(), input.pagesDir]
 });
@@ -652,7 +684,11 @@ function createNodeRequestHandler(options) {
           cookies: requestCookies
         })
       );
-      sendRSC(res, resolved2.model, {
+      const payload = {
+        model: resolved2.model,
+        head: resolved2.head
+      };
+      sendRSC(res, payload, {
         moduleMap,
         statusCode: resolved2.statusCode
       });

package/dist/webframez-core.d.ts

@@ -2,18 +2,42 @@ import type { RouteFacade } from "@webtypen/webframez-core";
 import type { CreateNodeHandlerOptions } from "./http";
 
 export type WebframezCoreRouteMethod = "GET" | "POST" | "PUT" | "DELETE";
+export type WebframezCoreRouteMiddleware = string | string[];
 
-export type WebframezCoreReactRenderRouteOptions = CreateNodeHandlerOptions & {
+export interface WebframezCoreRouteRegistrationOptions {
+  middleware?: WebframezCoreRouteMiddleware;
+  domains?: string | string[];
+  [key: string]: unknown;
+}
+
+export interface WebframezCoreReactRenderRouteOptions
+  extends CreateNodeHandlerOptions {
   method?: WebframezCoreRouteMethod | WebframezCoreRouteMethod[];
-  routeOptions?: Record<string, any>;
-};
+  routeOptions?: WebframezCoreRouteRegistrationOptions;
+}
+
+export interface WebframezCoreRouteFacadeExtensions {
+  renderReact(path: string, options: WebframezCoreReactRenderRouteOptions): void;
+  reactRender(path: string, options: WebframezCoreReactRenderRouteOptions): void;
+}
 
 declare module "@webtypen/webframez-core" {
-  interface RouteFacade {
-    renderReact(path: string, options: WebframezCoreReactRenderRouteOptions): void;
-    reactRender(path: string, options: WebframezCoreReactRenderRouteOptions): void;
-  }
+  interface RouteFacade extends WebframezCoreRouteFacadeExtensions {}
+}
+
+declare module "webframez-core" {
+  interface RouteFacade extends WebframezCoreRouteFacadeExtensions {}
+}
+
+declare module "@webtypen/webframez-core/dist/Router/Route" {
+  interface RouteFacade extends WebframezCoreRouteFacadeExtensions {}
+}
+
+declare module "webframez-core/dist/Router/Route" {
+  interface RouteFacade extends WebframezCoreRouteFacadeExtensions {}
 }
 
-export function initWebframezReact(route: RouteFacade): RouteFacade;
+export function initWebframezReact<T extends RouteFacade>(
+  route: T,
+): T & WebframezCoreRouteFacadeExtensions;
 export const setupWebframezCoreReactRoute: typeof initWebframezReact;

package/dist/webframez-core.js

@@ -198,6 +198,10 @@ function readSearchParams(urlSearchParams) {
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/'/g, "&#39;");
 }
+var MANAGED_HEAD_ATTR = "data-webframez-head";
+function createManagedAttributes() {
+  return `${MANAGED_HEAD_ATTR}="true"`;
+}
 function toRouteEntry(pagesDir, filePath) {
   const normalized = filePath.replace(/\\/g, "/");
   if (!normalized.endsWith("/index.js")) {
@@ -266,19 +270,21 @@ function renderHeadToString(head) {
   const tags = [];
   if (head.description) {
     tags.push(
-      `<meta name="description" content="${escapeHtml(head.description)}" />`
+      `<meta ${createManagedAttributes()} name="description" content="${escapeHtml(head.description)}" />`
     );
   }
   if (head.favicon) {
-    tags.push(`<link rel="icon" href="${escapeHtml(head.favicon)}" />`);
+    tags.push(
+      `<link ${createManagedAttributes()} rel="icon" href="${escapeHtml(head.favicon)}" />`
+    );
   }
   for (const meta of head.meta ?? []) {
     const attrs = Object.entries(meta).filter(([, value]) => Boolean(value)).map(([key, value]) => `${key}="${escapeHtml(String(value))}"`).join(" ");
-    tags.push(`<meta ${attrs} />`);
+    tags.push(`<meta ${createManagedAttributes()} ${attrs} />`);
   }
   for (const link of head.links ?? []) {
     const attrs = Object.entries(link).filter(([, value]) => Boolean(value)).map(([key, value]) => `${key}="${escapeHtml(String(value))}"`).join(" ");
-    tags.push(`<link ${attrs} />`);
+    tags.push(`<link ${createManagedAttributes()} ${attrs} />`);
   }
   return tags.join("\n");
 }
@@ -292,6 +298,12 @@ async function resolveHead(candidate, context) {
   }
   return candidate.Head(context);
 }
+async function resolvePageData(candidate, context) {
+  if (!candidate.Data) {
+    return void 0;
+  }
+  return candidate.Data(context);
+}
 function findBestMatch(entries, pathname) {
   const matches = [];
   for (const entry of entries) {
@@ -371,10 +383,11 @@ function createFileRouter(options) {
       };
     }
     const errorModule = resolveModule(errorPath);
-    const errorNode = errorModule.default(errorProps);
+    const errorNode = await errorModule.default(errorProps);
     const layoutHead = layoutModule ? await resolveHead(layoutModule, context) : void 0;
     const errorHead = await resolveHead(errorModule, errorProps);
-    const model = layoutModule ? injectRouteChildren(layoutModule.default(context), errorNode) : errorNode;
+    const layoutNode = layoutModule ? await layoutModule.default(context) : null;
+    const model = layoutNode ? injectRouteChildren(layoutNode, errorNode) : errorNode;
     return {
       statusCode,
       model,
@@ -406,10 +419,17 @@ function createFileRouter(options) {
       activeContext = context;
       const pageModule = resolveModule(match.entry.filePath);
       const layoutModule = fs.existsSync(layoutPath) ? resolveModule(layoutPath) : null;
-      const pageNode = pageModule.default(context);
-      const layoutHead = layoutModule ? await resolveHead(layoutModule, context) : void 0;
-      const pageHead = await resolveHead(pageModule, context);
-      const model = layoutModule ? injectRouteChildren(layoutModule.default(context), pageNode) : pageNode;
+      const pageData = await resolvePageData(pageModule, context);
+      const pageContext = {
+        ...context,
+        data: pageData
+      };
+      activeContext = pageContext;
+      const pageNode = await pageModule.default(pageContext);
+      const layoutHead = layoutModule ? await resolveHead(layoutModule, pageContext) : void 0;
+      const pageHead = await resolveHead(pageModule, pageContext);
+      const layoutNode = layoutModule ? await layoutModule.default(pageContext) : null;
+      const model = layoutNode ? injectRouteChildren(layoutNode, pageNode) : pageNode;
       return {
         statusCode: 200,
         model,
@@ -454,14 +474,26 @@ function stripBasePath(pathname, basePath) {
 }
 function runNodeCommand(args) {
   return new Promise((resolve, reject) => {
-    execFile(process.execPath, args, { timeout: 1e4, maxBuffer: 1024 * 1024 * 5 }, (error, stdout, stderr) => {
-      if (error) {
-        const out = stderr && stderr.trim() !== "" ? stderr : stdout;
-        reject(new Error(out || error.message));
-        return;
+    const execArgs = [
+      "--conditions",
+      "react-server",
+      "-r",
+      "@webtypen/webframez-react/register",
+      ...args
+    ];
+    execFile(
+      process.execPath,
+      execArgs,
+      { timeout: 1e4, maxBuffer: 1024 * 1024 * 5 },
+      (error, stdout, stderr) => {
+        if (error) {
+          const out = stderr && stderr.trim() !== "" ? stderr : stdout;
+          reject(new Error(out || error.message));
+          return;
+        }
+        resolve({ stdout, stderr });
       }
-      resolve({ stdout, stderr });
-    });
+    );
   });
 }
 async function renderInitialHtmlInWorker(options) {
@@ -485,7 +517,7 @@ Module._resolveFilename = function(request, parent, isMain, options) {
   }
   return originalResolveFilename.call(this, request, parent, isMain, options);
 };
-const { createFileRouter } = require("webframez-react/router");
+const { createFileRouter } = require("@webtypen/webframez-react/router");
 const reactDomPkg = require.resolve("react-dom/package.json", {
   paths: [process.cwd(), input.pagesDir]
 });
@@ -624,7 +656,11 @@ function createNodeRequestHandler(options) {
           cookies: requestCookies
         })
       );
-      sendRSC(res, resolved2.model, {
+      const payload = {
+        model: resolved2.model,
+        head: resolved2.head
+      };
+      sendRSC(res, payload, {
         moduleMap,
         statusCode: resolved2.statusCode
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webtypen/webframez-react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "TypeScript React RSC addition for @webtypen/webframez-core",
   "homepage": "https://webtypen.de/",
   "author": {
@@ -58,15 +58,18 @@
       "import": "./dist/webframez-core.js",
       "require": "./dist/webframez-core.cjs"
     },
+    "./register": "./register.cjs",
     "./defaults/webpack.client": "./defaults/webpack.client.cjs",
     "./defaults/webpack.server": "./defaults/webpack.server.cjs",
     "./defaults/tsconfig.server": "./defaults/tsconfig.server.json",
+    "./defaults/tsconfig.server.example": "./defaults/tsconfig.server.example.json",
     "./cli": "./bin/webframez-react.mjs"
   },
   "files": [
     "dist",
     "defaults",
-    "bin"
+    "bin",
+    "register.cjs"
   ],
   "scripts": {
     "clean": "rm -rf dist",

package/register.cjs

@@ -0,0 +1 @@
+require("react-server-dom-webpack/node-register")();