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

package/lib/dev/create-server.mjs

@@ -0,0 +1,208 @@
+import { createRequire } from "node:module";
+import { join } from "node:path";
+
+import { createMiddleware } from "@hattip/adapter-node";
+import { compose } from "@hattip/compose";
+import { cookie } from "@hattip/cookie";
+import { cors } from "@hattip/cors";
+import { parseMultipartFormData } from "@hattip/multipart";
+import react from "@vitejs/plugin-react";
+import { createServer as createViteDevServer } from "vite";
+
+import { MemoryCache } from "../../memory-cache/index.mjs";
+import packageJson from "../../package.json" assert { type: "json" };
+import { getRuntime, runtime$ } from "../../server/runtime.mjs";
+import {
+  COLLECT_STYLESHEETS,
+  CONFIG_CONTEXT,
+  CONFIG_ROOT,
+  FORM_DATA_PARSER,
+  LOGGER_CONTEXT,
+  MEMORY_CACHE_CONTEXT,
+  MODULE_LOADER,
+  SERVER_CONTEXT,
+} from "../../server/symbols.mjs";
+import { clientAlias } from "../build/resolve.mjs";
+import notFoundHandler from "../handlers/not-found.mjs";
+import staticHandler from "../handlers/static.mjs";
+import trailingSlashHandler from "../handlers/trailing-slash.mjs";
+import reactServer from "../plugins/react-server.mjs";
+import useClient from "../plugins/use-client.mjs";
+import useServer from "../plugins/use-server.mjs";
+import * as sys from "../sys.mjs";
+import merge from "../utils/merge.mjs";
+import createLogger from "./create-logger.mjs";
+import ssrHandler from "./ssr-handler.mjs";
+
+const __require = createRequire(import.meta.url);
+const packageName = packageJson.name;
+const cwd = sys.cwd();
+
+export default async function createServer(root, options) {
+  const config = getRuntime(CONFIG_CONTEXT)?.[CONFIG_ROOT];
+  let reactServerRouterModule;
+  try {
+    reactServerRouterModule = __require.resolve("@lazarv/react-server-router", {
+      paths: [cwd],
+    });
+  } catch (e) {
+    // ignore
+  }
+
+  const devServerConfig = {
+    ...config,
+    server: {
+      ...config.server,
+      middlewareMode: true,
+      cors: options.cors ?? config.server?.cors,
+      hmr: {
+        port: 21678 + parseInt(options.port ?? config.server?.port ?? 0),
+        ...config.server?.hmr,
+      },
+      https: options.https ?? config.server?.https,
+      fs: {
+        ...config.server?.fs,
+        allow: [cwd, ...(config.server?.fs?.allow ?? [])],
+      },
+    },
+    publicDir: false,
+    root: __require.resolve(`${packageName}`),
+    appType: "ssr",
+    clearScreen: options.clearScreen,
+    configFile: false,
+    plugins: [
+      reactServer(),
+      ...(reactServerRouterModule &&
+      (!root || root === "@lazarv/react-server-router")
+        ? [
+            (async () =>
+              (
+                await import(
+                  __require.resolve("@lazarv/react-server-router/plugin", {
+                    paths: [cwd],
+                  })
+                )
+              ).default())(),
+          ]
+        : []),
+      useClient(),
+      useServer(),
+      react(),
+      ...(config.plugins ?? []),
+    ],
+    resolve: {
+      ...config.resolve,
+      alias: [...clientAlias(true), ...(config.resolve?.alias ?? [])],
+    },
+    optimizeDeps: {
+      ...config.optimizeDeps,
+      include: [
+        "react",
+        "react-dom",
+        "react-dom/client",
+        "react-server-dom-webpack/client.browser",
+        "react-error-boundary",
+        ...(config.optimizeDeps?.include ?? []).map((m) =>
+          __require.resolve(m, { paths: [cwd] })
+        ),
+      ],
+      exclude: [
+        ...(config.optimizeDeps?.exclude ?? []).map((m) =>
+          __require.resolve(m, { paths: [cwd] })
+        ),
+      ],
+      force: options.force ?? config.optimizeDeps?.force,
+    },
+    css: {
+      ...config.css,
+      postcss: cwd,
+    },
+    customLogger: createLogger(),
+  };
+
+  const viteDevServer = await createViteDevServer(
+    typeof config.vite === "function"
+      ? config.vite(devServerConfig) ?? devServerConfig
+      : merge(devServerConfig, config.vite)
+  );
+
+  const initialRuntime = {
+    [SERVER_CONTEXT]: viteDevServer,
+    [LOGGER_CONTEXT]: viteDevServer.config.logger,
+    [MODULE_LOADER]: (id) => viteDevServer.ssrLoadModule(id.split("::")[0]),
+    [FORM_DATA_PARSER]: parseMultipartFormData,
+    [MEMORY_CACHE_CONTEXT]: new MemoryCache(),
+    [COLLECT_STYLESHEETS]: function collectCss(rootModule) {
+      const styles = [];
+      const visited = new Set();
+      function collectCss(moduleId) {
+        if (
+          moduleId &&
+          !visited.has(moduleId) &&
+          !moduleId.startsWith("virtual:")
+        ) {
+          visited.add(moduleId);
+          const mod = viteDevServer.moduleGraph.getModuleById(moduleId);
+          const values = Array.from(mod.importedModules.values());
+          const importedStyles = values.filter(
+            (mod) => /\.(css|scss|less)/.test(mod.id) && !styles.includes(mod)
+          );
+          const imports = values.filter(
+            (mod) => !/\.(css|scss|less)/.test(mod.id)
+          );
+
+          styles.push(...importedStyles.map((mod) => mod.url));
+          imports.forEach((mod) => mod.id && collectCss(mod.id));
+        }
+      }
+      collectCss(rootModule);
+      return styles;
+    },
+  };
+
+  runtime$(
+    typeof config.runtime === "function"
+      ? config.runtime(initialRuntime) ?? initialRuntime
+      : {
+          ...initialRuntime,
+          ...config.runtime,
+        }
+  );
+
+  const publicDir =
+    typeof config.publicDir === "string" ? config.publicDir : "public";
+  const initialHandlers = [
+    ...(config.publicDir !== false
+      ? [
+          await staticHandler(join(cwd, publicDir), {
+            cwd: publicDir,
+          }),
+        ]
+      : []),
+    await trailingSlashHandler(),
+    cookie(config.cookies),
+    ...(config.handlers?.pre ?? []),
+    await ssrHandler(root),
+    ...(config.handlers?.post ?? []),
+    await notFoundHandler(),
+  ];
+  if (options.cors) {
+    initialHandlers.unshift(cors());
+  }
+
+  viteDevServer.middlewares.use(
+    createMiddleware(
+      compose(
+        typeof config.handlers === "function"
+          ? config.handlers(initialHandlers) ?? initialHandlers
+          : [...initialHandlers, ...(config.handlers ?? [])]
+      )
+    )
+  );
+
+  return {
+    listen: (...args) => viteDevServer.middlewares.listen(...args),
+    close: () => viteDevServer.close(),
+    ws: viteDevServer.ws,
+  };
+}

