@mehdad67/apitogo 0.1.24

package/src/vite/plugin-mdx.ts

@@ -0,0 +1,149 @@
+import rehypeMetaAsAttributes from "@lekoarts/rehype-meta-as-attributes";
+import mdx from "@mdx-js/rollup";
+import type { Root as HastRoot } from "hast";
+import { toString as hastToString } from "hast-util-to-string";
+import rehypeMdxImportMedia from "rehype-mdx-import-media";
+import rehypeSlug from "rehype-slug";
+import remarkComment from "remark-comment";
+import remarkDirective from "remark-directive";
+import remarkDirectiveRehype from "remark-directive-rehype";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkGfm from "remark-gfm";
+import remarkMdxFrontmatter from "remark-mdx-frontmatter";
+import type { PluggableList } from "unified";
+import { EXIT, visit } from "unist-util-visit";
+import type { Plugin } from "vite";
+import { getCurrentConfig } from "../config/loader.js";
+import { getBuildConfig } from "../config/validators/BuildSchema.js";
+import {
+  createConfiguredShikiRehypePlugins,
+  highlighterPromise,
+} from "../lib/shiki.js";
+import rehypeExtractTocWithJsxExport from "./mdx/rehype-extract-toc-with-jsx-export.js";
+import rehypeExtractTocWithJsx from "./mdx/rehype-extract-toc-with-jsx.js";
+import { remarkCodeTabs } from "./mdx/remark-code-tabs.js";
+import { remarkInjectFilepath } from "./mdx/remark-inject-filepath.js";
+import { remarkLastModified } from "./mdx/remark-last-modified.js";
+import { remarkLinkRewrite } from "./mdx/remark-link-rewrite.js";
+import { remarkNormalizeImageUrl } from "./mdx/remark-normalize-image-url.js";
+import { remarkStaticGeneration } from "./mdx/remark-static-generation.js";
+import { exportMdxjsConst } from "./mdx/utils.js";
+
+// Convert mdxJsxFlowElement img elements to regular element nodes
+// so rehype-mdx-import-media can pick them up
+// biome-ignore lint/suspicious/noExplicitAny: Allow any type
+const rehypeNormalizeMdxImages = () => (tree: any) => {
+  visit(tree, ["mdxJsxFlowElement", "mdxJsxElement"], (node) => {
+    if (node.type !== "mdxJsxFlowElement") return;
+    if (!["img", "video"].includes(node.name)) return;
+
+    const hasStringSrc = node.attributes.some(
+      // biome-ignore lint/suspicious/noExplicitAny: Allow any type
+      (attr: any) =>
+        attr.type === "mdxJsxAttribute" &&
+        attr.name === "src" &&
+        typeof attr.value === "string",
+    );
+
+    if (!hasStringSrc) return;
+
+    node.type = "element";
+    node.tagName = node.name;
+    // biome-ignore lint/suspicious/noExplicitAny: Allow any type
+    node.properties = {} as Record<string, any>;
+
+    for (const attr of node.attributes) {
+      if (attr.type === "mdxJsxAttribute" && typeof attr.value === "string") {
+        node.properties[attr.name] = attr.value;
+      }
+    }
+
+    delete node.name;
+    delete node.attributes;
+    delete node.children;
+    delete node.data;
+    delete node.position;
+  });
+};
+
+const rehypeExcerptWithMdxExport = () => (tree: HastRoot) => {
+  let excerpt: string | undefined;
+
+  visit(tree, "element", (node, _index, parent) => {
+    if (node.tagName !== "p" || parent?.type !== "root") return;
+
+    excerpt = hastToString(node);
+    return EXIT;
+  });
+
+  if (!excerpt) return;
+
+  tree.children.unshift(exportMdxjsConst("excerpt", excerpt));
+};
+
+const viteMdxPlugin = async (): Promise<Plugin> => {
+  const config = getCurrentConfig();
+  const buildConfig = await getBuildConfig();
+  const highlighter = await highlighterPromise;
+
+  const defaultRemarkPlugins = [
+    remarkStaticGeneration,
+    [remarkInjectFilepath, config.__meta.rootDir],
+    remarkComment,
+    remarkGfm,
+    remarkFrontmatter,
+    // ---  important:
+    // this must be sandwiched between remarkFrontmatter and remarkMdxFrontmatter
+    remarkLastModified,
+    // ---
+    remarkMdxFrontmatter,
+    remarkDirective,
+    remarkDirectiveRehype,
+    remarkCodeTabs,
+    [remarkLinkRewrite, config.basePath],
+    [remarkNormalizeImageUrl, config.basePath],
+    ...(config.build?.remarkPlugins ?? []),
+  ] satisfies PluggableList;
+
+  const remarkPlugins =
+    typeof buildConfig?.remarkPlugins === "function"
+      ? buildConfig.remarkPlugins(defaultRemarkPlugins)
+      : [...defaultRemarkPlugins, ...(buildConfig?.remarkPlugins ?? [])];
+
+  const defaultRehypePlugins = [
+    rehypeSlug,
+    rehypeExtractTocWithJsx,
+    rehypeExtractTocWithJsxExport,
+    rehypeExcerptWithMdxExport,
+    rehypeNormalizeMdxImages,
+    rehypeMdxImportMedia,
+    rehypeMetaAsAttributes,
+    ...createConfiguredShikiRehypePlugins(
+      highlighter,
+      config.syntaxHighlighting?.themes,
+    ),
+    ...(config.build?.rehypePlugins ?? []),
+  ] satisfies PluggableList;
+
+  const rehypePlugins =
+    typeof buildConfig?.rehypePlugins === "function"
+      ? buildConfig.rehypePlugins(defaultRehypePlugins)
+      : [...defaultRehypePlugins, ...(buildConfig?.rehypePlugins ?? [])];
+
+  return {
+    enforce: "pre",
+    ...mdx({
+      providerImportSource:
+        config.__meta.mode === "internal" || config.__meta.mode === "standalone"
+          ? "@mdx-js/react"
+          : "@lukoweb/apitogo/components",
+      mdxExtensions: [".mdx"],
+      format: "detect",
+      remarkPlugins,
+      rehypePlugins,
+    }),
+    name: "zudoku-mdx-plugin",
+  } as const;
+};
+
+export default viteMdxPlugin;

