@superblocksteam/sdk 1.14.2 → 2.0.3-next.46

package/src/dev-utils/custom-config.mts

@@ -0,0 +1,66 @@
+import path from "node:path";
+import react from "@vitejs/plugin-react";
+import glob from "fast-glob";
+import { defineConfig } from "vite";
+
+export function getLegacyComponentsConfig(componentsFolder: string) {
+  const entries = glob.sync("**/*.{jsx,tsx}", {
+    cwd: componentsFolder,
+    absolute: true,
+    ignore: ["node_modules/**", "dist/**"],
+  });
+
+  const entryPoints = entries.reduce(
+    (acc, entry) => {
+      const relativePath = path.relative(path.join(componentsFolder), entry);
+      const entryName = relativePath.replace(/\.(jsx|tsx)$/, "");
+      acc[entryName] = relativePath;
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+
+  // we build a copy of react and react-dom because we need to import the old versions
+  // inside our vite plugins virtual wrapper
+  entryPoints["react"] = path.join(componentsFolder, "node_modules/react");
+  entryPoints["react-dom"] = path.join(
+    componentsFolder,
+    "node_modules/react-dom",
+  );
+
+  return defineConfig({
+    root: componentsFolder,
+    logLevel: "warn",
+    resolve: {
+      preserveSymlinks: true,
+      alias: {
+        react: path.join(componentsFolder, "node_modules/react"),
+        "react-dom": path.join(componentsFolder, "node_modules/react-dom"),
+      },
+    },
+    build: {
+      sourcemap: true,
+      outDir: path.resolve(componentsFolder, "dist"),
+      lib: {
+        entry: entryPoints,
+        formats: ["es"],
+        fileName: (format, entryName) => `${entryName}.js`,
+      },
+      modulePreload: false,
+      minify: false,
+      rollupOptions: {
+        output: {
+          preserveModules: true,
+          preserveModulesRoot: ".",
+          entryFileNames: "[name].js",
+        },
+      },
+    },
+    optimizeDeps: {
+      include: ["react", "react-dom"],
+      force: true,
+    },
+    // TODO(omar): there is a type mismatch in the monorepo
+    plugins: [react() as any],
+  });
+}

package/src/dev-utils/dev-logger.mts

@@ -0,0 +1,39 @@
+import { createLogger, format, transports } from "winston";
+
+export type DevLogger = {
+  debug: (message: string, ...meta: any[]) => void;
+  info: (message: string, ...meta: any[]) => void;
+  warn: (message: string, ...meta: any[]) => void;
+  error: (message: string, ...meta: any[]) => void;
+};
+
+const winstonLogger = createLogger({
+  level: "info",
+  exitOnError: false,
+  format: format.json(),
+  transports: [
+    new transports.File({ filename: `/tmp/dev-server.log`, level: "info" }),
+    new transports.Console({
+      format: format.combine(
+        format.printf(({ message }) => `${message}`),
+        format.colorize({ message: true }),
+      ),
+      level: "debug",
+    }),
+  ],
+});
+
+export function getLogger(
+  loggerOverride?: (message: string) => void,
+): DevLogger {
+  if (!loggerOverride) {
+    return winstonLogger;
+  }
+
+  return {
+    debug: loggerOverride,
+    info: loggerOverride,
+    warn: loggerOverride,
+    error: loggerOverride,
+  };
+}

package/src/dev-utils/dev-server.mts

@@ -0,0 +1,342 @@
+// Tracer has to be imported after the express import
+// eslint-disable-next-line import/order
+import tracer from "./dev-tracer.js";
+
+import net from "node:net";
+import path from "node:path";
+import { getSuperblocksResourceConfigIfExists } from "@superblocksteam/util";
+import { fileSyncVitePlugin } from "@superblocksteam/vite-plugin-file-sync";
+import react from "@vitejs/plugin-react";
+import { red, yellow } from "colorette";
+import express from "express";
+import { createLogger, createServer, loadEnv } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import pkg from "../../package.json" with { type: "json" };
+import {
+  customComponentsPlugin,
+  isCustomComponentsEnabled,
+} from "./custom-build.mjs";
+import { getLogger } from "./dev-logger.mjs";
+import { ddRumPlugin } from "./vite-plugin-dd-rum.mjs";
+import { superblocksCdnPlugin } from "./vite-plugin-sb-cdn.mjs";
+import type { AiService } from "@superblocksteam/vite-plugin-file-sync/ai-service";
+import type { LockService } from "@superblocksteam/vite-plugin-file-sync/lock-service";
+import type { OperationQueue } from "@superblocksteam/vite-plugin-file-sync/operation-queue";
+import type { SyncService } from "@superblocksteam/vite-plugin-file-sync/sync-service";
+import type http from "node:http";
+import type { ViteDevServer } from "vite";
+import type { Plugin } from "vite";
+interface CreateDevServerOptions {
+  root: string;
+  mode: "development" | "production";
+  port?: number;
+  fsOperationQueue: OperationQueue;
+  syncService?: SyncService;
+  lockService?: LockService;
+  aiService?: AiService;
+  /* For redirecting output, like when running outside of the CLI */
+  logger?: (message: string) => void;
+}
+
+let httpServer: http.Server;
+
+// The "Dev Server" is a long-running HTTP server that manages the Vite server
+export async function createDevServer({
+  root,
+  mode,
+  fsOperationQueue,
+  syncService,
+  lockService,
+  aiService,
+  logger: loggerOverride,
+  port,
+}: CreateDevServerOptions) {
+  const logger = getLogger(loggerOverride);
+  if (httpServer) {
+    logger.debug("Dev server already running");
+    return httpServer;
+  }
+
+  // even if Vite is not running, we can receive requests
+  const resourceConfig = await getSuperblocksResourceConfigIfExists();
+  if (resourceConfig?.configType !== "APPLICATION_V2") {
+    throw new Error("Invalid resource configuration type");
+  }
+
+  const healthResponse = {
+    status: "healthy",
+    applicationId: resourceConfig.id,
+    // TODO(code-mode): add branch name
+    cliVersion: pkg.version,
+  };
+
+  let viteServer: ViteDevServer | null;
+  const app = express();
+
+  let isViteServerInitialized = false;
+  let viteResolve: (value: void | PromiseLike<void>) => void;
+  let viteReject: (reason?: any) => void;
+  const vitePromise = new Promise((resolve, reject) => {
+    viteResolve = resolve;
+    viteReject = reject;
+  });
+
+  async function gracefulShutdown(logger: ReturnType<typeof getLogger>) {
+    try {
+      if (lockService?.isLocked) {
+        await syncService?.uploadDirectoryNowIfNeeded(); // Perform a final sync before disconnecting
+        await lockService.releaseLock(); // Release the lock before closing the vite server
+      }
+      // Cleanup the vite server
+      if (viteServer) {
+        await viteServer?.close();
+        viteServer = null;
+        isViteServerInitialized = false;
+      }
+    } catch (e) {
+      logger.error(`Error during graceful shutdown: ${e}`);
+    } finally {
+      const closeTimeout = setTimeout(() => {
+        logger.info("Dev server closed");
+        process.exit(0);
+      }, 1000); // Fallback to exit if the HTTP server doesn't close within 1 second
+
+      // Then close the HTTP server
+      httpServer.close(() => {
+        logger.info("Dev server closed");
+        clearTimeout(closeTimeout);
+        process.exit(0);
+      });
+    }
+  }
+
+  app.use((req, res, next) => {
+    res.setHeader("Access-Control-Allow-Origin", "*");
+
+    if (
+      req.url === "/_sb_connect" ||
+      req.url === "/_sb_disconnect" ||
+      req.url === "/_sb_health" ||
+      req.url === "/_sb_status"
+    ) {
+      return next();
+    }
+
+    // hold the request until the vite server is initialized
+    vitePromise.then(() => {
+      // If the server is already closed, don't hold the request
+      if (isViteServerInitialized) {
+        next();
+      } else {
+        res.status(500).send("Dev server is not running");
+      }
+    });
+  });
+
+  app.get("/_sb_health", async (_req, res) => {
+    res.setHeader("Content-Type", "application/json");
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.send(JSON.stringify(healthResponse));
+  });
+
+  // Attach the vite server to the express app
+  app.get("/_sb_connect", async (_req, res) => {
+    res.setHeader("Content-Type", "application/json");
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    if (isViteServerInitialized) {
+      res.send(JSON.stringify(healthResponse));
+      return;
+    }
+    isViteServerInitialized = true;
+    // TODO(code-mode): should this include any validation checks, such as getting a token?
+    startVite({
+      app,
+      root,
+      mode,
+      fsOperationQueue,
+      syncService,
+      lockService,
+      aiService,
+      logger: loggerOverride,
+      httpServer,
+    }).then((server) => {
+      viteResolve();
+      viteServer = server;
+      res.send(JSON.stringify(healthResponse));
+    }, viteReject);
+  });
+
+  app.get("/_sb_disconnect", async (_req, res) => {
+    // TODO(code-mode): should this include any validation checks, such as getting a token?
+    await gracefulShutdown(logger);
+    res.send("ok");
+  });
+
+  app.get("/_sb_status", async (_req, res) => {
+    res.setHeader("Content-Type", "application/json");
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    if (lockService?.isLocked) {
+      res.send({
+        connectedUsers: lockService.connectedUsers,
+      });
+    } else {
+      res.send({
+        connectedUsers: [],
+      });
+    }
+  });
+
+  process.on("SIGINT", async () => {
+    logger.info("SIGINT received");
+    await gracefulShutdown(logger);
+  });
+
+  process.on("SIGTERM", async () => {
+    logger.info("SIGTERM received");
+    await gracefulShutdown(logger);
+  });
+
+  process.on("SIGABRT", async () => {
+    logger.info("SIGABRT received");
+    await gracefulShutdown(logger);
+  });
+
+  httpServer = await app.listen(port);
+  return httpServer;
+}
+
+async function startVite({
+  app,
+  httpServer,
+  root,
+  mode,
+  fsOperationQueue,
+  syncService,
+  lockService,
+  aiService,
+  logger: loggerOverride,
+}: CreateDevServerOptions & {
+  app: express.Express;
+  httpServer: http.Server;
+}) {
+  const viteLogger = createLogger();
+  const logger = getLogger(loggerOverride);
+  viteLogger.info = logger.info;
+  viteLogger.warn = (msg: string) => {
+    logger.warn(yellow(msg));
+  };
+  viteLogger.warnOnce = (msg: string) => {
+    logger.warn(yellow(msg));
+  };
+  viteLogger.error = (msg: string) => {
+    logger.error(red(msg));
+  };
+
+  viteLogger.clearScreen = () => {};
+
+  const isCustomBuildEnabled = await isCustomComponentsEnabled();
+  const customFolder = path.join(root, "custom");
+
+  const cdnUrl = process.env.SUPERBLOCKS_CDN_URL ?? "http://localhost:4040/cdn";
+
+  const env = loadEnv(mode, root, "");
+
+  const hmrPort = await getFreePort();
+
+  const viteServer = await createServer({
+    root,
+    mode,
+    resolve: {
+      alias: {
+        "react-router": "@superblocksteam/library",
+      },
+    },
+    clearScreen: process.env.SUPERBLOCKS_CLI_ENV !== "local",
+    optimizeDeps: {
+      include: ["lodash", "react-is"],
+      exclude: [],
+    },
+    // See https://vite.dev/config/server-options.html#server-middlewaremode
+    // appType: "custom",
+    server: {
+      middlewareMode: true,
+      // port: port,
+      watch: {
+        ignored: [`${customFolder}/**/*`],
+      },
+      hmr: {
+        port: hmrPort,
+      },
+    },
+    build: {
+      commonjsOptions: {
+        include: ["react-is"],
+      },
+      rollupOptions: {
+        external: [`${customFolder}/**/*`],
+      },
+    },
+    plugins: [
+      tsconfigPaths(),
+      customComponentsPlugin(),
+
+      // TODO(omar): there is a type mismatch in the monorepo
+      fileSyncVitePlugin(
+        {
+          fsOperationQueue,
+          syncService,
+          lockService,
+          aiService,
+          httpServer,
+          tracer,
+          logger,
+        },
+        { isCustomBuildEnabled },
+      ) as Plugin,
+
+      // for now, only use the CDN locally
+      superblocksCdnPlugin({
+        imports: {
+          "@superblocksteam/library": `${cdnUrl}/index.js`,
+        },
+        cssImports: {
+          "@superblocksteam/library/index.css": `${cdnUrl}/index.css`,
+        },
+      }),
+
+      react(),
+      ddRumPlugin({
+        clientToken: env.SUPERBLOCKS_LIBRARY_DD_CLIENT_TOKEN ?? "",
+        applicationId: env.SUPERBLOCKS_LIBRARY_DD_APPLICATION_ID ?? "",
+        env: env.SUPERBLOCKS_LIBRARY_ENV ?? "prod",
+        // TODO: Version should be injected from the library. Replace once we have the autoupgrade feature.
+        version: "1.0.0",
+      }),
+    ],
+  });
+
+  app.use(viteServer.middlewares);
+
+  return viteServer;
+}
+
+const DEFAULT_HMR_PORT = 24678;
+
+function getFreePort() {
+  return new Promise<number>((resolve) => {
+    const server = net.createServer();
+    server.listen(0, () => {
+      const address = server.address();
+      if (typeof address === "string") {
+        resolve(DEFAULT_HMR_PORT);
+        return;
+      }
+      const port = address?.port;
+      if (!port) {
+        resolve(DEFAULT_HMR_PORT);
+        return;
+      }
+      server.close(() => resolve(port));
+    });
+  });
+}

package/src/dev-utils/dev-tracer.ts

@@ -0,0 +1,31 @@
+import tracer from "dd-trace";
+import packageJson from "../../package.json" with { type: "json" };
+
+tracer.init({
+  service: "sdk-dev-server",
+  version: packageJson.version,
+  env: "prod",
+  logInjection: true,
+});
+
+tracer.use("http", {
+  hooks: {
+    request: (span, req) => {
+      let resource = "GET";
+      if (req) {
+        resource = `${req?.method} ${"path" in req ? req?.path : req?.url}`;
+      }
+      span?.setTag("resource.name", resource);
+    },
+  },
+});
+
+tracer.use("express", {
+  hooks: {
+    request: (span, req) => {
+      span?.setTag("resource.name", `${req?.method} ${req?.url}`);
+    },
+  },
+});
+
+export default tracer;

package/src/dev-utils/vite-plugin-dd-rum.mts

@@ -0,0 +1,47 @@
+import type { Plugin } from "vite";
+
+type DdRumPluginOptions = {
+  clientToken: string;
+  applicationId: string;
+  env: string;
+  version: string;
+};
+
+export function ddRumPlugin(options: DdRumPluginOptions): Plugin {
+  return {
+    name: "vite-plugin-dd-rum",
+    transformIndexHtml(html) {
+      if (
+        process.env.SUPERBLOCKS_CLI_ENV === "local" ||
+        !options.clientToken ||
+        !options.applicationId
+      ) {
+        return html;
+      }
+      return html.replace(
+        "</head>",
+        `<script>
+          (function(h,o,u,n,d) {
+            h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
+            d=o.createElement(u);d.async=1;d.src=n
+            n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
+          })(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v6/datadog-rum.js','DD_RUM')
+          window.DD_RUM.onReady(function() {
+            window.DD_RUM.init({
+              clientToken: "${options.clientToken ?? ""}",
+              applicationId: "${options.applicationId ?? ""}",
+              site: 'datadoghq.com',
+              service: 'superblocks-library',
+              env: "${options.env ?? ""}",
+              version: "${options.version ?? ""}",
+              sessionSampleRate: 100,
+              sessionReplaySampleRate: 100,
+              enablePrivacyForActionName: true
+            });
+          })
+        </script>
+      </head>`,
+      );
+    },
+  };
+}

package/src/dev-utils/vite-plugin-react-transform.mts

@@ -0,0 +1,130 @@
+import baseDebug from "debug";
+import type { Plugin } from "vite";
+
+const debug = baseDebug("sb:sdk:vite-plugin-react-transform");
+
+/**
+ * Vite plugin to transform React modules to actual ESM with named exports.
+ * This ensures React and React DOM can be properly consumed by browsers when used in import maps.
+ */
+export function reactTransformPlugin(): Plugin {
+  return {
+    name: "vite-plugin-react-transform",
+    enforce: "pre", // Run before other plugins
+    async transform(code, id) {
+      // Check for React modules
+      if (id.includes("node_modules/.vite/deps/react.js")) {
+        debug(`Adding named exports to React: ${id}`);
+
+        // We're going to assume this is using the require_react pattern
+        // Let's first check if the original React bundle is accessible
+        try {
+          // Parse the code to find exports
+          // For Vite bundled React, the code likely uses the format:
+          // import { require_react } from "/chunk-XYZ.js";
+          // export default require_react();
+
+          // Let's use regex to find all possible export names from the bundle
+          // This pattern looks for property accesses on require_react() in the code
+          const requireReactPattern = /require_react\(\)\.([a-zA-Z0-9_]+)/g;
+          const reactExports = new Set<string>();
+
+          // Find all matches
+          let match;
+          while ((match = requireReactPattern.exec(code)) !== null) {
+            if (match[1]) {
+              reactExports.add(match[1]);
+            }
+          }
+
+          // Add known React exports that might not be directly accessed in the bundle
+          // prettier-ignore
+          const knownReactExports = [
+            "Children", "Component", "Fragment", "Profiler", "PureComponent",
+            "StrictMode", "Suspense", "cloneElement", "createContext",
+            "createElement", "createFactory", "createRef", "forwardRef",
+            "isValidElement", "lazy", "memo", "useCallback", "useContext",
+            "useDebugValue", "useEffect", "useImperativeHandle",
+            "useLayoutEffect", "useMemo", "useReducer", "useRef", "useState",
+            "useSyncExternalStore", "startTransition", "useTransition",
+            "useDeferredValue", "useId", "useInsertionEffect", "version",
+            "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
+          ] as const;
+
+          // Add all known exports to our set
+          for (const namedExport of knownReactExports) {
+            reactExports.add(namedExport);
+          }
+
+          debug("Found exports: %O", reactExports);
+          debug(`Found ${reactExports.size} React exports to add`);
+
+          // Generate named export statements for all found properties
+          const exportStatements = Array.from(reactExports)
+            .map((name) => `export const ${name} = require_react().${name};`)
+            .join("\n");
+
+          // Return the original code plus the generated exports
+          return `${code}\n\n${exportStatements}`;
+        } catch (err) {
+          console.error(err);
+          throw err;
+        }
+      }
+
+      // Check for React DOM modules
+      if (id.includes("node_modules/.vite/deps/react-dom.js")) {
+        debug(`Adding named exports to React DOM: ${id}`);
+
+        try {
+          // Similar approach for React DOM
+          const requireReactDomPattern =
+            /require_react_dom\(\)\.([a-zA-Z0-9_]+)/g;
+          const reactDomExports = new Set<string>();
+
+          // Find all matches
+          let match;
+          while ((match = requireReactDomPattern.exec(code)) !== null) {
+            if (match[1]) {
+              reactDomExports.add(match[1]);
+            }
+          }
+
+          // Add known React DOM exports
+          const knownReactDomExports = [
+            "createPortal",
+            "findDOMNode",
+            "flushSync",
+            "hydrate",
+            "render",
+            "unmountComponentAtNode",
+            "unstable_batchedUpdates",
+            "createRoot",
+            "hydrateRoot",
+          ];
+
+          // Add all known exports to our set
+          knownReactDomExports.forEach((exp) => reactDomExports.add(exp));
+
+          debug(`Found ${reactDomExports.size} React DOM exports to add`);
+          debug("React DOM exports: %O", reactDomExports);
+
+          // Generate export statements for all found properties
+          const exportStatements = Array.from(reactDomExports)
+            .map(
+              (name) => `export const ${name} = require_react_dom().${name};`,
+            )
+            .join("\n");
+
+          // Return the original code plus the generated exports
+          return `${code}\n\n// Add named exports for remote library consumption\n${exportStatements}`;
+        } catch (err) {
+          console.error(err);
+          throw err;
+        }
+      }
+
+      return null; // Let Vite handle other modules
+    },
+  };
+}