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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Viktor Lázár
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# @lazarv/react-server
+
+Experimental React meta-framework using Vite.
+
+See details at https://github.com/lazarv/react-server.

package/bin/cli.mjs

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+
+import "./loader.mjs";
+
+import { format } from "node:util";
+
+if (typeof process !== "undefined") {
+  // patch process.emit to ignore ExperimentalWarning
+  const originalEmit = process.emit;
+  process.emit = function (name, data, ...args) {
+    if (
+      name === "warning" &&
+      typeof data === "object" &&
+      data.name === "ExperimentalWarning"
+      //if you want to only stop certain messages, test for the message here:
+      //&& data.message.includes(`Fetch API`)
+    ) {
+      return false;
+    }
+    return originalEmit.call(process, name, data, ...args);
+  };
+}
+
+const oldConsoleError = console.error;
+console.error = function (message, ...args) {
+  if (!message) return;
+  // suppress warning about multiple react renderers using the same context
+  if (
+    typeof message === "string" &&
+    message.includes(
+      "Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported."
+    )
+  ) {
+    return;
+  }
+  // throw on other warnings
+  if (
+    message?.startsWith?.("Warning:") ||
+    message?.message?.startsWith?.("Warning:")
+  ) {
+    const error =
+      typeof message === "string"
+        ? new Error(format(message, ...args))
+        : message;
+    const stack = error.stack?.split?.("\n") ?? [];
+    if (
+      stack.find(
+        (line) => line.includes("at printWarning") && line.includes("/react@")
+      )
+    ) {
+      if (typeof message === "string") {
+        throw error;
+      } else {
+        return;
+      }
+    }
+  }
+  return oldConsoleError.call(console, message, ...args);
+};
+
+import { fileURLToPath } from "node:url";
+
+import cac from "cac";
+import glob from "fast-glob";
+
+import { argv, exit } from "../lib/sys.mjs";
+
+const { default: packageJson } = await import("../package.json", {
+  assert: { type: "json" },
+});
+const commands = await glob("commands/*.mjs", {
+  cwd: fileURLToPath(new URL(".", import.meta.url)),
+});
+
+const cli = cac(packageJson.name.split("/").pop());
+
+for (const command of commands) {
+  const { default: command_init$ } = await import(`./${command}`);
+  await command_init$?.(cli);
+}
+
+cli.help();
+cli.version(packageJson.version);
+
+try {
+  cli.parse(argv(), {
+    run: false,
+  });
+  await cli.runMatchedCommand();
+} catch (error) {
+  console.error(error.stack);
+  exit(1);
+}

package/bin/commands/build.mjs

@@ -0,0 +1,19 @@
+export default (cli) =>
+  cli
+    .command("build [root]", "build for production")
+    .option("--minify", "minify", { default: false })
+    .option(
+      "--sourcemap [type]",
+      "[boolean|inline|hidden] generate source map",
+      {
+        default: false,
+      }
+    )
+    .option("--no-color", "disable color output", { default: false })
+    .option("--dev", "[boolean] development mode", { default: false })
+    .option("--server", "[boolean] build server", { default: true })
+    .option("--client", "[boolean] build client", { default: true })
+    .option("--export", "[boolean] static export", { default: false })
+    .action(async (...args) =>
+      (await import("../../lib/build/action.mjs")).default(...args)
+    );

package/bin/commands/dev.mjs

@@ -0,0 +1,23 @@
+import { setEnv } from "../../lib/sys.mjs";
+
+export default (cli) =>
+  cli
+    .command("[root]", "start server in development mode")
+    .option("--host [host]", "[string] host to listen on", {
+      default: "localhost",
+    })
+    .option("--port <port>", "[number] port to listen on", { default: 3000 })
+    .option("--https", "[boolean] use HTTPS protocol", { default: false })
+    .option("--open [url]", "[boolean|string] open browser on server start", {
+      default: false,
+    })
+    .option("--cors", "enable CORS", { default: false })
+    .option("--force", "force optimize deps", { default: false })
+    .option("--clear-screen", "clear screen on server start", {
+      default: false,
+    })
+    .option("--no-color", "disable color output", { default: false })
+    .action(async (...args) => {
+      setEnv("NODE_ENV", "development");
+      (await import("../../lib/dev/action.mjs")).default(...args);
+    });

package/bin/commands/start.mjs