package/src/vite/plugin-metadata.ts

@@ -0,0 +1,30 @@
+import { writeFileSync } from "node:fs";
+import path from "node:path";
+import type { Plugin } from "vite";
+
+/**
+ * Used for debugging, writes metadata to build.
+ */
+const viteBuildMetadata = (): Plugin => {
+  return {
+    name: "zudoku-build-metadata-plugin",
+    buildEnd() {
+      const deps = [];
+      for (const id of this.getModuleIds()) {
+        const m = this.getModuleInfo(id);
+        if (m != null && !m.isExternal) {
+          for (const target of m.importedIds) {
+            deps.push({ source: m.id, target });
+          }
+        }
+      }
+
+      writeFileSync(
+        path.join(__dirname, "graph.json"),
+        JSON.stringify(deps, null, 2),
+      );
+    },
+  };
+};
+
+export default viteBuildMetadata;

package/src/vite/plugin-modules.ts

@@ -0,0 +1,144 @@
+import path from "node:path";
+import type { Plugin } from "vite";
+import { normalizePath } from "vite";
+import { getCurrentConfig } from "../config/loader.js";
+import { writePluginDebugCode } from "./debug.js";
+
+const getLandingModuleImport = (moduleDir: string, mode: string) =>
+  mode === "internal"
+    ? normalizePath(path.join(moduleDir, "../module-landing/src/index.tsx"))
+    : "@lukoweb/apitogo-module-landing";
+
+const getUserPanelModuleImport = (moduleDir: string, mode: string) =>
+  mode === "internal"
+    ? normalizePath(path.join(moduleDir, "../module-user-panel/src/index.tsx"))
+    : "@lukoweb/apitogo-module-user-panel";
+
+const resolveProjectPageImport = (rootDir: string, pagePath: string) =>
+  normalizePath(path.resolve(rootDir, pagePath));
+
+const viteModulesPlugin = (): Plugin => {
+  const virtualModuleId = "virtual:zudoku-modules-plugin";
+  const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+
+  return {
+    name: "zudoku-modules-plugin",
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    async load(id) {
+      if (id !== resolvedVirtualModuleId) return;
+
+      const config = getCurrentConfig();
+      const { landing, userPanel } = config.__resolvedModules;
+
+      if (config.__meta.mode === "standalone") {
+        return `export const configuredModulesPlugins = [];`;
+      }
+
+      const landingImport = getLandingModuleImport(
+        config.__meta.moduleDir,
+        config.__meta.mode,
+      );
+      const userPanelImport = getUserPanelModuleImport(
+        config.__meta.moduleDir,
+        config.__meta.mode,
+      );
+
+      const landingConfig = {
+        enabled: landing.enabled,
+        path: landing.path,
+        layout: landing.layout,
+        content: landing.content,
+      };
+
+      const userPanelConfig = {
+        enabled: userPanel.enabled,
+        basePath: userPanel.basePath,
+        dashboard: {
+          enabled: userPanel.dashboard.enabled,
+          path: userPanel.dashboard.path,
+          content: userPanel.dashboard.content,
+        },
+        userManagement: {
+          enabled: userPanel.userManagement.enabled,
+          routes: userPanel.userManagement.routes,
+          content: userPanel.userManagement.content,
+        },
+        apiKeys: userPanel.apiKeys,
+        plans: {
+          enabled: userPanel.plans.enabled,
+          path: userPanel.plans.path,
+          content: userPanel.plans.content,
+        },
+      };
+
+      const landingPagePath = config.modules?.landing?.page;
+      const dashboardPagePath = config.modules?.userPanel?.dashboard?.page;
+      const profilePagePath = config.modules?.userPanel?.userManagement?.page;
+      const plansPagePath = config.modules?.userPanel?.plans?.page;
+
+      const code: string[] = [`import config from "virtual:zudoku-config";`];
+
+      if (landingPagePath) {
+        code.push(
+          `import LandingPage from "${resolveProjectPageImport(config.__meta.rootDir, landingPagePath)}";`,
+        );
+      }
+
+      if (dashboardPagePath) {
+        code.push(
+          `import UserPanelDashboardPage from "${resolveProjectPageImport(config.__meta.rootDir, dashboardPagePath)}";`,
+        );
+      }
+
+      if (profilePagePath) {
+        code.push(
+          `import UserPanelProfilePage from "${resolveProjectPageImport(config.__meta.rootDir, profilePagePath)}";`,
+        );
+      }
+
+      if (plansPagePath) {
+        code.push(
+          `import UserPanelPlansPage from "${resolveProjectPageImport(config.__meta.rootDir, plansPagePath)}";`,
+        );
+      }
+
+      code.push(
+        `import { landingModule } from "${landingImport}";`,
+        `import { userPanelModule } from "${userPanelImport}";`,
+        `const landing = landingModule({`,
+        `  ...${JSON.stringify(landingConfig)},`,
+        `  component: config.modules?.landing?.component${landingPagePath ? " ?? LandingPage" : ""},`,
+        `});`,
+        `const userPanel = userPanelModule({`,
+        `  ...${JSON.stringify(userPanelConfig)},`,
+        `  dashboard: {`,
+        `    ...${JSON.stringify(userPanelConfig.dashboard)},`,
+        `    component: config.modules?.userPanel?.dashboard?.component${dashboardPagePath ? " ?? UserPanelDashboardPage" : ""},`,
+        `  },`,
+        `  userManagement: {`,
+        `    ...${JSON.stringify(userPanelConfig.userManagement)},`,
+        `    component: config.modules?.userPanel?.userManagement?.component${profilePagePath ? " ?? UserPanelProfilePage" : ""},`,
+        `  },`,
+        `  plans: {`,
+        `    ...${JSON.stringify(userPanelConfig.plans)},`,
+        `    component: config.modules?.userPanel?.plans?.component${plansPagePath ? " ?? UserPanelPlansPage" : ""},`,
+        `  },`,
+        `});`,
+        `export const configuredModulesPlugins = [`,
+        `  ...(landing ? [landing] : []),`,
+        `  ...(userPanel ? [userPanel] : []),`,
+        `];`,
+      );
+
+      await writePluginDebugCode(config.__meta.rootDir, "modules-plugin", code);
+
+      return code.join("\n");
+    },
+  };
+};
+
+export default viteModulesPlugin;

