zudoku 0.1.1-dev.2 → 0.1.1-dev.20

package/src/vite/config.ts

@@ -0,0 +1,183 @@
+import autoprefixer from "autoprefixer";
+import esbuild from "esbuild";
+import { stat } from "node:fs/promises";
+import path from "node:path";
+import tailwindcss from "tailwindcss";
+import { InlineConfig, LogLevel } from "vite";
+import tailwindConfig from "../app/tailwind.js";
+import { logger } from "../cli/common/logger.js";
+import { isPortAvailable } from "../cli/common/utils/ports.js";
+import { ZudokuConfig } from "../config/config.js";
+import viteComponentPlugin from "./plugin-component.js";
+import vitePlugin from "./plugin.js";
+
+const extensions = ["js", "jsx", "ts", "tsx", "mjs"];
+
+export interface ZudokuViteConfig extends InlineConfig {
+  root: string;
+}
+
+const fileExists = (path: string) =>
+  stat(path)
+    .then(() => true)
+    .catch(() => false);
+
+export async function loadZuploConfig(rootDir: string): Promise<ZudokuConfig> {
+  for (const ext of extensions) {
+    const fileName = `zudoku.config.${ext}`;
+    const configPath = path.join(rootDir, fileName);
+
+    try {
+      if (await fileExists(configPath)) {
+        logger.info(`Loading zudoku.config file: ${configPath}`);
+        const config = await loadConfig(rootDir, fileName);
+        return config.default as ZudokuConfig;
+      }
+    } catch (e) {
+      logger.error(e);
+    }
+  }
+
+  // Default config
+  logger.warn("No zudoku.config file found");
+  return {};
+}
+
+function getModuleDir() {
+  // NOTE: This is relative to the /dist folder because the dev server
+  // runs the compiled JS files, but vite uses the raw TS files
+  return new URL("../../", import.meta.url).pathname;
+}
+
+export function getAppMainTsxPath() {
+  const modDir = getModuleDir();
+  return path.join(modDir, "src", "app", "main.tsx");
+}
+
+export async function getViteConfig({
+  dir,
+  mode,
+}: {
+  dir: string;
+  mode: "dev" | "build";
+}): Promise<ZudokuViteConfig> {
+  const rootDir = path.resolve(process.cwd(), dir);
+  const moduleDir = getModuleDir();
+  const config = await loadZuploConfig(rootDir);
+
+  let websocketPort = 9800;
+  while (
+    !(await isPortAvailable("localhost", websocketPort)) &&
+    websocketPort < 9999
+  ) {
+    websocketPort++;
+  }
+
+  const viteConfig: ZudokuViteConfig = {
+    root: rootDir,
+    appType: "custom",
+    configFile: false,
+    clearScreen: false,
+    logLevel: (process.env.LOG_LEVEL || "info") as LogLevel,
+    customLogger: logger,
+    envPrefix: "PUBLIC_",
+    worker: {
+      format: "es",
+    },
+    server: {
+      middlewareMode: true,
+      open: true,
+      hmr: {
+        port: websocketPort,
+      },
+      watch: {
+        ignored: [
+          `${rootDir}/dist`,
+          `${rootDir}/lib`,
+          `${rootDir}/.git`,
+          `${rootDir}/node_modules`,
+          `${rootDir}/zuplo.config.ts`,
+        ],
+      },
+      // sourcemapIgnoreList: (sourcePath) => {
+      //   return (
+      //     sourcePath.includes("node_modules/openapi-types/") ||
+      //     sourcePath.includes("node_modules/value-or-promise/")
+      //   );
+      // },
+    },
+    build: {
+      outDir: path.resolve(rootDir, "dist"),
+      rollupOptions: {
+        // external: ["@mdx-js/react"],
+        input: mode === "build" ? "zudoku/app/main.tsx" : undefined,
+      },
+    },
+    optimizeDeps: {
+      entries: [getAppMainTsxPath()],
+      exclude: ["zudoku/open-api-worker"],
+      include: [
+        "hast-util-to-jsx-runtime > style-to-object",
+        "debug",
+        "extend",
+        "stringify-object",
+        "url",
+        "@zudoku/httpsnippet > qs",
+        "react-fast-compare",
+        "invariant",
+        "shallowequal",
+        "slugify",
+        "zustand",
+      ],
+    },
+    plugins: [vitePlugin({ ...config, rootDir }), viteComponentPlugin()],
+    css: {
+      postcss: {
+        plugins: [
+          tailwindcss({
+            ...tailwindConfig,
+            content: [
+              `${moduleDir}/src/**/*.{js,ts,jsx,tsx,md,mdx}`,
+              // Tailwind seems to crash if it tries to parse compiled .js files
+              // as a workaround, we will just ship the source file and use those
+              // `${moduleDir}/lib/**/*.{js,ts,jsx,tsx,md,mdx}`,
+              `${rootDir}/src/**/*.{js,ts,jsx,tsx,md,mdx}`,
+            ],
+          }),
+          autoprefixer,
+        ],
+      },
+    },
+  };
+
+  return viteConfig;
+}
+
+export async function loadConfig(rootPath: string, fileName: string) {
+  const compiledFilepath = path.join(
+    rootPath,
+    "node_modules",
+    ".zudoku",
+    "zudoku.config.mjs",
+  );
+  const filepath = path.join(rootPath, fileName);
+  try {
+    await esbuild.build({
+      entryPoints: [filepath],
+      bundle: true,
+      keepNames: true,
+      treeShaking: true,
+      minifyIdentifiers: false,
+      minifySyntax: false,
+      minifyWhitespace: false,
+      platform: "node",
+      target: "es2022",
+      format: "esm",
+      outfile: compiledFilepath,
+    });
+  } catch (error) {
+    error.message = `TypeScript Error in ${filepath}:\n${error.message}`;
+    throw error;
+  }
+  return await import(compiledFilepath);
+}

