@webtypen/webframez-react 0.0.1 → 0.0.2

package/README.md

@@ -3,6 +3,7 @@
 React Server Components (RSC) extension for `@webtypen/webframez-core`.
 
 `webframez-react` provides:
+
 - seamless `webframez-core` integration via `initWebframezReact(Route)`
 - file-based routing for `pages/**/index.tsx`
 - layout/error handling with `RouteChildren`
@@ -19,28 +20,135 @@ React Server Components (RSC) extension for `@webtypen/webframez-core`.
 
 ```bash
 npm i @webtypen/webframez-react @webtypen/webframez-core react react-dom react-server-dom-webpack
+npm i -D typescript webpack webpack-cli ts-loader
 ```
 
 ## Quick Start with webframez-core
 
 ```ts
 // server.ts
-import { WebApplication, Route } from "@webtypen/webframez-core";
+import { BaseKernelWeb, Route, WebApplication } from "@webtypen/webframez-core";
 import { initWebframezReact } from "@webtypen/webframez-react/webframez-core";
 
+class Kernel extends BaseKernelWeb {
+  static controller = {};
+  static middleware = {};
+}
+
 initWebframezReact(Route);
 
-Route.renderReact("/react", {
-  distRootDir: `${process.cwd()}/dist`,
+const app = new WebApplication();
+app.boot({
+  kernel: Kernel,
+  routesFunction: () => {
+    Route.renderReact("/react", {
+      distRootDir: `${process.cwd()}/dist`,
+    });
+  },
 });
-
-WebApplication.boot();
 ```
 
 Notes:
+
 - `"/react"` is automatically registered as a catch-all route (`/react/*`).
 - `basePath`, `assetsPrefix`, `rscPath`, and `clientScriptUrl` are derived automatically from the mount path.
 
+## Add to an Existing webframez-core Project
+
+If you already have a running `@webtypen/webframez-core` app, this is the smallest setup to mount React and return a first JSX page.
+
+1. Install dependencies:
+
+```bash
+npm i @webtypen/webframez-react react react-dom react-server-dom-webpack
+npm i -D typescript webpack webpack-cli ts-loader
+```
+
+2. Extend `Route` and mount React inside your existing `routesFunction`:
+
+```ts
+// server.ts
+import path from "node:path";
+import { BaseKernelWeb, Route, WebApplication } from "@webtypen/webframez-core";
+import { initWebframezReact } from "@webtypen/webframez-react/webframez-core";
+
+class Kernel extends BaseKernelWeb {
+  static controller = {};
+  static middleware = {};
+}
+
+initWebframezReact(Route);
+
+const app = new WebApplication();
+app.boot({
+  kernel: Kernel,
+  port: 3000,
+  routesFunction: () => {
+    // Your existing core routes can stay here.
+    Route.renderReact("/app", {
+      distRootDir: path.resolve(process.cwd(), "dist"),
+    });
+  },
+});
+```
+
+3. Create a minimal file-router page setup:
+
+```tsx
+// pages/layout.tsx
+"use server";
+
+import React from "react";
+import { RouteChildren } from "@webtypen/webframez-react/router";
+
+export default function Layout() {
+  return (
+    <main>
+      <RouteChildren />
+    </main>
+  );
+}
+```
+
+```tsx
+// pages/index.tsx
+"use server";
+
+import React from "react";
+
+export default function HomePage() {
+  return <h1>Hello from webframez-react + JSX</h1>;
+}
+```
+
+4. Create the client entry:
+
+```tsx
+// src/client.tsx
+import { mountWebframezClient } from "@webtypen/webframez-react/client";
+
+mountWebframezClient();
+```
+
+5. Add build scripts (with automatic config fallback):
+
+```json
+{
+  "scripts": {
+    "build:server": "webframez-react build:server",
+    "build:client": "webframez-react build:client",
+    "build": "npm run build:server && npm run build:client",
+    "watch:server": "webframez-react watch:server",
+    "watch:client": "webframez-react watch:client",
+    "serve:watch": "node --watch --conditions react-server start-server.cjs",
+    "watch": "sh -c 'npm run watch:server & npm run watch:client & npm run serve:watch & wait'",
+    "dev": "sh -c 'npm run watch:server & npm run watch:client & npm run serve:watch & wait'"
+  }
+}
+```
+
+After build, your first page is available at `http://localhost:3000/app`.
+
 ## Page Structure (File-Based Routing)
 
 Example:
@@ -60,7 +168,7 @@ pages/
 "use server";
 
 import React from "react";
-import { RouteChildren } from "webframez-react/router";
+import { RouteChildren } from "@webtypen/webframez-react/router";
 
 export default function Layout() {
   return (
@@ -81,7 +189,7 @@ Every server page gets `abort()` via `RouteContext`.
 ```tsx
 "use server";
 
-import type { PageProps } from "webframez-react/types";
+import type { PageProps } from "@webtypen/webframez-react/types";
 
 export default function AccountPage({ params, abort }: PageProps) {
   if (params.username !== "jane") {
@@ -97,6 +205,7 @@ export default function AccountPage({ params, abort }: PageProps) {
 ```
 
 Behavior:
+
 - default without options: `404` + `"Page not found"`
 - rendered through `pages/errors.tsx` (same behavior as unmatched routes)
 - `pathname` is provided automatically by context
@@ -106,7 +215,7 @@ Behavior:
 
 ```tsx
 // src/client.tsx
-import { mountWebframezClient } from "webframez-react/client";
+import { mountWebframezClient } from "@webtypen/webframez-react/client";
 
 mountWebframezClient();
 ```
@@ -126,7 +235,7 @@ mountWebframezClient({
 "use client";
 
 import React from "react";
-import { Link, Redirect } from "webframez-react/navigation";
+import { Link, Redirect } from "@webtypen/webframez-react/navigation";
 
 export function Nav() {
   return (
@@ -147,6 +256,7 @@ export function Guard({ loggedIn }: { loggedIn: boolean }) {
 ```
 
 Note:
+
 - `Link` and `Redirect` automatically use the basename from `Route.renderReact()`.
 - You can override it per usage via `basename`.
 
@@ -156,7 +266,7 @@ Note:
 "use client";
 
 import React from "react";
-import { useCookie, useRouter } from "webframez-react/client";
+import { useCookie, useRouter } from "@webtypen/webframez-react/client";
 
 export default function LoginAction() {
   const cookie = useCookie();
@@ -177,17 +287,17 @@ export default function LoginAction() {
 
 ## Public Entrypoints
 
-- `webframez-react`
+- `@webtypen/webframez-react`
   - `createNodeRequestHandler`, `createFileRouter`, `createHTMLShell`, `sendRSC`, `createRSCHandler`
-- `webframez-react/webframez-core`
+- `@webtypen/webframez-react/webframez-core`
   - `initWebframezReact`
-- `webframez-react/router`
+- `@webtypen/webframez-react/router`
   - `RouteChildren`
-- `webframez-react/client`
+- `@webtypen/webframez-react/client`
   - `mountWebframezClient`, `useRouter`, `useCookie`
-- `webframez-react/navigation`
+- `@webtypen/webframez-react/navigation`
   - `Link`, `Redirect`
-- `webframez-react/types`
+- `@webtypen/webframez-react/types`
   - all public types (`RouteContext`, `PageProps`, `ErrorPageProps`, ...)
 
 ## package.json Scripts
@@ -197,22 +307,31 @@ Example scripts for a `webframez-react` app:
 ```json
 {
   "scripts": {
-    "build:server": "tsc -p tsconfig.server.json",
-    "build:client": "webpack --config webpack.client.cjs",
+    "build:server": "webframez-react build:server",
+    "build:client": "webframez-react build:client",
     "build": "npm run build:server && npm run build:client",
     "start": "node --conditions react-server start-server.cjs",
-    "watch:server": "tsc -p tsconfig.server.json --watch --preserveWatchOutput",
-    "watch:client": "webpack --config webpack.client.cjs --watch",
+    "watch:server": "webframez-react watch:server",
+    "watch:client": "webframez-react watch:client",
     "serve:watch": "node --watch --conditions react-server start-server.cjs",
+    "watch": "sh -c 'npm run watch:server & npm run watch:client & npm run serve:watch & wait'",
     "dev": "sh -c 'npm run watch:server & npm run watch:client & npm run serve:watch & wait'"
   }
 }
 ```
 
 Notes:
+
+- `webframez-react` CLI first checks project overrides and falls back to package defaults:
+  - `tsconfig.server.json`
+  - `webpack.client.cjs`
+  - `webpack.server.cjs`
+- `webpack.server.cjs` is optional. Default flow compiles server with `tsc`. Use webpack-server only if you explicitly want a bundled server build:
+  - `webframez-react build:server:webpack`
+  - `webframez-react watch:server:webpack`
 - `build` compiles server output (`pages`, `server.ts`) and client output (`client.tsx` bundle + RSC manifests).
 - `start` runs the built app in React Server mode.
-- `dev` enables watch mode for TypeScript and webpack and restarts Node automatically on server output changes.
+- `watch` and `dev` run the same full watch pipeline and restart Node automatically on server output changes.
 
 ## Build
 

package/bin/webframez-react.mjs

@@ -0,0 +1,158 @@
+#!/usr/bin/env node
+
+import fs from "node:fs";
+import path from "node:path";
+import { spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+
+const binFilePath = fileURLToPath(import.meta.url);
+const packageRoot = path.resolve(path.dirname(binFilePath), "..");
+const projectRoot = process.cwd();
+
+const command = process.argv[2];
+const passthroughStart = process.argv[3] === "--" ? 4 : 3;
+const passthroughArgs = process.argv.slice(passthroughStart);
+
+function printHelp() {
+  console.log(
+    [
+      "webframez-react CLI",
+      "",
+      "Usage:",
+      "  webframez-react build:server",
+      "  webframez-react watch:server",
+      "  webframez-react build:client",
+      "  webframez-react watch:client",
+      "  webframez-react build:server:webpack",
+      "  webframez-react watch:server:webpack",
+      "",
+      "Config fallback order:",
+      "  1) project root override file",
+      "  2) package default in @webtypen/webframez-react/defaults",
+      "",
+      "Override file names:",
+      "  - tsconfig.server.json",
+      "  - webpack.client.cjs",
+      "  - webpack.server.cjs",
+    ].join("\n"),
+  );
+}
+
+function hasFlag(flag) {
+  return passthroughArgs.includes(flag);
+}
+
+function resolveConfig(localFileName, fallbackFileName) {
+  const localPath = path.resolve(projectRoot, localFileName);
+  if (fs.existsSync(localPath)) {
+    return {
+      path: localPath,
+      source: "project",
+      name: localFileName,
+    };
+  }
+
+  return {
+    path: path.resolve(packageRoot, "defaults", fallbackFileName),
+    source: "package",
+    name: fallbackFileName,
+  };
+}
+
+function resolveBinary(name) {
+  const extension = process.platform === "win32" ? ".cmd" : "";
+  const localBinary = path.resolve(projectRoot, "node_modules", ".bin", `${name}${extension}`);
+  if (fs.existsSync(localBinary)) {
+    return localBinary;
+  }
+
+  return name;
+}
+
+function run(binaryName, args) {
+  const binary = resolveBinary(binaryName);
+
+  return new Promise((resolve, reject) => {
+    const child = spawn(binary, args, {
+      cwd: projectRoot,
+      stdio: "inherit",
+      shell: false,
+    });
+
+    child.on("error", (error) => {
+      reject(error);
+    });
+
+    child.on("close", (code) => {
+      resolve(code || 0);
+    });
+  });
+}
+
+async function main() {
+  if (!command || command === "--help" || command === "-h") {
+    printHelp();
+    return;
+  }
+
+  if (command === "build:server" || command === "watch:server") {
+    const config = resolveConfig("tsconfig.server.json", "tsconfig.server.json");
+    console.log(`[webframez-react] tsc config (${config.source}): ${config.path}`);
+
+    const args = ["-p", config.path, ...passthroughArgs];
+    if (command === "watch:server") {
+      if (!hasFlag("--watch")) {
+        args.push("--watch");
+      }
+      if (!hasFlag("--preserveWatchOutput")) {
+        args.push("--preserveWatchOutput");
+      }
+    }
+
+    const code = await run("tsc", args);
+    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}`);
+
+    const args = ["--config", config.path, ...passthroughArgs];
+    if (command === "watch:client" && !hasFlag("--watch")) {
+      args.push("--watch");
+    }
+
+    const code = await run("webpack", args);
+    process.exit(code);
+    return;
+  }
+
+  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}`);
+
+    const args = ["--config", config.path, ...passthroughArgs];
+    if (command === "watch:server:webpack" && !hasFlag("--watch")) {
+      args.push("--watch");
+    }
+
+    const code = await run("webpack", args);
+    process.exit(code);
+    return;
+  }
+
+  console.error(`[webframez-react] Unknown command: ${command}`);
+  printHelp();
+  process.exit(1);
+}
+
+main().catch((error) => {
+  console.error("[webframez-react] Build command failed.");
+  if (error && typeof error === "object" && "message" in error) {
+    console.error(String(error.message));
+  } else {
+    console.error(error);
+  }
+  process.exit(1);
+});

package/defaults/tsconfig.server.json

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

package/defaults/webpack.client.cjs

@@ -0,0 +1,61 @@
+const path = require("path");
+const ReactFlightWebpackPlugin = require("react-server-dom-webpack/plugin");
+
+const projectRoot = process.cwd();
+const frameworkDistDir = path.resolve(__dirname, "..", "dist");
+
+module.exports = {
+  mode: process.env.NODE_ENV === "production" ? "production" : "development",
+  entry: {
+    client: path.resolve(projectRoot, "src/client.tsx"),
+  },
+  output: {
+    path: path.resolve(projectRoot, "dist"),
+    filename: "[name].js",
+    chunkFilename: "chunks/[name]-[contenthash].js",
+    publicPath: "auto",
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.[tj]sx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "ts-loader",
+          options: {
+            transpileOnly: true,
+          },
+        },
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: false,
+    runtimeChunk: false,
+  },
+  plugins: [
+    new ReactFlightWebpackPlugin({
+      isServer: false,
+      clientReferences: [
+        {
+          directory: path.resolve(projectRoot, "dist/pages"),
+          recursive: true,
+          include: /\.js$/,
+        },
+        {
+          directory: path.resolve(projectRoot, "dist/src/components"),
+          recursive: true,
+          include: /\.js$/,
+        },
+        {
+          directory: frameworkDistDir,
+          recursive: false,
+          include: /navigation\.(js|cjs)$/,
+        },
+      ],
+    }),
+  ],
+};

package/defaults/webpack.server.cjs

@@ -0,0 +1,33 @@
+const path = require("path");
+
+const projectRoot = process.cwd();
+
+module.exports = {
+  mode: process.env.NODE_ENV === "production" ? "production" : "development",
+  target: "node",
+  entry: path.resolve(projectRoot, "src/server.ts"),
+  output: {
+    path: path.resolve(projectRoot, "dist"),
+    filename: "server.cjs",
+    libraryTarget: "commonjs2",
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"],
+    conditionNames: ["react-server", "node", "import", "require", "default"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.[tj]sx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "ts-loader",
+          options: {
+            transpileOnly: true,
+          },
+        },
+      },
+    ],
+  },
+  externalsPresets: { node: true },
+};

package/dist/http.cjs

@@ -493,8 +493,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]

package/dist/http.js

@@ -468,8 +468,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]

package/dist/index.cjs

@@ -530,8 +530,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]

package/dist/index.js

@@ -494,8 +494,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]

package/dist/webframez-core.cjs

@@ -496,8 +496,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]

package/dist/webframez-core.js

@@ -468,8 +468,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]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webtypen/webframez-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "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,16 @@
       "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",
+    "./cli": "./bin/webframez-react.mjs"
   },
   "files": [
-    "dist"
+    "dist",
+    "defaults",
+    "bin"
   ],
   "scripts": {
     "clean": "rm -rf dist",