@lukoweb/apitogo 0.1.18 → 0.1.20

package/src/lib/shiki.ts

@@ -1,179 +1,179 @@
-import rehypeShikiFromHighlighter, {
-  type RehypeShikiCoreOptions,
-} from "@shikijs/rehype/core";
-import {
-  transformerMetaHighlight,
-  transformerMetaWordHighlight,
-} from "@shikijs/transformers";
-import type { Root } from "hast";
-import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-import { createElement, Fragment } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import type {
-  BundledTheme,
-  CodeOptionsMultipleThemes,
-  HighlighterCore,
-} from "shiki";
-import { getSingletonHighlighterCore } from "shiki/core";
-import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
-import type { Pluggable } from "unified";
-import { visit } from "unist-util-visit";
-import { HIGHLIGHT_CODE_BLOCK_CLASS } from "./shiki-constants.js";
-import { cn } from "./util/cn.js";
-
-export {
-  HIGHLIGHT_CODE_BLOCK_CLASS,
-  defaultLanguages,
-} from "./shiki-constants.js";
-
-export const highlighterPromise = getSingletonHighlighterCore({
-  engine: createJavaScriptRegexEngine({ forgiving: true }),
-  langAlias: {
-    markup: "html",
-    svg: "xml",
-    mathml: "xml",
-    atom: "xml",
-    ssml: "xml",
-    rss: "xml",
-    webmanifest: "json",
-  },
-});
-
-type ThemesRecord = CodeOptionsMultipleThemes<BundledTheme>["themes"];
-
-const warnedLanguages = new Set<string>();
-
-const warnUnloadedLanguage = (lang: string, highlighter: HighlighterCore) => {
-  const resolved = highlighter.resolveLangAlias(lang);
-  if (
-    warnedLanguages.has(lang) ||
-    resolved === "ansi" ||
-    resolved === "text" ||
-    highlighter.getLoadedLanguages().includes(resolved)
-  )
-    return;
-  warnedLanguages.add(lang);
-  // biome-ignore lint/suspicious/noConsole: Intentional warning
-  console.warn(
-    `Language "${lang}" is not loaded for syntax highlighting. ` +
-      `Add it to \`syntaxHighlighting.languages\` in your config. Falling back to plain text.\n` +
-      `See https://docs.apitogo.com/docs/markdown/code-blocks#configuration`,
-  );
-};
-
-export const parseMetaString = (str: string) => {
-  const matches = str.matchAll(
-    /([a-z0-9]+)(?:=(["'])(.*?)\2|=(.*?)(?:\s|$)|(?:\s|$))/gi,
-  );
-  return Object.fromEntries(
-    Array.from(matches).map((match) => {
-      const key = match[1];
-      const raw = match[3] ?? match[4];
-      const value =
-        raw == null || raw === "true" ? true : raw === "false" ? false : raw;
-      return [key, value];
-    }),
-  );
-};
-
-export const defaultHighlightOptions = {
-  themes: {
-    light: "github-light",
-    dark: "github-dark",
-  },
-  defaultColor: false,
-  defaultLanguage: "text",
-  fallbackLanguage: "text",
-  inline: "tailing-curly-colon",
-  addLanguageClass: true,
-  transformers: [transformerMetaHighlight(), transformerMetaWordHighlight()],
-  parseMetaString,
-} satisfies RehypeShikiCoreOptions;
-
-const rehypeCodeBlockPlugin = () => (tree: Root) => {
-  visit(tree, "element", (node, _index, parent) => {
-    if (node.tagName !== "code") return;
-
-    const isCodeBlock = parent?.type === "element" && parent.tagName === "pre";
-    node.properties.inline = JSON.stringify(!isCodeBlock);
-
-    // Pass through properties from <pre> to <code> so we can handle it in `code` only
-    if (isCodeBlock) {
-      node.properties = {
-        ...node.properties,
-        ...structuredClone(parent.properties),
-        class: cn(node.properties.class, parent.properties.class),
-      };
-      parent.properties = {};
-    }
-  });
-};
-
-const rehypeWarnUnloadedLanguages =
-  (highlighter: HighlighterCore) => () => (tree: Root) => {
-    visit(tree, "element", (node) => {
-      if (!node.properties.className) return;
-      if (node.tagName !== "code" && node.tagName !== "pre") return;
-
-      const lang = (node.properties.className as string[] | undefined)
-        ?.find((c) => c.startsWith("language-"))
-        ?.slice("language-".length);
-
-      if (lang) warnUnloadedLanguage(lang, highlighter);
-    });
-  };
-
-export const createConfiguredShikiRehypePlugins = (
-  highlighterInstance: HighlighterCore,
-  themes: ThemesRecord = defaultHighlightOptions.themes,
-) => [
-  rehypeWarnUnloadedLanguages(highlighterInstance),
-  [
-    rehypeShikiFromHighlighter,
-    highlighterInstance,
-    { ...defaultHighlightOptions, themes },
-  ] satisfies Pluggable,
-  rehypeCodeBlockPlugin,
-];
-
-export const highlight = (
-  highlighter: HighlighterCore,
-  code: string,
-  lang = "text",
-  themes: ThemesRecord = defaultHighlightOptions.themes,
-  meta?: string,
-) => {
-  const resolved = highlighter.resolveLangAlias(lang);
-  const effectiveLang = highlighter.getLoadedLanguages().includes(resolved)
-    ? lang
-    : "text";
-
-  if (effectiveLang !== lang) warnUnloadedLanguage(lang, highlighter);
-
-  const value = highlighter.codeToHast(code, {
-    lang: effectiveLang,
-    ...defaultHighlightOptions,
-    themes,
-    ...(meta && { meta: { __raw: meta } }),
-  });
-
-  // Shiki always outputs <pre><code>...</code></pre>, but callers of this
-  // function (HighlightedCode, CodeTabs) provide their own wrapper so the
-  // <pre> is unwanted. We reuse rehypeCodeBlockPlugin to merge <pre> props
-  // onto <code>, then strip <pre> during JSX conversion.
-  rehypeCodeBlockPlugin()(value);
-
-  return toJsxRuntime(value, {
-    Fragment,
-    jsx,
-    jsxs,
-    components: {
-      pre: (props) => props.children,
-      code: (props) =>
-        createElement("code", {
-          ...props,
-          className: cn(props.className, HIGHLIGHT_CODE_BLOCK_CLASS),
-        }),
-    },
-  });
-};
+import rehypeShikiFromHighlighter, {
+  type RehypeShikiCoreOptions,
+} from "@shikijs/rehype/core";
+import {
+  transformerMetaHighlight,
+  transformerMetaWordHighlight,
+} from "@shikijs/transformers";
+import type { Root } from "hast";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { createElement, Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import type {
+  BundledTheme,
+  CodeOptionsMultipleThemes,
+  HighlighterCore,
+} from "shiki";
+import { getSingletonHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import type { Pluggable } from "unified";
+import { visit } from "unist-util-visit";
+import { HIGHLIGHT_CODE_BLOCK_CLASS } from "./shiki-constants.js";
+import { cn } from "./util/cn.js";
+
+export {
+  HIGHLIGHT_CODE_BLOCK_CLASS,
+  defaultLanguages,
+} from "./shiki-constants.js";
+
+export const highlighterPromise = getSingletonHighlighterCore({
+  engine: createJavaScriptRegexEngine({ forgiving: true }),
+  langAlias: {
+    markup: "html",
+    svg: "xml",
+    mathml: "xml",
+    atom: "xml",
+    ssml: "xml",
+    rss: "xml",
+    webmanifest: "json",
+  },
+});
+
+type ThemesRecord = CodeOptionsMultipleThemes<BundledTheme>["themes"];
+
+const warnedLanguages = new Set<string>();
+
+const warnUnloadedLanguage = (lang: string, highlighter: HighlighterCore) => {
+  const resolved = highlighter.resolveLangAlias(lang);
+  if (
+    warnedLanguages.has(lang) ||
+    resolved === "ansi" ||
+    resolved === "text" ||
+    highlighter.getLoadedLanguages().includes(resolved)
+  )
+    return;
+  warnedLanguages.add(lang);
+  // biome-ignore lint/suspicious/noConsole: Intentional warning
+  console.warn(
+    `Language "${lang}" is not loaded for syntax highlighting. ` +
+      `Add it to \`syntaxHighlighting.languages\` in your config. Falling back to plain text.\n` +
+      `See https://docs.apitogo.com/docs/markdown/code-blocks#configuration`,
+  );
+};
+
+export const parseMetaString = (str: string) => {
+  const matches = str.matchAll(
+    /([a-z0-9]+)(?:=(["'])(.*?)\2|=(.*?)(?:\s|$)|(?:\s|$))/gi,
+  );
+  return Object.fromEntries(
+    Array.from(matches).map((match) => {
+      const key = match[1];
+      const raw = match[3] ?? match[4];
+      const value =
+        raw == null || raw === "true" ? true : raw === "false" ? false : raw;
+      return [key, value];
+    }),
+  );
+};
+
+export const defaultHighlightOptions = {
+  themes: {
+    light: "github-light",
+    dark: "github-dark",
+  },
+  defaultColor: false,
+  defaultLanguage: "text",
+  fallbackLanguage: "text",
+  inline: "tailing-curly-colon",
+  addLanguageClass: true,
+  transformers: [transformerMetaHighlight(), transformerMetaWordHighlight()],
+  parseMetaString,
+} satisfies RehypeShikiCoreOptions;
+
+const rehypeCodeBlockPlugin = () => (tree: Root) => {
+  visit(tree, "element", (node, _index, parent) => {
+    if (node.tagName !== "code") return;
+
+    const isCodeBlock = parent?.type === "element" && parent.tagName === "pre";
+    node.properties.inline = JSON.stringify(!isCodeBlock);
+
+    // Pass through properties from <pre> to <code> so we can handle it in `code` only
+    if (isCodeBlock) {
+      node.properties = {
+        ...node.properties,
+        ...structuredClone(parent.properties),
+        class: cn(node.properties.class, parent.properties.class),
+      };
+      parent.properties = {};
+    }
+  });
+};
+
+const rehypeWarnUnloadedLanguages =
+  (highlighter: HighlighterCore) => () => (tree: Root) => {
+    visit(tree, "element", (node) => {
+      if (!node.properties.className) return;
+      if (node.tagName !== "code" && node.tagName !== "pre") return;
+
+      const lang = (node.properties.className as string[] | undefined)
+        ?.find((c) => c.startsWith("language-"))
+        ?.slice("language-".length);
+
+      if (lang) warnUnloadedLanguage(lang, highlighter);
+    });
+  };
+
+export const createConfiguredShikiRehypePlugins = (
+  highlighterInstance: HighlighterCore,
+  themes: ThemesRecord = defaultHighlightOptions.themes,
+) => [
+  rehypeWarnUnloadedLanguages(highlighterInstance),
+  [
+    rehypeShikiFromHighlighter,
+    highlighterInstance,
+    { ...defaultHighlightOptions, themes },
+  ] satisfies Pluggable,
+  rehypeCodeBlockPlugin,
+];
+
+export const highlight = (
+  highlighter: HighlighterCore,
+  code: string,
+  lang = "text",
+  themes: ThemesRecord = defaultHighlightOptions.themes,
+  meta?: string,
+) => {
+  const resolved = highlighter.resolveLangAlias(lang);
+  const effectiveLang = highlighter.getLoadedLanguages().includes(resolved)
+    ? lang
+    : "text";
+
+  if (effectiveLang !== lang) warnUnloadedLanguage(lang, highlighter);
+
+  const value = highlighter.codeToHast(code, {
+    lang: effectiveLang,
+    ...defaultHighlightOptions,
+    themes,
+    ...(meta && { meta: { __raw: meta } }),
+  });
+
+  // Shiki always outputs <pre><code>...</code></pre>, but callers of this
+  // function (HighlightedCode, CodeTabs) provide their own wrapper so the
+  // <pre> is unwanted. We reuse rehypeCodeBlockPlugin to merge <pre> props
+  // onto <code>, then strip <pre> during JSX conversion.
+  rehypeCodeBlockPlugin()(value);
+
+  return toJsxRuntime(value, {
+    Fragment,
+    jsx,
+    jsxs,
+    components: {
+      pre: (props) => props.children,
+      code: (props) =>
+        createElement("code", {
+          ...props,
+          className: cn(props.className, HIGHLIGHT_CODE_BLOCK_CLASS),
+        }),
+    },
+  });
+};

package/src/vite/dev-server.ts

@@ -24,6 +24,7 @@ import {
 } from "./config.js";
 import { getDevHtml } from "./html.js";
 import { buildPagefindDevIndex } from "./pagefind-dev-index.js";
+import { ensurePagefindDevStub } from "./pagefind-dev-stub.js";
 
 const DEFAULT_DEV_PORT = 3000;
 
@@ -75,6 +76,16 @@ export class DevServer {
 
     const server = await this.createNodeServer(config);
 
+    if (config.search?.type === "pagefind" && viteConfig.publicDir !== false) {
+      const publicRoot = path.resolve(
+        this.options.dir,
+        typeof viteConfig.publicDir === "string"
+          ? viteConfig.publicDir
+          : "public",
+      );
+      await ensurePagefindDevStub(publicRoot);
+    }
+
     const mergedViteConfig = mergeConfig(viteConfig, {
       server: {
         hmr: { server },
@@ -179,16 +190,8 @@ export class DevServer {
       `Server-side rendering ${this.options.ssr ? "enabled" : "disabled"}`,
     );
 
-    if (config.search?.type === "pagefind") {
-      const pagefindPath = path.join(
-        vite.config.publicDir,
-        "pagefind/pagefind.js",
-      );
-      const exists = await fs.stat(pagefindPath).catch(() => false);
-      if (!exists) {
-        await fs.mkdir(path.dirname(pagefindPath), { recursive: true });
-        await fs.writeFile(pagefindPath, 'throw new Error("NOT_BUILT_YET");');
-      }
+    if (config.search?.type === "pagefind" && vite.config.publicDir) {
+      await ensurePagefindDevStub(vite.config.publicDir);
     }
 
     vite.middlewares.use(async (req, res) => {

package/src/vite/pagefind-dev-stub.ts

@@ -0,0 +1,17 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+
+const NOT_BUILT_YET = 'throw new Error("NOT_BUILT_YET");';
+
+/**
+ * Writes a minimal `pagefind.js` under the Vite public dir so dev-time
+ * `import("/pagefind/pagefind.js")` resolves and the real index can be built later.
+ */
+export async function ensurePagefindDevStub(publicDir: string): Promise<void> {
+  const pagefindPath = path.join(publicDir, "pagefind/pagefind.js");
+  const exists = await fs.stat(pagefindPath).catch(() => false);
+  if (!exists) {
+    await fs.mkdir(path.dirname(pagefindPath), { recursive: true });
+    await fs.writeFile(pagefindPath, NOT_BUILT_YET);
+  }
+}

package/src/vite/plugin-search.ts

@@ -1,16 +1,28 @@
-import type { Plugin } from "vite";
+import path from "node:path";
+import type { Plugin, ResolvedConfig } from "vite";
 import { getCurrentConfig } from "../config/loader.js";
+import { ensurePagefindDevStub } from "./pagefind-dev-stub.js";
 
 export const viteSearchPlugin = (): Plugin => {
   const virtualModuleId = "virtual:zudoku-search-plugin";
   const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+  let resolvedViteConfig: ResolvedConfig | undefined;
 
   return {
     name: "zudoku-search-plugin",
+    async configResolved(config) {
+      resolvedViteConfig = config;
+      if (config.publicDir && getCurrentConfig()?.search?.type === "pagefind") {
+        await ensurePagefindDevStub(config.publicDir);
+      }
+    },
     resolveId(id) {
       if (id === virtualModuleId) {
         return resolvedVirtualModuleId;
       }
+      if (id === "/pagefind/pagefind.js" && resolvedViteConfig?.publicDir) {
+        return path.join(resolvedViteConfig.publicDir, "pagefind/pagefind.js");
+      }
     },
     async load(id) {
       if (id !== resolvedVirtualModuleId) return;