package/src/vite/dev-server.ts

@@ -0,0 +1,64 @@
+import express from "express";
+import { Server } from "node:http";
+import { createServer as createViteServer } from "vite";
+
+import { createGraphQLServer } from "../lib/oas/graphql/index.js";
+import { getAppMainTsxPath, getViteConfig } from "./config.js";
+import { getDevHtml } from "./html.js";
+
+export class DevServer {
+  private server: Server | undefined;
+
+  constructor(private options: { port: number; dir: string }) {}
+
+  async start() {
+    const app = express();
+
+    const viteConfig = await getViteConfig({
+      dir: this.options.dir,
+      mode: "dev",
+    });
+
+    const vite = await createViteServer(viteConfig);
+
+    const graphql = createGraphQLServer({
+      graphqlEndpoint: "/__z/graphql",
+    });
+
+    app.use(graphql.graphqlEndpoint, graphql);
+    app.use(vite.middlewares);
+
+    app.use("*", async (req, res) => {
+      try {
+        const entryJs = getAppMainTsxPath();
+        const rawHtml = getDevHtml(entryJs);
+        const indexHtml = await vite.transformIndexHtml(req.url, rawHtml);
+
+        // Send the transformed index.html back to the client
+        res.status(200).set({ "Content-Type": "text/html" }).end(indexHtml);
+      } catch (e) {
+        vite.ssrFixStacktrace(e);
+        console.error(e);
+        res.status(500).end(e.message);
+      }
+    });
+
+    return new Promise<void>((resolve) => {
+      this.server = app.listen(this.options.port, resolve);
+    });
+  }
+
+  async stop() {
+    if (this.server) {
+      return new Promise<void>((resolve, reject) => {
+        this.server!.close((err) => {
+          if (err) {
+            reject(err);
+          } else {
+            resolve();
+          }
+        });
+      });
+    }
+  }
+}

package/src/vite/html.ts

@@ -0,0 +1,37 @@
+export function getDevHtml(jsEntry: string) {
+  return `<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="${jsEntry}"></script>
+  </body>
+</html>
+`;
+}
+
+export function getBuildHtml({
+  jsEntry,
+  cssEntry,
+}: {
+  jsEntry: string;
+  cssEntry: string;
+}) {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+    <script type="module" crossorigin src="${jsEntry}"></script>
+    <link rel="stylesheet" crossorigin href="${cssEntry}">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>`;
+}

package/src/vite/plugin-api.ts

@@ -0,0 +1,57 @@
+import { Plugin } from "vite";
+import { ZudokuPluginOptions } from "../config/config.js";
+import { getConfigExportCode } from "./plugin-config.js";
+
+const viteApiPlugin = (config: ZudokuPluginOptions): Plugin => {
+  const virtualModuleId = "virtual:zudoku-api-plugins";
+  const resolvedVirtualModuleId = "\0" + virtualModuleId;
+
+  return {
+    name: "vite-zudoku-api-plugins",
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        const code: string[] = [
+          // IMPORTANT! This path here is important, we MUST resolve
+          // files here as Typescript from the appDir
+          getConfigExportCode(config.rootDir),
+          `import { openApiPlugin } from "zudoku/plugins";`,
+          `const configuredApiPlugins = [];`,
+        ];
+
+        if (config?.apis) {
+          if (Array.isArray(config.apis)) {
+            config.apis.forEach((c, i) => {
+              code.push(
+                ...[
+                  `// @ts-ignore`, // To make tests pass
+                  `configuredApiPlugins.push(openApiPlugin(config.apis?[${i}]));`,
+                ],
+              );
+            });
+          } else {
+            code.push(
+              ...[
+                `// @ts-ignore`, // To make tests pass
+                `configuredApiPlugins.push(openApiPlugin(config.apis));`,
+              ],
+            );
+          }
+        }
+
+        code.push(`export { configuredApiPlugins };`);
+
+        return {
+          code: code.join("\n"),
+          map: null,
+        };
+      }
+    },
+  };
+};
+
+export default viteApiPlugin;

