@webtypen/webframez-react 0.0.1 → 0.0.3

package/dist/router.js

@@ -114,6 +114,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")) {
@@ -182,19 +186,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");
 }
@@ -208,6 +214,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) {
@@ -287,10 +299,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,
@@ -322,10 +335,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,

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,
@@ -496,8 +516,23 @@ async function renderInitialHtmlInWorker(options) {
   const payload = Buffer.from(JSON.stringify(options), "utf8").toString("base64url");
   const script = `
 const path = require("node:path");
+const Module = require("node:module");
 const input = JSON.parse(Buffer.from(process.argv[1], "base64url").toString("utf8"));
 globalThis.__RSC_BASENAME = input.basename || "";
+const appRequire = Module.createRequire(path.join(input.pagesDir, "__webframez_react_worker__.js"));
+const originalResolveFilename = Module._resolveFilename;
+const forcedResolutions = new Map([
+  ["react", appRequire.resolve("react")],
+  ["react/jsx-runtime", appRequire.resolve("react/jsx-runtime")],
+  ["react/jsx-dev-runtime", appRequire.resolve("react/jsx-dev-runtime")],
+  ["react-dom/client", appRequire.resolve("react-dom/client")]
+]);
+Module._resolveFilename = function(request, parent, isMain, options) {
+  if (forcedResolutions.has(request)) {
+    return forcedResolutions.get(request);
+  }
+  return originalResolveFilename.call(this, request, parent, isMain, options);
+};
 const { createFileRouter } = require("webframez-react/router");
 const reactDomPkg = require.resolve("react-dom/package.json", {
   paths: [process.cwd(), input.pagesDir]
@@ -637,7 +672,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,
@@ -468,8 +488,23 @@ async function renderInitialHtmlInWorker(options) {
   const payload = Buffer.from(JSON.stringify(options), "utf8").toString("base64url");
   const script = `
 const path = require("node:path");
+const Module = require("node:module");
 const input = JSON.parse(Buffer.from(process.argv[1], "base64url").toString("utf8"));
 globalThis.__RSC_BASENAME = input.basename || "";
+const appRequire = Module.createRequire(path.join(input.pagesDir, "__webframez_react_worker__.js"));
+const originalResolveFilename = Module._resolveFilename;
+const forcedResolutions = new Map([
+  ["react", appRequire.resolve("react")],
+  ["react/jsx-runtime", appRequire.resolve("react/jsx-runtime")],
+  ["react/jsx-dev-runtime", appRequire.resolve("react/jsx-dev-runtime")],
+  ["react-dom/client", appRequire.resolve("react-dom/client")]
+]);
+Module._resolveFilename = function(request, parent, isMain, options) {
+  if (forcedResolutions.has(request)) {
+    return forcedResolutions.get(request);
+  }
+  return originalResolveFilename.call(this, request, parent, isMain, options);
+};
 const { createFileRouter } = require("webframez-react/router");
 const reactDomPkg = require.resolve("react-dom/package.json", {
   paths: [process.cwd(), input.pagesDir]
@@ -609,7 +644,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.1",
+  "version": "0.0.3",
   "description": "TypeScript React RSC addition for @webtypen/webframez-core",
   "homepage": "https://webtypen.de/",
   "author": {
@@ -19,6 +19,9 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "bin": {
+    "webframez-react": "./bin/webframez-react.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -54,10 +57,17 @@
       "types": "./dist/webframez-core.d.ts",
       "import": "./dist/webframez-core.js",
       "require": "./dist/webframez-core.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"
+    "dist",
+    "defaults",
+    "bin"
   ],
   "scripts": {
     "clean": "rm -rf dist",