@lukoweb/apitogo 0.2.31 → 0.2.34

package/src/app/entry.client.tsx

@@ -1,107 +1,115 @@
-import { createRoot, hydrateRoot } from "react-dom/client";
-import {
-  createBrowserRouter,
-  matchRoutes,
-  type RouteObject,
-} from "react-router";
-import config from "virtual:zudoku-config";
-import "vite/modulepreload-polyfill";
-import { Bootstrap } from "../lib/components/Bootstrap.js";
-import { getRoutesByConfig, shikiReady } from "./main.js";
-
-const routes = getRoutesByConfig(config);
-// biome-ignore lint/style/noNonNullAssertion: We know the root element exists
-const root = document.getElementById("root")!;
-
-declare global {
-  interface Window {
-    ZUDOKU_VERSION: string;
-  }
-}
-
-window.ZUDOKU_VERSION = process.env.ZUDOKU_VERSION ?? "unknown";
-
-if (process.env.SENTRY_DSN) {
-  void import("./sentry.js").then((mod) => {
-    mod.initSentry({ dsn: process.env.SENTRY_DSN as string });
-  });
-}
-
-if (root.childElementCount > 0) {
-  void hydrate(routes);
-} else {
-  void render(routes);
-}
-
-if (import.meta.env.IS_ZUPLO) {
-  // biome-ignore lint/suspicious/noConsole: Logging allowed here
-  console.log(
-    `%cPowered by Zuplo v${window.ZUDOKU_VERSION}`,
-    [
-      "color: #Df0097",
-      "line-height: 50px",
-      "font-weight: bolder",
-      "font-size: 15px",
-      "text-align: center",
-      "letter-spacing: 5px",
-    ].join(" ;"),
-  );
-} else {
-  // biome-ignore lint/suspicious/noConsole: Logging allowed here
-  console.log(
-    `%cAPITOGO v${window.ZUDOKU_VERSION}`,
-    [
-      "color: #0d9488",
-      "line-height: 50px",
-      "font-weight: bolder",
-      "font-size: 15px",
-      "text-align: center",
-      "letter-spacing: 5px",
-    ].join(" ;"),
-  );
-  // biome-ignore lint/suspicious/noConsole: Logging allowed here
-  console.log("» Learn more at https://apitogo.com");
-}
-
-async function hydrateLazyRoutes(routes: RouteObject[]) {
-  const path = window.location.pathname;
-  const lazyMatches = matchRoutes(routes, path, config.basePath)?.filter(
-    (m) => m.route.lazy,
-  );
-
-  if (lazyMatches?.length) {
-    await Promise.all(
-      lazyMatches.map(async (m) => {
-        if (typeof m.route.lazy !== "function") return;
-
-        const routeModule = await m.route.lazy();
-        Object.assign(m.route, { ...routeModule, lazy: undefined });
-      }),
-    );
-  }
-}
-
-function render(routes: RouteObject[]) {
-  const router = createBrowserRouter(routes, {
-    basename: config.basePath,
-  });
-  createRoot(root).render(<Bootstrap router={router} />);
-}
-
-async function hydrate(routes: RouteObject[]) {
-  await Promise.all([hydrateLazyRoutes(routes), shikiReady]);
-
-  const router = createBrowserRouter(routes, {
-    basename: config.basePath,
-  });
-
-  hydrateRoot(root, <Bootstrap hydrate router={router} />);
-}
-
-// This is a workaround to avoid version skewing
-// See https://vite.dev/guide/build.html#load-error-handling
-// TODO: Implement a more advanced solution if there are CDN urls or e.g. Vercel Skew Protection
-window.addEventListener("vite:preloadError", (e) => {
-  e.preventDefault();
-  window.location.reload();
-});
+import { createRoot, hydrateRoot } from "react-dom/client";
+import {
+  createBrowserRouter,
+  matchRoutes,
+  type RouteObject,
+} from "react-router";
+import config from "virtual:zudoku-config";
+import "vite/modulepreload-polyfill";
+import type { ResolvedModulesConfig } from "../config/validators/ModulesSchema.js";
+import { Bootstrap } from "../lib/components/Bootstrap.js";
+import { getRoutesByConfig } from "./main.js";
+
+// The build resolved the modules and put them in the config; parsing them again would put zod in this bundle.
+const routes = getRoutesByConfig(
+  config,
+  (c) => (c as { __resolvedModules: ResolvedModulesConfig }).__resolvedModules,
+);
+// biome-ignore lint/style/noNonNullAssertion: We know the root element exists
+const root = document.getElementById("root")!;
+
+declare global {
+  interface Window {
+    ZUDOKU_VERSION: string;
+  }
+}
+
+window.ZUDOKU_VERSION = process.env.ZUDOKU_VERSION ?? "unknown";
+
+if (process.env.SENTRY_DSN) {
+  void import("./sentry.js").then((mod) => {
+    mod.initSentry({ dsn: process.env.SENTRY_DSN as string });
+  });
+}
+
+if (root.childElementCount > 0) {
+  void hydrate(routes);
+} else {
+  void render(routes);
+}
+
+if (import.meta.env.IS_ZUPLO) {
+  // biome-ignore lint/suspicious/noConsole: Logging allowed here
+  console.log(
+    `%cPowered by Zuplo v${window.ZUDOKU_VERSION}`,
+    [
+      "color: #Df0097",
+      "line-height: 50px",
+      "font-weight: bolder",
+      "font-size: 15px",
+      "text-align: center",
+      "letter-spacing: 5px",
+    ].join(" ;"),
+  );
+} else {
+  // biome-ignore lint/suspicious/noConsole: Logging allowed here
+  console.log(
+    `%cAPITOGO v${window.ZUDOKU_VERSION}`,
+    [
+      "color: #0d9488",
+      "line-height: 50px",
+      "font-weight: bolder",
+      "font-size: 15px",
+      "text-align: center",
+      "letter-spacing: 5px",
+    ].join(" ;"),
+  );
+  // biome-ignore lint/suspicious/noConsole: Logging allowed here
+  console.log("» Learn more at https://apitogo.com");
+}
+
+async function hydrateLazyRoutes(routes: RouteObject[]) {
+  const path = window.location.pathname;
+  const lazyMatches = matchRoutes(routes, path, config.basePath)?.filter(
+    (m) => m.route.lazy,
+  );
+
+  if (lazyMatches?.length) {
+    await Promise.all(
+      lazyMatches.map(async (m) => {
+        if (typeof m.route.lazy !== "function") return;
+
+        const routeModule = await m.route.lazy();
+        Object.assign(m.route, { ...routeModule, lazy: undefined });
+      }),
+    );
+  }
+}
+
+function render(routes: RouteObject[]) {
+  const router = createBrowserRouter(routes, {
+    basename: config.basePath,
+  });
+  createRoot(root).render(<Bootstrap router={router} />);
+}
+
+async function hydrate(routes: RouteObject[]) {
+  // Only the route chunks are awaited. The highlighter keeps loading in the background: whatever needs it reads
+  // it with use() and waits on its own, with the prerendered HTML staying on screen, so a page without code
+  // (pricing, account, checkout) is not held back by ~260 KB of grammars it never uses.
+  await hydrateLazyRoutes(routes);
+
+  const router = createBrowserRouter(routes, {
+    basename: config.basePath,
+  });
+
+  hydrateRoot(root, <Bootstrap hydrate router={router} />);
+}
+
+// This is a workaround to avoid version skewing
+// See https://vite.dev/guide/build.html#load-error-handling
+// TODO: Implement a more advanced solution if there are CDN urls or e.g. Vercel Skew Protection
+window.addEventListener("vite:preloadError", (e) => {
+  e.preventDefault();
+  window.location.reload();
+});

