@lazarv/react-server 0.0.0-experimental-43e79e6-20230928

package/client/ReactServerComponent.jsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { startTransition, useContext, useEffect, useState } from "react";
+
+import { ClientContext, useClient } from "./context.mjs";
+import { FlightContext } from "./FlightContext.mjs";
+
+function FlightComponent({ standalone = false, remote = false, children }) {
+  const { url, outlet } = useContext(FlightContext);
+  const client = useClient();
+  const { registerOutlet, subscribe, getFlightResponse } = client;
+  const [Component, setComponent] = useState(
+    remote
+      ? getFlightResponse(url, { outlet, standalone })
+      : children || getFlightResponse(url, { outlet, standalone })
+  );
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let mounted = true;
+    const unregisterOutlet = registerOutlet(outlet, url);
+    const unsubscribe = subscribe(outlet || url, (to, callback) => {
+      const Component = getFlightResponse(to, { outlet, standalone });
+      Component.then(
+        () => {
+          if (!mounted) return;
+          startTransition(async () => {
+            setError(null);
+            const {
+              value: { data: result },
+            } = Component.value.props;
+            setComponent(Component);
+            callback(null, result);
+          });
+        },
+        () => {
+          if (!mounted) return;
+          startTransition(() => {
+            setError(Component.reason);
+            const {
+              value: { data: result },
+            } = Component.value.props;
+            callback(Component.reason, result);
+          });
+        }
+      );
+    });
+    return () => {
+      mounted = false;
+      unregisterOutlet();
+      unsubscribe();
+    };
+  }, [url, outlet, standalone, subscribe, getFlightResponse]);
+
+  return (
+    <ClientContext.Provider value={{ ...client, error }}>
+      {Component}
+    </ClientContext.Provider>
+  );
+}
+
+/**
+ * @typedef {import("react").PropsWithChildren<{ url: string, standalone?: boolean }>} ReactServerComponentProps
+ * @param { ReactServerComponentProps } props
+ */
+export default function ReactServerComponent({
+  url,
+  outlet = null,
+  standalone,
+  children,
+}) {
+  return (
+    <FlightContext.Provider value={{ url, outlet }}>
+      <FlightComponent standalone={standalone}>{children}</FlightComponent>
+    </FlightContext.Provider>
+  );
+}

package/client/Refresh.jsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useClient } from "@lazarv/react-server/client";
+import { startTransition, useCallback } from "react";
+
+export default function Refresh({
+  url,
+  outlet,
+  transition,
+  prefetch: prefetchEnabled,
+  ttl = Infinity,
+  onRefresh,
+  onError,
+  children,
+  ...props
+}) {
+  const { refresh, prefetch } = useClient();
+
+  const tryRefresh = useCallback(async () => {
+    try {
+      await refresh(outlet || url);
+      onRefresh?.();
+    } catch (e) {
+      onError?.(e);
+    }
+  }, [refresh, outlet, url, onRefresh, onError]);
+
+  const handleRefresh = async (e) => {
+    e.preventDefault();
+    if (transition !== false) {
+      startTransition(tryRefresh);
+    } else {
+      tryRefresh();
+    }
+  };
+
+  const handlePrefetch = () =>
+    prefetchEnabled === true && prefetch(url, { outlet, ttl });
+
+  return (
+    <a
+      {...props}
+      href={url}
+      onClick={handleRefresh}
+      onFocus={handlePrefetch}
+      onMouseOver={handlePrefetch}
+      onTouchStart={handlePrefetch}
+    >
+      {children}
+    </a>
+  );
+}

package/client/components.mjs

@@ -0,0 +1,28 @@
+export function client$(Component, name = "default") {
+  if (typeof window !== "undefined") return Component;
+
+  let id = "default";
+  try {
+    throw new Error();
+  } catch (e) {
+    const [, , source] = e.stack.split("\n");
+    id =
+      /\((.*):[0-9]+:[0-9]+\)/.exec(source)?.[1] ??
+      /file:\/\/(.*):[0-9]+:[0-9]+/.exec(source)?.[1] ??
+      "default";
+  }
+
+  Object.defineProperties(Component, {
+    $$typeof: {
+      value: Symbol.for("react.client.reference"),
+    },
+    $$id: {
+      value: `${id}::${name}`,
+    },
+    $$async: {
+      value: true,
+    },
+  });
+
+  return Component;
+}

