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

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.2",
+  "version": "0.1.1-dev.20",
   "type": "module",
   "files": [
     "dist",
-    "src/app",
-    "cli.js"
+    "lib",
+    "cli.js",
+    "src"
   ],
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,10 +18,13 @@
       "import": "./dist/index.js"
     },
     "./auth": {
-      "import": "./dist/auth.js"
+      "import": "./lib/zudoku.auth.js"
     },
     "./plugins": {
-      "import": "./dist/plugins.js"
+      "import": "./lib/zudoku.plugins.js"
+    },
+    "./components": {
+      "import": "./lib/zudoku.components.js"
     },
     "./vite": {
       "require": "./dist/vite/plugin.js",
@@ -30,51 +34,58 @@
       "require": "./dist/app/tailwind.js",
       "import": "./dist/app/tailwind.js"
     },
-    "./icons": {
-      "require": "./dist/app/core/icons.js",
-      "import": "./dist/app/core/icons.js"
-    },
     "./main.css": {
       "require": "./src/app/main.css",
       "import": "./src/app/main.css"
+    },
+    "./app/*": {
+      "import": "./src/app/*"
+    },
+    "./open-api-worker": {
+      "import": "./lib/zudoku.openapi-worker.js"
     }
   },
   "dependencies": {
     "@cfworker/json-schema": "1.12.8",
-    "@clerk/clerk-js": "^5.2.2",
+    "@clerk/clerk-js": "5.2.2",
+    "@graphql-typed-document-node/core": "3.2.0",
     "@lekoarts/rehype-meta-as-attributes": "3.0.1",
     "@mdx-js/react": "3.0.1",
     "@mdx-js/rollup": "3.0.1",
     "@pothos/core": "3.41.0",
-    "@radix-ui/react-collapsible": "1.0.3",
-    "@sentry/node": "^8.11.0",
+    "@radix-ui/react-collapsible": "1.1.0",
+    "@radix-ui/react-dialog": "1.1.1",
+    "@radix-ui/react-slot": "1.1.0",
+    "@radix-ui/react-tabs": "1.1.0",
+    "@sentry/node": "8.11.0",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
     "@tailwindcss/typography": "0.5.13",
-    "@tanstack/react-query": "5.35.1",
+    "@tanstack/react-query": "5.50.1",
+    "@vitejs/plugin-react": "4.3.1",
+    "@zudoku/httpsnippet": "10.0.9",
     "autoprefixer": "10.4.19",
-    "chalk": "^5.3.0",
+    "chalk": "5.3.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
-    "dotenv": "^16.4.5",
-    "express": "^4.19.2",
-    "gql.tada": "1.7.5",
+    "dotenv": "16.4.5",
+    "esbuild": "0.23.0",
+    "express": "4.19.2",
+    "graphql": "16.9.0",
     "graphql-type-json": "0.3.2",
     "graphql-yoga": "5.2.0",
     "lru-cache": "10.2.0",
     "lucide-react": "0.378.0",
-    "mdx": "^0.3.1",
+    "mdx": "0.3.1",
     "oauth4webapi": "2.10.4",
     "object-hash": "3.0.0",
-    "pino": "^9.2.0",
-    "postcss": "8.4.38",
+    "openapi-types": "12.1.3",
+    "postcss": "8.4.39",
     "posthog-node": "^4.0.1",
     "prism-react-renderer": "2.3.1",
     "prismjs": "1.29.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
     "react-helmet-async": "2.0.5",
     "react-markdown": "9.0.1",
-    "react-router-dom": "6.23.0",
+    "react-router-dom": "6.24.1",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
     "remark-directive": "3.0.0",
@@ -82,22 +93,23 @@
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.0",
     "remark-mdx-frontmatter": "4.0.0",
-    "semver": "^7.6.2",
+    "semver": "7.6.2",
     "slugify": "1.6.6",
-    "strip-ansi": "^7.1.0",
+    "strip-ansi": "7.1.0",
     "tailwind-merge": "2.3.0",
-    "tailwindcss": "3.4.3",
+    "tailwindcss": "3.4.4",
     "ulid": "2.3.0",
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",
-    "vite": "^5.3.1",
-    "vite-plugin-dts": "^3.9.1",
+    "vite": "5.3.3",
+    "vite-plugin-dts": "3.9.1",
     "yaml": "2.4.1",
-    "yargs": "^17.7.2",
-    "zustand": "^4.5.2"
+    "yargs": "17.7.2",
+    "zustand": "4.5.4"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",
+    "@types/har-format": "^1.2.15",
     "@types/json-schema": "7.0.15",
     "@types/mdx": "2.0.13",
     "@types/node": "20.12.10",
@@ -106,12 +118,18 @@
     "@types/react-dom": "18.3.0",
     "@types/semver": "^7.5.8",
     "@types/yargs": "^17.0.32",
-    "@vitejs/plugin-react": "4.3.0",
-    "openapi-types": "12.1.3",
-    "typescript": "5.4.5"
+    "typescript": "5.5.3"
+  },
+  "peerDependencies": {
+    "@mdx-js/react": "3.0.1",
+    "react": ">18.0.0",
+    "react-dom": ">18.0.0"
   },
   "scripts": {
-    "build": "tsc",
-    "build:css": "cp ./src/app/main.css ./dist/app/main.css"
+    "build": "tsc --project tsconfig.json",
+    "build:vite": "vite build && pnpm run hack:fix-worker-paths",
+    "hack:fix-worker-paths": "node ./scripts/hack-worker.mjs",
+    "clean": "tsc --build --clean",
+    "test": "node --test --enable-source-maps"
   }
 }

