@lazarv/react-server 0.0.0-experimental-eed22ac-20240913-e818c1a8 → 0.0.0-experimental-059f540-20240914-36104f27

package/README.md

@@ -91,32 +91,36 @@ You can unleash cluster mode by using the `REACT_SERVER_CLUSTER` environment var
 REACT_SERVER_CLUSTER=8 pnpm exec react-server start
 ```
 
-## @lazarv/react-server-router
+## File-system based routing
 
-To enable file-system based routing, you need to install the `@lazarv/react-server-router` package and you no longer need to specify and entrypoint for your app.
+To enable file-system based routing, you just omit the entrypoint when running a `@lazarv/react-server` app.
 
-```sh
-pnpm add @lazarv/react-server-router
-```
-
-Create a `@lazarv/react-server` configuration file in your project root to specify where the router should start processing files. By default every file are included in the routing, but you can include/exclude using arrays of glob patterns.
+Create a `@lazarv/react-server` configuration file in your project root to specify where the router should start processing files by using the `root` property. By default every file are included in the routing, but you can include/exclude using arrays of glob patterns. The following example will only include `page.tsx` files as pages and `layout.tsx` files as layouts, emulating the behavior of Next.js.
 
 #### `react-server.config.json`
 
 ```json
 {
-  "root": "src"
+  "root": "app",
+  "page": {
+    "include": ["**/page.tsx"],
+  },
+  "layout": {
+    "include": ["**/layout.tsx"],
+  }
 }
 ```
 
-Move your entrypoint from `./App.tsx` to `./src/page.tsx` to transform it into a page.
+Move your entrypoint component from `./App.tsx` to `./app/layout.tsx` and `./app/page.tsx` to transform it into a page with a layout.
 
-Just start `react-server` without using an entrypoint.
+Just start `react-server` without specifying an entrypoint.
 
 ```sh
 pnpm exec react-server --open
 ```
 
+Read more about file-system based routing at [react-server.dev/router](https://react-server.dev/router).
+
 ## Documentation
 
 Check out the full documentation at [react-server.dev](https://react-server.dev).

package/bin/help.mjs

@@ -144,13 +144,6 @@ export default async function help() {
   ) {
     const packageManager = await detectPackageManager();
 
-    const installCommand =
-      packageManager === "yarn"
-        ? "yarn add"
-        : packageManager === "pnpm"
-          ? "pnpm add"
-          : "npm install";
-
     const execCommand =
       packageManager === "yarn "
         ? "yarn exec "
@@ -176,7 +169,7 @@ You don't need to do anything else to get started, just create a ${colors.cyan("
 
 Start the development server with ${colors.cyan(`${execCommand}react-server <root>`)} or build your project with ${colors.cyan(`${execCommand}react-server build <root>`)} then start the production server with ${colors.cyan(`${execCommand}react-server start`)} where ${colors.cyan("<root>")} is your entrypoint (like ${colors.cyan("./App.jsx")}). See all available commands by running ${colors.cyan(`${execCommand}react-server --help`)} or read more on how to use ${colors.cyan("@lazarv/react-server")} at ${colors.cyan("https://react-server.dev")}.
 
-Alternatively you can install the ${colors.cyan("@lazarv/react-server-router")} package by running ${colors.cyan(`${installCommand} @lazarv/react-server-router`)} to use the optional file-system based routing then omit the ${colors.cyan("<root>")} in the above commands. Learn more at ${colors.cyan("https://react-server.dev/router")}.
+Alternatively you can use the built-in file-system based routing by omitting the ${colors.cyan("<root>")} in the above commands. Learn more at ${colors.cyan("https://react-server.dev/router")}.
 `,
         maxLineWidth
       )

package/config/index.mjs

