@lukoweb/apitogo 0.2.30 → 0.2.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo",
-  "version": "0.2.30",
+  "version": "0.2.34",
   "type": "module",
   "sideEffects": [
     "**/*.css",
@@ -171,6 +171,7 @@
     "build": "esbuild src/cli/cli.ts src/vite/prerender/worker.ts --outdir=dist/cli --entry-names=[name] --bundle --format=esm --packages=external --target=node20 --platform=node --log-level=error",
     "postbuild": "tsx scripts/check-external-deps.ts",
     "typecheck": "tsc --project tsconfig.app.json --noEmit",
+    "test:e2e": "vitest run --config vitest.e2e.config.ts",
     "generate:types": "tsx scripts/generate-types.js && tsx scripts/generate-flat-config.js",
     "build:standalone": "vite build --mode standalone --config vite.standalone.config.ts --log-level=error",
     "prepack": "npm run build && tsx scripts/generate-publish-exports.ts",

package/src/app/demo.tsx

@@ -1,77 +1,78 @@
-import logger from "loglevel";
-import { createRoot } from "react-dom/client";
-import { createBrowserRouter } from "react-router";
-import type { ZudokuConfig } from "../config/validators/ZudokuConfig.js";
-import { Bootstrap } from "../lib/components/Bootstrap.js";
-import DemoAnnouncement from "../lib/demo/DemoAnnouncement.js";
-import "../lib/util/logInit.js";
-import "./main.css";
-import { openApiPlugin } from "../lib/plugins/openapi/index.js";
-import { getRoutesByConfig } from "./main.js";
-
-const apiUrl = new URL(window.location.href).searchParams.get("api-url");
-const logoUrl = new URL(window.location.href).searchParams.get("logo-url");
-const logoWidth = new URL(window.location.href).searchParams.get("logo-width");
-const title =
-  new URL(window.location.href).searchParams.get("title") ?? "Zudoku Demo";
-
-if (!apiUrl) {
-  throw new Error(
-    "No API URL in query parameters. Please provide an API URL using the `api-url` query parameter.",
-  );
-}
-
-logger.info(`API URL: ${apiUrl}`);
-
-const root =
-  document.getElementById("zudoku") ?? document.getElementById("root");
-
-if (!root) {
-  throw new Error("No div found with id root");
-}
-
-// IMPORTANT: This component must not contain tailwind classes
-// This directory is not processed by the tailwind plugin
-
-const config: ZudokuConfig = {
-  site: {
-    title,
-    banner: {
-      message: <DemoAnnouncement />,
-    },
-  },
-  navigation: [
-    {
-      type: "link",
-      to: "/",
-      label: "API Reference",
-    },
-  ],
-  plugins: [
-    // Using the plugin directly because there's no config file to load in the virtual plugins
-    openApiPlugin({
-      type: "url",
-      input: apiUrl,
-      path: "/",
-    }),
-  ],
-} satisfies ZudokuConfig;
-
-if (logoUrl && logoWidth) {
-  config.site = {
-    ...config.site,
-    logo: {
-      src: {
-        light: logoUrl,
-        dark: logoUrl,
-      },
-      width: logoWidth,
-    },
-  };
-}
-
-const routes = getRoutesByConfig(config);
-const router = createBrowserRouter(routes, {
-  basename: window.location.pathname,
-});
-createRoot(root).render(<Bootstrap router={router} />);
+import logger from "loglevel";
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter } from "react-router";
+import { resolveModulesConfig } from "../config/resolve-modules.js";
+import type { ZudokuConfig } from "../config/validators/ZudokuConfig.js";
+import { Bootstrap } from "../lib/components/Bootstrap.js";
+import "../lib/util/logInit.js";
+import "./main.css";
+import DemoAnnouncement from "../lib/demo/DemoAnnouncement.js";
+import { openApiPlugin } from "../lib/plugins/openapi/index.js";
+import { getRoutesByConfig } from "./main.js";
+
+const apiUrl = new URL(window.location.href).searchParams.get("api-url");
+const logoUrl = new URL(window.location.href).searchParams.get("logo-url");
+const logoWidth = new URL(window.location.href).searchParams.get("logo-width");
+const title =
+  new URL(window.location.href).searchParams.get("title") ?? "Zudoku Demo";
+
+if (!apiUrl) {
+  throw new Error(
+    "No API URL in query parameters. Please provide an API URL using the `api-url` query parameter.",
+  );
+}
+
+logger.info(`API URL: ${apiUrl}`);
+
+const root =
+  document.getElementById("zudoku") ?? document.getElementById("root");
+
+if (!root) {
+  throw new Error("No div found with id root");
+}
+
+// IMPORTANT: This component must not contain tailwind classes
+// This directory is not processed by the tailwind plugin
+
+const config: ZudokuConfig = {
+  site: {
+    title,
+    banner: {
+      message: <DemoAnnouncement />,
+    },
+  },
+  navigation: [
+    {
+      type: "link",
+      to: "/",
+      label: "API Reference",
+    },
+  ],
+  plugins: [
+    // Using the plugin directly because there's no config file to load in the virtual plugins
+    openApiPlugin({
+      type: "url",
+      input: apiUrl,
+      path: "/",
+    }),
+  ],
+} satisfies ZudokuConfig;
+
+if (logoUrl && logoWidth) {
+  config.site = {
+    ...config.site,
+    logo: {
+      src: {
+        light: logoUrl,
+        dark: logoUrl,
+      },
+      width: logoWidth,
+    },
+  };
+}
+
+const routes = getRoutesByConfig(config, resolveModulesConfig);
+const router = createBrowserRouter(routes, {
+  basename: window.location.pathname,
+});
+createRoot(root).render(<Bootstrap router={router} />);

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();
+});