zudoku 0.1.1-dev.17 → 0.1.1-dev.19

package/src/ts.ts

@@ -0,0 +1,94 @@
+import path from "path";
+import ts from "typescript";
+
+/**
+ * Function to check if a TypeScript string is valid
+ * Used for tests
+ */
+export async function checkTypescriptString(code: string) {
+  const rootDir = process.cwd();
+  const inMemoryFileName = path.join(rootDir, "/src/temp.ts");
+  const configPath = ts.findConfigFile(
+    rootDir,
+    ts.sys.fileExists,
+    "tsconfig.json",
+  );
+  if (!configPath) {
+    throw new Error("Could not find a valid tsconfig.json");
+  }
+  const configFile = ts.readConfigFile(configPath, ts.sys.readFile);
+  const parsedCommandLine = ts.parseJsonConfigFileContent(
+    configFile.config,
+    ts.sys,
+    path.dirname(configPath),
+  );
+
+  // Custom compiler host to handle in-memory file and delegate to default host for others
+  const compilerHost: ts.CompilerHost = {
+    ...ts.createCompilerHost(parsedCommandLine.options),
+    getSourceFile: (
+      fileName,
+      languageVersion,
+      onError,
+      shouldCreateNewSourceFile,
+    ) => {
+      if (fileName === inMemoryFileName) {
+        return ts.createSourceFile(fileName, code, languageVersion, true);
+      }
+      return ts
+        .createCompilerHost(parsedCommandLine.options)
+        .getSourceFile(
+          fileName,
+          languageVersion,
+          onError,
+          shouldCreateNewSourceFile,
+        );
+    },
+    fileExists: (fileName) => {
+      if (fileName === inMemoryFileName) {
+        return true;
+      }
+      return ts.sys.fileExists(fileName);
+    },
+    readFile: (fileName) => {
+      if (fileName === inMemoryFileName) {
+        return code;
+      }
+      return ts.sys.readFile(fileName);
+    },
+  };
+
+  // Create a source file in memory
+  const sourceFile = ts.createSourceFile("tempFile.ts", code, 99, true);
+
+  // Create a program using the in-memory source file
+  const program = ts.createProgram({
+    rootNames: parsedCommandLine.fileNames.concat(inMemoryFileName),
+    options: parsedCommandLine.options,
+    host: compilerHost,
+  });
+
+  // Get all diagnostics for the program, which includes syntax and semantic errors
+  const diagnostics = ts.getPreEmitDiagnostics(program);
+
+  diagnostics.forEach((diagnostic) => {
+    if (diagnostic.file) {
+      const { line, character } = diagnostic.file.getLineAndCharacterOfPosition(
+        diagnostic.start!,
+      );
+      const message = ts.flattenDiagnosticMessageText(
+        diagnostic.messageText,
+        "\n",
+      );
+      console.log(
+        `${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`,
+      );
+    } else {
+      console.log(
+        ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n"),
+      );
+    }
+  });
+
+  return diagnostics;
+}

package/src/types.d.ts

@@ -0,0 +1,24 @@
+declare module "slugify" {
+  declare function slugify(
+    string: string,
+    options?:
+      | {
+          replacement?: string;
+          remove?: RegExp;
+          lower?: boolean;
+          strict?: boolean;
+          locale?: string;
+          trim?: boolean;
+        }
+      | string,
+  ): string;
+
+  export default slugify;
+}
+
+declare module "virtual:zudoku-docs-plugins";
+declare module "virtual:zudoku-api-plugins";
+declare module "virtual:zudoku-config";
+declare module "virtual:zudoku-auth";
+declare module "virtual:zudoku-component";
+declare module "zudoku/open-api-worker";

package/src/vite/build.ts

@@ -0,0 +1,33 @@
+import { writeFile } from "fs/promises";
+import { build as viteBuild } from "vite";
+import { getViteConfig } from "./config.js";
+import { getBuildHtml } from "./html.js";
+
+export async function runBuild(options: { dir: string }) {
+  const viteConfig = await getViteConfig({ dir: options.dir, mode: "build" });
+
+  const result = await viteBuild(viteConfig);
+
+  if (Array.isArray(result)) {
+    throw new Error("Build failed");
+  }
+
+  if ("output" in result) {
+    const jsEntry = result.output.find(
+      (o) => "isEntry" in o && o.isEntry,
+    )?.fileName;
+    const cssEntry = result.output.find((o) =>
+      o.fileName.endsWith(".css"),
+    )?.fileName;
+
+    const html = getBuildHtml({
+      jsEntry: `/${jsEntry}`,
+      cssEntry: `/${cssEntry}`,
+    });
+
+    await writeFile(`${options.dir}/dist/index.html`, html, "utf-8");
+    return;
+  }
+
+  throw new Error("Build failed");
+}

package/src/vite/config.test.ts

@@ -0,0 +1,10 @@
+import assert from "node:assert";
+import path from "node:path";
+import test from "node:test";
+import { loadConfig } from "./config.js";
+
+test("Should correctly load zudoku.config.ts file", async (t) => {
+  const rootPath = path.resolve("../../samples/with-config/");
+  const config = await loadConfig(rootPath, "zudoku.config.ts");
+  assert.equal(config.default.ui.headerTitle, "My Portal");
+});

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;