package/client/context.mjs

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+
+export const ClientContext = createContext({});
+export function useClient() {
+  return useContext(ClientContext);
+}

package/client/entry.client.jsx

@@ -0,0 +1,146 @@
+import ClientProvider, {
+  PAGE_ROOT,
+} from "@lazarv/react-server/client/ClientProvider.jsx";
+import ReactServerComponent from "@lazarv/react-server/client/ReactServerComponent.jsx";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+function ReactServer() {
+  return (
+    <ClientProvider>
+      <ReactServerComponent outlet={PAGE_ROOT} url={location.href} />
+    </ClientProvider>
+  );
+}
+
+if (import.meta.env.DEV) {
+  var formatRegExp = /%[sdj%]/g;
+  const format = (f, ...args) => {
+    let i = 0;
+    const len = args.length;
+    const str = String(f).replace(formatRegExp, function (x) {
+      if (x === "%%") return "%";
+      if (i >= len) return x;
+      switch (x) {
+        case "%s":
+          return String(args[i++]);
+        case "%d":
+          return Number(args[i++]);
+        case "%j":
+          try {
+            return JSON.stringify(args[i++]);
+          } catch (_) {
+            return "[Circular]";
+          }
+        default:
+          return x;
+      }
+    });
+    return str;
+  };
+
+  const { ErrorOverlay } = await import("/@vite/client");
+
+  const showErrorOverlay = async (error, source, force) => {
+    if (
+      localStorage.getItem("react-server:overlay") === "false" ||
+      sessionStorage.getItem("react-server:overlay") === "false"
+    ) {
+      return;
+    }
+
+    if (!window.__react_server_error_overlay__) {
+      if (typeof error === "string") {
+        const [message, ...stack] = error.split("\n");
+        error = {
+          message,
+          stack: stack.join("\n"),
+        };
+      }
+      error.plugin = "@lazarv/react-server";
+      const [, ...stacklines] = error.stack.split("\n");
+      error.stack = stacklines.map((it) => it.trim()).join("\n");
+      const [, id, line, column] = (stacklines?.[0] ?? "").match(
+        /\((.*):([0-9]+):([0-9]+)\)/
+      );
+      error.id = id || source;
+
+      if (!force && error.id.startsWith("http")) {
+        return setTimeout(() => showErrorOverlay(error, source, true));
+      }
+      window.__react_server_error_overlay__ = true;
+
+      error.loc = {
+        file: id,
+        column: parseInt(column, 10),
+        line: parseInt(line, 10),
+        length: 0,
+        lineText: "",
+        namespace: "",
+        suggestion: "",
+      };
+
+      try {
+        const sourceFile = await fetch(
+          error.id.startsWith("http")
+            ? error.id.replace("/@fs/", "/@source/")
+            : `/@source${error.id}`
+        );
+        const sourceCode = await sourceFile.text();
+
+        const lines = sourceCode.split("\n");
+        const start = Math.max(0, error.loc.line - 3);
+        const end = Math.min(lines.length, error.loc.line + 3);
+        const frame = lines
+          .slice(start, end)
+          .flatMap((l, i) => {
+            const curr = i + start;
+            const indent = " ".repeat(
+              Math.max(start, end).toString().length - curr.toString().length
+            );
+            return [
+              `${indent}${curr} | ${l}`,
+              ...(i === 2
+                ? [
+                    `${indent}${curr
+                      .toString()
+                      .replaceAll(/./g, " ")} |${" ".repeat(
+                      error.loc.column
+                    )}^`,
+                  ]
+                : []),
+            ];
+          })
+          .join("\n");
+        error.frame = `${error.message}\n${frame}\n`;
+      } catch (e) {
+        // noop
+      }
+
+      const overlay = new ErrorOverlay(error);
+      overlay.addEventListener("click", () => {
+        window.__react_server_error_overlay__ = false;
+      });
+      document.body.appendChild(overlay);
+    }
+  };
+
+  const originalConsoleError = console.error;
+  console.error = (...args) => {
+    showErrorOverlay(format(...args));
+    originalConsoleError(...args);
+  };
+
+  window.onerror = (message, source, lineno, colno, error) => {
+    showErrorOverlay(error, source, lineno, colno, message);
+  };
+}
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <ReactServer />
+    </StrictMode>
+  );
+});