package/lib/dev/modules.mjs

@@ -0,0 +1,20 @@
+import { createRequire } from "node:module";
+
+import packageJson from "../../package.json" assert { type: "json" };
+import { cwd } from "../sys.mjs";
+
+const __require = createRequire(import.meta.url);
+
+export default function getModules(root) {
+  const entryModule = __require.resolve(
+    `${packageJson.name}/server/entry.server.jsx`
+  );
+  const rootModule = __require.resolve(root ?? "@lazarv/react-server-router", {
+    paths: [cwd()],
+  });
+  const memoryCacheModule = __require.resolve(
+    `${packageJson.name}/memory-cache`
+  );
+
+  return { entryModule, rootModule, memoryCacheModule };
+}

package/lib/dev/ssr-handler.mjs

@@ -0,0 +1,135 @@
+import { createRequire } from "node:module";
+
+import { forChild } from "../../config/index.mjs";
+import packageJson from "../../package.json" assert { type: "json" };
+import { context$, ContextStorage, getContext } from "../../server/context.mjs";
+import { init$ as module_loader_init$ } from "../../server/module-loader.mjs";
+import { getRuntime } from "../../server/runtime.mjs";
+import {
+  COLLECT_STYLESHEETS,
+  CONFIG_CONTEXT,
+  ERROR_CONTEXT,
+  FORM_DATA_PARSER,
+  HTTP_CONTEXT,
+  LOGGER_CONTEXT,
+  MAIN_MODULE,
+  MEMORY_CACHE_CONTEXT,
+  MODULE_LOADER,
+  REDIRECT_CONTEXT,
+  SERVER_CONTEXT,
+  STYLES_CONTEXT,
+} from "../../server/symbols.mjs";
+import errorHandler from "../handlers/error.mjs";
+import getModules from "./modules.mjs";
+
+const __require = createRequire(import.meta.url);
+
+export default async function ssrHandler(root) {
+  const { entryModule, rootModule, memoryCacheModule } = getModules(root);
+  const viteDevServer = getRuntime(SERVER_CONTEXT);
+  const ssrLoadModule = getRuntime(MODULE_LOADER);
+  const { default: React } = await import("react");
+  const logger = getRuntime(LOGGER_CONTEXT);
+  const config = getRuntime(CONFIG_CONTEXT);
+
+  return async (httpContext) => {
+    return new Promise((resolve) => {
+      try {
+        ContextStorage.run(
+          {
+            [SERVER_CONTEXT]: viteDevServer,
+            [HTTP_CONTEXT]: httpContext,
+            [CONFIG_CONTEXT]: config,
+            [ERROR_CONTEXT]: errorHandler,
+            [MODULE_LOADER]: ssrLoadModule,
+            [LOGGER_CONTEXT]: logger,
+            [MAIN_MODULE]: [
+              "/@vite/client",
+              `/${packageJson.name}/client/hmr.mjs`,
+            ],
+            [FORM_DATA_PARSER]: getRuntime(FORM_DATA_PARSER),
+            [MEMORY_CACHE_CONTEXT]: getRuntime(MEMORY_CACHE_CONTEXT),
+            [REDIRECT_CONTEXT]: {},
+            [COLLECT_STYLESHEETS]: getRuntime(COLLECT_STYLESHEETS),
+          },
+          async () => {
+            try {
+              // clear up server context registry object
+              Reflect.ownKeys(
+                React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+                  .ContextRegistry
+              ).forEach((key) =>
+                Reflect.deleteProperty(
+                  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+                    .ContextRegistry,
+                  key
+                )
+              );
+
+              const cacheModule = forChild(httpContext.url)?.cache?.module;
+
+              const [
+                { render },
+                { default: Component, init$: root_init$ },
+                { init$: cache_init$ },
+              ] = await Promise.all([
+                ssrLoadModule(entryModule),
+                ssrLoadModule(rootModule),
+                import(
+                  cacheModule
+                    ? __require.resolve(cacheModule, {
+                        paths: [process.cwd()],
+                      })
+                    : memoryCacheModule
+                ),
+              ]);
+
+              await cache_init$?.();
+              try {
+                const middlewares = await root_init$?.();
+                if (middlewares) {
+                  const response = await middlewares(httpContext);
+                  if (response) {
+                    return resolve(response);
+                  }
+                }
+              } catch (e) {
+                const redirect = getContext(REDIRECT_CONTEXT);
+                if (redirect?.response) {
+                  return resolve(redirect.response);
+                } else {
+                  throw e;
+                }
+              }
+
+              const accept = httpContext.request.headers.get("accept");
+              if (
+                !accept ||
+                !(
+                  accept.includes("text/html") ||
+                  accept.includes("text/x-component") ||
+                  accept.includes("application/json")
+                )
+              ) {
+                return resolve();
+              }
+
+              const styles =
+                getRuntime(COLLECT_STYLESHEETS)?.(rootModule) ?? [];
+              context$(STYLES_CONTEXT, styles);
+
+              await module_loader_init$?.(ssrLoadModule);
+              return resolve(render(Component));
+            } catch (e) {
+              logger.error(e);
+              return resolve(await getContext(ERROR_CONTEXT)?.(e));
+            }
+          }
+        );
+      } catch (e) {
+        logger.error(e);
+        return resolve(errorHandler(e));
+      }
+    });
+  };
+}

