@webtypen/webframez-react 0.0.2 → 0.0.4

package/bin/webframez-react.mjs

@@ -1,9 +1,10 @@
 #!/usr/bin/env node
 
 import fs from "node:fs";
+import fsp from "node:fs/promises";
 import path from "node:path";
 import { spawn } from "node:child_process";
-import { fileURLToPath } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 
 const binFilePath = fileURLToPath(import.meta.url);
 const packageRoot = path.resolve(path.dirname(binFilePath), "..");
@@ -12,6 +13,7 @@ const projectRoot = process.cwd();
 const command = process.argv[2];
 const passthroughStart = process.argv[3] === "--" ? 4 : 3;
 const passthroughArgs = process.argv.slice(passthroughStart);
+const customArgPrefixes = ["--client-entry", "--server-entry"];
 
 function printHelp() {
   console.log(
@@ -25,6 +27,7 @@ function printHelp() {
       "  webframez-react watch:client",
       "  webframez-react build:server:webpack",
       "  webframez-react watch:server:webpack",
+      "  webframez-react exec -- <command> [args...]",
       "",
       "Config fallback order:",
       "  1) project root override file",
@@ -34,6 +37,13 @@ function printHelp() {
       "  - tsconfig.server.json",
       "  - webpack.client.cjs",
       "  - webpack.server.cjs",
+      "",
+      "Optional project config file:",
+      "  - webframez-react.config.mjs|cjs|js|json",
+      "",
+      "Optional CLI overrides:",
+      "  --client-entry=src/client.tsx",
+      "  --server-entry=src/server.ts",
     ].join("\n"),
   );
 }
@@ -42,6 +52,43 @@ function hasFlag(flag) {
   return passthroughArgs.includes(flag);
 }
 
+function normalizeRelativePath(value) {
+  return value.replace(/\\/g, "/");
+}
+
+function readCustomArg(name) {
+  const withEquals = `${name}=`;
+  for (let index = 0; index < passthroughArgs.length; index += 1) {
+    const value = passthroughArgs[index];
+    if (value === name) {
+      return passthroughArgs[index + 1] || null;
+    }
+    if (value.startsWith(withEquals)) {
+      return value.slice(withEquals.length);
+    }
+  }
+  return null;
+}
+
+function stripCustomArgs(args) {
+  const filtered = [];
+  for (let index = 0; index < args.length; index += 1) {
+    const value = args[index];
+    const matchedPrefix = customArgPrefixes.find(
+      (prefix) => value === prefix || value.startsWith(`${prefix}=`),
+    );
+    if (!matchedPrefix) {
+      filtered.push(value);
+      continue;
+    }
+
+    if (value === matchedPrefix) {
+      index += 1;
+    }
+  }
+  return filtered;
+}
+
 function resolveConfig(localFileName, fallbackFileName) {
   const localPath = path.resolve(projectRoot, localFileName);
   if (fs.existsSync(localPath)) {
@@ -69,7 +116,83 @@ function resolveBinary(name) {
   return name;
 }
 
-function run(binaryName, args) {
+function buildReactServerNodeOptions() {
+  const existing = process.env.NODE_OPTIONS ? `${process.env.NODE_OPTIONS} ` : "";
+  return `${existing}--conditions react-server -r @webtypen/webframez-react/register`.trim();
+}
+
+async function loadProjectConfig() {
+  const configFiles = [
+    "webframez-react.config.mjs",
+    "webframez-react.config.cjs",
+    "webframez-react.config.js",
+    "webframez-react.config.json",
+  ];
+
+  for (const fileName of configFiles) {
+    const filePath = path.resolve(projectRoot, fileName);
+    if (!fs.existsSync(filePath)) {
+      continue;
+    }
+
+    if (fileName.endsWith(".json")) {
+      return JSON.parse(await fsp.readFile(filePath, "utf8"));
+    }
+
+    const imported = await import(pathToFileURL(filePath).href);
+    return imported.default ?? imported;
+  }
+
+  return {};
+}
+
+function resolveEntryPath(projectConfig, customArgValue, configKey, defaults) {
+  const configuredValue = customArgValue || projectConfig?.[configKey];
+  if (configuredValue && typeof configuredValue === "string") {
+    return path.resolve(projectRoot, configuredValue);
+  }
+
+  for (const defaultPath of defaults) {
+    const resolved = path.resolve(projectRoot, defaultPath);
+    if (fs.existsSync(resolved)) {
+      return resolved;
+    }
+  }
+
+  return path.resolve(projectRoot, defaults[0]);
+}
+
+async function createServerTsConfig(baseConfig, serverEntryPath, clientEntryPath) {
+  const generatedPath = path.resolve(projectRoot, ".webframez-react.tsconfig.server.json");
+  const extendsPath =
+    baseConfig.source === "project"
+      ? `./${normalizeRelativePath(path.basename(baseConfig.path))}`
+      : normalizeRelativePath(path.relative(projectRoot, baseConfig.path));
+
+  const include = [
+    normalizeRelativePath(path.relative(projectRoot, serverEntryPath)),
+    "src/components/**/*.tsx",
+    "pages/**/*.tsx",
+    "src/types.d.ts",
+  ];
+
+  const exclude = [
+    normalizeRelativePath(path.relative(projectRoot, clientEntryPath)),
+    "dist",
+    "node_modules",
+  ];
+
+  const generatedConfig = {
+    extends: extendsPath,
+    include: Array.from(new Set(include)),
+    exclude: Array.from(new Set(exclude)),
+  };
+
+  await fsp.writeFile(generatedPath, JSON.stringify(generatedConfig, null, 2));
+  return generatedPath;
+}
+
+function run(binaryName, args, envAdditions = {}) {
   const binary = resolveBinary(binaryName);
 
   return new Promise((resolve, reject) => {
@@ -77,6 +200,10 @@ function run(binaryName, args) {
       cwd: projectRoot,
       stdio: "inherit",
       shell: false,
+      env: {
+        ...process.env,
+        ...envAdditions,
+      },
     });
 
     child.on("error", (error) => {
@@ -95,11 +222,35 @@ async function main() {
     return;
   }
 
+  const projectConfig = await loadProjectConfig();
+  const customClientEntry = readCustomArg("--client-entry");
+  const customServerEntry = readCustomArg("--server-entry");
+  const passthroughArgsClean = stripCustomArgs(passthroughArgs);
+
+  const clientEntryPath = resolveEntryPath(
+    projectConfig,
+    customClientEntry,
+    "clientEntryPath",
+    ["src/client.tsx"],
+  );
+  const serverEntryPath = resolveEntryPath(
+    projectConfig,
+    customServerEntry,
+    "serverEntryPath",
+    ["src/server.ts", "src/server.tsx"],
+  );
+
   if (command === "build:server" || command === "watch:server") {
     const config = resolveConfig("tsconfig.server.json", "tsconfig.server.json");
+    const generatedConfigPath = await createServerTsConfig(
+      config,
+      serverEntryPath,
+      clientEntryPath,
+    );
     console.log(`[webframez-react] tsc config (${config.source}): ${config.path}`);
+    console.log(`[webframez-react] server entry: ${serverEntryPath}`);
 
-    const args = ["-p", config.path, ...passthroughArgs];
+    const args = ["-p", generatedConfigPath, ...passthroughArgsClean];
     if (command === "watch:server") {
       if (!hasFlag("--watch")) {
         args.push("--watch");
@@ -114,16 +265,34 @@ async function main() {
     return;
   }
 
+  if (command === "exec") {
+    if (passthroughArgsClean.length === 0) {
+      console.error("[webframez-react] Missing command for exec.");
+      printHelp();
+      process.exit(1);
+    }
+
+    const [binaryName, ...binaryArgs] = passthroughArgsClean;
+    const code = await run(binaryName, binaryArgs, {
+      NODE_OPTIONS: buildReactServerNodeOptions(),
+    });
+    process.exit(code);
+    return;
+  }
+
   if (command === "build:client" || command === "watch:client") {
     const config = resolveConfig("webpack.client.cjs", "webpack.client.cjs");
     console.log(`[webframez-react] webpack config (${config.source}): ${config.path}`);
+    console.log(`[webframez-react] client entry: ${clientEntryPath}`);
 
-    const args = ["--config", config.path, ...passthroughArgs];
+    const args = ["--config", config.path, ...passthroughArgsClean];
     if (command === "watch:client" && !hasFlag("--watch")) {
       args.push("--watch");
     }
 
-    const code = await run("webpack", args);
+    const code = await run("webpack", args, {
+      WEBFRAMEZ_REACT_CLIENT_ENTRY: clientEntryPath,
+    });
     process.exit(code);
     return;
   }
@@ -131,13 +300,16 @@ async function main() {
   if (command === "build:server:webpack" || command === "watch:server:webpack") {
     const config = resolveConfig("webpack.server.cjs", "webpack.server.cjs");
     console.log(`[webframez-react] webpack server config (${config.source}): ${config.path}`);
+    console.log(`[webframez-react] server entry: ${serverEntryPath}`);
 
-    const args = ["--config", config.path, ...passthroughArgs];
+    const args = ["--config", config.path, ...passthroughArgsClean];
     if (command === "watch:server:webpack" && !hasFlag("--watch")) {
       args.push("--watch");
     }
 
-    const code = await run("webpack", args);
+    const code = await run("webpack", args, {
+      WEBFRAMEZ_REACT_SERVER_ENTRY: serverEntryPath,
+    });
     process.exit(code);
     return;
   }

package/defaults/tsconfig.server.example.json

@@ -0,0 +1,46 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "baseUrl": ".",
+    "paths": {
+      "@webtypen/webframez-react": [
+        "./node_modules/@webtypen/webframez-react/dist/index.d.ts"
+      ],
+      "@webtypen/webframez-react/types": [
+        "./node_modules/@webtypen/webframez-react/dist/types.d.ts"
+      ],
+      "@webtypen/webframez-react/router": [
+        "./node_modules/@webtypen/webframez-react/dist/router.d.ts"
+      ],
+      "@webtypen/webframez-react/client": [
+        "./node_modules/@webtypen/webframez-react/dist/client.d.ts"
+      ],
+      "@webtypen/webframez-react/navigation": [
+        "./node_modules/@webtypen/webframez-react/dist/navigation.d.ts"
+      ],
+      "@webtypen/webframez-react/webframez-core": [
+        "./node_modules/@webtypen/webframez-react/dist/webframez-core.d.ts"
+      ]
+    },
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "."
+  },
+  "include": [
+    "src/server.ts",
+    "src/server.tsx",
+    "src/components/**/*.tsx",
+    "pages/**/*.tsx",
+    "src/types.d.ts"
+  ],
+  "exclude": [
+    "src/client.tsx",
+    "dist",
+    "node_modules"
+  ]
+}

package/defaults/tsconfig.server.json

@@ -5,6 +5,9 @@
     "moduleResolution": "Node",
     "baseUrl": ".",
     "paths": {
+      "@webtypen/webframez-react": [
+        "./node_modules/@webtypen/webframez-react/dist/index.d.ts"
+      ],
       "@webtypen/webframez-react/types": [
         "./node_modules/@webtypen/webframez-react/dist/types.d.ts"
       ],
@@ -17,6 +20,12 @@
       "@webtypen/webframez-react/navigation": [
         "./node_modules/@webtypen/webframez-react/dist/navigation.d.ts"
       ],
+      "@webtypen/webframez-react/webframez-core": [
+        "./node_modules/@webtypen/webframez-react/dist/webframez-core.d.ts"
+      ],
+      "webframez-react": [
+        "./node_modules/@webtypen/webframez-react/dist/index.d.ts"
+      ],
       "webframez-react/types": [
         "./node_modules/@webtypen/webframez-react/dist/types.d.ts"
       ],
@@ -28,6 +37,9 @@
       ],
       "webframez-react/navigation": [
         "./node_modules/@webtypen/webframez-react/dist/navigation.d.ts"
+      ],
+      "webframez-react/webframez-core": [
+        "./node_modules/@webtypen/webframez-react/dist/webframez-core.d.ts"
       ]
     },
     "jsx": "react-jsx",
@@ -39,6 +51,7 @@
   },
   "include": [
     "src/server.ts",
+    "src/server.tsx",
     "src/components/**/*.tsx",
     "pages/**/*.tsx",
     "src/types.d.ts"

package/defaults/webpack.client.cjs

@@ -3,11 +3,14 @@ const ReactFlightWebpackPlugin = require("react-server-dom-webpack/plugin");
 
 const projectRoot = process.cwd();
 const frameworkDistDir = path.resolve(__dirname, "..", "dist");
+const clientEntry = process.env.WEBFRAMEZ_REACT_CLIENT_ENTRY
+  ? path.resolve(projectRoot, process.env.WEBFRAMEZ_REACT_CLIENT_ENTRY)
+  : path.resolve(projectRoot, "src/client.tsx");
 
 module.exports = {
   mode: process.env.NODE_ENV === "production" ? "production" : "development",
   entry: {
-    client: path.resolve(projectRoot, "src/client.tsx"),
+    client: clientEntry,
   },
   output: {
     path: path.resolve(projectRoot, "dist"),

package/defaults/webpack.server.cjs

@@ -1,11 +1,18 @@
 const path = require("path");
+const fs = require("fs");
 
 const projectRoot = process.cwd();
+const defaultServerEntry = fs.existsSync(path.resolve(projectRoot, "src/server.ts"))
+  ? path.resolve(projectRoot, "src/server.ts")
+  : path.resolve(projectRoot, "src/server.tsx");
+const serverEntry = process.env.WEBFRAMEZ_REACT_SERVER_ENTRY
+  ? path.resolve(projectRoot, process.env.WEBFRAMEZ_REACT_SERVER_ENTRY)
+  : defaultServerEntry;
 
 module.exports = {
   mode: process.env.NODE_ENV === "production" ? "production" : "development",
   target: "node",
-  entry: path.resolve(projectRoot, "src/server.ts"),
+  entry: serverEntry,
   output: {
     path: path.resolve(projectRoot, "dist"),
     filename: "server.cjs",

package/dist/client.cjs

@@ -1 +1 @@
-var _=Object.create;var d=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var b=(e,n)=>{for(var t in n)d(e,t,{get:n[t],enumerable:!0})},g=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of O(n))!U.call(e,r)&&r!==t&&d(e,r,{get:()=>n[r],enumerable:!(o=k(n,r))||o.enumerable});return e};var A=(e,n,t)=>(t=e!=null?_(S(e)):{},g(n||!e||!e.__esModule?d(t,"default",{value:e,enumerable:!0}):t,e)),L=e=>g(d({},"__esModule",{value:!0}),e);var B={};b(B,{mountWebframezClient:()=>W,useCookie:()=>T,useRouter:()=>F});module.exports=L(B);var a=A(require("react"),1),x=require("react-dom/client"),v=require("react-server-dom-webpack/client"),i=require("react/jsx-runtime"),$={push:()=>{},replace:()=>{},refresh:()=>{}},l=typeof a.default.createContext=="function"?a.default.createContext(null):null,E="__WEBFRAMEZ_ROUTER__";function I(){return typeof window>"u"?null:window[E]??null}function P(e){typeof window>"u"||(window[E]=e)}function w(){let e={},n=typeof document>"u"?"":document.cookie;if(!n||n.trim()==="")return e;for(let t of n.split(";")){let o=t.trim();if(!o)continue;let r=o.indexOf("="),c=r>=0?o.slice(0,r).trim():o,u=r>=0?o.slice(r+1):"";c&&(e[c]=decodeURIComponent(u))}return e}function h(e,n,t={}){let o=[`${e}=${encodeURIComponent(n)}`];return t.path&&o.push(`Path=${t.path}`),t.domain&&o.push(`Domain=${t.domain}`),typeof t.maxAge=="number"&&o.push(`Max-Age=${Math.floor(t.maxAge)}`),t.expires&&o.push(`Expires=${t.expires.toUTCString()}`),t.sameSite&&o.push(`SameSite=${t.sameSite}`),t.secure&&o.push("Secure"),o.join("; ")}function T(){return a.default.useMemo(()=>({all:()=>w(),get:e=>w()[e],set:(e,n,t)=>{typeof document>"u"||(document.cookie=h(e,n,t))},remove:(e,n)=>{typeof document>"u"||(document.cookie=h(e,"",{...n??{},maxAge:0}))}}),[])}function F(){let e=l?a.default.useContext(l):null;if(!e){let n=I();if(n)return n;if(typeof window>"u")return $;throw new Error("useRouter must be used inside mountWebframezClient()")}return e}function C({active:e}){return(0,i.jsx)("div",{style:{position:"fixed",top:0,left:0,width:"100%",height:3,zIndex:9999,transformOrigin:"left",transform:e?"scaleX(1)":"scaleX(0)",transition:"transform 180ms ease",background:"linear-gradient(90deg, #0ea5e9, #22c55e)"}})}function M(e){return function(){let[t,o]=(0,a.useState)(null),[r,c]=(0,a.useState)(!1);async function u(s,f="push"){c(!0);try{let y=await(0,v.createFromFetch)(fetch(`${e}?path=${encodeURIComponent(s.pathname)}&search=${encodeURIComponent(s.search)}`,{headers:{Accept:"text/x-component"}}));o(y);let R=`${s.pathname}${s.search}`;f==="replace"?history.replaceState(null,"",R):f==="push"&&history.pushState(null,"",R)}catch(m){console.error("[webframez-react] Failed to render route",m),o((0,i.jsx)("p",{children:"Failed to load route."}))}finally{c(!1)}}(0,a.useEffect)(()=>{let s=()=>{u(new URL(window.location.href),"none")};return window.addEventListener("popstate",s),u(new URL(window.location.href),"none"),()=>{window.removeEventListener("popstate",s)}},[]);let p=a.default.useMemo(()=>({push:s=>{u(new URL(s,window.location.origin),"push")},replace:s=>{u(new URL(s,window.location.origin),"replace")},refresh:()=>{u(new URL(window.location.href),"none")}}),[]);return P(p),l?(0,i.jsxs)(l.Provider,{value:p,children:[(0,i.jsx)(C,{active:r}),t??(0,i.jsx)("p",{style:{padding:24},children:"Loading..."})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(C,{active:r}),t??(0,i.jsx)("p",{style:{padding:24},children:"Loading..."})]})}}function W(e={}){let n=e.rootId??"root",t=document.getElementById(n);if(!t)throw new Error(`Missing #${n} element`);let o=typeof window<"u"&&window.__RSC_ENDPOINT,r=e.rscEndpoint??o??"/rsc",c=M(r),u=(0,x.createRoot)(t);return u.render((0,i.jsx)(c,{})),u}
+var k=Object.create;var d=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var n in t)d(e,n,{get:t[n],enumerable:!0})},R=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of O(t))!L.call(e,r)&&r!==n&&d(e,r,{get:()=>t[r],enumerable:!(o=A(t,r))||o.enumerable});return e};var U=(e,t,n)=>(n=e!=null?k(S(e)):{},R(t||!e||!e.__esModule?d(n,"default",{value:e,enumerable:!0}):n,e)),M=e=>R(d({},"__esModule",{value:!0}),e);var D={};T(D,{mountWebframezClient:()=>F,useCookie:()=>B,useRouter:()=>H});module.exports=M(D);var s=U(require("react"),1),E=require("react-dom/client"),_=require("react-server-dom-webpack/client"),i=require("react/jsx-runtime"),$={push:()=>{},replace:()=>{},refresh:()=>{}},l=typeof s.default.createContext=="function"?s.default.createContext(null):null,b="__WEBFRAMEZ_ROUTER__",I="[data-webframez-head='true']";function P(){return typeof window>"u"?null:window[b]??null}function N(e){typeof window>"u"||(window[b]=e)}function h(){let e={},t=typeof document>"u"?"":document.cookie;if(!t||t.trim()==="")return e;for(let n of t.split(";")){let o=n.trim();if(!o)continue;let r=o.indexOf("="),u=r>=0?o.slice(0,r).trim():o,c=r>=0?o.slice(r+1):"";u&&(e[u]=decodeURIComponent(c))}return e}function C(e,t,n={}){let o=[`${e}=${encodeURIComponent(t)}`];return n.path&&o.push(`Path=${n.path}`),n.domain&&o.push(`Domain=${n.domain}`),typeof n.maxAge=="number"&&o.push(`Max-Age=${Math.floor(n.maxAge)}`),n.expires&&o.push(`Expires=${n.expires.toUTCString()}`),n.sameSite&&o.push(`SameSite=${n.sameSite}`),n.secure&&o.push("Secure"),o.join("; ")}function B(){return s.default.useMemo(()=>({all:()=>h(),get:e=>h()[e],set:(e,t,n)=>{typeof document>"u"||(document.cookie=C(e,t,n))},remove:(e,t)=>{typeof document>"u"||(document.cookie=C(e,"",{...t??{},maxAge:0}))}}),[])}function H(){let e=l?s.default.useContext(l):null;if(!e){let t=P();if(t)return t;if(typeof window>"u")return $;throw new Error("useRouter must be used inside mountWebframezClient()")}return e}function v({active:e}){return(0,i.jsx)("div",{style:{position:"fixed",top:0,left:0,width:"100%",height:3,zIndex:9999,transformOrigin:"left",transform:e?"scaleX(1)":"scaleX(0)",transition:"transform 180ms ease",background:"linear-gradient(90deg, #0ea5e9, #22c55e)"}})}function y(e){let t=document.createElement("meta");t.setAttribute("data-webframez-head","true");let n=Object.entries(e).filter(([,o])=>!!o);for(let[o,r]of n)t.setAttribute(o,String(r));document.head.appendChild(t)}function x(e){let t=document.createElement("link");t.setAttribute("data-webframez-head","true");let n=Object.entries(e).filter(([,o])=>!!o);for(let[o,r]of n)t.setAttribute(o,String(r));document.head.appendChild(t)}function W(e){if(!(typeof document>"u")){document.title=e.title||"Webframez React";for(let t of document.head.querySelectorAll(I))t.remove();e.description&&y({name:"description",content:e.description}),e.favicon&&x({rel:"icon",href:e.favicon});for(let t of e.meta??[])y(t);for(let t of e.links??[])x(t)}}function z(e){return function(){let[n,o]=(0,s.useState)(null),[r,u]=(0,s.useState)(!1);async function c(a,p="push"){u(!0);try{let g=await(0,_.createFromFetch)(fetch(`${e}?path=${encodeURIComponent(a.pathname)}&search=${encodeURIComponent(a.search)}`,{headers:{Accept:"text/x-component"}}));W(g.head),o(g.model);let w=`${a.pathname}${a.search}`;p==="replace"?history.replaceState(null,"",w):p==="push"&&history.pushState(null,"",w)}catch(m){console.error("[webframez-react] Failed to render route",m),o((0,i.jsx)("p",{children:"Failed to load route."}))}finally{u(!1)}}(0,s.useEffect)(()=>{let a=()=>{c(new URL(window.location.href),"none")};return window.addEventListener("popstate",a),c(new URL(window.location.href),"none"),()=>{window.removeEventListener("popstate",a)}},[]);let f=s.default.useMemo(()=>({push:a=>{c(new URL(a,window.location.origin),"push")},replace:a=>{c(new URL(a,window.location.origin),"replace")},refresh:()=>{c(new URL(window.location.href),"none")}}),[]);return N(f),l?(0,i.jsxs)(l.Provider,{value:f,children:[(0,i.jsx)(v,{active:r}),n??(0,i.jsx)("p",{style:{padding:24},children:"Loading..."})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(v,{active:r}),n??(0,i.jsx)("p",{style:{padding:24},children:"Loading..."})]})}}function F(e={}){let t=e.rootId??"root",n=document.getElementById(t);if(!n)throw new Error(`Missing #${t} element`);let o=typeof window<"u"&&window.__RSC_ENDPOINT,r=e.rscEndpoint??o??"/rsc",u=z(r),c=(0,E.createRoot)(n);return c.render((0,i.jsx)(u,{})),c}

package/dist/client.js

@@ -1 +1 @@
-import c,{useEffect as E,useState as R}from"react";import{createRoot as y}from"react-dom/client";import{createFromFetch as _}from"react-server-dom-webpack/client";import{Fragment as b,jsx as u,jsxs as C}from"react/jsx-runtime";var k={push:()=>{},replace:()=>{},refresh:()=>{}},d=typeof c.createContext=="function"?c.createContext(null):null,x="__WEBFRAMEZ_ROUTER__";function O(){return typeof window>"u"?null:window[x]??null}function S(e){typeof window>"u"||(window[x]=e)}function g(){let e={},o=typeof document>"u"?"":document.cookie;if(!o||o.trim()==="")return e;for(let t of o.split(";")){let n=t.trim();if(!n)continue;let s=n.indexOf("="),a=s>=0?n.slice(0,s).trim():n,i=s>=0?n.slice(s+1):"";a&&(e[a]=decodeURIComponent(i))}return e}function w(e,o,t={}){let n=[`${e}=${encodeURIComponent(o)}`];return t.path&&n.push(`Path=${t.path}`),t.domain&&n.push(`Domain=${t.domain}`),typeof t.maxAge=="number"&&n.push(`Max-Age=${Math.floor(t.maxAge)}`),t.expires&&n.push(`Expires=${t.expires.toUTCString()}`),t.sameSite&&n.push(`SameSite=${t.sameSite}`),t.secure&&n.push("Secure"),n.join("; ")}function I(){return c.useMemo(()=>({all:()=>g(),get:e=>g()[e],set:(e,o,t)=>{typeof document>"u"||(document.cookie=w(e,o,t))},remove:(e,o)=>{typeof document>"u"||(document.cookie=w(e,"",{...o??{},maxAge:0}))}}),[])}function P(){let e=d?c.useContext(d):null;if(!e){let o=O();if(o)return o;if(typeof window>"u")return k;throw new Error("useRouter must be used inside mountWebframezClient()")}return e}function h({active:e}){return u("div",{style:{position:"fixed",top:0,left:0,width:"100%",height:3,zIndex:9999,transformOrigin:"left",transform:e?"scaleX(1)":"scaleX(0)",transition:"transform 180ms ease",background:"linear-gradient(90deg, #0ea5e9, #22c55e)"}})}function U(e){return function(){let[t,n]=R(null),[s,a]=R(!1);async function i(r,p="push"){a(!0);try{let v=await _(fetch(`${e}?path=${encodeURIComponent(r.pathname)}&search=${encodeURIComponent(r.search)}`,{headers:{Accept:"text/x-component"}}));n(v);let m=`${r.pathname}${r.search}`;p==="replace"?history.replaceState(null,"",m):p==="push"&&history.pushState(null,"",m)}catch(f){console.error("[webframez-react] Failed to render route",f),n(u("p",{children:"Failed to load route."}))}finally{a(!1)}}E(()=>{let r=()=>{i(new URL(window.location.href),"none")};return window.addEventListener("popstate",r),i(new URL(window.location.href),"none"),()=>{window.removeEventListener("popstate",r)}},[]);let l=c.useMemo(()=>({push:r=>{i(new URL(r,window.location.origin),"push")},replace:r=>{i(new URL(r,window.location.origin),"replace")},refresh:()=>{i(new URL(window.location.href),"none")}}),[]);return S(l),d?C(d.Provider,{value:l,children:[u(h,{active:s}),t??u("p",{style:{padding:24},children:"Loading..."})]}):C(b,{children:[u(h,{active:s}),t??u("p",{style:{padding:24},children:"Loading..."})]})}}function T(e={}){let o=e.rootId??"root",t=document.getElementById(o);if(!t)throw new Error(`Missing #${o} element`);let n=typeof window<"u"&&window.__RSC_ENDPOINT,s=e.rscEndpoint??n??"/rsc",a=U(s),i=y(t);return i.render(u(a,{})),i}export{T as mountWebframezClient,I as useCookie,P as useRouter};
+import u,{useEffect as _,useState as w}from"react";import{createRoot as b}from"react-dom/client";import{createFromFetch as k}from"react-server-dom-webpack/client";import{Fragment as M,jsx as c,jsxs as x}from"react/jsx-runtime";var A={push:()=>{},replace:()=>{},refresh:()=>{}},d=typeof u.createContext=="function"?u.createContext(null):null,E="__WEBFRAMEZ_ROUTER__",O="[data-webframez-head='true']";function S(){return typeof window>"u"?null:window[E]??null}function L(e){typeof window>"u"||(window[E]=e)}function R(){let e={},t=typeof document>"u"?"":document.cookie;if(!t||t.trim()==="")return e;for(let o of t.split(";")){let n=o.trim();if(!n)continue;let r=n.indexOf("="),s=r>=0?n.slice(0,r).trim():n,a=r>=0?n.slice(r+1):"";s&&(e[s]=decodeURIComponent(a))}return e}function h(e,t,o={}){let n=[`${e}=${encodeURIComponent(t)}`];return o.path&&n.push(`Path=${o.path}`),o.domain&&n.push(`Domain=${o.domain}`),typeof o.maxAge=="number"&&n.push(`Max-Age=${Math.floor(o.maxAge)}`),o.expires&&n.push(`Expires=${o.expires.toUTCString()}`),o.sameSite&&n.push(`SameSite=${o.sameSite}`),o.secure&&n.push("Secure"),n.join("; ")}function N(){return u.useMemo(()=>({all:()=>R(),get:e=>R()[e],set:(e,t,o)=>{typeof document>"u"||(document.cookie=h(e,t,o))},remove:(e,t)=>{typeof document>"u"||(document.cookie=h(e,"",{...t??{},maxAge:0}))}}),[])}function B(){let e=d?u.useContext(d):null;if(!e){let t=S();if(t)return t;if(typeof window>"u")return A;throw new Error("useRouter must be used inside mountWebframezClient()")}return e}function C({active:e}){return c("div",{style:{position:"fixed",top:0,left:0,width:"100%",height:3,zIndex:9999,transformOrigin:"left",transform:e?"scaleX(1)":"scaleX(0)",transition:"transform 180ms ease",background:"linear-gradient(90deg, #0ea5e9, #22c55e)"}})}function v(e){let t=document.createElement("meta");t.setAttribute("data-webframez-head","true");let o=Object.entries(e).filter(([,n])=>!!n);for(let[n,r]of o)t.setAttribute(n,String(r));document.head.appendChild(t)}function y(e){let t=document.createElement("link");t.setAttribute("data-webframez-head","true");let o=Object.entries(e).filter(([,n])=>!!n);for(let[n,r]of o)t.setAttribute(n,String(r));document.head.appendChild(t)}function T(e){if(!(typeof document>"u")){document.title=e.title||"Webframez React";for(let t of document.head.querySelectorAll(O))t.remove();e.description&&v({name:"description",content:e.description}),e.favicon&&y({rel:"icon",href:e.favicon});for(let t of e.meta??[])v(t);for(let t of e.links??[])y(t)}}function U(e){return function(){let[o,n]=w(null),[r,s]=w(!1);async function a(i,f="push"){s(!0);try{let m=await k(fetch(`${e}?path=${encodeURIComponent(i.pathname)}&search=${encodeURIComponent(i.search)}`,{headers:{Accept:"text/x-component"}}));T(m.head),n(m.model);let g=`${i.pathname}${i.search}`;f==="replace"?history.replaceState(null,"",g):f==="push"&&history.pushState(null,"",g)}catch(p){console.error("[webframez-react] Failed to render route",p),n(c("p",{children:"Failed to load route."}))}finally{s(!1)}}_(()=>{let i=()=>{a(new URL(window.location.href),"none")};return window.addEventListener("popstate",i),a(new URL(window.location.href),"none"),()=>{window.removeEventListener("popstate",i)}},[]);let l=u.useMemo(()=>({push:i=>{a(new URL(i,window.location.origin),"push")},replace:i=>{a(new URL(i,window.location.origin),"replace")},refresh:()=>{a(new URL(window.location.href),"none")}}),[]);return L(l),d?x(d.Provider,{value:l,children:[c(C,{active:r}),o??c("p",{style:{padding:24},children:"Loading..."})]}):x(M,{children:[c(C,{active:r}),o??c("p",{style:{padding:24},children:"Loading..."})]})}}function H(e={}){let t=e.rootId??"root",o=document.getElementById(t);if(!o)throw new Error(`Missing #${t} element`);let n=typeof window<"u"&&window.__RSC_ENDPOINT,r=e.rscEndpoint??n??"/rsc",s=U(r),a=b(o);return a.render(c(s,{})),a}export{H as mountWebframezClient,N as useCookie,B as useRouter};

package/dist/http.cjs

@@ -223,6 +223,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")) {
@@ -291,19 +295,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");
 }
@@ -317,6 +323,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) {
@@ -396,10 +408,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,
@@ -431,10 +444,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,
@@ -479,14 +499,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) {
@@ -510,7 +542,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]
 });
@@ -649,7 +681,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/http.d.ts

@@ -1,15 +1,26 @@
 import type { IncomingMessage, ServerResponse } from "node:http";
 
-export type CreateNodeHandlerOptions = {
+export type WebframezReactRoutePath = `/${string}` | "/";
+export type WebframezReactAssetsPrefix = `${WebframezReactRoutePath}/` | "/";
+
+export interface CreateNodeHandlerPathsOptions {
   distRootDir: string;
   pagesDir?: string;
   manifestPath?: string;
-  assetsPrefix?: string;
-  rscPath?: string;
-  clientScriptUrl?: string;
-  basePath?: string;
-  liveReloadPath?: string | false;
-};
+}
+
+export interface CreateNodeHandlerRoutingOptions {
+  assetsPrefix?: WebframezReactAssetsPrefix;
+  rscPath?: WebframezReactRoutePath;
+  clientScriptUrl?: WebframezReactRoutePath;
+  basePath?: WebframezReactRoutePath;
+  liveReloadPath?: WebframezReactRoutePath | false;
+}
+
+export interface CreateNodeHandlerOptions
+  extends CreateNodeHandlerPathsOptions,
+    CreateNodeHandlerRoutingOptions {
+}
 
 export function createNodeRequestHandler(
   options: CreateNodeHandlerOptions