package/src/vite/plugin-auth.ts

@@ -0,0 +1,32 @@
+import { PluginOption } from "vite";
+import { ZudokuPluginOptions } from "../config/config.js";
+import { getConfigExportCode } from "./plugin-config.js";
+
+const viteAuthPlugin = (config: ZudokuPluginOptions): PluginOption => {
+  const virtualModuleId = "virtual:zudoku-auth";
+  const resolvedVirtualModuleId = "\0" + virtualModuleId;
+
+  return {
+    name: "zudoku-auth-plugin", // required, will show up in warnings and errors
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        if (!config.authentication) {
+          return `export const configuredAuthProvider = undefined;`;
+        }
+        // TODO: Validate that the authConfig.type is a valid authentication provider
+        return [
+          getConfigExportCode(config.rootDir),
+          `import { clerkAuth } from "zudoku/auth";`,
+          `export const configuredAuthProvider = clerkAuth(config.authentication);`,
+        ].join("\n");
+      }
+    },
+  };
+};
+
+export default viteAuthPlugin;

package/src/vite/plugin-component.ts

@@ -0,0 +1,26 @@
+import { PluginOption } from "vite";
+
+const viteComponentPlugin = (): PluginOption => {
+  const virtualModuleId = "virtual:zudoku-component";
+  const resolvedVirtualModuleId = "\0" + virtualModuleId;
+
+  return {
+    name: "zudoku-component-plugin",
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        const code: string[] = [
+          `export { DevPortal } from "zudoku/components";`,
+        ];
+
+        return code.join("\n");
+      }
+    },
+  };
+};
+
+export default viteComponentPlugin;

package/src/vite/plugin-config.ts

@@ -0,0 +1,31 @@
+import path from "path";
+import { PluginOption } from "vite";
+
+export function getConfigExportCode(rootDir: string) {
+  const configPath = path.join(
+    rootDir,
+    `/node_modules/.zudoku/zudoku.config.mjs`,
+  );
+  return `import config from "${configPath}"; export default config;`;
+}
+
+const viteConfigPlugin = ({ rootDir }: { rootDir: string }): PluginOption => {
+  const virtualModuleId = "virtual:zudoku-config";
+  const resolvedVirtualModuleId = "\0" + virtualModuleId;
+
+  return {
+    name: "zudoku-config-plugin",
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return getConfigExportCode(rootDir);
+      }
+    },
+  };
+};
+
+export default viteConfigPlugin;

package/src/vite/plugin-docs.test.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import assert from "node:assert";
+import test from "node:test";
+import { checkTypescriptString } from "../ts.js";
+import viteDocsPlugin from "./plugin-docs.js";
+
+test.only("Builds code", async (t) => {
+  const plugin = viteDocsPlugin({
+    docs: { files: "docs/**/*.md" },
+  } as any);
+  if (!plugin.load) {
+    throw new Error("Plugin does not have a load function");
+  }
+  if (typeof plugin.load !== "function") {
+    throw new Error("Plugin.load is not a function");
+  }
+
+  const result = await plugin.load.call(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    {} as any,
+    "\0virtual:markdown-plugins",
+  );
+  if (result && typeof result === "object" && "code" in result) {
+    const diagnostics = await checkTypescriptString(result.code);
+    if (diagnostics.length > 0) {
+      console.error(diagnostics);
+    }
+    assert.equal(diagnostics.length, 0);
+  } else {
+    assert.fail("Invalid return value from plugin.load");
+  }
+});

package/src/vite/plugin-docs.ts