package/src/app/App.tsx

@@ -0,0 +1,33 @@
+import "./main.css";
+
+// Virtual config
+import config from "virtual:zudoku-config";
+
+// Virtual Plugins
+import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
+import { configuredAuthProvider } from "virtual:zudoku-auth";
+import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
+
+// Base React Component
+import { DevPortal } from "virtual:zudoku-component";
+
+// IMPORTANT: This component must not contain tailwind classes
+// This directory is not processed by the tailwind plugin
+
+export default function App() {
+  return (
+    <DevPortal
+      meta={{
+        headerTitle: config?.ui?.headerTitle ?? "Developer Portal",
+        pageTitle: config?.ui?.pageTitle ?? "%s | Dev Portal",
+        logo: config?.ui?.logo ?? "https://cdn.zuplo.com/www/favicon.png",
+        favicon:
+          config?.ui?.metadata?.favicon ??
+          "https://cdn.zuplo.com/www/favicon.png",
+      }}
+      navigation={config.navigation ?? []}
+      authentication={configuredAuthProvider}
+      plugins={[...configuredDocsPlugins, ...configuredApiPlugins]}
+    />
+  );
+}

package/src/app/main.tsx

@@ -1,22 +1,9 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./app.js";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
 
-// if (import.meta.env.DEV) {
-//   const { default: wdyr } = await import(
-//     "@welldone-software/why-did-you-render"
-//   );
-//
-//   wdyr(React, {
-//     include: [/.*/],
-//     exclude: [/^BrowserRouter/, /^Link/, /^Route/],
-//     trackHooks: true,
-//     trackAllPureComponents: true,
-//   });
-// }
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
     <App />
-  </React.StrictMode>,
+  </StrictMode>,
 );

package/src/cli/build/handler.ts

@@ -0,0 +1,14 @@
+import { runBuild } from "../../vite/build.js";
+import { printDiagnosticsToConsole } from "../common/output.js";
+
+export interface Arguments {
+  dir: string;
+}
+
+export async function build(argv: Arguments) {
+  printDiagnosticsToConsole("Starting build");
+  printDiagnosticsToConsole("");
+  printDiagnosticsToConsole("");
+
+  await runBuild({ dir: argv.dir });
+}

package/src/cli/cli.ts