package/client/index.jsx

@@ -0,0 +1,6 @@
+export * from "./context.mjs";
+export { default as ClientOnly } from "./ClientOnly.jsx";
+
+export function client$(Component) {
+  return Component;
+}

package/client/navigation.jsx

@@ -0,0 +1,4 @@
+import Link from "@lazarv/react-server/client/Link.jsx";
+import Refresh from "@lazarv/react-server/client/Refresh.jsx";
+
+export { Link, Refresh };

package/config/context.mjs

@@ -0,0 +1,37 @@
+import { getContext } from "@lazarv/react-server/server/context.mjs";
+import {
+  CONFIG_CONTEXT,
+  CONFIG_ROOT,
+} from "@lazarv/react-server/server/symbols.mjs";
+
+export function forRoot(externalConfig) {
+  const config = getContext(CONFIG_CONTEXT) ?? externalConfig;
+  if (!config) {
+    throw new Error("Config not loaded");
+  }
+  return config[CONFIG_ROOT];
+}
+
+export function forChild(url, externalConfig) {
+  if (typeof url !== "string") {
+    url = url.pathname;
+  }
+  const config = getContext(CONFIG_CONTEXT) ?? externalConfig;
+  if (!config) {
+    throw new Error("Config not loaded");
+  }
+  if (!config[url]) {
+    const key = Object.keys(config)
+      .find((it) => url.startsWith(it))
+      ?.sort(([aKey], [bKey]) => bKey.length - aKey.length)?.[0];
+
+    if (key) {
+      const value = config[key];
+      if (value) {
+        config[url] = config[key];
+      }
+    }
+  }
+
+  return config[url] ?? forRoot(externalConfig);
+}

package/config/index.mjs