@@ -0,0 +1,52 @@
+import { Plugin } from "vite";
+import { DocsConfig, ZudokuPluginOptions } from "../config/config.js";
+
+const viteDocsPlugin = (config: ZudokuPluginOptions): Plugin => {
+  const virtualModuleId = "virtual:zudoku-docs-plugins";
+  const resolvedVirtualModuleId = "\0" + virtualModuleId;
+
+  return {
+    name: "vite-zudoku-docs-plugin",
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        const code: string[] = [
+          // IMPORTANT! This path here is important, we MUST resolve
+          // files here as Typescript from the appDir
+          `import { markdownPlugin } from "zudoku/plugins";`,
+          `const configuredDocsPlugins = [];`,
+        ];
+        const docsConfigs: DocsConfig[] = config?.docs
+          ? Array.isArray(config.docs)
+            ? config.docs
+            : [config.docs]
+          : [];
+
+        docsConfigs.forEach((docsConfig) => {
+          code.push(
+            ...[
+              `// @ts-ignore`, // To make tests pass
+              `const markdownFiles = import.meta.glob(${JSON.stringify(docsConfig.files)}, {`,
+              `  eager: false,`,
+              `});`,
+              `configuredDocsPlugins.push(markdownPlugin({ markdownFiles }));`,
+            ],
+          );
+        });
+
+        code.push(`export { configuredDocsPlugins };`);
+
+        return {
+          code: code.join("\n"),
+          map: null,
+        };
+      }
+    },
+  };
+};
+
+export default viteDocsPlugin;

package/src/vite/plugin-html.ts

@@ -0,0 +1,50 @@
+import { Plugin } from "vite";
+
+const themeScript = `
+if (
+  localStorage.getItem("theme") === "dark" ||
+  (!("theme" in localStorage) &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches)
+) {
+  document.documentElement.classList.add("dark");
+} else {
+  document.documentElement.classList.remove("dark");
+}
+`.trim();
+
+const viteHtmlPlugin = (): Plugin => {
+  return {
+    name: "vite-zudoku-core-plugin",
+    transformIndexHtml: (html) => {
+      return {
+        html,
+        tags: [
+          {
+            tag: "script",
+            attrs: { type: "module" },
+            children: themeScript,
+            injectTo: "head",
+          },
+          {
+            tag: "link",
+            attrs: {
+              rel: "preconnect",
+              href: "https://cdn.zuplo.com/",
+            },
+            injectTo: "head",
+          },
+          {
+            tag: "link",
+            attrs: {
+              rel: "stylesheet",
+              href: "https://cdn.zuplo.com/static/fonts/geist.css",
+            },
+            injectTo: "head",
+          },
+        ],
+      };
+    },
+  };
+};
+
+export default viteHtmlPlugin;

package/src/vite/plugin-mdx.ts

@@ -0,0 +1,74 @@
+import rehypeMetaAsAttributes from "@lekoarts/rehype-meta-as-attributes";
+import mdx, { type Options } from "@mdx-js/rollup";
+import withToc from "@stefanprobst/rehype-extract-toc";
+import withTocExport from "@stefanprobst/rehype-extract-toc/mdx";
+import path from "node:path";
+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 { visit } from "unist-util-visit";
+import { Plugin } from "vite";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const rehypeCodeBlockPlugin = () => (tree: any) => {
+  visit(tree, "element", (node, index, parent) => {
+    if (node.tagName === "code") {
+      node.properties.inline = `${parent?.tagName !== "pre"}`;
+    }
+  });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const remarkLinkRewritePlugin = () => (tree: any) => {
+  visit(tree, "link", (node) => {
+    if (!node.url) return;
+
+    if (!node.url.startsWith("http") && !node.url.startsWith("/")) {
+      node.url = path.join("../", node.url);
+    }
+
+    node.url = node.url.replace(/\.mdx?(#.*?)?/, "$1");
+  });
+};
+
+export type DevPortalPluginOptions = {
+  remarkPlugins?: Options["remarkPlugins"];
+  rehypePlugins?: Options["rehypePlugins"];
+};
+
+const viteMdxPlugin = ({
+  remarkPlugins,
+  rehypePlugins,
+}: DevPortalPluginOptions = {}): Plugin => {
+  return {
+    enforce: "pre",
+    ...mdx({
+      providerImportSource: "@mdx-js/react",
+      remarkPlugins: [
+        remarkComment,
+        remarkGfm,
+        remarkFrontmatter,
+        remarkMdxFrontmatter,
+        remarkDirective,
+        remarkDirectiveRehype,
+        remarkLinkRewritePlugin,
+        ...(remarkPlugins ?? []),
+      ],
+      rehypePlugins: [
+        rehypeSlug,
+        rehypeCodeBlockPlugin,
+        rehypeMetaAsAttributes,
+        withToc,
+        withTocExport,
+        ...(rehypePlugins ?? []),
+      ],
+    }),
+    name: "vite-zudoku-mdx-plugin",
+  };
+};
+
+export default viteMdxPlugin;

package/src/vite/plugin-metadata.ts

@@ -0,0 +1,30 @@
+import { writeFileSync } from "node:fs";
+import path from "node:path";
+import { Plugin } from "vite";
+
+/**
+ * Used for debugging, writes metadata to build.
+ */
+const viteBuildMetadata = (): Plugin => {
+  return {
+    name: "vite-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;