package/lib/handlers/error.mjs

@@ -0,0 +1,153 @@
+import strip from "strip-ansi";
+
+import packageJson from "../../package.json" assert { type: "json" };
+import { getContext } from "../../server/context.mjs";
+import {
+  HTTP_CONTEXT,
+  HTTP_HEADERS,
+  HTTP_STATUS,
+  SERVER_CONTEXT,
+} from "../../server/symbols.mjs";
+
+function cleanStack(stack) {
+  return stack
+    .split(/\n/g)
+    .filter((l) => /^\s*at/.test(l))
+    .map((l) => l.trim())
+    .join("\n");
+}
+
+export function prepareError(err) {
+  try {
+    if (!err.id) {
+      const viteDevServer = getContext(SERVER_CONTEXT);
+      viteDevServer.ssrFixStacktrace(err);
+      const [id, line, column] =
+        err.stack
+          .split("\n")[1]
+          .match(/\((.*:[0-9]+:[0-9]+)\)/)?.[1]
+          .split(":") ?? [];
+
+      if (viteDevServer.moduleGraph.idToModuleMap.has(id)) {
+        const {
+          ssrTransformResult: { map },
+        } = viteDevServer.moduleGraph.getModuleById(id);
+
+        err.id = id;
+        if (!err.loc) {
+          err.loc = {
+            file: id,
+            column: parseInt(column, 10),
+            line: parseInt(line, 10),
+            length: 0,
+            lineText: "",
+            namespace: "",
+            suggestion: "",
+          };
+        }
+
+        if (!err.frame) {
+          const lines = map.sourcesContent[0].split("\n");
+          const start = Math.max(0, err.loc.line - 3);
+          const end = Math.min(lines.length, err.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(
+                        err.loc.column
+                      )}^`,
+                    ]
+                  : []),
+              ];
+            })
+            .join("\n");
+          err.frame = `${err.message}\n${frame}\n`;
+        }
+      }
+
+      err.plugin = err.plugin || packageJson.name;
+    }
+  } catch (e) {
+    console.error(e);
+  }
+  return {
+    message: strip(err.message),
+    stack: strip(cleanStack(err.stack || "")),
+    id: err.id,
+    frame: strip(err.frame || ""),
+    plugin: err.plugin,
+    pluginCode: err.pluginCode?.toString(),
+    loc: err.loc,
+  };
+}
+
+function plainResponse(e) {
+  const httpStatus = getContext(HTTP_STATUS) ?? {
+    status: 500,
+    statusText: "Internal Server Error",
+  };
+  return new Response(e?.stack ?? null, {
+    ...httpStatus,
+    headers: {
+      "Content-Type": "text/plain",
+      ...(getContext(HTTP_HEADERS) ?? {}),
+    },
+  });
+}
+
+export default async function errorHandler(err) {
+  try {
+    const server = getContext(SERVER_CONTEXT);
+    // TODO: is there a better way to check if this is a vite dev server?
+    if (typeof server?.ssrFixStacktrace !== "function") {
+      return plainResponse(err);
+    }
+
+    const accept = getContext(HTTP_CONTEXT)?.request?.headers?.get?.("accept");
+    if (accept?.includes?.(";standalone")) {
+      return plainResponse(err);
+    }
+
+    const httpStatus = getContext(HTTP_STATUS) ?? {
+      status: 500,
+      statusText: "Internal Server Error",
+    };
+
+    return new Response(
+      `<!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <title>Error</title>
+        <script type="module">
+          import { ErrorOverlay } from '/@vite/client'
+          document.body.appendChild(new ErrorOverlay(${JSON.stringify(
+            await prepareError(err)
+          ).replace(/</g, "\\u003c")}))
+        </script>
+      </head>
+      <body>
+      </body>
+    </html>`,
+      {
+        ...httpStatus,
+        headers: {
+          "Content-Type": "text/html",
+          ...(getContext(HTTP_HEADERS) ?? {}),
+        },
+      }
+    );
+  } catch (e) {
+    return plainResponse(e);
+  }
+}

package/lib/handlers/not-found.mjs

@@ -0,0 +1,5 @@
+export default async function notFoundHandler() {
+  return async () => {
+    return new Response("Not Found", { status: 404 });
+  };
+}

package/lib/handlers/redirect.mjs

@@ -0,0 +1 @@
+export default () => {};

package/lib/handlers/rewrite.mjs

@@ -0,0 +1 @@
+export default () => {};

package/lib/handlers/static.mjs

@@ -0,0 +1,120 @@
+import { open, readFile } from "node:fs/promises";
+import { join, relative } from "node:path";
+
+import glob from "fast-glob";
+import mime from "mime";
+
+export default async function staticHandler(dir, options = {}) {
+  const files = (
+    await glob(`${dir}/**/*`, {
+      cwd: options.cwd,
+      stats: true,
+      absolute: true,
+    })
+  ).reduce((files, file) => {
+    files.set(
+      `/${relative(join(process.cwd(), options.cwd ?? "."), file.path)}`,
+      {
+        ...file,
+        etag: `W/"${file.stats.size}-${file.stats.mtime.getTime()}"`,
+        mime:
+          mime.getType(file.path.replace(/\.(br|gz)$/, "")) ||
+          "application/octet-stream",
+      }
+    );
+    return files;
+  }, new Map());
+  const fileCache = new Map();
+
+  return async (context) => {
+    let { pathname } = context.url;
+
+    if (pathname.startsWith("/@source")) {
+      return new Response(await readFile(pathname.slice(8), "utf8"), {
+        headers: {
+          "content-type": "text/plain",
+        },
+      });
+    }
+
+    const accept = context.request.headers.get("accept");
+    const isHTML = accept?.includes("text/html");
+    const isRSC = accept?.includes("text/x-component");
+    let contentEncoding = undefined;
+
+    if (isHTML) {
+      const acceptEncoding = context.request.headers.get("accept-encoding");
+      const isBrotli = acceptEncoding?.includes("br");
+      const isGzip = acceptEncoding?.includes("gzip");
+
+      if (isBrotli && files.has(`${pathname}/index.html.br`)) {
+        pathname = `${pathname}/index.html.br`;
+        contentEncoding = "br";
+      } else if (isGzip && files.has(`${pathname}/index.html.gz`)) {
+        pathname = `${pathname}/index.html.gz`;
+        contentEncoding = "gzip";
+      } else if (files.has(`${pathname}/index.html`)) {
+        pathname = `${pathname}/index.html`;
+      }
+    }
+
+    if (pathname !== "/" && files.has(pathname)) {
+      try {
+        const file = files.get(pathname);
+        if (
+          context.request.headers.get("if-none-match") === file.etag &&
+          !isRSC
+        ) {
+          return new Response(null, {
+            status: 304,
+          });
+        }
+        let res = null;
+        if (!fileCache.has(pathname)) {
+          const fd = await open(file.path, "r");
+          try {
+            const fs = fd.createReadStream();
+            res = new ReadableStream({
+              type: "bytes",
+              async start(controller) {
+                const payload = [];
+                for await (const chunk of fs) {
+                  payload.push(Buffer.copyBytesFrom(chunk));
+                  controller.enqueue(chunk);
+                }
+                fileCache.set(pathname, Buffer.concat(payload));
+                controller.close();
+              },
+            });
+          } catch (e) {
+            fd.close();
+            return;
+          }
+        } else {
+          res = fileCache.get(pathname);
+        }
+        if (res) {
+          return new Response(res, {
+            headers: {
+              "content-type": file.mime,
+              "content-length": file.stats.size,
+              etag: file.etag,
+              "cache-control":
+                context.request.headers.get("cache-control") === "no-cache"
+                  ? "no-cache"
+                  : isHTML
+                  ? "must-revalidate"
+                  : "public,max-age=600",
+              "last-modified": file.stats.mtime.toUTCString(),
+              "content-encoding": contentEncoding,
+            },
+          });
+        }
+      } catch (error) {
+        if (error.code !== "ENOENT") {
+          throw error;
+        }
+      }
+    }
+  };
+}

package/lib/handlers/trailing-slash.mjs

@@ -0,0 +1,12 @@
+export default async function trailingSlash() {
+  return async ({ url: { pathname } }) => {
+    if (pathname !== "/" && pathname.endsWith("/")) {
+      return new Response(null, {
+        status: 301,
+        headers: {
+          Location: pathname.replace(/\/+$/g, "") || "/",
+        },
+      });
+    }
+  };
+}