@@ -22,6 +22,7 @@ export async function loadConfig(initialConfig, options = {}) {
       [
         "**/{react-server,+*,vite}.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}",
         "!**/node_modules",
+        "!*/**/vite.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}",
       ],
       {
         cwd,

package/lib/build/server.mjs

@@ -14,6 +14,7 @@ import rollupUseClient from "../plugins/use-client.mjs";
 import rollupUseServerInline from "../plugins/use-server-inline.mjs";
 import rollupUseServer from "../plugins/use-server.mjs";
 import rootModule from "../plugins/root-module.mjs";
+import fileRouter from "../plugins/file-router/plugin.mjs";
 import * as sys from "../sys.mjs";
 import {
   filterOutVitePluginReact,
@@ -27,15 +28,7 @@ const __require = createRequire(import.meta.url);
 const cwd = sys.cwd();
 
 export default async function serverBuild(root, options) {
-  let reactServerRouterModule;
-  try {
-    reactServerRouterModule = __require.resolve("@lazarv/react-server-router", {
-      paths: [cwd],
-    });
-  } catch {
-    // ignore
-    root ||= "virtual:react-server-eval.jsx";
-  }
+  root ||= "@lazarv/react-server/file-router";
 
   banner("server", options.dev);
   const config = forRoot();
@@ -122,7 +115,7 @@ export default async function serverBuild(root, options) {
               : root?.startsWith("virtual:")
                 ? root
                 : __require.resolve(
-                    root?.split("#")?.[0] ?? "@lazarv/react-server-router",
+                    root?.split("#")?.[0] ?? "@lazarv/react-server/file-router",
                     {
                       paths: [cwd],
                     }
@@ -174,21 +167,9 @@ export default async function serverBuild(root, options) {
       },
     },
     plugins: [
-      ...(reactServerRouterModule &&
-      (!root || root === "@lazarv/react-server-router")
-        ? [
-            (async () =>
-              (
-                await import(
-                  pathToFileURL(
-                    __require.resolve("@lazarv/react-server-router/plugin", {
-                      paths: [cwd],
-                    })
-                  )
-                )
-              ).default())(options),
-          ]
-        : []),
+      !root || root === "@lazarv/react-server/file-router"
+        ? fileRouter(options)
+        : [],
       reactServerEval(options),
       ...buildPlugins,
     ],

package/lib/dev/action.mjs

@@ -32,8 +32,13 @@ export default async function dev(root, options) {
       try {
         runtime$(CONFIG_CONTEXT, config);
 
+        const isNonInteractiveEnvironment =
+          !process.stdin.isTTY ||
+          process.env.CI === "true" ||
+          process.env.DOCKER_CONTAINER === "true";
+
         const server = await createServer(
-          options.eval || (!process.stdin.isTTY && !process.env.CI)
+          options.eval || isNonInteractiveEnvironment
             ? "virtual:react-server-eval.jsx"
             : root,
           options

package/lib/dev/create-server.mjs

@@ -1,7 +1,6 @@
 import { rm } from "node:fs/promises";
-import { createRequire, register } from "node:module";
+import { register } from "node:module";
 import { join, relative } from "node:path";
-import { pathToFileURL } from "node:url";
 import { format } from "node:util";
 import { Worker } from "node:worker_threads";
 
@@ -40,6 +39,7 @@ import trailingSlashHandler from "../handlers/trailing-slash.mjs";
 import { alias, moduleAliases } from "../loader/module-alias.mjs";
 import { applyAlias } from "../loader/utils.mjs";
 import asset from "../plugins/asset.mjs";
+import fileRouter from "../plugins/file-router/plugin.mjs";
 import optimizeDeps from "../plugins/optimize-deps.mjs";
 import reactServerEval from "../plugins/react-server-eval.mjs";
 import reactServerRuntime from "../plugins/react-server-runtime.mjs";
@@ -61,7 +61,6 @@ import ssrHandler from "./ssr-handler.mjs";
 alias("react-server");
 register("../loader/node-loader.react-server.mjs", import.meta.url);
 
-const __require = createRequire(import.meta.url);
 const cwd = sys.cwd();
 const workspaceRoot = findPackageRoot(join(cwd, "..")) ?? cwd;
 
@@ -70,16 +69,6 @@ export default async function createServer(root, options) {
     options.outDir = ".react-server";
   }
   const config = getRuntime(CONFIG_CONTEXT)?.[CONFIG_ROOT];
-  let reactServerRouterModule;
-  try {
-    reactServerRouterModule = __require.resolve("@lazarv/react-server-router", {
-      paths: [cwd],
-    });
-  } catch {
-    // ignore
-    root ||= "virtual:react-server-eval.jsx";
-  }
-
   const worker = new Worker(new URL("./render-stream.mjs", import.meta.url));
   runtime$(WORKER_THREAD, worker);
 
@@ -131,21 +120,9 @@ export default async function createServer(root, options) {
       postcss: cwd,
     },
     plugins: [
-      ...(reactServerRouterModule &&
-      (!root || root === "@lazarv/react-server-router")
-        ? [
-            (async () =>
-              (
-                await import(
-                  pathToFileURL(
-                    __require.resolve("@lazarv/react-server-router/plugin", {
-                      paths: [cwd],
-                    })
-                  )
-                )
-              ).default())(options),
-          ]
-        : []),
+      !root || root === "@lazarv/react-server/file-router"
+        ? fileRouter(options)
+        : [],
       resolveWorkspace(),
       reactServerEval(options),
       reactServerRuntime(),
@@ -455,7 +432,7 @@ export default async function createServer(root, options) {
             (mod) => !/\.(css|scss|less)/.test(mod.id)
           );
 
-          styles.push(...importedStyles.map((mod) => mod.url));
+          styles.unshift(...importedStyles.map((mod) => mod.url));
           imports.forEach((mod) => mod.id && collectCss(mod.id));
         }
       }

package/lib/dev/modules.mjs

@@ -6,15 +6,6 @@ import { cwd, rootDir } from "../sys.mjs";
 const __require = createRequire(import.meta.url);
 
 export default function getModules(root) {
-  let reactServerRouterModule;
-  try {
-    reactServerRouterModule = __require.resolve("@lazarv/react-server-router", {
-      paths: [cwd()],
-    });
-  } catch (e) {
-    // ignore
-  }
-
   const entryModule = `${rootDir}/server/render-rsc.jsx`;
   let rootModule;
   const [module, name] = root?.split("#") ?? [];
@@ -23,9 +14,7 @@ export default function getModules(root) {
       ? __require.resolve(module, {
           paths: [cwd()],
         })
-      : reactServerRouterModule
-        ? "@lazarv/react-server-router"
-        : "virtual:react-server-eval.jsx";
+      : "@lazarv/react-server/file-router";
   } catch {
     rootModule = "virtual:react-server-eval.jsx";
   }

package/lib/plugins/file-router/entrypoint.jsx

@@ -0,0 +1,100 @@
+import { dirname } from "node:path";
+
+import { status, useOutlet } from "@lazarv/react-server";
+import {
+  middlewares,
+  pages,
+  routes,
+} from "@lazarv/react-server/file-router/manifest";
+import { useMatch } from "@lazarv/react-server/router";
+import { context$ } from "@lazarv/react-server/server/context.mjs";
+import { ROUTE_MATCH } from "@lazarv/react-server/server/symbols.mjs";
+
+export async function init$() {
+  return async (context) => {
+    for (const handler of middlewares) {
+      const response = await handler(context);
+      if (response) {
+        return response;
+      }
+    }
+
+    let match = null;
+    let route = null;
+    for (const [method, path, _route] of routes) {
+      match =
+        method === "*" || method === context.request.method
+          ? useMatch(path, { exact: true })
+          : null;
+      if (match) {
+        route = _route;
+        break;
+      }
+    }
+
+    if (route) {
+      context$(ROUTE_MATCH, match);
+      context.request.params = match;
+
+      const handler = await route();
+      return await (
+        handler[context.request.method] ??
+        handler.default ??
+        (() => {})
+      )(context);
+    }
+  };
+}
+
+export default async function App() {
+  let match = null;
+  let Page = () => {
+    status(404);
+    return null;
+  };
+
+  const reactServerOutlet = useOutlet();
+  if (reactServerOutlet && reactServerOutlet !== "PAGE_ROOT") {
+    const outlets = pages.filter(
+      ([, type, outlet]) => type === "page" && outlet === reactServerOutlet
+    );
+    for (const [path, , , , , lazy] of outlets) {
+      const match = useMatch(path, { exact: true });
+      if (match) {
+        const { default: Component, init$: page_init$ } = await lazy();
+        await page_init$?.();
+        return <Component {...match} />;
+      }
+    }
+    return null;
+  }
+
+  for (const [path, type, outlet, lazy, src] of pages) {
+    match = type === "page" && !outlet ? useMatch(path, { exact: true }) : null;
+    if (match) {
+      const { default: Component, init$: page_init$ } = await lazy();
+      Page = Component;
+      await page_init$?.();
+      break;
+    }
+
+    match = type === "page" && outlet ? useMatch(path, { exact: true }) : null;
+    if (match) {
+      const [, , , lazy] =
+        pages.find(
+          ([, type, outlet, , pageSrc]) =>
+            type === "page" &&
+            !outlet &&
+            dirname(src).includes(dirname(pageSrc))
+        ) ?? [];
+      if (lazy) {
+        const { default: Component, init$: page_init$ } = await lazy();
+        Page = Component;
+        await page_init$?.();
+        break;
+      }
+    }
+  }
+
+  return <Page {...match} />;
+}