@@ -0,0 +1,16 @@
+export default (cli) =>
+  cli
+    .command("start [root]", "start server in production mode")
+    .option("--host [host]", "[string] host to listen on", {
+      default: "localhost",
+    })
+    .option("--port <port>", "[number] port to listen on", { default: 3000 })
+    .option("--https", "[boolean] use HTTPS protocol", { default: false })
+    .option("--cors", "[boolean] enable CORS", { default: false })
+    .option("--origin <origin>", "[string] origin", { default: "" })
+    .option("--trust-proxy", "[boolean] trust proxy", { default: false })
+    .option("--build <root>", "[string] build root", { default: "" })
+    .option("--dev", "[boolean] development mode", { default: false })
+    .action(async (...args) =>
+      (await import("../../lib/start/action.mjs")).default(...args)
+    );

package/bin/loader.mjs

@@ -0,0 +1,38 @@
+import { createRequire } from "node:module";
+
+import moduleAlias from "module-alias";
+const __require = createRequire(import.meta.url);
+
+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 moduleAliases = {
+  react,
+  "react/jsx-runtime": reactJsxRuntime,
+  "react/jsx-dev-runtime": reactJsxDevRuntime,
+  "react-dom": reactDom,
+  "react-dom/client": reactDomClient,
+  "react-dom/server.edge": reactDomServerEdge,
+  "react-server-dom-webpack/client.browser": reactServerDomWebpackClientBrowser,
+  "react-server-dom-webpack/client.edge": reactServerDomWebpackClientEdge,
+  "react-server-dom-webpack/server.edge": reactServerDomWebpackServerEdge,
+  "react-error-boundary": reactErrorBoundary,
+};
+
+Object.entries(moduleAliases).forEach(([pkg, resolved]) =>
+  moduleAlias.addAlias(pkg, resolved)
+);

package/client/ActionState.mjs

@@ -0,0 +1,16 @@
+import { createServerContext, useContext } from "react";
+
+export const ActionStateContext = createServerContext("ActionStateContext", {
+  formData: null,
+  data: null,
+  error: null,
+  actionId: null,
+});
+
+export function useActionState(action) {
+  const { formData, data, error, actionId } = useContext(ActionStateContext);
+  if (actionId !== action.$$id) {
+    return { formData: null, data: null, error: null, actionId: action.$$id };
+  }
+  return { formData, data, error, actionId };
+}

package/client/ClientOnly.jsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { startTransition, useEffect, useState } from "react";
+
+export default function ClientOnly({ children }) {
+  const [client, setClient] = useState(false);
+  useEffect(() => {
+    startTransition(() => {
+      setClient(true);
+    });
+  }, []);
+
+  return client ? <>{children}</> : null;
+}

package/client/ClientProvider.jsx

