@webtypen/webframez-react 0.0.35 → 0.0.36

package/bin/webframez-react.mjs

@@ -4,16 +4,18 @@ import fs from "node:fs";
 import fsp from "node:fs/promises";
 import path from "node:path";
 import { spawn } from "node:child_process";
+import { createRequire } from "node:module";
 import { fileURLToPath, pathToFileURL } from "node:url";
 
 const binFilePath = fileURLToPath(import.meta.url);
 const packageRoot = path.resolve(path.dirname(binFilePath), "..");
 const projectRoot = process.cwd();
+const require = createRequire(import.meta.url);
 
 const command = process.argv[2];
 const passthroughStart = process.argv[3] === "--" ? 4 : 3;
 const passthroughArgs = process.argv.slice(passthroughStart);
-const customArgPrefixes = ["--client-entry", "--server-entry"];
+const customArgPrefixes = ["--client-entry", "--server-entry", "--routes", "--out-dir", "--runtime-out-dir"];
 
 function printHelp() {
   console.log(
@@ -25,6 +27,8 @@ function printHelp() {
       "  webframez-react watch:server",
       "  webframez-react build:client",
       "  webframez-react watch:client",
+      "  webframez-react build:routes --routes=dist/app/routes.js --out-dir=dist",
+      "  webframez-react watch:routes --routes=dist/app/routes.js --out-dir=dist",
       "  webframez-react build:server:webpack",
       "  webframez-react watch:server:webpack",
       "  webframez-react exec -- <command> [args...]",
@@ -44,6 +48,9 @@ function printHelp() {
       "Optional CLI overrides:",
       "  --client-entry=src/client.tsx",
       "  --server-entry=src/server.ts",
+      "  --routes=dist/app/routes.js",
+      "  --out-dir=dist",
+      "  --runtime-out-dir=dist",
     ].join("\n"),
   );
 }
@@ -70,6 +77,14 @@ function readCustomArg(name) {
   return null;
 }
 
+function requireCustomArg(name, description) {
+  const value = readCustomArg(name);
+  if (!value) {
+    throw new Error(`Missing ${description || name}.`);
+  }
+  return value;
+}
+
 function stripCustomArgs(args) {
   const filtered = [];
   for (let index = 0; index < args.length; index += 1) {
@@ -121,6 +136,55 @@ function buildReactServerNodeOptions() {
   return `${existing}--conditions react-server -r @webtypen/webframez-react/register`.trim();
 }
 
+function hasReactServerCondition() {
+  if (process.execArgv.includes("--conditions=react-server")) {
+    return true;
+  }
+
+  for (let index = 0; index < process.execArgv.length; index += 1) {
+    if (process.execArgv[index] === "--conditions" && process.execArgv[index + 1] === "react-server") {
+      return true;
+    }
+  }
+
+  return /\b--conditions(?:=|\s+)react-server\b/.test(process.env.NODE_OPTIONS || "");
+}
+
+async function reexecWithReactServerConditionIfNeeded() {
+  if (
+    (command !== "build:routes" && command !== "watch:routes") ||
+    hasReactServerCondition() ||
+    process.env.WEBFRAMEZ_REACT_CLI_REEXEC === "1"
+  ) {
+    return false;
+  }
+
+  const child = spawn(process.execPath, [
+    "--conditions",
+    "react-server",
+    "--require",
+    path.resolve(packageRoot, "register.cjs"),
+    binFilePath,
+    ...process.argv.slice(2),
+  ], {
+    cwd: projectRoot,
+    stdio: "inherit",
+    shell: false,
+    env: {
+      ...process.env,
+      WEBFRAMEZ_REACT_CLI_REEXEC: "1",
+    },
+  });
+
+  const code = await new Promise((resolve, reject) => {
+    child.on("error", reject);
+    child.on("close", (exitCode) => resolve(exitCode || 0));
+  });
+
+  process.exit(code);
+  return true;
+}
+
 async function loadProjectConfig() {
   const configFiles = [
     "webframez-react.config.mjs",
@@ -216,12 +280,270 @@ function run(binaryName, args, envAdditions = {}) {
   });
 }
 
+function start(binaryName, args, envAdditions = {}) {
+  const binary = resolveBinary(binaryName);
+
+  return spawn(binary, args, {
+    cwd: projectRoot,
+    stdio: "inherit",
+    shell: false,
+    env: {
+      ...process.env,
+      ...envAdditions,
+    },
+  });
+}
+
+function fileExists(filePath) {
+  return fs.existsSync(filePath);
+}
+
+function mapTargetPath(value, fromRoot, toRoot) {
+  if (!value) {
+    return value;
+  }
+
+  const relative = path.relative(fromRoot, value);
+  if (relative.startsWith("..") || path.isAbsolute(relative)) {
+    return value;
+  }
+
+  return path.resolve(toRoot, relative);
+}
+
+async function loadRouteBuildTargets(routesPath, outDir, runtimeOutDir) {
+  const coreModulePath = path.resolve(packageRoot, "dist", "webframez-core.cjs");
+  const core = require(coreModulePath);
+  const Module = require("node:module");
+  const originalLoad = Module._load;
+  const previousOutDir = process.env.WEBFRAMEZ_REACT_OUT_DIR;
+  const previousCaptureRoutes = process.env.WEBFRAMEZ_REACT_CAPTURE_ROUTES;
+  const fakeRoute = {
+    extend(name, factory) {
+      this[name] = factory(this);
+      return this;
+    },
+    group(_options, callback) {
+      if (typeof callback === "function") {
+        callback();
+      }
+    },
+    get() {},
+    post() {},
+    put() {},
+    delete() {},
+  };
+
+  process.env.WEBFRAMEZ_REACT_OUT_DIR = runtimeOutDir;
+  process.env.WEBFRAMEZ_REACT_CAPTURE_ROUTES = "1";
+  core.clearRegisteredReactBuildTargets();
+  Module._load = function webframezReactCaptureModuleLoad(request, parent, isMain) {
+    if (request === "@webtypen/webframez-react") {
+      return require(path.resolve(packageRoot, "dist", "index.cjs"));
+    }
+    if (request === "@webtypen/webframez-react/http") {
+      return require(path.resolve(packageRoot, "dist", "http.cjs"));
+    }
+    if (request === "@webtypen/webframez-react/webframez-core") {
+      return require(path.resolve(packageRoot, "dist", "webframez-core.cjs"));
+    }
+    if (request === "@webtypen/webframez-react/navigation") {
+      return require(path.resolve(packageRoot, "dist", "navigation.cjs"));
+    }
+    if (request === "@webtypen/webframez-react/route-slot") {
+      return require(path.resolve(packageRoot, "dist", "route-slot.cjs"));
+    }
+    if (request === "@webtypen/webframez-react/client") {
+      return require(path.resolve(packageRoot, "dist", "client.cjs"));
+    }
+
+    if (
+      request === "@webtypen/webframez-core" ||
+      request === "webframez-core" ||
+      request === "@webtypen/webframez-core/dist/Router/Route" ||
+      request === "webframez-core/dist/Router/Route"
+    ) {
+      return {
+        Route: fakeRoute,
+      };
+    }
+
+    return originalLoad.call(this, request, parent, isMain);
+  };
+
+  try {
+    const resolvedRoutesPath = path.resolve(projectRoot, routesPath);
+    await import(pathToFileURL(resolvedRoutesPath).href);
+    return core.getRegisteredReactBuildTargets().map((target) => ({
+      ...target,
+      runtimeDistRootDir: target.distRootDir,
+      runtimePagesDir: target.pagesDir,
+      runtimeManifestPath: target.manifestPath,
+      distRootDir: mapTargetPath(target.distRootDir, runtimeOutDir, outDir),
+      pagesDir: mapTargetPath(target.pagesDir, runtimeOutDir, outDir),
+      manifestPath: mapTargetPath(target.manifestPath, runtimeOutDir, outDir),
+    }));
+  } finally {
+    Module._load = originalLoad;
+    if (previousOutDir === undefined) {
+      delete process.env.WEBFRAMEZ_REACT_OUT_DIR;
+    } else {
+      process.env.WEBFRAMEZ_REACT_OUT_DIR = previousOutDir;
+    }
+    if (previousCaptureRoutes === undefined) {
+      delete process.env.WEBFRAMEZ_REACT_CAPTURE_ROUTES;
+    } else {
+      process.env.WEBFRAMEZ_REACT_CAPTURE_ROUTES = previousCaptureRoutes;
+    }
+  }
+}
+
+async function waitForFile(filePath) {
+  const startedAt = Date.now();
+
+  while (!fileExists(filePath)) {
+    if (Date.now() - startedAt > 30000) {
+      throw new Error(`Timed out waiting for ${filePath}.`);
+    }
+
+    console.log(`[webframez-react] waiting for routes file: ${filePath}`);
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  }
+}
+
+async function buildRouteStyles(target) {
+  if (!target.styleSrcPath || !fileExists(target.styleSrcPath)) {
+    return 0;
+  }
+
+  const outputDir = path.join(target.distRootDir, "scss");
+  await fsp.mkdir(outputDir, { recursive: true });
+  console.log(`[webframez-react] sass: ${target.styleSrcPath} -> ${outputDir}`);
+
+  return run("sass", ["--no-source-map", `${target.styleSrcPath}:${outputDir}`]);
+}
+
+async function buildRouteClient(target, passthroughArgsClean) {
+  const config = {
+    path: path.resolve(packageRoot, "defaults", "webpack.client.cjs"),
+    source: "package",
+  };
+  const clientEntry = target.clientEntryPath || path.resolve(packageRoot, "defaults", "default-client.js");
+
+  console.log(`[webframez-react] route: ${target.path}`);
+  console.log(`[webframez-react] webpack config (${config.source}): ${config.path}`);
+  console.log(`[webframez-react] pages: ${target.pagesDir}`);
+  console.log(`[webframez-react] dist: ${target.distRootDir}`);
+  console.log(`[webframez-react] client entry: ${clientEntry}`);
+
+  return run(
+    "webpack",
+    ["--config", config.path, ...passthroughArgsClean],
+    {
+      WEBFRAMEZ_REACT_CLIENT_ENTRY: clientEntry,
+      WEBFRAMEZ_REACT_DIST_ROOT_DIR: target.distRootDir,
+      WEBFRAMEZ_REACT_PAGES_DIR: target.pagesDir,
+      WEBFRAMEZ_REACT_RUNTIME_DIST_ROOT_DIR: target.runtimeDistRootDir || target.distRootDir,
+      WEBFRAMEZ_REACT_RUNTIME_PAGES_DIR: target.runtimePagesDir || target.pagesDir,
+    },
+  );
+}
+
+function watchRouteStyles(target) {
+  if (!target.styleSrcPath || !fileExists(target.styleSrcPath)) {
+    return null;
+  }
+
+  const outputDir = path.join(target.distRootDir, "scss");
+  fs.mkdirSync(outputDir, { recursive: true });
+  console.log(`[webframez-react] sass watch: ${target.styleSrcPath} -> ${outputDir}`);
+
+  return start("sass", ["--watch", "--poll", "--no-source-map", `${target.styleSrcPath}:${outputDir}`]);
+}
+
+function watchRouteClient(target, passthroughArgsClean) {
+  const config = {
+    path: path.resolve(packageRoot, "defaults", "webpack.client.cjs"),
+    source: "package",
+  };
+  const clientEntry = target.clientEntryPath || path.resolve(packageRoot, "defaults", "default-client.js");
+  const args = ["--config", config.path, ...passthroughArgsClean];
+
+  if (!args.includes("--watch")) {
+    args.push("--watch");
+  }
+
+  console.log(`[webframez-react] route watch: ${target.path}`);
+  console.log(`[webframez-react] webpack config (${config.source}): ${config.path}`);
+  console.log(`[webframez-react] pages: ${target.pagesDir}`);
+  console.log(`[webframez-react] dist: ${target.distRootDir}`);
+  console.log(`[webframez-react] client entry: ${clientEntry}`);
+
+  return start("webpack", args, {
+    WEBFRAMEZ_REACT_CLIENT_ENTRY: clientEntry,
+    WEBFRAMEZ_REACT_DIST_ROOT_DIR: target.distRootDir,
+    WEBFRAMEZ_REACT_PAGES_DIR: target.pagesDir,
+    WEBFRAMEZ_REACT_RUNTIME_DIST_ROOT_DIR: target.runtimeDistRootDir || target.distRootDir,
+    WEBFRAMEZ_REACT_RUNTIME_PAGES_DIR: target.runtimePagesDir || target.pagesDir,
+  });
+}
+
+async function watchRouteTargets(targets, passthroughArgsClean) {
+  const children = [];
+
+  for (const target of targets) {
+    const styleChild = watchRouteStyles(target);
+    if (styleChild) {
+      children.push(styleChild);
+    }
+
+    children.push(watchRouteClient(target, passthroughArgsClean));
+  }
+
+  if (children.length === 0) {
+    return;
+  }
+
+  await new Promise((resolve, reject) => {
+    for (const child of children) {
+      child.on("error", reject);
+      child.on("close", (code) => {
+        if (code && code !== 0) {
+          reject(new Error(`[webframez-react] watch child exited with code ${code}.`));
+          return;
+        }
+
+        resolve();
+      });
+    }
+  });
+}
+
+async function validateRouteBuild(target) {
+  const requiredFiles = [
+    path.join(target.distRootDir, "client.js"),
+    path.join(target.distRootDir, "react-client-manifest.json"),
+    path.join(target.distRootDir, "react-ssr-manifest.json"),
+  ];
+
+  const missing = requiredFiles.filter((filePath) => !fileExists(filePath));
+  if (missing.length > 0) {
+    throw new Error(
+      `Route ${target.path} build is incomplete. Missing: ${missing.join(", ")}`,
+    );
+  }
+}
+
 async function main() {
   if (!command || command === "--help" || command === "-h") {
     printHelp();
     return;
   }
 
+  if (await reexecWithReactServerConditionIfNeeded()) {
+    return;
+  }
+
   const projectConfig = await loadProjectConfig();
   const customClientEntry = readCustomArg("--client-entry");
   const customServerEntry = readCustomArg("--server-entry");
@@ -280,6 +602,41 @@ async function main() {
     return;
   }
 
+  if (command === "build:routes" || command === "watch:routes") {
+    const routesPath = requireCustomArg("--routes", "--routes=<compiled routes file>");
+    const outDir = path.resolve(projectRoot, readCustomArg("--out-dir") || "dist");
+    const runtimeOutDir = path.resolve(projectRoot, readCustomArg("--runtime-out-dir") || outDir);
+    await waitForFile(path.resolve(projectRoot, routesPath));
+    const targets = await loadRouteBuildTargets(routesPath, outDir, runtimeOutDir);
+
+    if (targets.length === 0) {
+      throw new Error(`[webframez-react] No React routes were registered by ${routesPath}.`);
+    }
+
+    if (command === "watch:routes") {
+      await watchRouteTargets(targets, passthroughArgsClean);
+      return;
+    }
+
+    for (const target of targets) {
+      const sassCode = await buildRouteStyles(target);
+      if (sassCode !== 0) {
+        process.exit(sassCode);
+        return;
+      }
+
+      const webpackCode = await buildRouteClient(target, passthroughArgsClean);
+      if (webpackCode !== 0) {
+        process.exit(webpackCode);
+        return;
+      }
+
+      await validateRouteBuild(target);
+    }
+
+    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}`);

package/defaults/default-client.js

@@ -0,0 +1,3 @@
+import { mountWebframezClient } from "@webtypen/webframez-react/client";
+
+mountWebframezClient();

package/defaults/webpack.client.cjs

@@ -1,30 +1,201 @@
+const fs = require("fs");
 const path = require("path");
 const ReactFlightWebpackPlugin = require("react-server-dom-webpack/plugin");
+const { fileURLToPath, pathToFileURL } = require("url");
 
 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");
+  : path.resolve(__dirname, "default-client.js");
+const pagesDir = process.env.WEBFRAMEZ_REACT_PAGES_DIR
+  ? path.resolve(projectRoot, process.env.WEBFRAMEZ_REACT_PAGES_DIR)
+  : path.resolve(projectRoot, "dist/pages");
+const distDir = process.env.WEBFRAMEZ_REACT_DIST_ROOT_DIR
+  ? path.resolve(projectRoot, process.env.WEBFRAMEZ_REACT_DIST_ROOT_DIR)
+  : path.resolve(projectRoot, "dist");
+const runtimePagesDir = process.env.WEBFRAMEZ_REACT_RUNTIME_PAGES_DIR
+  ? path.resolve(projectRoot, process.env.WEBFRAMEZ_REACT_RUNTIME_PAGES_DIR)
+  : pagesDir;
 const isWatchMode = process.argv.includes("--watch");
 const mode =
   process.env.NODE_ENV === "production" || (typeof process.env.NODE_ENV === "undefined" && !isWatchMode)
     ? "production"
     : "development";
+const frameworkCacheFiles = [
+  path.join(frameworkDistDir, "client.js"),
+  path.join(frameworkDistDir, "route-slot.js"),
+  path.join(frameworkDistDir, "navigation.js"),
+].filter((filePath) => fs.existsSync(filePath));
+const frameworkCacheVersion = frameworkCacheFiles
+  .map((filePath) => `${path.basename(filePath)}:${fs.statSync(filePath).mtimeMs}:${fs.statSync(filePath).size}`)
+  .join("|");
+
+fs.mkdirSync(distDir, { recursive: true });
+fs.mkdirSync(pagesDir, { recursive: true });
+
+class ClientManifestExportAliasesPlugin {
+  apply(compiler) {
+    compiler.hooks.done.tap("ClientManifestExportAliasesPlugin", () => {
+      const manifestPath = path.join(distDir, "react-client-manifest.json");
+      if (!fs.existsSync(manifestPath)) {
+        return;
+      }
+
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+      let changed = false;
+
+      for (const [key, value] of Object.entries(manifest)) {
+        if (!key.startsWith("file://")) {
+          continue;
+        }
+
+        let absolutePath = null;
+        try {
+          absolutePath = fileURLToPath(key);
+        } catch (error) {
+          absolutePath = null;
+        }
+
+        if (!absolutePath || !fs.existsSync(absolutePath)) {
+          continue;
+        }
+
+        const relativeToProject = path.relative(projectRoot, absolutePath).split(path.sep).join("/");
+        const relativeAlias = relativeToProject.startsWith(".") ? relativeToProject : `./${relativeToProject}`;
+        const aliases = [
+          { key, force: false },
+          { key: absolutePath, force: false },
+          { key: relativeAlias, force: false },
+          { key: relativeToProject, force: false },
+        ];
+        const relativeToPagesDir = path.relative(pagesDir, absolutePath);
+
+        if (!relativeToPagesDir.startsWith("..") && !path.isAbsolute(relativeToPagesDir)) {
+          const runtimeAbsolutePath = path.resolve(runtimePagesDir, relativeToPagesDir);
+          const runtimeRelativeToProject = path.relative(projectRoot, runtimeAbsolutePath).split(path.sep).join("/");
+          const runtimeRelativeAlias = runtimeRelativeToProject.startsWith(".")
+            ? runtimeRelativeToProject
+            : `./${runtimeRelativeToProject}`;
+          aliases.push(
+            { key: pathToFileURL(runtimeAbsolutePath).href, force: false },
+            { key: runtimeAbsolutePath, force: false },
+            { key: runtimeRelativeAlias, force: false },
+            { key: runtimeRelativeToProject, force: false },
+          );
+        }
+
+        const relativeToFrameworkDist = path.relative(frameworkDistDir, absolutePath);
+        if (
+          !relativeToFrameworkDist.startsWith("..") &&
+          !path.isAbsolute(relativeToFrameworkDist) &&
+          /\.(js)$/.test(relativeToFrameworkDist) &&
+          /^(navigation|route-slot)\.js$/.test(relativeToFrameworkDist)
+        ) {
+          const cjsAbsolutePath = absolutePath.replace(/\.js$/, ".cjs");
+          if (fs.existsSync(cjsAbsolutePath)) {
+            const cjsRelativeToProject = path.relative(projectRoot, cjsAbsolutePath).split(path.sep).join("/");
+            const cjsRelativeAlias = cjsRelativeToProject.startsWith(".")
+              ? cjsRelativeToProject
+              : `./${cjsRelativeToProject}`;
+            aliases.push(
+              { key: pathToFileURL(cjsAbsolutePath).href, force: true },
+              { key: cjsAbsolutePath, force: true },
+              { key: cjsRelativeAlias, force: true },
+              { key: cjsRelativeToProject, force: true },
+            );
+          }
+        }
+
+        for (const alias of aliases) {
+          if (alias.force || !(alias.key in manifest)) {
+            manifest[alias.key] = value;
+            changed = true;
+          }
+        }
+
+        const source = fs.readFileSync(absolutePath, "utf-8");
+        const exportNames = new Set();
+        const exportPattern = /exports\.([A-Za-z0-9_$]+)\s*=/g;
+        let match = null;
+        while ((match = exportPattern.exec(source)) !== null) {
+          if (match[1] && match[1] !== "__esModule") {
+            exportNames.add(match[1]);
+          }
+        }
+
+        for (const exportName of exportNames) {
+          const exportValue =
+            value && typeof value === "object"
+              ? {
+                  ...value,
+                  name: exportName,
+                }
+              : value;
+          for (const alias of aliases) {
+            const aliasKey = `${alias.key}#${exportName}`;
+            if (alias.force || !(aliasKey in manifest)) {
+              manifest[aliasKey] = exportValue;
+              changed = true;
+            }
+          }
+
+          if (exportName === "default") {
+            for (const alias of aliases) {
+              const aliasKey = `${alias.key}#`;
+              if (alias.force || !(aliasKey in manifest)) {
+                manifest[aliasKey] = exportValue;
+                changed = true;
+              }
+            }
+          }
+        }
+      }
+
+      if (changed) {
+        fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+      }
+    });
+  }
+}
 
 module.exports = {
   mode,
+  cache: {
+    type: "filesystem",
+    version: frameworkCacheVersion,
+    buildDependencies: {
+      config: [__filename, ...frameworkCacheFiles],
+    },
+  },
   entry: {
     client: clientEntry,
   },
   output: {
-    path: path.resolve(projectRoot, "dist"),
-    filename: "[name].js",
+    path: distDir,
+    filename: "client.js",
     chunkFilename: "chunks/[name]-[contenthash].js",
     publicPath: "auto",
   },
   resolve: {
     extensions: [".tsx", ".ts", ".js"],
+    modules: [path.resolve(projectRoot, "node_modules"), "node_modules"],
+    alias: {
+      react: path.resolve(projectRoot, "node_modules", "react"),
+      "react-dom": path.resolve(projectRoot, "node_modules", "react-dom"),
+      "react/jsx-runtime": path.resolve(projectRoot, "node_modules", "react", "jsx-runtime.js"),
+      "react/jsx-dev-runtime": path.resolve(projectRoot, "node_modules", "react", "jsx-dev-runtime.js"),
+      scheduler: path.resolve(projectRoot, "node_modules", "scheduler"),
+    },
+  },
+  watchOptions: {
+    aggregateTimeout: 150,
+    poll: Number(process.env.WEBFRAMEZ_REACT_WATCH_POLL || 1000),
+    ignored: [
+      path.resolve(projectRoot, "node_modules", "**"),
+      path.resolve(distDir, "**"),
+      path.resolve(projectRoot, "build", "node_modules", "**"),
+    ],
   },
   module: {
     rules: [
@@ -51,21 +222,17 @@ module.exports = {
       isServer: false,
       clientReferences: [
         {
-          directory: path.resolve(projectRoot, "dist/pages"),
-          recursive: true,
-          include: /\.js$/,
-        },
-        {
-          directory: path.resolve(projectRoot, "dist/src/components"),
+          directory: pagesDir,
           recursive: true,
           include: /\.js$/,
         },
         {
           directory: frameworkDistDir,
           recursive: false,
-          include: /navigation\.(js|cjs)$/,
+          include: /(navigation|route-slot)\.js$/,
         },
       ],
     }),
+    new ClientManifestExportAliasesPlugin(),
   ],
 };