package/src/app/entry.server.tsx

@@ -1,160 +1,164 @@
-import { dehydrate, QueryClient } from "@tanstack/react-query";
-import type { HelmetData } from "@zudoku/react-helmet-async";
-import logger from "loglevel";
-import { renderToReadableStream, renderToStaticMarkup } from "react-dom/server";
-import {
-  createStaticHandler,
-  createStaticRouter,
-  isRouteErrorResponse,
-  type RouteObject,
-} from "react-router";
-import "vite/modulepreload-polyfill";
-import { BootstrapStatic } from "../lib/components/Bootstrap.js";
-import { NO_DEHYDRATE } from "../lib/components/cache.js";
-import { ServerError } from "../lib/errors/ServerError.js";
-import { highlighterPromise } from "../lib/shiki.js";
-import { getRoutesByConfig } from "./main.js";
-export { getRoutesByConfig };
-
-// Statically importing shiki.ts here ensures it's in the SSR bundle.
-// main.tsx dynamically imports it instead to enable lazy loading on the client.
-await import("virtual:zudoku-shiki-register").then(
-  async ({ registerShiki }) => {
-    const highlighter = await highlighterPromise;
-    await registerShiki(highlighter);
-  },
-);
-export const handleRequest = async ({
-  template,
-  request,
-  routes,
-  basePath,
-  bypassProtection,
-}: {
-  template: string;
-  request: Request;
-  routes: RouteObject[];
-  basePath?: string;
-  bypassProtection?: boolean;
-}): Promise<Response> => {
-  const { query, dataRoutes } = createStaticHandler(routes, {
-    basename: basePath,
-  });
-  const queryClient = new QueryClient();
-
-  const context = await query(request);
-
-  if (context instanceof Response) {
-    if ([301, 302, 303, 307, 308].includes(context.status)) {
-      return new Response(null, {
-        status: context.status,
-        headers: { Location: context.headers.get("Location") ?? "" },
-      });
-    }
-    throw context;
-  }
-
-  let status = 200;
-  if (context.errors) {
-    const firstError = Object.values(context.errors).find(isRouteErrorResponse);
-    if (firstError?.status) {
-      status = firstError.status;
-    }
-  }
-
-  const router = createStaticRouter(dataRoutes, context);
-  const helmetContext = {} as HelmetData["context"];
-  const renderContext = {
-    status: 200,
-    bypassProtection: bypassProtection ?? false,
-  };
-
-  const App = (
-    <BootstrapStatic
-      router={router}
-      context={context}
-      queryClient={queryClient}
-      helmetContext={helmetContext}
-      bypassProtection={bypassProtection}
-      renderContext={renderContext}
-    />
-  );
-
-  try {
-    const reactStream = await renderToReadableStream(App, {
-      onError(error) {
-        status = 500;
-        if (import.meta.env.PROD) {
-          logger.error("SSR Error:", error);
-        }
-      },
-    });
-
-    await reactStream.allReady;
-
-    const [htmlStart, htmlEnd] = template.split("<!--app-html-->");
-    if (!htmlStart) {
-      throw new Error("No <!--app-html--> found in template");
-    }
-
-    const encoder = new TextEncoder();
-    const reader = reactStream.getReader();
-
-    const stream = new ReadableStream<Uint8Array>({
-      async start(controller) {
-        const helmetHtml = [
-          helmetContext.helmet?.title?.toString() ?? "",
-          helmetContext.helmet?.meta?.toString() ?? "",
-          helmetContext.helmet?.link?.toString() ?? "",
-          helmetContext.helmet?.style?.toString() ?? "",
-          helmetContext.helmet?.script?.toString() ?? "",
-        ].join("\n");
-
-        controller.enqueue(
-          encoder.encode(htmlStart.replace("<!--app-helmet-->", helmetHtml)),
-        );
-
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          controller.enqueue(value);
-        }
-
-        if (htmlEnd) {
-          const dehydrated = dehydrate(queryClient, {
-            shouldDehydrateQuery: (q) => !q.queryKey.includes(NO_DEHYDRATE),
-          });
-          const serialized = JSON.stringify(dehydrated)
-            .replace(/</g, "\\u003c")
-            .replace(/>/g, "\\u003e");
-
-          const closingTag = "</body>";
-          const idx = htmlEnd.lastIndexOf(closingTag);
-
-          if (idx === -1) {
-            controller.enqueue(encoder.encode(htmlEnd));
-          } else {
-            controller.enqueue(encoder.encode(htmlEnd.slice(0, idx)));
-            controller.enqueue(
-              encoder.encode(`<script>window.DATA=${serialized}</script>`),
-            );
-            controller.enqueue(encoder.encode(htmlEnd.slice(idx)));
-          }
-        }
-
-        controller.close();
-      },
-    });
-
-    return new Response(stream, {
-      status: renderContext.status !== 200 ? renderContext.status : status,
-      headers: { "Content-Type": "text/html; charset=utf-8" },
-    });
-  } catch (error) {
-    const html = renderToStaticMarkup(<ServerError error={error} />);
-    return new Response(html, {
-      status: 500,
-      headers: { "Content-Type": "text/html; charset=utf-8" },
-    });
-  }
-};
+import { dehydrate, QueryClient } from "@tanstack/react-query";
+import type { HelmetData } from "@zudoku/react-helmet-async";
+import logger from "loglevel";
+import { renderToReadableStream, renderToStaticMarkup } from "react-dom/server";
+import {
+  createStaticHandler,
+  createStaticRouter,
+  isRouteErrorResponse,
+  type RouteObject,
+} from "react-router";
+import "vite/modulepreload-polyfill";
+import type { ApitogoConfig } from "../config/config.js";
+import { resolveModulesConfig } from "../config/resolve-modules.js";
+import { BootstrapStatic } from "../lib/components/Bootstrap.js";
+import { NO_DEHYDRATE } from "../lib/components/cache.js";
+import { ServerError } from "../lib/errors/ServerError.js";
+import { highlighterPromise } from "../lib/shiki.js";
+import { getRoutesByConfig as routesByConfig } from "./main.js";
+
+export const getRoutesByConfig = (config: ApitogoConfig) =>
+  routesByConfig(config, resolveModulesConfig);
+
+// Statically importing shiki.ts here ensures it's in the SSR bundle.
+// main.tsx dynamically imports it instead to enable lazy loading on the client.
+await import("virtual:zudoku-shiki-register").then(
+  async ({ registerShiki }) => {
+    const highlighter = await highlighterPromise;
+    await registerShiki(highlighter);
+  },
+);
+export const handleRequest = async ({
+  template,
+  request,
+  routes,
+  basePath,
+  bypassProtection,
+}: {
+  template: string;
+  request: Request;
+  routes: RouteObject[];
+  basePath?: string;
+  bypassProtection?: boolean;
+}): Promise<Response> => {
+  const { query, dataRoutes } = createStaticHandler(routes, {
+    basename: basePath,
+  });
+  const queryClient = new QueryClient();
+
+  const context = await query(request);
+
+  if (context instanceof Response) {
+    if ([301, 302, 303, 307, 308].includes(context.status)) {
+      return new Response(null, {
+        status: context.status,
+        headers: { Location: context.headers.get("Location") ?? "" },
+      });
+    }
+    throw context;
+  }
+
+  let status = 200;
+  if (context.errors) {
+    const firstError = Object.values(context.errors).find(isRouteErrorResponse);
+    if (firstError?.status) {
+      status = firstError.status;
+    }
+  }
+
+  const router = createStaticRouter(dataRoutes, context);
+  const helmetContext = {} as HelmetData["context"];
+  const renderContext = {
+    status: 200,
+    bypassProtection: bypassProtection ?? false,
+  };
+
+  const App = (
+    <BootstrapStatic
+      router={router}
+      context={context}
+      queryClient={queryClient}
+      helmetContext={helmetContext}
+      bypassProtection={bypassProtection}
+      renderContext={renderContext}
+    />
+  );
+
+  try {
+    const reactStream = await renderToReadableStream(App, {
+      onError(error) {
+        status = 500;
+        if (import.meta.env.PROD) {
+          logger.error("SSR Error:", error);
+        }
+      },
+    });
+
+    await reactStream.allReady;
+
+    const [htmlStart, htmlEnd] = template.split("<!--app-html-->");
+    if (!htmlStart) {
+      throw new Error("No <!--app-html--> found in template");
+    }
+
+    const encoder = new TextEncoder();
+    const reader = reactStream.getReader();
+
+    const stream = new ReadableStream<Uint8Array>({
+      async start(controller) {
+        const helmetHtml = [
+          helmetContext.helmet?.title?.toString() ?? "",
+          helmetContext.helmet?.meta?.toString() ?? "",
+          helmetContext.helmet?.link?.toString() ?? "",
+          helmetContext.helmet?.style?.toString() ?? "",
+          helmetContext.helmet?.script?.toString() ?? "",
+        ].join("\n");
+
+        controller.enqueue(
+          encoder.encode(htmlStart.replace("<!--app-helmet-->", helmetHtml)),
+        );
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          controller.enqueue(value);
+        }
+
+        if (htmlEnd) {
+          const dehydrated = dehydrate(queryClient, {
+            shouldDehydrateQuery: (q) => !q.queryKey.includes(NO_DEHYDRATE),
+          });
+          const serialized = JSON.stringify(dehydrated)
+            .replace(/</g, "\\u003c")
+            .replace(/>/g, "\\u003e");
+
+          const closingTag = "</body>";
+          const idx = htmlEnd.lastIndexOf(closingTag);
+
+          if (idx === -1) {
+            controller.enqueue(encoder.encode(htmlEnd));
+          } else {
+            controller.enqueue(encoder.encode(htmlEnd.slice(0, idx)));
+            controller.enqueue(
+              encoder.encode(`<script>window.DATA=${serialized}</script>`),
+            );
+            controller.enqueue(encoder.encode(htmlEnd.slice(idx)));
+          }
+        }
+
+        controller.close();
+      },
+    });
+
+    return new Response(stream, {
+      status: renderContext.status !== 200 ? renderContext.status : status,
+      headers: { "Content-Type": "text/html; charset=utf-8" },
+    });
+  } catch (error) {
+    const html = renderToStaticMarkup(<ServerError error={error} />);
+    return new Response(html, {
+      status: 500,
+      headers: { "Content-Type": "text/html; charset=utf-8" },
+    });
+  }
+};