@@ -0,0 +1,243 @@
+import {
+  createFromFetch,
+  createFromReadableStream,
+  encodeReply,
+} from "react-server-dom-webpack/client.browser";
+
+import { ClientContext } from "./context.mjs";
+
+export const PAGE_ROOT = "PAGE_ROOT";
+let activeChunk = null;
+const cache = new Map();
+const listeners = new Map();
+const outlets = new Map();
+const prefetching = new Map();
+const flightCache = new Map();
+const registerOutlet = (outlet, url) => {
+  outlets.set(outlet, url);
+  return () => outlets.delete(outlet);
+};
+const subscribe = (url, listener) => {
+  if (!listeners.has(url)) {
+    listeners.set(url, new Set());
+  }
+  const urlListeners = listeners.get(url);
+  urlListeners.add(listener);
+  return () => urlListeners.delete(listener);
+};
+const emit = (url, to = url, callback = () => {}) => {
+  if (!listeners.has(url)) return;
+  const urlListeners = listeners.get(url);
+  for (const listener of urlListeners) listener(to, callback);
+};
+const prefetch = (to, { outlet = PAGE_ROOT, ttl = Infinity }) => {
+  if (prefetching.get(outlet) !== to) {
+    cache.delete(outlet);
+    cache.delete(to);
+    prefetching.set(outlet, to);
+    const key = `${outlet}:${to}`;
+    if (flightCache.has(key)) {
+      cache.set(outlet, flightCache.get(key));
+    } else {
+      getFlightResponse(to, {
+        outlet,
+        standalone: outlet !== PAGE_ROOT,
+      });
+      flightCache.set(key, cache.get(outlet));
+      if (typeof ttl === "number" && ttl < Infinity) {
+        setTimeout(() => {
+          if (flightCache.has(key)) {
+            flightCache.delete(key);
+          }
+        }, ttl);
+      }
+    }
+  }
+};
+const refresh = async (outlet = PAGE_ROOT) => {
+  return new Promise((resolve, reject) => {
+    const url = outlets.get(outlet) || PAGE_ROOT;
+    if (prefetching.get(outlet) === url) {
+      prefetching.delete(outlet);
+    } else {
+      cache.delete(url);
+      cache.delete(outlet);
+    }
+    emit(outlet, url, (err) => {
+      if (err) reject(err);
+      else {
+        activeChunk = cache.get(outlet);
+        resolve();
+      }
+    });
+  });
+};
+const navigate = (to, { outlet = PAGE_ROOT, push, rollback = 0 }) => {
+  return new Promise((resolve, reject) => {
+    if (outlet === PAGE_ROOT) {
+      if (typeof rollback === "number" && rollback > 0) {
+        const key = `${outlet}:${location.href}`;
+        if (!flightCache.has(key)) {
+          const timeoutKey = `${key}:timeout`;
+          if (flightCache.has(timeoutKey)) {
+            clearTimeout(flightCache.get(timeoutKey));
+            flightCache.delete(timeoutKey);
+          }
+          flightCache.set(key, activeChunk);
+          flightCache.set(
+            timeoutKey,
+            setTimeout(() => {
+              if (flightCache.has(key)) {
+                flightCache.delete(key);
+              }
+            }, rollback)
+          );
+        }
+      }
+      outlets.set(outlet, to);
+      if (push !== false) {
+        history.pushState(null, "", to);
+      } else {
+        history.replaceState(null, "", to);
+      }
+    }
+    if (prefetching.get(outlet) === to) {
+      prefetching.delete(outlet);
+    } else {
+      cache.delete(to);
+      cache.delete(outlet);
+    }
+    emit(outlet, to, (err) => {
+      if (err) reject(err);
+      else {
+        activeChunk = cache.get(outlet);
+        resolve();
+      }
+    });
+  });
+};
+const replace = (to, options) => {
+  return navigate(to, { ...options, push: false });
+};
+window.addEventListener("popstate", () => {
+  const key = `${PAGE_ROOT}:${location.href}`;
+  if (flightCache.has(key)) {
+    cache.set(PAGE_ROOT, flightCache.get(key));
+    flightCache.delete(key);
+    const timeoutKey = `${key}:timeout`;
+    if (flightCache.has(timeoutKey)) {
+      clearTimeout(flightCache.get(timeoutKey));
+      flightCache.delete(timeoutKey);
+    }
+  } else {
+    cache.delete(PAGE_ROOT);
+    cache.delete(location.href);
+  }
+  outlets.set(PAGE_ROOT, location.href);
+  emit(PAGE_ROOT, location.href, (err) => {
+    if (!err) {
+      activeChunk = cache.get(PAGE_ROOT);
+    }
+  });
+});
+const streamOptions = (outlet) => ({
+  async callServer(id, args) {
+    // eslint-disable-next-line no-async-promise-executor
+    return new Promise(async (resolve, reject) => {
+      try {
+        let formData = await encodeReply(args);
+        let target = outlet;
+        let url = outlet || PAGE_ROOT;
+        // if (args?.length > 1) {
+        //   const remote = args[0];
+        //   if (
+        //     typeof remote?.__react_server_remote_component_url__ === "string" &&
+        //     remote?.__react_server_remote_component_url__
+        //   ) {
+        //     url = remote.__react_server_remote_component_url__;
+        //   }
+        //   if (
+        //     typeof remote?.__react_server_remote_component_outlet__ ===
+        //       "string" &&
+        //     remote?.__react_server_remote_component_outlet__
+        //   ) {
+        //     target = remote.__react_server_remote_component_outlet__;
+        //   }
+        // }
+        cache.delete(url);
+        cache.delete(target);
+        getFlightResponse(outlets.get(target) || url, {
+          method: "POST",
+          body: formData,
+          outlet: target,
+          standalone: target !== PAGE_ROOT,
+          headers: {
+            "React-Server-Action": id,
+          },
+        });
+        emit(target, url, (err, result) => {
+          if (err) reject(err);
+          else resolve(result);
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  },
+});
+function getFlightResponse(url, options = {}) {
+  if (!cache.has(options.outlet || url)) {
+    if (
+      self[`__flightStream__${options.outlet || PAGE_ROOT}__`] &&
+      !self[`__flightHydration__${options.outlet || PAGE_ROOT}__`]
+    ) {
+      cache.set(
+        options.outlet || url,
+        createFromReadableStream(
+          self[`__flightStream__${options.outlet || PAGE_ROOT}__`].readable,
+          streamOptions(options.outlet || url)
+        )
+      );
+      self[`__flightHydration__${options.outlet || PAGE_ROOT}__`] = true;
+      activeChunk = cache.get(options.outlet || url);
+    } else {
+      cache.set(
+        options.outlet || url,
+        createFromFetch(
+          fetch(url === PAGE_ROOT ? location.href : url, {
+            method: options.method,
+            body: options.body,
+            headers: {
+              accept: `text/x-component${
+                options.standalone && url !== PAGE_ROOT ? ";standalone" : ""
+              }`,
+              "React-Server-Outlet": options.outlet || PAGE_ROOT,
+              ...options.headers,
+            },
+          }),
+          streamOptions(options.outlet || url)
+        )
+      );
+    }
+  }
+
+  return cache.get(options.outlet || url);
+}
+
+export default function ClientProvider({ children }) {
+  return (
+    <ClientContext.Provider
+      value={{
+        registerOutlet,
+        refresh,
+        prefetch,
+        navigate,
+        replace,
+        subscribe,
+        getFlightResponse,
+      }}
+    >
+      {children}
+    </ClientContext.Provider>
+  );
+}

package/client/ErrorBoundary.jsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useClient } from "@lazarv/react-server/client";
+import { useContext, useEffect } from "react";
+import { ErrorBoundary, useErrorBoundary } from "react-error-boundary";
+
+import { FlightContext } from "./FlightContext.mjs";
+
+function ResetErrorBoundary() {
+  const { url, outlet } = useContext(FlightContext);
+  const { resetBoundary } = useErrorBoundary();
+  const { subscribe } = useClient();
+
+  useEffect(() => {
+    return subscribe(outlet || url, () => resetBoundary());
+  }, []);
+
+  return null;
+}
+
+/**
+ * @typedef {import("react").PropsWithChildren<Omit<import("react-error-boundary").ErrorBoundaryProps, 'fallback'> & { fallback: import("react").ReactNode }>} ReactServerErrorBoundaryProps
+ * @param { ReactServerErrorBoundaryProps } props
+ */
+export default function ReactServerErrorBoundary({
+  component: FallbackComponent,
+  render: fallbackRender,
+  children,
+  ...props
+}) {
+  return (
+    <ErrorBoundary
+      {...props}
+      fallbackRender={(props) => (
+        <>
+          <ResetErrorBoundary />
+          {FallbackComponent && <FallbackComponent {...props} />}
+          {fallbackRender?.(props)}
+        </>
+      )}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}

package/client/FlightContext.mjs

@@ -0,0 +1,3 @@
+import { createServerContext } from "react";
+
+export const FlightContext = createServerContext("FlightContext", "/");

package/client/Link.jsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useClient } from "@lazarv/react-server/client";
+import { startTransition, useCallback } from "react";
+
+export default function Link({
+  to,
+  target,
+  transition,
+  push,
+  replace,
+  prefetch: prefetchEnabled,
+  ttl = Infinity,
+  rollback = false,
+  onNavigate,
+  onError,
+  children,
+  ...props
+}) {
+  const { prefetch, navigate } = useClient();
+
+  const tryNavigate = useCallback(async () => {
+    try {
+      await navigate(to, {
+        outlet: target,
+        push: replace ? false : push,
+        rollback,
+      });
+      onNavigate?.();
+    } catch (e) {
+      onError?.(e);
+    }
+  }, []);
+
+  const handleNavigate = async (e) => {
+    e.preventDefault();
+    if (transition !== false) {
+      startTransition(tryNavigate);
+    } else {
+      tryNavigate();
+    }
+  };
+
+  const handlePrefetch = () =>
+    prefetchEnabled === true && prefetch(to, { outlet: target, ttl });
+
+  return (
+    <a
+      {...props}
+      href={to}
+      onClick={handleNavigate}
+      onFocus={handlePrefetch}
+      onMouseOver={handlePrefetch}
+      onTouchStart={handlePrefetch}
+    >
+      {children}
+    </a>
+  );
+}

package/client/Params.mjs

@@ -0,0 +1,15 @@
+import { getContext } from "@lazarv/react-server/server/context.mjs";
+import { ROUTE_MATCH } from "@lazarv/react-server/server/symbols.mjs";
+import { createServerContext, useContext } from "react";
+
+export const ParamsContext = createServerContext("ParamsContext", {});
+
+export function useParams() {
+  if (import.meta.env.SSR) {
+    const params = getContext(ROUTE_MATCH);
+    if (typeof params !== "undefined") {
+      return params;
+    }
+  }
+  return useContext(ParamsContext) ?? {};
+}