@@ -0,0 +1,77 @@
+// import * as dotenv from "dotenv";
+// dotenv.config();
+
+import * as Sentry from "@sentry/node";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+
+import { gte } from "semver";
+import { hideBin } from "yargs/helpers";
+import yargs from "yargs/yargs";
+import build from "./cmds/build.js";
+import dev from "./cmds/dev.js";
+import { shutdownAnalytics } from "./common/analytics/lib.js";
+import { MAX_WAIT_PENDING_TIME_MS, SENTRY_DSN } from "./common/constants.js";
+import { logger } from "./common/logger.js";
+import { warnIfOutdatedVersion } from "./common/outdated.js";
+import { printCriticalFailureToConsoleAndExit } from "./common/output.js";
+
+const MIN_NODE_VERSION = "18.0.0";
+
+if (gte(process.versions.node, MIN_NODE_VERSION)) {
+  let packageJson;
+  try {
+    packageJson = JSON.parse(
+      readFileSync(
+        fileURLToPath(new URL("../../package.json", import.meta.url)),
+        "utf-8",
+      ),
+    );
+  } catch (e) {
+    logger.error(e);
+    await printCriticalFailureToConsoleAndExit(
+      `Unable to load zudoku cli. The package.json is missing or malformed.`,
+    );
+  }
+
+  if (SENTRY_DSN) {
+    Sentry.init({
+      dsn: SENTRY_DSN,
+      release: packageJson?.version,
+    });
+  }
+
+  const cli = yargs(hideBin(process.argv))
+    .command(build)
+    .command(dev)
+    .demandCommand()
+    .strictCommands()
+    .version(packageJson?.version)
+    .fail(false)
+    .help();
+
+  try {
+    await cli.argv;
+
+    // Don't block
+    void warnIfOutdatedVersion(packageJson?.version);
+
+    void Sentry.close(MAX_WAIT_PENDING_TIME_MS).then(() => {
+      process.exit(0);
+    });
+  } catch (err) {
+    if (err instanceof Error) {
+      Sentry.captureException(err);
+    }
+    await printCriticalFailureToConsoleAndExit(err.message ?? err);
+    cli.showHelp();
+  } finally {
+    await shutdownAnalytics();
+  }
+} else {
+  await printCriticalFailureToConsoleAndExit(
+    `The zup CLI requires at least node.js v${MIN_NODE_VERSION}. You are using v${process.versions.node}. Please update your version of node.js.
+
+    Consider using a Node.js version manager such as https://github.com/nvm-sh/nvm.`,
+  );
+}

package/src/cli/cmds/build.ts

@@ -0,0 +1,24 @@
+import { Argv } from "yargs";
+import { Arguments, build } from "../build/handler.js";
+import { captureEvent } from "../common/analytics/lib.js";
+
+export default {
+  desc: "Build",
+  command: "build",
+  builder: (yargs: Argv): Argv<unknown> => {
+    return yargs.option("dir", {
+      type: "string",
+      describe: "The directory containing your project",
+      default: ".",
+      normalize: true,
+      hidden: true,
+    });
+  },
+  handler: async (argv: unknown) => {
+    await captureEvent({
+      argv,
+      event: "zudoku build",
+    });
+    await build(argv as Arguments);
+  },
+};

package/src/cli/cmds/dev.ts

@@ -0,0 +1,29 @@
+import { Argv } from "yargs";
+import { captureEvent } from "../common/analytics/lib.js";
+import { Arguments, dev } from "../dev/handler.js";
+
+export default {
+  desc: "Runs locally",
+  command: "dev",
+  builder: (yargs: Argv): Argv<unknown> => {
+    return yargs
+      .option("dir", {
+        type: "string",
+        describe: "The directory containing your project",
+        default: ".",
+        normalize: true,
+        hidden: true,
+      })
+      .option("port", {
+        type: "number",
+        describe: "The port to run the local server on",
+      });
+  },
+  handler: async (argv: unknown) => {
+    await captureEvent({
+      argv,
+      event: "zudoku dev",
+    });
+    await dev(argv as Arguments);
+  },
+};

package/src/cli/common/analytics/lib.ts

