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

package/lib/build/custom-logger.mjs

@@ -0,0 +1,13 @@
+import { createLogger } from "vite";
+
+const logger = createLogger();
+
+const loggerInfo = logger.info;
+logger.info = (msg) => {
+  if (msg.includes("vite v")) {
+    return;
+  }
+  loggerInfo(msg);
+};
+
+export default logger;

package/lib/build/dependencies.mjs

@@ -0,0 +1,54 @@
+import { createRequire } from "node:module";
+
+import * as sys from "../sys.mjs";
+
+const __require = createRequire(import.meta.url);
+const cwd = sys.cwd();
+
+const react = __require.resolve("react");
+const reactJsxRuntime = __require.resolve("react/jsx-runtime");
+const reactJsxDevRuntime = __require.resolve("react/jsx-dev-runtime");
+const reactDom = __require.resolve("react-dom");
+const reactDomClient = __require.resolve("react-dom/client");
+const reactDomServerEdge = __require.resolve("react-dom/server.edge");
+const reactServerDomWebpackClientBrowser = __require.resolve(
+  "react-server-dom-webpack/client.browser"
+);
+const reactServerDomWebpackClientEdge = __require.resolve(
+  "react-server-dom-webpack/client.edge"
+);
+const reactServerDomWebpackServerEdge = __require.resolve(
+  "react-server-dom-webpack/server.edge"
+);
+const reactErrorBoundary = __require.resolve("react-error-boundary");
+const scheduler = __require.resolve("scheduler");
+const reactServerClient = __require.resolve("@lazarv/react-server/client", {
+  paths: [cwd],
+});
+const reactServerNavigation = __require.resolve(
+  "@lazarv/react-server/navigation"
+);
+const reactServerClientContext = __require.resolve(
+  "@lazarv/react-server/client/context.mjs"
+);
+const reactServerClientComponents = __require.resolve(
+  "@lazarv/react-server/client/components.mjs"
+);
+
+export {
+  react,
+  reactJsxRuntime,
+  reactJsxDevRuntime,
+  reactDom,
+  reactDomClient,
+  reactDomServerEdge,
+  reactServerDomWebpackClientBrowser,
+  reactServerDomWebpackClientEdge,
+  reactServerDomWebpackServerEdge,
+  reactErrorBoundary,
+  scheduler,
+  reactServerClient,
+  reactServerClientContext,
+  reactServerClientComponents,
+  reactServerNavigation,
+};

package/lib/build/resolve.mjs

@@ -0,0 +1,101 @@
+import * as dependencies from "./dependencies.mjs";
+
+export const serverAlias = (dev) => [
+  { find: /^react$/, replacement: dependencies.react },
+  {
+    find: /^react\/jsx-runtime$/,
+    replacement: dev
+      ? dependencies.reactJsxDevRuntime
+      : dependencies.reactJsxRuntime,
+  },
+  // {
+  //   find: /^react\/jsx-dev-runtime$/,
+  //   replacement: dependencies.reactJsxDevRuntime,
+  // },
+  { find: /^react-dom$/, replacement: dependencies.reactDom },
+  { find: /^react-dom\/client$/, replacement: dependencies.reactDomClient },
+  {
+    find: /^react-dom\/server.edge$/,
+    replacement: dependencies.reactDomServerEdge,
+  },
+  {
+    find: /^react-server-dom-webpack\/client.browser$/,
+    replacement: dependencies.reactServerDomWebpackClientBrowser,
+  },
+  {
+    find: /^react-server-dom-webpack\/client.edge$/,
+    replacement: dependencies.reactServerDomWebpackClientEdge,
+  },
+  {
+    find: /^react-server-dom-webpack\/server.edge$/,
+    replacement: dependencies.reactServerDomWebpackServerEdge,
+  },
+  {
+    find: /^react-error-boundary$/,
+    replacement: dependencies.reactErrorBoundary,
+  },
+  {
+    find: /^scheduler$/,
+    replacement: dependencies.scheduler,
+  },
+  // {
+  //   find: /^@lazarv\/react-server\/client$/,
+  //   replacement: dependencies.reactServerClient,
+  // },
+  // {
+  //   find: /^@lazarv\/react-server\/client\/context\.mjs$/,
+  //   replacement: dependencies.reactServerClientContext,
+  // },
+  // {
+  //   find: /^@lazarv\/react-server\/client\/components\.mjs$/,
+  //   replacement: dependencies.reactServerClientComponents,
+  // },
+  // {
+  //   find: /^@lazarv\/react-server\/navigation$/,
+  //   replacement: dependencies.reactServerNavigation,
+  // },
+];
+
+export const clientAlias = (dev) => [
+  { find: /^react$/, replacement: dependencies.react },
+  {
+    find: /^react\/jsx-runtime$/,
+    replacement: dev
+      ? dependencies.reactJsxDevRuntime
+      : dependencies.reactJsxRuntime,
+  },
+  // {
+  //   find: /^react\/jsx-dev-runtime$/,
+  //   replacement: dependencies.reactJsxDevRuntime,
+  // },
+  { find: /^react-dom$/, replacement: dependencies.reactDom },
+  { find: /^react-dom\/client$/, replacement: dependencies.reactDomClient },
+  {
+    find: /^react-server-dom-webpack\/client.browser$/,
+    replacement: dependencies.reactServerDomWebpackClientBrowser,
+  },
+  {
+    find: /^react-error-boundary$/,
+    replacement: dependencies.reactErrorBoundary,
+  },
+  {
+    find: /^scheduler$/,
+    replacement: dependencies.scheduler,
+  },
+  // {
+  //   find: /^@lazarv\/react-server\/client$/,
+  //   replacement: dependencies.reactServerClient,
+  // },
+  // {
+  //   find: /^@lazarv\/react-server\/navigation$/,
+  //   replacement: dependencies.reactServerNavigation,
+  // },
+  // {
+  //   find: /^@lazarv\/react-server\/client\/context\.mjs$/,
+  //   replacement: dependencies.reactServerClientContext,
+  // },
+  // {
+  //   find: /^@lazarv\/react-server\/client\/components\.mjs$/,
+  //   replacement: dependencies.reactServerClientComponents,
+  // },
+];