@@ -0,0 +1,114 @@
+import { basename, dirname, join, relative } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+import { build } from "esbuild";
+import glob from "fast-glob";
+
+import { CONFIG_PARENT, CONFIG_ROOT } from "../server/symbols.mjs";
+export * from "./context.mjs";
+import { createHash } from "node:crypto";
+import { readFile, stat } from "node:fs/promises";
+
+import * as sys from "../lib/sys.mjs";
+import merge from "../lib/utils/merge.mjs";
+
+const cwd = sys.cwd();
+const defaultConfig = {};
+
+export async function loadConfig(initialConfig) {
+  const config = {};
+  const configFiles = (
+    await glob(
+      join(
+        cwd,
+        "**/{react-server,+*,vite}.config.{json,js,ts,mjs,mts,ts.mjs,mts.mjs}"
+      )
+    )
+  ).map((file) => relative(cwd, file));
+
+  for await (const file of configFiles) {
+    try {
+      const key = dirname(file);
+      const filename = basename(file);
+
+      let configModule;
+      const src = join(cwd, key, filename);
+      if (/\.m?ts$/.test(filename)) {
+        const hash = createHash("shake256", { outputLength: 4 })
+          .update(await readFile(src, "utf8"))
+          .digest("hex");
+        try {
+          await stat(
+            `${join(cwd, ".react-server", key, filename)}.${hash}.mjs`
+          );
+        } catch (e) {
+          await build({
+            absWorkingDir: filename.includes("vite.config")
+              ? join(fileURLToPath(import.meta.url), "../..")
+              : cwd,
+            entryPoints: [src],
+            outfile: `${join(cwd, ".react-server", key, filename)}.${hash}.mjs`,
+            bundle: true,
+            platform: "node",
+            format: "esm",
+            external: filename.includes("vite.config") ? ["*"] : [],
+            minify: true,
+            tsconfig: join(cwd, "tsconfig.json"),
+          });
+        }
+        configModule = (
+          await import(
+            pathToFileURL(
+              `${join(cwd, ".react-server", key, filename)}.${hash}.mjs`
+            )
+          )
+        ).default;
+      } else {
+        configModule = (
+          await import(
+            pathToFileURL(src),
+            filename.endsWith(".json")
+              ? { assert: { type: "json" } }
+              : undefined
+          )
+        ).default;
+      }
+
+      config[key] = merge(config[key] ?? {}, configModule);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  const configKeys = Object.keys(config);
+  const root = configKeys.includes(".")
+    ? "."
+    : configKeys.find((key) => configKeys.every((it) => it.startsWith(key)));
+  config[CONFIG_ROOT] = config[root] = merge(
+    {},
+    defaultConfig,
+    initialConfig,
+    { root },
+    config[root]
+  );
+
+  for (const key of configKeys) {
+    if (key === CONFIG_ROOT || key === root) continue;
+    merge(
+      config[key],
+      ...configKeys
+        .filter((it) => it !== key && key.startsWith(it))
+        .sort((a, b) => b.length - a.length)
+        .map((key, index, parentConfigArray) => ({
+          ...config[key],
+          [CONFIG_PARENT]: parentConfigArray[index - 1] ?? config[CONFIG_ROOT],
+        }))
+    );
+  }
+
+  return config;
+}
+
+export function defineConfig(config) {
+  return config;
+}

package/lib/build/action.mjs

@@ -0,0 +1,57 @@
+import { join } from "node:path";
+
+import { rimraf } from "rimraf";
+
+import { loadConfig } from "../../config/index.mjs";
+import { ContextStorage } from "../../server/context.mjs";
+import { CONFIG_CONTEXT } from "../../server/symbols.mjs";
+import { cwd, setEnv } from "../sys.mjs";
+import clientBuild from "./client.mjs";
+import serverBuild from "./server.mjs";
+import staticSiteGenerator from "./static.mjs";
+
+export default async function build(root, options) {
+  const config = await loadConfig();
+
+  // eslint-disable-next-line no-async-promise-executor
+  return new Promise(async (resolve) => {
+    ContextStorage.run(
+      {
+        [CONFIG_CONTEXT]: config,
+      },
+      async () => {
+        try {
+          if (!options.dev) {
+            // enforce production mode
+            setEnv("NODE_ENV", "production");
+          }
+          // empty out dir
+          if (options.server && options.client)
+            await rimraf(join(cwd(), ".react-server"));
+          else if (options.server)
+            await rimraf(join(cwd(), ".react-server/server"));
+          else if (options.client)
+            await rimraf(join(cwd(), ".react-server/client"));
+          // build server
+          if (options.server) {
+            await serverBuild(root, options);
+            // empty line
+            console.log();
+          }
+          // build client
+          if (options.client) {
+            await clientBuild(root, options);
+          }
+          // static export
+          if (options.export) {
+            await rimraf(join(cwd(), ".react-server/dist"));
+            await staticSiteGenerator(root, options);
+          }
+        } catch (e) {
+          console.error(e);
+        }
+        resolve();
+      }
+    );
+  });
+}

package/lib/build/banner.mjs

@@ -0,0 +1,13 @@
+import colors from "picocolors";
+
+import packageJson from "../../package.json" assert { type: "json" };
+
+export default function banner(target, dev) {
+  console.log(
+    `${colors.cyan(
+      `${packageJson.name.split("/").pop()}/${packageJson.version}`,
+    )} ${colors.green(
+      `building ${target} for ${dev ? "development" : "production"}`,
+    )}`,
+  );
+}

package/lib/build/chunks.mjs

@@ -0,0 +1,26 @@
+import * as dependencies from "./dependencies.mjs";
+
+export const serverChunks = {
+  react: [
+    dependencies.react,
+    dependencies.reactJsxRuntime,
+    dependencies.reactDomClient,
+    dependencies.reactDomServerEdge,
+    dependencies.reactServerDomWebpackClientBrowser,
+    dependencies.reactServerDomWebpackClientEdge,
+    dependencies.reactServerDomWebpackServerEdge,
+    dependencies.reactErrorBoundary,
+    dependencies.scheduler,
+  ],
+};
+
+export const clientChunks = {
+  react: [
+    dependencies.react,
+    dependencies.reactJsxRuntime,
+    dependencies.reactDomClient,
+    dependencies.reactServerDomWebpackClientBrowser,
+    dependencies.reactErrorBoundary,
+    dependencies.scheduler,
+  ],
+};

package/lib/build/client.mjs

@@ -0,0 +1,114 @@
+import { createRequire } from "node:module";
+
+import replace from "@rollup/plugin-replace";
+import viteReact from "@vitejs/plugin-react";
+import { build as viteBuild } from "vite";
+
+import { forRoot } from "../../config/index.mjs";
+import merge from "../../lib/utils/merge.mjs";
+import packageJson from "../../package.json" assert { type: "json" };
+import viteReactServer from "../plugins/react-server.mjs";
+import rollupUseClient from "../plugins/use-client.mjs";
+import * as sys from "../sys.mjs";
+import banner from "./banner.mjs";
+import { clientChunks } from "./chunks.mjs";
+import customLogger from "./custom-logger.mjs";
+import { clientAlias } from "./resolve.mjs";
+
+const __require = createRequire(import.meta.url);
+const cwd = sys.cwd();
+
+export default async function clientBuild(_, options) {
+  banner("client", options.dev);
+  const config = forRoot();
+  const buildConfig = {
+    root: __require.resolve(`${packageJson.name}`),
+    resolve: {
+      alias: [...clientAlias(options.dev), ...(config.resolve?.alias ?? [])],
+    },
+    customLogger,
+    build: {
+      target: "esnext",
+      outDir: ".react-server",
+      emptyOutDir: false,
+      minify: options.minify,
+      manifest: "client/manifest.json",
+      sourcemap: options.sourcemap,
+      rollupOptions: {
+        preserveEntrySignatures: "allow-extension",
+        output: {
+          dir: ".react-server",
+          format: "esm",
+          entryFileNames: "[name].[hash].mjs",
+          chunkFileNames: "client/@lazarv/react-server/[name].[hash].mjs",
+          manualChunks: (id) => {
+            if (clientChunks["react"].includes(id)) return "react";
+            if (id.includes("@lazarv/react-server") && id.endsWith(".mjs")) {
+              return "react-server";
+            }
+          },
+        },
+        input: {
+          "client/index": __require.resolve(
+            "@lazarv/react-server/client/entry.client.jsx",
+            { paths: [cwd] }
+          ),
+          "client/@lazarv/react-server/client/ClientOnly": __require.resolve(
+            "@lazarv/react-server/client/ClientOnly.jsx",
+            { paths: [cwd] }
+          ),
+          "client/@lazarv/react-server/client/ErrorBoundary": __require.resolve(
+            "@lazarv/react-server/client/ErrorBoundary.jsx",
+            { paths: [cwd] }
+          ),
+          "client/@lazarv/react-server/client/Link": __require.resolve(
+            "@lazarv/react-server/client/Link.jsx",
+            { paths: [cwd] }
+          ),
+          "client/@lazarv/react-server/client/Refresh": __require.resolve(
+            "@lazarv/react-server/client/Refresh.jsx",
+            { paths: [cwd] }
+          ),
+          "client/@lazarv/react-server/client/ReactServerComponent":
+            __require.resolve(
+              "@lazarv/react-server/client/ReactServerComponent.jsx",
+              { paths: [cwd] }
+            ),
+        },
+        plugins: [
+          replace({
+            preventAssignment: true,
+            "process.env.NODE_ENV": JSON.stringify(
+              options.dev ? "development" : "production"
+            ),
+          }),
+          rollupUseClient("client"),
+        ],
+      },
+    },
+    plugins: [
+      viteReactServer("client"),
+      viteReact(),
+      ...(config.plugins ?? []),
+    ],
+    css: {
+      ...config.css,
+      postcss: process.cwd(),
+    },
+  };
+
+  let viteConfig = buildConfig;
+
+  if (typeof config.build?.client?.config === "function")
+    viteConfig = config.build?.client?.config(buildConfig);
+
+  if (typeof config.build?.client?.config === "object")
+    viteConfig = merge(buildConfig, config.build?.client?.config);
+
+  if (typeof config.vite === "function") viteConfig = config.vite(viteConfig);
+
+  if (typeof config.vite === "object")
+    viteConfig = merge(viteConfig, config.vite);
+
+  return viteBuild(viteConfig);
+}