@superblocksteam/sdk 2.0.0-next.13 → 2.0.0-next.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/sdk",
-  "version": "2.0.0-next.13",
+  "version": "2.0.0-next.131",
   "type": "module",
   "description": "Superblocks JS SDK",
   "homepage": "https://www.superblocks.com",
@@ -16,18 +16,23 @@
     }
   },
   "dependencies": {
+    "@babel/core": "7.24.0",
+    "@babel/generator": "^7.25.7",
+    "@babel/parser": "^7.25.8",
+    "@babel/traverse": "^7.25.7",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-async-hooks": "^2.0.1",
-    "@opentelemetry/resources": "^1.28.0",
-    "@opentelemetry/semantic-conventions": "^1.28.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.55.0",
     "@opentelemetry/instrumentation-express": "^0.45.0",
     "@opentelemetry/instrumentation-http": "^0.55.0",
+    "@opentelemetry/resources": "^1.28.0",
     "@opentelemetry/sdk-node": "^0.55.0",
+    "@opentelemetry/semantic-conventions": "^1.28.0",
     "@rollup/wasm-node": "^4.35.0",
-    "@superblocksteam/bucketeer-sdk": "0.4.1",
-    "@superblocksteam/shared": "0.9122.0",
-    "@superblocksteam/util": "2.0.0-next.13",
-    "@superblocksteam/vite-plugin-file-sync": "2.0.0-next.13",
+    "@superblocksteam/bucketeer-sdk": "0.5.0",
+    "@superblocksteam/shared": "0.9160.0",
+    "@superblocksteam/util": "2.0.0-next.131",
+    "@superblocksteam/vite-plugin-file-sync": "2.0.0-next.131",
     "@vitejs/plugin-react": "^4.3.4",
     "axios": "^1.4.0",
     "chokidar": "^4.0.3",
@@ -55,7 +60,11 @@
     "yaml": "^2.4.2"
   },
   "devDependencies": {
+    "@babel/types": "^7.25.8",
     "@eslint/js": "^9.16.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__generator": "^7.6.8",
+    "@types/babel__traverse": "^7.20.6",
     "@types/chai": "^4",
     "@types/chai-as-promised": "^8.0.2",
     "@types/common-tags": "^1.8.4",

package/src/application-build.mts

@@ -0,0 +1,160 @@
+import path from "node:path";
+import { injectIndexVitePlugin } from "@superblocksteam/vite-plugin-file-sync/inject-index";
+import react from "@vitejs/plugin-react";
+import { yellow, red } from "colorette";
+import fs from "fs-extra";
+import { build, createLogger } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { customComponentsPlugin } from "./dev-utils/custom-build.mjs";
+import { getLogger } from "./dev-utils/dev-logger.mjs";
+import { ddRumPlugin } from "./dev-utils/vite-plugin-dd-rum.mjs";
+import { superblocksCdnPlugin } from "./dev-utils/vite-plugin-sb-cdn.mjs";
+import { injectSuperblocksIdsPlugin } from "./vite-plugin-inject-sb-ids-transform.mjs";
+import type { Plugin } from "vite";
+
+export async function buildApplication({
+  root,
+  dest,
+  mode,
+  libraryUrl,
+  assetsCdnUrl,
+  ddClientToken,
+  ddApplicationId,
+  ddEnv,
+  ddVersion,
+}: {
+  root: string;
+  dest: string;
+  mode: string;
+  libraryUrl: string;
+  assetsCdnUrl?: string;
+  ddClientToken?: string;
+  ddApplicationId?: string;
+  ddEnv?: string;
+  ddVersion?: string;
+}) {
+  const cwd = process.cwd();
+  try {
+    // Ensure the root directory exists and change execution context to it
+    if (!(await fs.pathExists(root))) {
+      throw new Error(`Root directory "${root}" does not exist`);
+    }
+
+    process.chdir(root);
+    await buildWithVite({
+      root: fs.realpathSync(root),
+      dest: fs.realpathSync(dest),
+      mode,
+      libraryUrl,
+      assetsCdnUrl,
+      ddClientToken,
+      ddApplicationId,
+      ddEnv,
+      ddVersion,
+    });
+  } finally {
+    // Restore the original working directory before returning
+    process.chdir(cwd);
+  }
+}
+
+async function buildWithVite({
+  root,
+  dest,
+  mode,
+  libraryUrl,
+  assetsCdnUrl,
+  ddClientToken,
+  ddApplicationId,
+  ddEnv,
+  ddVersion,
+}: {
+  root: string;
+  dest: string;
+  mode: string;
+  libraryUrl: string;
+  assetsCdnUrl?: string;
+  ddClientToken?: string;
+  ddApplicationId?: string;
+  ddEnv?: string;
+  ddVersion?: string;
+}) {
+  const viteLogger = createLogger();
+  const logger = getLogger();
+  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 customFolder = path.join(root, "custom");
+
+  await build({
+    root,
+    mode,
+    appType: "spa",
+    resolve: {
+      alias: {
+        "react-router": "@superblocksteam/library",
+      },
+    },
+    clearScreen: true,
+    optimizeDeps: {
+      include: ["lodash", "react-is"],
+      exclude: [],
+    },
+    build: {
+      outDir: dest,
+      emptyOutDir: true,
+      write: true,
+      commonjsOptions: {
+        include: ["react-is"],
+        transformMixedEsModules: true,
+      },
+      rollupOptions: {
+        external: [
+          `${customFolder}/**/*`,
+          "react",
+          "react-dom",
+          "react/jsx-runtime",
+          "react/jsx-dev-runtime",
+        ],
+        preserveEntrySignatures: "allow-extension",
+        output: { format: "esm" },
+      },
+    },
+    logLevel: "info",
+    plugins: [
+      tsconfigPaths(),
+      injectIndexVitePlugin({ assetsCdnUrl, logger }) as Plugin,
+      customComponentsPlugin(),
+      injectSuperblocksIdsPlugin(root),
+      superblocksCdnPlugin({
+        imports: {
+          "@superblocksteam/library": `${libraryUrl}/index.js`,
+          "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime.mjs",
+          "react/jsx-dev-runtime":
+            "https://esm.sh/react@18.2.0/jsx-dev-runtime.mjs",
+        },
+        cssImports: {
+          "@superblocksteam/library/index.css": `${libraryUrl}/index.css`,
+        },
+      }),
+      react(),
+
+      ddRumPlugin({
+        clientToken: ddClientToken ?? "",
+        applicationId: ddApplicationId ?? "",
+        env: ddEnv ?? "prod",
+        version: ddVersion ?? "1.0.0",
+      }),
+    ],
+  });
+}

package/src/cli-replacement/automatic-upgrades.ts

@@ -277,14 +277,28 @@ export async function checkVersionsAndUpgrade(
   const targetVersions = await getRemoteVersions(config);
   if (!targetVersions) return;
 
-  // Check if CLI needs upgrade
-  const cliNeedsUpgrade =
-    targetVersions.cli && gt(targetVersions.cli, currentCliVersion);
-
-  // Check if library needs upgrade
-  const libraryNeedsUpgrade =
-    targetVersions.library &&
-    gt(targetVersions.library, currentLibraryInfo.version);
+  let cliNeedsUpgrade: boolean | string;
+  let libraryNeedsUpgrade: boolean | string;
+  try {
+    // If version is latest, then semver can throw an error
+    // Check if CLI needs upgrade
+    cliNeedsUpgrade =
+      targetVersions.cli && gt(targetVersions.cli, currentCliVersion);
+
+    // Check if library needs upgrade
+    libraryNeedsUpgrade =
+      targetVersions.library &&
+      gt(targetVersions.library, currentLibraryInfo.version);
+  } catch (error) {
+    console.warn(
+      "Error checking versions to upgrade, releasing lock and exiting",
+      error,
+    );
+    await lockService.shutdown({
+      serverInitiated: false,
+    });
+    process.exit(1);
+  }
 
   if (!cliNeedsUpgrade && !libraryNeedsUpgrade) {
     return; // Everything is up to date

package/src/cli-replacement/dev.mts

@@ -2,6 +2,7 @@ import "../dev-utils/dev-tracer.js";
 
 import * as child_process from "node:child_process";
 import * as fsp from "node:fs/promises";
+import path from "node:path";
 import { promisify } from "node:util";
 import { maskUnixSignals } from "@superblocksteam/util";
 import { AiService } from "@superblocksteam/vite-plugin-file-sync/ai-service";
@@ -13,6 +14,7 @@ import { OperationQueue } from "@superblocksteam/vite-plugin-file-sync/operation
 import { SyncService } from "@superblocksteam/vite-plugin-file-sync/sync-service";
 import { green } from "colorette";
 import { diffJson } from "diff";
+import fs from "fs-extra";
 import { resolveCommand } from "package-manager-detector";
 import { detect } from "package-manager-detector/detect";
 
@@ -115,6 +117,13 @@ export async function dev(options: {
     applicationConfig,
   } = options;
 
+  // Add check for node_modules
+  if (!fs.existsSync(path.join(cwd, "node_modules"))) {
+    throw new Error(
+      'node_modules folder is missing. Please run "npm install" first.',
+    );
+  }
+
   if (pidfilePath) {
     await fsp.writeFile(pidfilePath, `${process.pid}\n`);
   }
@@ -198,6 +207,7 @@ export async function dev(options: {
           anthropicApiKey: process.env.ANTHROPIC_API_KEY || "",
           fsOperationQueue,
           draftInterface: syncService! as DraftInterface,
+          tracer,
         });
 
         const isSynced = localContents.hash === serverHash;

package/src/client.ts

@@ -1,4 +1,5 @@
-import * as fs from "fs";
+import * as fs from "node:fs";
+import path from "node:path";
 import { Bucketeer, FileDescriptor } from "@superblocksteam/bucketeer-sdk";
 import { ExportViewMode } from "@superblocksteam/shared";
 import {
@@ -1269,13 +1270,15 @@ export async function uploadApplication({
   scopedJwt,
   url,
   cliVersion,
+  appRoot,
 }: {
   files: string[];
   scopedJwt: string;
   url: string;
   cliVersion: string;
+  appRoot?: string;
 }) {
-  const fds = filesToFileDescriptors(files);
+  const fds = filesToFileDescriptors(files, appRoot);
   const bucketeer = new Bucketeer({
     token: scopedJwt,
     baseUrl: url,
@@ -1285,9 +1288,15 @@ export async function uploadApplication({
   await bucketeer.uploadApplication(fds);
 }
 
-function filesToFileDescriptors(files: string[]) {
+function filesToFileDescriptors(files: string[], appRoot?: string) {
   const fds = files.map((file) => {
-    return new FileDescriptor(file, fs.createReadStream(file));
+    const relativePath = appRoot ? path.relative(appRoot, file) : undefined;
+    return new FileDescriptor(
+      file,
+      fs.createReadStream(file),
+      undefined,
+      relativePath,
+    );
   });
   return fds;
 }

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

@@ -84,11 +84,23 @@ export async function createDevServer({
     viteReject = reject;
   });
 
-  async function gracefulShutdown(logger: ReturnType<typeof getLogger>) {
+  async function gracefulShutdown({
+    logger,
+    serverInitiated,
+    switchingTo,
+    initiatedByEmail,
+  }: {
+    logger: ReturnType<typeof getLogger>;
+    serverInitiated: boolean;
+    switchingTo?: "local" | "cloud" | "none";
+    initiatedByEmail?: string;
+  }) {
     try {
-      if (lockService?.isLocked) {
-        await lockService.shutdown();
-      }
+      await lockService?.shutdown({
+        serverInitiated,
+        switchingTo,
+        initiatedByEmail,
+      });
       // Cleanup the vite server
       if (viteServer) {
         await viteServer?.close();
@@ -118,6 +130,7 @@ export async function createDevServer({
       credentials: true,
     }),
   );
+  app.use(express.json());
 
   app.use((req, res, next) => {
     res.setHeader("Cache-Control", "no-store, max-age=0");
@@ -174,11 +187,29 @@ export async function createDevServer({
     }, viteReject);
   });
 
+  // TODO(code-mode): remove this soon
   app.get("/_sb_disconnect", async (_req, res) => {
+    console.log("GET /_sb_disconnect");
     // TODO(code-mode): should this include any validation checks, such as getting a token?
-    await gracefulShutdown(logger);
+    await gracefulShutdown({ logger, serverInitiated: false });
     res.send("ok");
   });
+  app.post("/_sb_disconnect", async (req, res) => {
+    const { initiatedByEmail, switchingTo } = req.body;
+    // TODO(code-mode): should this include any validation checks, such as getting a token?
+    try {
+      await gracefulShutdown({
+        logger,
+        serverInitiated: true,
+        switchingTo,
+        initiatedByEmail: initiatedByEmail as string | undefined,
+      });
+      res.send("ok");
+    } catch (e) {
+      console.error("Error disconnecting from dev server", e);
+      res.status(500).send("Error disconnecting from dev server");
+    }
+  });
 
   app.get("/_sb_status", async (_req, res) => {
     res.setHeader("Content-Type", "application/json");
@@ -195,17 +226,17 @@ export async function createDevServer({
 
   process.on("SIGINT", async () => {
     logger.info("SIGINT received");
-    await gracefulShutdown(logger);
+    await gracefulShutdown({ logger, serverInitiated: false });
   });
 
   process.on("SIGTERM", async () => {
     logger.info("SIGTERM received");
-    await gracefulShutdown(logger);
+    await gracefulShutdown({ logger, serverInitiated: false });
   });
 
   process.on("SIGABRT", async () => {
     logger.info("SIGABRT received");
-    await gracefulShutdown(logger);
+    await gracefulShutdown({ logger, serverInitiated: false });
   });
 
   httpServer = await app.listen(port);

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

@@ -1,15 +1,29 @@
 import { trace } from "@opentelemetry/api";
 import { AsyncLocalStorageContextManager } from "@opentelemetry/context-async-hooks";
+import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
 import { ExpressInstrumentation } from "@opentelemetry/instrumentation-express";
 import { HttpInstrumentation } from "@opentelemetry/instrumentation-http";
 import { Resource } from "@opentelemetry/resources";
 import { NodeSDK } from "@opentelemetry/sdk-node";
 import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
+import { getLocalTokenWithUrl } from "@superblocksteam/util";
 import packageJson from "../../package.json" with { type: "json" };
 import type { Span } from "@opentelemetry/api";
 
 // NOTE: @joeyagreco - this is how the "env" facet is determined in datadog: https://docs.datadoghq.com/opentelemetry/setup/collector_exporter/#3---configure-your-application
 const ATTR_DEPLOYMENT_ENVIRONMENT = "deployment.environment";
+// NOTE: @joeyagreco - this can be used to determine if we are using mock-csb, staging-csb, prod-csb, etc
+const ATTR_SUPERBLOCKS_BASE_URL = "superblocks.base_url";
+let superblocksTracesUrl = undefined;
+let superblocksHostname = "unknown";
+try {
+  const tokenWithUrl = await getLocalTokenWithUrl();
+  const superblocksBaseUrl = new URL(tokenWithUrl.superblocksBaseUrl);
+  superblocksTracesUrl = superblocksBaseUrl.origin + "/api/v1/traces";
+  superblocksHostname = superblocksBaseUrl.hostname;
+} catch (e) {
+  console.error("[tracing init] could not determine superblocks base url", e);
+}
 
 // Initialize the OpenTelemetry SDK
 const sdk = new NodeSDK({
@@ -17,8 +31,12 @@ const sdk = new NodeSDK({
     new Resource({
       [ATTR_SERVICE_NAME]: "sdk-dev-server",
       [ATTR_DEPLOYMENT_ENVIRONMENT]: process.env.SUPERBLOCKS_CLI_ENV,
+      [ATTR_SUPERBLOCKS_BASE_URL]: superblocksHostname,
     }),
   ),
+  traceExporter: new OTLPTraceExporter({
+    url: superblocksTracesUrl, // OTLPTraceExporter defaults to sending traffic to http://localhost:4318/v1/traces
+  }),
   contextManager: new AsyncLocalStorageContextManager(),
   instrumentations: [
     // Configure HTTP instrumentation with custom attributes

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

@@ -11,6 +11,7 @@ export function reactTransformPlugin(): Plugin {
   return {
     name: "vite-plugin-react-transform",
     enforce: "pre", // Run before other plugins
+    apply: "serve",
     async transform(code, id) {
       // Check for React modules
       if (id.includes("node_modules/.vite/deps/react.js")) {

package/src/dev-utils/vite-plugin-sb-cdn.mts

@@ -469,6 +469,16 @@ async function extractNeededExports(
   }
 }
 
+const wellKnownPackages = new Map<string, string>([
+  ["react", "https://esm.sh/react@18.2.0"],
+  ["react-dom", "https://esm.sh/react-dom@18.2.0"],
+  ["react/jsx-runtime", "https://esm.sh/react@18.2.0/jsx-runtime"],
+  ["react/jsx-dev-runtime", "https://esm.sh/react@18.2.0/jsx-dev-runtime"],
+]);
+
+const react18CdnUrl = "https://esm.sh/react@18.2.0";
+const reactDom18CdnUrl = "https://esm.sh/react-dom@18.2.0";
+
 /**
  * Creates a Vite plugin that injects an import map into the HTML.
  * It analyzes remote modules to find their imports and maps them to local Vite modules.
@@ -558,7 +568,14 @@ export async function superblocksCdnPlugin(
     const modulePreloadData = modulesToPreload.get(importUrl);
     if (modulePreloadData) {
       modulePreloadData.content = content;
-      modulePreloadData.integrity = await calculateIntegrity(binary);
+
+      // Don't calculate integrity for react 18 CDN modules
+      if (
+        !importUrl.startsWith(react18CdnUrl) &&
+        !importUrl.startsWith(reactDom18CdnUrl)
+      ) {
+        modulePreloadData.integrity = await calculateIntegrity(binary);
+      }
     }
 
     // Process all discovered modules and add them to the preload list
@@ -570,8 +587,15 @@ export async function superblocksCdnPlugin(
       if (moduleUrl.startsWith(baseUrl)) {
         // Add the module to preload if not already added
         if (!modulesToPreload.has(moduleUrl)) {
-          // Calculate the integrity hash
-          const integrity = await calculateIntegrity(moduleData.binary);
+          // Calculate the integrity hash for non-react 18 CDN modules
+          let integrity: string | undefined;
+          if (
+            !moduleUrl.startsWith(react18CdnUrl) &&
+            !moduleUrl.startsWith(reactDom18CdnUrl)
+          ) {
+            integrity = await calculateIntegrity(moduleData.binary);
+          }
+
           modulesToPreload.set(moduleUrl, {
             url: moduleUrl,
             content: moduleData.content,
@@ -802,10 +826,12 @@ export async function superblocksCdnPlugin(
         const importMap = {
           imports: {
             ...Object.fromEntries(
-              Object.entries(initialImportMap).map(([module, url]) => [
-                `${isDevMode ? "/@id/" : ""}cdn:${module}`,
-                url,
-              ]),
+              Object.entries(initialImportMap).map(([module, url]) => {
+                if (wellKnownPackages.has(module)) {
+                  return [module, wellKnownPackages.get(module)!];
+                }
+                return [`${isDevMode ? "/@id/" : ""}cdn:${module}`, url];
+              }),
             ),
           },
           // Scopes apply to specific URL prefixes for more granular control
@@ -871,6 +897,8 @@ export async function superblocksCdnPlugin(
                 const chunkPath = importToChunkMap.get(moduleName);
                 if (chunkPath) {
                   dependencyChunkUrl = `${base}${chunkPath}`;
+                } else if (wellKnownPackages.has(moduleName)) {
+                  dependencyChunkUrl = wellKnownPackages.get(moduleName)!;
                 }
               }
 

package/src/index.ts

@@ -1,3 +1,5 @@
+export { buildApplication } from "./application-build.mjs";
+
 export {
   createSocketConnectionIfNeeded,
   fetchApi,