package/lib/build/server.mjs

@@ -0,0 +1,142 @@
+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 rollupUseServer from "../plugins/use-server.mjs";
+import * as sys from "../sys.mjs";
+import banner from "./banner.mjs";
+import { serverChunks } from "./chunks.mjs";
+import customLogger from "./custom-logger.mjs";
+import { serverAlias } from "./resolve.mjs";
+
+const __require = createRequire(import.meta.url);
+const cwd = sys.cwd();
+
+export default async function serverBuild(root, options) {
+  banner("server", options.dev);
+  const config = forRoot();
+  const buildConfig = {
+    root: __require.resolve(`${packageJson.name}`),
+    resolve: {
+      alias: [...serverAlias(options.dev), ...(config.resolve?.alias ?? [])],
+    },
+    customLogger,
+    build: {
+      ...config.build,
+      target: "esnext",
+      outDir: ".react-server",
+      emptyOutDir: false,
+      minify: options.minify,
+      manifest: "server/manifest.json",
+      ssr: true,
+      ssrEmitAssets: true,
+      sourcemap: options.sourcemap,
+      rollupOptions: {
+        ...config.build?.rollupOptions,
+        preserveEntrySignatures: "allow-extension",
+        output: {
+          dir: ".react-server",
+          format: "esm",
+          entryFileNames: "[name].mjs",
+          chunkFileNames: "server/@lazarv/react-server/[name].[hash].mjs",
+          manualChunks: (id) => {
+            if (serverChunks["react"].includes(id)) return "react";
+            if (id.includes("@lazarv/react-server") && id.endsWith(".mjs")) {
+              return "react-server";
+            }
+          },
+        },
+        input: {
+          "server/entry": __require.resolve(
+            "@lazarv/react-server/server/entry.server.jsx",
+            { paths: [cwd] }
+          ),
+          "server/index": __require.resolve(
+            root ?? "@lazarv/react-server-router",
+            { paths: [cwd] }
+          ),
+          "server/@lazarv/react-server/client/ClientOnly": __require.resolve(
+            "@lazarv/react-server/client/ClientOnly.jsx",
+            { paths: [cwd] }
+          ),
+          "server/@lazarv/react-server/client/ErrorBoundary": __require.resolve(
+            "@lazarv/react-server/client/ErrorBoundary.jsx",
+            { paths: [cwd] }
+          ),
+          "server/@lazarv/react-server/client/Link": __require.resolve(
+            "@lazarv/react-server/client/Link.jsx",
+            { paths: [cwd] }
+          ),
+          "server/@lazarv/react-server/client/Refresh": __require.resolve(
+            "@lazarv/react-server/client/Refresh.jsx",
+            { paths: [cwd] }
+          ),
+          "server/@lazarv/react-server/client/ReactServerComponent":
+            __require.resolve(
+              "@lazarv/react-server/client/ReactServerComponent.jsx",
+              { paths: [cwd] }
+            ),
+        },
+        external: [
+          /manifest\.json/,
+          /^bun:/,
+          ...(config.build?.rollupOptions?.external ?? []),
+        ],
+        plugins: [
+          replace({
+            preventAssignment: true,
+            "process.env.NODE_ENV": JSON.stringify(
+              options.dev ? "development" : "production"
+            ),
+          }),
+          rollupUseClient("server"),
+          rollupUseServer(),
+          ...(config.build?.rollupOptions?.plugins ?? []),
+        ],
+      },
+    },
+    plugins: [
+      viteReactServer("server"),
+      ...(!root || root === "@lazarv/react-server-router"
+        ? [
+            (async () =>
+              (
+                await import(
+                  __require.resolve("@lazarv/react-server-router/plugin", {
+                    paths: [cwd],
+                  })
+                )
+              ).default())(),
+          ]
+        : []),
+      viteReact(),
+      ...(config.plugins ?? []),
+    ],
+    css: {
+      ...config.css,
+      postcss: cwd,
+    },
+  };
+
+  let viteConfig = buildConfig;
+
+  if (typeof config.build?.server?.config === "function")
+    viteConfig = config.build?.server?.config(buildConfig);
+
+  if (typeof config.build?.server?.config === "object")
+    viteConfig = merge(buildConfig, config.build?.server?.config);
+
+  if (typeof config.vite === "function") viteConfig = config.vite(viteConfig);
+
+  if (typeof config.vite === "object")
+    viteConfig = merge(viteConfig, config.vite);
+
+  return viteBuild(viteConfig);
+}