@@ -0,0 +1,89 @@
+// import { Context } from "@sentry/node/types/integrations/context.js";
+import { PostHog } from "posthog-node";
+import { POST_HOG_CAPTURE_KEY } from "../constants.js";
+import { machineId } from "../machine-id/lib.js";
+
+interface IdentifyMessageV1 {
+  distinctId: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  properties?: Record<string | number, any>;
+  disableGeoip?: boolean;
+}
+
+interface EventMessageV1 extends IdentifyMessageV1 {
+  event: string;
+  groups?: Record<string, string | number>;
+  sendFeatureFlags?: boolean;
+  timestamp?: Date;
+}
+
+interface ZuploEventMessage extends Omit<EventMessageV1, "distinctId"> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  argv: any;
+}
+
+let _postHog: PostHog | undefined;
+// let _context: Context | undefined;
+
+function init(): PostHog | undefined {
+  if (process.env.ZUPLO_DO_NOT_TRACK || !POST_HOG_CAPTURE_KEY) {
+    return undefined;
+  }
+
+  _postHog = new PostHog(POST_HOG_CAPTURE_KEY, {
+    host: "https://app.posthog.com",
+    flushAt: 1,
+    flushInterval: 1,
+  });
+
+  // // Use the additional information from sentry for the OS, CPU, etc
+  // // This is a bit of a hack since this is not an official API from sentry
+  // _context = (
+  //   getDefaultIntegrations({}).filter(
+  //     (integration) => integration.name == "Context",
+  //   ) as Context[]
+  // )[0];
+
+  return _postHog;
+}
+
+// A convenience wrapper so that callers do not have to inject the distincId for each call to capture
+export async function captureEvent({
+  event,
+  properties,
+  groups,
+  sendFeatureFlags,
+  timestamp,
+  disableGeoip,
+}: ZuploEventMessage): Promise<void> {
+  if (_postHog === undefined) {
+    init();
+  }
+
+  if (_postHog) {
+    properties = properties ?? {};
+    properties.$set_once = properties.$set_once ?? {};
+
+    // Nice to have: set information if this is in CI
+    if (process.env.CI) {
+      properties["ci"] = process.env.CI;
+    }
+
+    // // Nice to have: set information about the machine
+    // await _context?.addContext(properties);
+
+    _postHog?.capture({
+      distinctId: machineId(),
+      event,
+      properties,
+      groups,
+      sendFeatureFlags,
+      timestamp,
+      disableGeoip,
+    });
+  }
+}
+
+export async function shutdownAnalytics(): Promise<void> {
+  return _postHog?.shutdown();
+}

package/src/cli/common/constants.ts

@@ -0,0 +1,10 @@
+// Configuration
+export const CLI_XDG_FOLDER_NAME = "zudoku";
+export const VERSION_CHECK_FILE = "version.json";
+
+// Sentry
+export const SENTRY_DSN = undefined;
+export const MAX_WAIT_PENDING_TIME_MS = 1000;
+
+// PostHog
+export const POST_HOG_CAPTURE_KEY = undefined;

package/src/cli/common/logger.ts

@@ -0,0 +1,5 @@
+import { LogLevel, createLogger } from "vite";
+
+export const logger = createLogger(
+  (process.env.LOG_LEVEL || "info") as LogLevel,
+);

package/src/cli/common/machine-id/lib.ts

@@ -0,0 +1,85 @@
+/**
+ * node-machine-id
+ * Copyright (c) 2016 Aleksandr Komlev
+ * MIT Licensed
+ *
+ * From https://github.com/automation-stack/node-machine-id
+ */
+import { execSync } from "node:child_process";
+import { createHash } from "node:crypto";
+
+const win32RegBinPath = {
+  skipped: "",
+  native: "%windir%\\System32",
+  mixed: "%windir%\\sysnative\\cmd.exe /c %windir%\\System32",
+};
+const guid = {
+  darwin: "ioreg -rd1 -c IOPlatformExpertDevice",
+  win32:
+    `${
+      win32RegBinPath[isWindowsProcessMixedOrNativeArchitecture()]
+    }\\REG.exe ` +
+    "QUERY HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Cryptography " +
+    "/v MachineGuid",
+  linux:
+    "( cat /var/lib/dbus/machine-id /etc/machine-id 2> /dev/null || hostname ) | head -n 1 || :",
+};
+
+function isWindowsProcessMixedOrNativeArchitecture():
+  | "skipped"
+  | "mixed"
+  | "native" {
+  // detect if the node binary is the same arch as the Windows OS.
+  // or if this is 32 bit node on 64 bit windows.
+  if (process.platform !== "win32") {
+    return "skipped";
+  }
+  if (process.arch === "ia32" && process.env["PROCESSOR_ARCHITEW6432"]) {
+    return "mixed";
+  }
+  return "native";
+}
+
+function hash(guid: string): string {
+  return createHash("sha256").update(guid).digest("hex");
+}
+
+function expose(result: string): string {
+  switch (process.platform) {
+    case "darwin":
+      return result
+        .split("IOPlatformUUID")[1]
+        .split("\n")[0]
+        .replace(/=|\s+]"/gi, "")
+        .toLowerCase();
+    case "win32":
+      return result
+        .toString()
+        .split("REG_SZ")[1]
+        .replace(/\r+|\n+|\s+/gi, "")
+        .toLowerCase();
+    case "linux":
+      return result
+        .toString()
+        .replace(/\r+|\n+|\s+/gi, "")
+        .toLowerCase();
+    case "freebsd":
+      return result
+        .toString()
+        .replace(/\r+|\n+|\s+/gi, "")
+        .toLowerCase();
+    default:
+      throw new Error(`Unsupported platform: ${process.platform}`);
+  }
+}
+
+export function machineId(): string {
+  switch (process.platform) {
+    case "darwin":
+    case "win32":
+    case "linux":
+      return hash(expose(execSync(guid[process.platform]).toString()));
+    default:
+      return "e16fc483-5593-4d71-b485-a6533693da9b";
+  }
+}