package/src/vite/plugin-navigation.ts

@@ -0,0 +1,106 @@
+import { stringify } from "javascript-stringify";
+import { isElement } from "react-is";
+import type { Plugin, ViteDevServer } from "vite";
+import { getCurrentConfig } from "../config/loader.js";
+import { IconNames } from "../config/validators/icon-types.js";
+import { NavigationResolver } from "../config/validators/NavigationSchema.js";
+import invariant from "../lib/util/invariant.js";
+import { writePluginDebugCode } from "./debug.js";
+
+const toPascalCase = (str: string) =>
+  str.replace(/(^\w|-\w)/g, (match) => match.replace("-", "").toUpperCase());
+
+const virtualModuleId = "virtual:zudoku-navigation";
+export const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+
+export const invalidate = (server: ViteDevServer) => {
+  const navigationModule =
+    server.environments.ssr.moduleGraph.getModuleById(virtualModuleId);
+  if (!navigationModule) return;
+
+  server.environments.ssr.moduleGraph.invalidateModule(navigationModule);
+};
+
+export const viteNavigationPlugin = (): Plugin => {
+  return {
+    name: "zudoku-navigation-plugin",
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    async load(id) {
+      if (id !== resolvedVirtualModuleId) return;
+      const config = getCurrentConfig();
+
+      const resolver = new NavigationResolver(config);
+      const resolvedNavigation = await resolver.resolve();
+      const resolvedRules = await resolver.resolveRules(
+        config.navigationRules ?? [],
+      );
+
+      const collectedIcons = new Set<string>();
+      let hasMissingIcon = false;
+
+      const stringifyWithIcons = (value: unknown) =>
+        stringify(
+          value,
+          (value, _indent, next, key) => {
+            // Skip non-serializable React elements
+            if (isElement(value)) return undefined;
+
+            if (key === "icon" && typeof value === "string") {
+              const iconName = toPascalCase(value);
+
+              if (!IconNames.includes(value as IconNames)) {
+                // biome-ignore lint/suspicious/noConsole: Logging allowed here
+                console.warn(
+                  `Icon "${value}" not found, see: https://lucide.dev/icons/`,
+                );
+                hasMissingIcon = true;
+                return "MissingIcon";
+              } else {
+                collectedIcons.add(iconName);
+                return iconName;
+              }
+            }
+            return next(value);
+          },
+          2,
+        );
+
+      const headerNavigationCode = stringifyWithIcons(
+        config.header?.navigation ?? [],
+      );
+      const navigationCode = stringifyWithIcons(resolvedNavigation);
+      const rulesCode = stringifyWithIcons(resolvedRules);
+
+      invariant(headerNavigationCode, "Failed to stringify header navigation");
+      invariant(navigationCode, "Failed to stringify navigation");
+      invariant(rulesCode, "Failed to stringify navigation rules");
+
+      await writePluginDebugCode(
+        config.__meta.rootDir,
+        "navigation-plugin",
+        `export const headerNavigation = ${headerNavigationCode};\nexport const navigation = ${navigationCode};\nexport const rules = ${rulesCode};`,
+        "js",
+      );
+
+      if (hasMissingIcon) {
+        collectedIcons.add("MissingIcon");
+      }
+
+      const importStatement =
+        collectedIcons.size > 0
+          ? `import { ${[...collectedIcons].join(", ")} } from "@lukoweb/apitogo/icons";\n`
+          : "";
+
+      return [
+        importStatement,
+        `export const configuredHeaderNavigation = ${headerNavigationCode};`,
+        `export const configuredNavigation = ${navigationCode};`,
+        `export const configuredNavigationRules = ${rulesCode};`,
+      ].join("\n");
+    },
+  };
+};