package/lib/build/static.mjs

@@ -0,0 +1,89 @@
+import { createWriteStream } from "node:fs";
+import { mkdir, stat, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { Readable } from "node:stream";
+import { pipeline } from "node:stream/promises";
+import { createBrotliCompress, createGzip } from "node:zlib";
+
+import { filesize } from "filesize";
+import colors from "picocolors";
+
+import { forRoot } from "../../config/index.mjs";
+import { getContext } from "../../server/context.mjs";
+import { init$ as runtime_init$, runtime$ } from "../../server/runtime.mjs";
+import { CONFIG_CONTEXT } from "../../server/symbols.mjs";
+import ssrHandler from "../start/ssr-handler.mjs";
+import { cwd } from "../sys.mjs";
+import banner from "./banner.mjs";
+
+const size = (bytes) => {
+  const s = filesize(bytes);
+  return " ".repeat(Math.max(0, 8 - s.length)) + s;
+};
+
+export default async function staticSiteGenerator(root, options) {
+  banner("static", options.dev);
+  const config = getContext(CONFIG_CONTEXT);
+
+  await runtime_init$(async () => {
+    runtime$(CONFIG_CONTEXT, config);
+
+    const configRoot = forRoot();
+
+    if (configRoot?.export) {
+      const paths =
+        typeof configRoot.export === "function"
+          ? await configRoot.export()
+          : configRoot.export;
+
+      const render = await ssrHandler();
+      await Promise.all(
+        paths.map(async ({ path }) => {
+          const stream = await render({
+            request: {
+              url: `http${config.server?.https ? "s" : ""}://${
+                config.host ?? "localhost"
+              }:${config.port ?? 3000}${path}`,
+              headers: new Headers({
+                accept: "text/html",
+              }),
+            },
+          });
+          const html = await stream.text();
+          await mkdir(join(cwd(), ".react-server/dist", path), {
+            recursive: true,
+          });
+          const basename = `${path.replace(/^\/+/g, "")}/index.html`;
+          const filename = join(cwd(), ".react-server/dist", basename);
+          const gzip = createGzip();
+          const brotli = createBrotliCompress();
+          const gzipWriteStream = createWriteStream(`${filename}.gz`);
+          const brotliWriteStream = createWriteStream(`${filename}.br`);
+          await Promise.all([
+            pipeline(Readable.from(html), gzip, gzipWriteStream),
+            pipeline(Readable.from(html), brotli, brotliWriteStream),
+            writeFile(filename, html, "utf8"),
+          ]);
+          const [htmlStat, gzipStat, brotliStat] = await Promise.all([
+            stat(filename),
+            stat(`${filename}.gz`),
+            stat(`${filename}.br`),
+          ]);
+          console.log(
+            `${colors.dim(".react-server/dist/")}${colors.green(
+              path.length < 30
+                ? `${path.replace(/^\/+/g, "")}${colors.cyan("/index.html")}`
+                : `${path.replace(/^\/+/g, "").slice(0, 27)}...`
+            )}${`${" ".repeat(Math.max(0, 30 - path.length))}${colors.gray(
+              colors.bold(size(htmlStat.size))
+            )} ${colors.dim(
+              `│ gzip: ${size(gzipStat.size)} │ brotli: ${size(
+                brotliStat.size
+              )}`
+            )}`}`
+          );
+        })
+      );
+    }
+  });
+}

package/lib/dev/action.mjs

@@ -0,0 +1,63 @@
+import open from "open";
+import colors from "picocolors";
+
+import { loadConfig } from "../../config/index.mjs";
+import { logger } from "../../server/logger.mjs";
+import { init$ as runtime_init$, runtime$ } from "../../server/runtime.mjs";
+import {
+  CONFIG_CONTEXT,
+  CONFIG_ROOT,
+  SERVER_CONTEXT,
+} from "../../server/symbols.mjs";
+import getServerAddresses from "../utils/server-address.mjs";
+import createServer from "./create-server.mjs";
+
+export default async function dev(root, options) {
+  try {
+    const config = await loadConfig();
+    const configRoot = config[CONFIG_ROOT];
+
+    await runtime_init$(async () => {
+      runtime$(CONFIG_CONTEXT, config);
+
+      const server = await createServer(root, options);
+
+      const port = options.port ?? configRoot.port;
+      const host = options.host ?? configRoot.host;
+      const listenerHost = host === true ? undefined : host;
+
+      const listener = server.listen(port, listenerHost);
+      runtime$(SERVER_CONTEXT, listener);
+      listener
+        .on("listening", () => {
+          getServerAddresses(listener).forEach((address) => {
+            logger.info(
+              colors.gray(
+                `${colors.green("listening")} on http${
+                  options.https ?? configRoot.server?.https ? "s" : ""
+                }://${address.address}:${listener.address().port}`
+              )
+            );
+            if (options.open ?? configRoot.server?.open) {
+              open(
+                `http${
+                  options.https ?? configRoot.server?.https ? "s" : ""
+                }://${host}:${port}`
+              );
+            }
+          });
+        })
+        .on("error", (e) => {
+          console.error(colors.red(e.stack));
+          if (e.code === "EADDRINUSE") {
+            setTimeout(() => {
+              server.ws.listen();
+              server.listen(port, listenerHost);
+            }, 1000);
+          }
+        });
+    });
+  } catch (e) {
+    console.error(colors.red(e.stack));
+  }
+}

package/lib/dev/create-logger.mjs

@@ -0,0 +1,52 @@
+import colors from "picocolors";
+import { createLogger as createViteLogger } from "vite";
+
+export default function createLogger() {
+  const logger = createViteLogger();
+  return {
+    ...logger,
+    ...["info", "warn", "warnOnce"].reduce((newLogger, command) => {
+      newLogger[command] = (...args) => {
+        const [msg] = args;
+        logger[command](
+          typeof msg !== "string"
+            ? args
+                .map((it) => {
+                  if (typeof it !== "object") return colors.gray(`${it}`);
+                  try {
+                    return colors.cyan(JSON.stringify(it));
+                  } catch (e) {
+                    return colors.red(
+                      `${it} ${e.message.replace(/\n/g, "")}`.replace(
+                        /\s\s+/g,
+                        " "
+                      )
+                    );
+                  }
+                })
+                .join(" ")
+            : msg,
+          { timestamp: true }
+        );
+      };
+      return newLogger;
+    }, {}),
+    error(e) {
+      let msg = e?.stack;
+      if (!msg) {
+        try {
+          if (typeof e !== "string") {
+            msg = JSON.stringify(e);
+          } else {
+            msg = e;
+          }
+        } catch (e) {
+          msg = e.message || e;
+        }
+      }
+      logger.error(colors.red(msg), {
+        timestamp: true,
+      });
+    },
+  };
+}