@lukoweb/apitogo 0.2.56 → 0.2.57

package/src/lib/authentication/providers/openid.tsx

@@ -90,6 +90,7 @@ export class OpenIDAuthenticationProvider
   protected readonly redirectToAfterSignOut: string;
   private readonly audience?: string;
   private readonly scopes: string[];
+  private readonly tokenIdentity: boolean;
 
   constructor({
     issuer,
@@ -100,6 +101,7 @@ export class OpenIDAuthenticationProvider
     redirectToAfterSignOut = "/",
     basePath,
     scopes,
+    tokenIdentity = true,
   }: OpenIDAuthenticationConfig) {
     super();
     this.client = {
@@ -111,6 +113,7 @@ export class OpenIDAuthenticationProvider
     // This is the callback URL for the OAuth provider. So it needs the base path.
     this.callbackUrlPath = joinUrl(basePath, OPENID_CALLBACK_PATH);
     this.scopes = scopes ?? ["openid", "profile", "email"];
+    this.tokenIdentity = tokenIdentity;
 
     this.redirectToAfterSignUp = redirectToAfterSignUp;
     this.redirectToAfterSignIn = redirectToAfterSignIn;
@@ -366,7 +369,9 @@ export class OpenIDAuthenticationProvider
    * API behind the gateway's token check can be tried from the docs. A signed-out visitor gets no identity.
    */
   getIdentities = async (): Promise<ApiIdentity[]> => {
-    if (!useAuthState.getState().isAuthenticated) return [];
+    // A gateway that checks keys, not tokens, answers the token with 401, so the option is not offered (API-129).
+    if (!this.tokenIdentity || !useAuthState.getState().isAuthenticated)
+      return [];
     return [
       {
         id: "signed-in-user",

package/src/lib/plugins/markdown/index.tsx

@@ -1,82 +1,86 @@
-import type { MDXProps } from "mdx/types.js";
-import type { JSX } from "react";
-import type { ZudokuDocsConfig } from "../../../config/validators/ZudokuConfig.js";
-import type { Toc } from "../../../vite/mdx/rehype-extract-toc-with-jsx.js";
-import type { ApitogoPlugin } from "../../core/plugins.js";
-
-export interface MarkdownPluginOptions extends ZudokuDocsConfig {
-  basePath: string;
-  fileImports: Record<string, () => Promise<MDXImport>>;
-}
-export type MarkdownPluginDefaultOptions = Pick<
-  Frontmatter,
-  "toc" | "disablePager" | "showLastModified" | "suggestEdit" | "copyPage"
->;
-
-export type Frontmatter = {
-  title?: string;
-  description?: string;
-  category?: string;
-  draft?: boolean;
-  toc?: boolean;
-  disablePager?: boolean;
-  disable_pager?: boolean;
-  showLastModified?: boolean;
-  lastModifiedTime?: number;
-  suggestEdit?: { url: string; text?: string } | false;
-  copyPage?: boolean;
-};
-
-export type MDXImport = {
-  tableOfContents: Toc;
-  frontmatter: Frontmatter;
-  excerpt?: string;
-  __filepath: string;
-  default: (props: MDXProps) => JSX.Element;
-};
-
-const INDEX_SUFFIX = "/index";
-
-// `index.mdx` is the page of its folder: `/index` also answers at `/`, `/guides/index` at `/guides`.
-// Without this the browser has no route for `/` (the pre-built index.html only hides that on first load).
-export const withIndexAliases = <T,>(
-  fileImports: Record<string, T>,
-): [string, T][] => {
-  const entries = Object.entries(fileImports);
-  return entries.flatMap(([routePath, value]): [string, T][] => {
-    if (!routePath.endsWith(INDEX_SUFFIX)) return [[routePath, value]];
-    const alias = routePath.slice(0, -INDEX_SUFFIX.length) || "/";
-    return alias in fileImports
-      ? [[routePath, value]]
-      : [
-          [routePath, value],
-          [alias, value],
-        ];
-  });
-};
-
-export const markdownPlugin = (
-  options: MarkdownPluginOptions,
-): ApitogoPlugin => ({
-  getRoutes: () => {
-    return withIndexAliases(options.fileImports).map(
-      ([routePath, importPromise]) => ({
-        path: routePath,
-        lazy: async () => {
-          const { MdxPage } = await import("./MdxPage.js");
-          const { default: Component, ...props } = await importPromise();
-          return {
-            element: (
-              <MdxPage
-                basePath={options.basePath}
-                mdxComponent={Component}
-                {...props}
-                defaultOptions={options.defaultOptions}
-              />
-            ),
-          };
-        },
-      }),
-    );
-  },
-});
+import type { MDXProps } from "mdx/types.js";
+import type { JSX } from "react";
+import type { ZudokuDocsConfig } from "../../../config/validators/ZudokuConfig.js";
+import type { Toc } from "../../../vite/mdx/rehype-extract-toc-with-jsx.js";
+import type { ApitogoPlugin } from "../../core/plugins.js";
+
+export interface MarkdownPluginOptions extends ZudokuDocsConfig {
+  basePath: string;
+  fileImports: Record<string, () => Promise<MDXImport>>;
+  /** Paths another page owns, such as the portal's home page at `/`: an index page keeps its own path but no alias there. */
+  reservedPaths?: string[];
+}
+export type MarkdownPluginDefaultOptions = Pick<
+  Frontmatter,
+  "toc" | "disablePager" | "showLastModified" | "suggestEdit" | "copyPage"
+>;
+
+export type Frontmatter = {
+  title?: string;
+  description?: string;
+  category?: string;
+  draft?: boolean;
+  toc?: boolean;
+  disablePager?: boolean;
+  disable_pager?: boolean;
+  showLastModified?: boolean;
+  lastModifiedTime?: number;
+  suggestEdit?: { url: string; text?: string } | false;
+  copyPage?: boolean;
+};
+
+export type MDXImport = {
+  tableOfContents: Toc;
+  frontmatter: Frontmatter;
+  excerpt?: string;
+  __filepath: string;
+  default: (props: MDXProps) => JSX.Element;
+};
+
+const INDEX_SUFFIX = "/index";
+
+// `index.mdx` is the page of its folder: `/index` also answers at `/`, `/guides/index` at `/guides`.
+// Without this the browser has no route for `/` (the pre-built index.html only hides that on first load).
+// A path in `reserved` gets no alias: with a home page at `/`, `pages/index.md` took it over (API-129).
+export const withIndexAliases = <T,>(
+  fileImports: Record<string, T>,
+  reserved: readonly string[] = [],
+): [string, T][] => {
+  const entries = Object.entries(fileImports);
+  return entries.flatMap(([routePath, value]): [string, T][] => {
+    if (!routePath.endsWith(INDEX_SUFFIX)) return [[routePath, value]];
+    const alias = routePath.slice(0, -INDEX_SUFFIX.length) || "/";
+    return alias in fileImports || reserved.includes(alias)
+      ? [[routePath, value]]
+      : [
+          [routePath, value],
+          [alias, value],
+        ];
+  });
+};
+
+export const markdownPlugin = (
+  options: MarkdownPluginOptions,
+): ApitogoPlugin => ({
+  getRoutes: () => {
+    return withIndexAliases(options.fileImports, options.reservedPaths).map(
+      ([routePath, importPromise]) => ({
+        path: routePath,
+        lazy: async () => {
+          const { MdxPage } = await import("./MdxPage.js");
+          const { default: Component, ...props } = await importPromise();
+          return {
+            element: (
+              <MdxPage
+                basePath={options.basePath}
+                mdxComponent={Component}
+                {...props}
+                defaultOptions={options.defaultOptions}
+              />
+            ),
+          };
+        },
+      }),
+    );
+  },
+});

package/src/vite/dev-server.ts

@@ -15,6 +15,7 @@ import { printDiagnosticsToConsole } from "../cli/common/output.js";
 import { findAvailablePort } from "../cli/common/utils/ports.js";
 import type { LoadedConfig } from "../config/config.js";
 import { loadZudokuConfig } from "../config/loader.js";
+import type { ZudokuConfig } from "../config/validators/ZudokuConfig.js";
 import { createGraphQLServer } from "../lib/oas/graphql/index.js";
 import {
   getAppClientEntryPath,
@@ -22,6 +23,7 @@ import {
   getViteConfig,
   type ZudokuConfigEnv,
 } from "./config.js";
+import { SSR_CONFIG_MODULE_ID, withSsrGraphParts } from "./dev-ssr-config.js";
 import { getDevHtml } from "./html.js";
 import { buildPagefindDevIndex } from "./pagefind-dev-index.js";
 import { ensurePagefindDevStub } from "./pagefind-dev-stub.js";
@@ -221,6 +223,10 @@ export class DevServer {
               getAppServerEntryPath(),
             );
 
+          const ssrConfig = await ssrEnvironment.runner.import<{
+            default: ZudokuConfig;
+          }>(SSR_CONFIG_MODULE_ID);
+
           const hasBody = req.method !== "GET" && req.method !== "HEAD";
           const request = new Request(
             `${this.protocol}://${req.headers.host}${url}`,
@@ -237,7 +243,9 @@ export class DevServer {
           const response = await entryServer.handleRequest({
             template,
             request,
-            routes: entryServer.getRoutesByConfig(currentConfig),
+            routes: entryServer.getRoutesByConfig(
+              withSsrGraphParts(currentConfig, ssrConfig.default),
+            ),
             basePath: currentConfig.basePath,
           });
 

package/src/vite/dev-ssr-config.ts

@@ -0,0 +1,32 @@
+import type { ZudokuConfig } from "../config/validators/ZudokuConfig.js";
+
+/** The config module the browser renders with; the dev server's SSR environment imports it too. */
+export const SSR_CONFIG_MODULE_ID = "virtual:zudoku-config";
+
+/** The config parts that hold modules of the config file's graph: plugin instances, custom-page elements, slots. */
+type ConfigGraphParts = Pick<ZudokuConfig, "plugins" | "navigation" | "slots">;
+
+/**
+ * The config the dev server renders a request with: the loaded config, with the plugins, navigation and slots of the
+ * SSR environment's own module graph.
+ *
+ * The loaded config is imported through Vite's `runnerImport`. Its module runner closes once the config file is
+ * evaluated and does not apply the React transform, but the config's plugins and components keep using it. A plugin
+ * page loaded with `lazy(() => import(...))`, such as the billing plugin's `/pricing`, then fails its server render
+ * with "Vite module runner has been closed", and a slot component (the portal footer) with "React is not defined".
+ * The browser falls back to client rendering after a hydration error. The SSR environment's copy of the config
+ * (`virtual:zudoku-config`, the module the browser renders with) imports the same file through the dev server's
+ * live runner and its plugins.
+ */
+export function withSsrGraphParts<T extends ConfigGraphParts>(
+  config: T,
+  ssrConfig: ConfigGraphParts | undefined,
+): T {
+  if (!ssrConfig) return config;
+  return {
+    ...config,
+    ...(ssrConfig.plugins?.length ? { plugins: ssrConfig.plugins } : {}),
+    ...(ssrConfig.navigation ? { navigation: ssrConfig.navigation } : {}),
+    ...(ssrConfig.slots ? { slots: ssrConfig.slots } : {}),
+  };
+}

package/src/vite/plugin-config.ts

@@ -139,12 +139,14 @@ import { runPluginTransformConfig } from "@lukoweb/apitogo/plugins";
 
 const embeddedConfig = ${serializeClientConfig(loadedConfig)};
 
-// JSON embedding drops Symbol values (React element's $$typeof). Prefer live
-// navigation/plugins from the TSX module so custom-page elements stay valid.
+// JSON embedding drops Symbol values (React element's $typeof) and functions. Prefer live
+// navigation/plugins/slots from the TSX module so custom-page elements and slot components (the
+// portal footer, API-129) stay valid.
 const config = await runPluginTransformConfig({
   ...embeddedConfig,
   navigation: rawConfig?.navigation ?? embeddedConfig.navigation,
   plugins: rawConfig?.plugins ?? embeddedConfig.plugins ?? [],
+  slots: rawConfig?.slots ?? embeddedConfig.slots,
   __meta: ${JSON.stringify(clientMeta)},
 });
 export default config;