package/src/vite/plugin-search.ts

@@ -0,0 +1,59 @@
+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;
+
+      const config = getCurrentConfig();
+
+      if (!config.search || config.__meta.mode === "standalone") {
+        return `export const configuredSearchPlugin = undefined;`;
+      }
+
+      const code = [];
+
+      if (config.search.type === "inkeep") {
+        code.push(
+          `import config from 'virtual:zudoku-config';`,
+          `import { inkeepSearchPlugin } from "@lukoweb/apitogo/plugins/search-inkeep";`,
+          `export const configuredSearchPlugin = inkeepSearchPlugin(config.search);`,
+        );
+
+        return code.join("\n");
+      }
+
+      if (config.search.type === "pagefind") {
+        code.push(
+          `import config from 'virtual:zudoku-config';`,
+          `import { pagefindSearchPlugin } from "@lukoweb/apitogo/plugins/search-pagefind";`,
+          `export const configuredSearchPlugin = pagefindSearchPlugin(config.search);`,
+        );
+
+        return code.join("\n");
+      }
+    },
+  };
+};

package/src/vite/plugin-shiki-register.ts

@@ -0,0 +1,97 @@
+import { fileURLToPath } from "node:url";
+import { bundledLanguagesInfo, type BundledLanguage } from "shiki";
+import type { Plugin } from "vite";
+import { getCurrentConfig } from "../config/loader.js";
+import { defaultLanguages } from "../lib/shiki-constants.js";
+import { defaultHighlightOptions, highlighterPromise } from "../lib/shiki.js";
+
+const aliasToId = new Map(
+  bundledLanguagesInfo.flatMap((lang) =>
+    (lang.aliases ?? []).map((alias) => [alias, lang.id]),
+  ),
+);
+
+// Resolve either an alias or the original language id
+const resolveLang = (lang: BundledLanguage): string =>
+  aliasToId.get(lang) ?? lang;
+
+export const viteShikiRegisterPlugin = (): Plugin => {
+  const virtualModuleId = "virtual:zudoku-shiki-register";
+  const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+
+  return {
+    name: "vite-plugin-shiki-register",
+    config() {
+      const config = getCurrentConfig();
+      const languages =
+        config.syntaxHighlighting?.languages ?? defaultLanguages;
+      const themes = Object.values(
+        config.syntaxHighlighting?.themes ?? defaultHighlightOptions.themes,
+      );
+
+      return {
+        resolve: {
+          alias: [
+            {
+              find: /^@shikijs\/(langs|themes)\/.+$/,
+              replacement: "$&",
+              customResolver: (id) => fileURLToPath(import.meta.resolve(id)),
+            },
+          ],
+        },
+        optimizeDeps: {
+          include: [
+            ...languages.map((lang) => `@shikijs/langs/${resolveLang(lang)}`),
+            ...themes.map((theme) => `@shikijs/themes/${theme}`),
+          ],
+        },
+      };
+    },
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    async load(id) {
+      if (id !== resolvedVirtualModuleId) return;
+      const config = getCurrentConfig();
+
+      const languages =
+        config.syntaxHighlighting?.languages ?? defaultLanguages;
+
+      const themes = Object.values(
+        config.syntaxHighlighting?.themes ?? defaultHighlightOptions.themes,
+      );
+
+      const highlighter = await highlighterPromise;
+
+      await Promise.all([
+        highlighter.loadTheme(
+          ...themes.map((theme) => import(`@shikijs/themes/${theme}`)),
+        ),
+        highlighter.loadLanguage(
+          ...languages.map(
+            (lang) => import(`@shikijs/langs/${resolveLang(lang)}`),
+          ),
+        ),
+      ]);
+
+      const code = [
+        "export const registerShiki = async (highlighter) => {",
+        "  await Promise.all([",
+        "    highlighter.loadTheme(",
+        themes.map((theme) => `import('@shikijs/themes/${theme}')`).join(","),
+        "    ),",
+        "    highlighter.loadLanguage(",
+        languages
+          .map((lang) => `import('@shikijs/langs/${resolveLang(lang)}')`)
+          .join(","),
+        "    ),",
+        "  ]);",
+        "};",
+      ];
+
+      return code.join("\n");
+    },
+  };
+};