@mehdad67/apitogo 0.1.24

package/src/app/entry.client.tsx

@@ -0,0 +1,118 @@
+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(
+    `%cZUDOKU%c by Zuplo v${window.ZUDOKU_VERSION}`,
+    [
+      "color: #FF00BD",
+      "line-height: 50px",
+      "font-weight: bolder",
+      "font-size: 30px",
+      "-webkit-text-stroke-width: 1px",
+      "-webkit-text-stroke-color: #FF00BD",
+      "text-transform: uppercase",
+      "text-align: center",
+      "letter-spacing: 5px",
+    ].join(" ;"),
+    [
+      "color: #Df0097",
+      "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 about Zudoku https://zudoku.dev");
+}
+
+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();
+});

package/src/app/entry.server.tsx

@@ -0,0 +1,160 @@
+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" },
+    });
+  }
+};

package/src/app/env.ts

@@ -0,0 +1,40 @@
+import { z } from "zod/mini";
+import { parseBuildConfig } from "./ZuploBuildConfig.js";
+
+const formatError = (error: unknown) => {
+  if (error instanceof SyntaxError) {
+    return "ZUPLO_BUILD_CONFIG contains invalid JSON";
+  }
+  if (error instanceof z.core.$ZodError) {
+    return `ZUPLO_BUILD_CONFIG is invalid:\n${z.prettifyError(error)}`;
+  }
+  return `ZUPLO_BUILD_CONFIG is invalid: ${error}`;
+};
+
+const getZuploBuildConfig = () => {
+  if (!process.env.ZUPLO_BUILD_CONFIG) return undefined;
+
+  try {
+    const parsed = JSON.parse(process.env.ZUPLO_BUILD_CONFIG);
+    return parseBuildConfig(parsed);
+  } catch (error) {
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
+    console.error(formatError(error));
+    return undefined;
+  }
+};
+
+export const ZuploEnv = {
+  /**
+   * Indicates that the build is running in Zuplo "mode"
+   */
+  get isZuplo(): boolean {
+    return process.env.ZUPLO === "1";
+  },
+
+  get serverUrl(): string | undefined {
+    return process.env.ZUPLO_SERVER_URL;
+  },
+
+  buildConfig: getZuploBuildConfig(),
+};

package/src/app/font.geist.css

@@ -0,0 +1,73 @@
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Thin.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-UltraLight.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Black.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-UltraBlack.woff2")
+    format("woff2");
+}