package/src/cli/common/outdated.ts

@@ -0,0 +1,102 @@
+import chalk from "chalk";
+import { existsSync, mkdirSync } from "node:fs";
+import { readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { gt } from "semver";
+import { VERSION_CHECK_FILE } from "./constants.js";
+import { printWarningToConsole } from "./output.js";
+import box from "./utils/box.js";
+import { ZUPLO_XDG_STATE_HOME } from "./xdg/lib.js";
+
+interface VersionCheckInfo {
+  lastCheck: number;
+  latestVersion: string;
+}
+export async function warnIfOutdatedVersion(currentVersion: string) {
+  // Print update information, if available
+  if (
+    !process.env.ZUPLO_OVERRIDE_CI_TO_TEST &&
+    (process.env.CI || process.env.ZUPLO_DISABLE_UPDATE_CHECK)
+  ) {
+    return false;
+  }
+  const versionCheckInfo = await getVersionCheckInfo();
+  const shouldWarn = gt(versionCheckInfo.latestVersion, currentVersion);
+
+  if (shouldWarn) {
+    printWarningToConsole(
+      box(
+        `Update available! ${chalk.gray(`v${currentVersion}`)} ≫ ${chalk.green(
+          `v${versionCheckInfo.latestVersion}`,
+        )}
+Run ${chalk.cyan("npm install zuplo@latest")} to update.
+
+${chalk.gray("Older versions are unsupported and may not work as expected.")}`,
+      ),
+    );
+  }
+
+  return shouldWarn;
+}
+
+async function getLatestVersion(): Promise<string> {
+  const response = await fetch(
+    "https://raw.githubusercontent.com/zuplo/zudoku/main/packages/zudoku/package.json",
+  );
+  const result = await response.json();
+
+  return result.dependencies["zudoku"];
+}
+
+async function getVersionCheckInfo(): Promise<VersionCheckInfo> {
+  if (!existsSync(ZUPLO_XDG_STATE_HOME)) {
+    mkdirSync(ZUPLO_XDG_STATE_HOME, { recursive: true });
+  }
+  const versionCheckPath = join(ZUPLO_XDG_STATE_HOME, VERSION_CHECK_FILE);
+
+  let versionCheckInfo: VersionCheckInfo | undefined;
+  if (existsSync(versionCheckPath)) {
+    try {
+      versionCheckInfo = await readFile(versionCheckPath, "utf-8").then(
+        JSON.parse,
+      );
+    } catch (err) {
+      // Error reading or parsing file, ignore it
+    }
+
+    // Check if the file is valid, if not ignore it
+    if (versionCheckInfo) {
+      if (
+        typeof versionCheckInfo.lastCheck !== "number" ||
+        typeof versionCheckInfo.latestVersion !== "string"
+      ) {
+        versionCheckInfo = undefined;
+      }
+    }
+  }
+
+  let shouldCheck = true;
+  if (versionCheckInfo) {
+    const now = Date.now();
+    const lastCheck = versionCheckInfo.lastCheck;
+    if (now - lastCheck < 1000 * 60 * 60 * 24) {
+      shouldCheck = false;
+    }
+  }
+
+  if (!versionCheckInfo || shouldCheck) {
+    const latestVersion = await getLatestVersion();
+
+    versionCheckInfo = {
+      lastCheck: Date.now(),
+      latestVersion,
+    };
+    await writeFile(
+      versionCheckPath,
+      JSON.stringify(versionCheckInfo),
+      "utf-8",
+    );
+  }
+
+  return versionCheckInfo;
+}