@superblocksteam/sdk 2.0.3-next.99 → 2.0.3

package/src/cli-replacement/dev.mts

@@ -1,5 +1,9 @@
 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";
 import {
@@ -9,26 +13,83 @@ import {
 import { OperationQueue } from "@superblocksteam/vite-plugin-file-sync/operation-queue";
 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";
+
 import { getLogger } from "../dev-utils/dev-logger.mjs";
 import { createDevServer } from "../dev-utils/dev-server.mjs";
+import tracer from "../dev-utils/dev-tracer.js";
 import { SuperblocksSdk } from "../sdk.js";
+import {
+  checkVersionsAndUpgrade,
+  getCurrentCliVersion,
+  getCurrentLibraryVersionWithoutPM,
+} from "./automatic-upgrades.js";
 import type { DevLogger } from "../dev-utils/dev-logger.mjs";
+import type { ApplicationConfig } from "../types/common.js";
 import type { DraftInterface } from "@superblocksteam/vite-plugin-file-sync/draft-interface";
 
-export interface ApplicationConfig {
-  superblocksBaseUrl: string;
-  token: string;
-  id: string;
-  branchName: string;
-}
+const exec = promisify(child_process.exec);
 
-const passErrorToVSCode = (message: string, logger: DevLogger) => {
+const passErrorToVSCode = (message: string | undefined, logger: DevLogger) => {
   if (message) {
     // Prefixing with `clierr:` will make the VS code extension capture this message and show it to the user.
     logger.error(`clierr: ${JSON.stringify({ message })}`);
   }
 };
 
+async function readPkgJson(cwd: string) {
+  try {
+    const { readPackage } = await import("read-pkg");
+    return await readPackage({ cwd });
+  } catch {
+    return null;
+  }
+}
+
+async function installPackages(cwd: string, logger: DevLogger) {
+  try {
+    const pm = await detect({
+      strategies: [
+        "packageManager-field",
+        "lockfile",
+        "install-metadata",
+        "devEngines-field",
+      ],
+      cwd,
+    });
+
+    if (!pm) {
+      logger.warn(
+        "Could not detect package manager, skipping package installation",
+      );
+      return;
+    }
+
+    const installCommand = resolveCommand(pm.agent, "install", []);
+
+    if (!installCommand) {
+      logger.warn(
+        `Could not determine install command for ${pm.agent}, skipping package installation`,
+      );
+      return;
+    }
+
+    const { command, args } = installCommand;
+    logger.info(
+      `Running ${command} ${args.join(" ")} to install dependencies…`,
+    );
+
+    await exec(`${command} ${args.join(" ")}`, { cwd });
+    logger.info("Package installation completed successfully");
+  } catch (error) {
+    logger.error(`Error during package installation: ${error}`);
+    throw error;
+  }
+}
+
 export async function dev(options: {
   /* cwd is required */
   cwd: string;
@@ -42,9 +103,15 @@ export async function dev(options: {
   skipSync?: boolean;
 
   applicationConfig?: ApplicationConfig;
+
+  /* For debugging purposes to get location of the cli */
+  superblocksPath?: string;
   /* For redirecting output, like when running outside of the CLI */
   logger?: (message: string) => void;
 
+  /* For a child process when restarting the dev server for automatic upgrades */
+  skipAutoUpgrade?: boolean;
+
   /* To cancel the dev server */
   signal?: AbortSignal;
 }) {
@@ -58,8 +125,22 @@ export async function dev(options: {
     uploadFirst,
     skipSync,
     applicationConfig,
+    skipAutoUpgrade,
   } = options;
 
+  const cliVersion = await getCurrentCliVersion();
+  const libraryVersion = await getCurrentLibraryVersionWithoutPM();
+  logger.info(
+    `Running command: ${options.superblocksPath} dev${options.uploadFirst ? " --upload-first" : ""}${options.downloadFirst ? " --download-first" : ""} with baseUrl: ${applicationConfig?.superblocksBaseUrl}, cliVersion: ${cliVersion}, libraryVersion: ${libraryVersion?.alias} ${libraryVersion?.version}`,
+  );
+
+  // 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`);
   }
@@ -81,6 +162,7 @@ export async function dev(options: {
         process.env.SUPERBLOCKS_IS_CSB === "true"
           ? LockType.CSB
           : LockType.LOCAL,
+      tracer,
     });
     syncService = new SyncService({
       authToken: applicationConfig.token,
@@ -90,6 +172,7 @@ export async function dev(options: {
       branchName: applicationConfig.branchName,
       fsOperationQueue,
       lockService,
+      tracer,
     });
 
     logger.info("Checking if local files are synced with the server");
@@ -105,12 +188,21 @@ export async function dev(options: {
         if (lockService) {
           try {
             await lockService!.acquireLock();
+
+            // TODO(code-mode): package naming is preventing upgrade in ephemeral environments
+            if (
+              !process.env.PACKAGE_SUFFIX ||
+              process.env.PACKAGE_SUFFIX === "" ||
+              !skipAutoUpgrade
+            ) {
+              await checkVersionsAndUpgrade(lockService, applicationConfig);
+            }
           } catch (error) {
+            logger.error("Failed to acquire lock on application", error);
             passErrorToVSCode(
-              (error as { context: { message: string } }).context.message,
+              (error as { context?: { message: string } }).context?.message,
               logger,
             );
-            logger.error("Failed to acquire lock on application", error);
             throw new Error(`Failed to acquire lock on application: ${error}`);
           }
         }
@@ -133,6 +225,7 @@ export async function dev(options: {
           anthropicApiKey: process.env.ANTHROPIC_API_KEY || "",
           fsOperationQueue,
           draftInterface: syncService! as DraftInterface,
+          tracer,
         });
 
         const isSynced = localContents.hash === serverHash;
@@ -153,12 +246,29 @@ export async function dev(options: {
           throw new Error("Choose either --download-first or --upload-first");
         }
 
-        // TODO(code-mode): pre-process package.json to handle version upgrades
         if (downloadFirst) {
           logger.info(
             "Starting directory sync from server before starting the local server",
           );
+
+          // Read package.json before download
+          const packageJsonBefore = await readPkgJson(cwd);
+
           await syncService!.downloadDirectory();
+
+          // Read package.json after download and compare
+          const packageJsonAfter = await readPkgJson(cwd);
+
+          // Check if package.json changed
+          if (packageJsonBefore && packageJsonAfter) {
+            const diff = diffJson(packageJsonBefore, packageJsonAfter);
+            const hasChanges = diff.some((part) => part.added || part.removed);
+
+            if (hasChanges) {
+              logger.info("package.json has changed, installing packages…");
+              await installPackages(cwd, logger);
+            }
+          }
         } else if (uploadFirst) {
           logger.info("Uploading local files to server before starting");
           await syncService!.uploadDirectory();

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

@@ -3,11 +3,13 @@
 import tracer from "./dev-tracer.js";
 
 import net from "node:net";
+import os from "node:os";
 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 cors from "cors";
 import express from "express";
 import { createLogger, createServer, loadEnv } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
@@ -24,8 +26,9 @@ import type { LockService } from "@superblocksteam/vite-plugin-file-sync/lock-se
 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 { HmrOptions, Plugin } from "vite";
 import type { ViteDevServer } from "vite";
-import type { Plugin } from "vite";
+
 interface CreateDevServerOptions {
   root: string;
   mode: "development" | "production";
@@ -81,12 +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 syncService?.uploadDirectoryNowIfNeeded(); // Perform a final sync before disconnecting
-        await lockService.releaseLock(); // Release the lock before closing the vite server
-      }
+      await lockService?.shutdown({
+        serverInitiated,
+        switchingTo,
+        initiatedByEmail,
+      });
       // Cleanup the vite server
       if (viteServer) {
         await viteServer?.close();
@@ -110,8 +124,16 @@ export async function createDevServer({
     }
   }
 
+  app.use(
+    cors({
+      origin: true,
+      credentials: true,
+    }),
+  );
+  app.use(express.json());
+
   app.use((req, res, next) => {
-    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Cache-Control", "no-store, max-age=0");
 
     if (
       req.url === "/_sb_connect" ||
@@ -135,14 +157,12 @@ export async function createDevServer({
 
   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;
@@ -150,6 +170,7 @@ export async function createDevServer({
     isViteServerInitialized = true;
     // TODO(code-mode): should this include any validation checks, such as getting a token?
     startVite({
+      port,
       app,
       root,
       mode,
@@ -166,15 +187,32 @@ 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");
-    res.setHeader("Access-Control-Allow-Origin", "*");
     if (lockService?.isLocked) {
       res.send({
         connectedUsers: lockService.connectedUsers,
@@ -188,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);
@@ -210,6 +248,7 @@ async function startVite({
   httpServer,
   root,
   mode,
+  port,
   fsOperationQueue,
   syncService,
   lockService,
@@ -243,6 +282,19 @@ async function startVite({
 
   const hmrPort = await getFreePort();
 
+  const hmrOptions: HmrOptions = {
+    port: hmrPort,
+    clientPort: port,
+    server: httpServer,
+  };
+
+  // https://codesandbox.io/docs/learn/environment/preview-urls#using-environment-variables
+  if (process.env.CSB_BASE_PREVIEW_HOST) {
+    const hmrHost = `${os.hostname()}-${port}.${process.env.CSB_BASE_PREVIEW_HOST}`;
+    hmrOptions.host = hmrHost;
+    hmrOptions.clientPort = 443; // tells client to use default ssl port
+  }
+
   const viteServer = await createServer({
     root,
     mode,
@@ -260,12 +312,13 @@ async function startVite({
     // appType: "custom",
     server: {
       middlewareMode: true,
-      // port: port,
       watch: {
         ignored: [`${customFolder}/**/*`],
       },
-      hmr: {
-        port: hmrPort,
+      hmr: hmrOptions,
+      cors: {
+        origin: true,
+        credentials: true,
       },
     },
     build: {
@@ -297,10 +350,13 @@ async function startVite({
       // for now, only use the CDN locally
       superblocksCdnPlugin({
         imports: {
-          "@superblocksteam/library": `${cdnUrl}/index.js`,
+          "@superblocksteam/library": getValidFileUrl(cdnUrl, "index.js"),
         },
         cssImports: {
-          "@superblocksteam/library/index.css": `${cdnUrl}/index.css`,
+          "@superblocksteam/library/index.css": getValidFileUrl(
+            cdnUrl,
+            "index.css",
+          ),
         },
       }),
 
@@ -340,3 +396,7 @@ function getFreePort() {
     });
   });
 }
+
+function getValidFileUrl(url: string, file: string): string {
+  return new URL(file, url.endsWith("/") ? url : url + "/").href;
+}

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

@@ -1,31 +1,76 @@
-import tracer from "dd-trace";
+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";
 
-tracer.init({
-  service: "sdk-dev-server",
-  version: packageJson.version,
-  env: "prod",
-  logInjection: true,
-});
+// 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";
+const ATTR_SUPERBLOCKS_CLI_TOKEN = "superblocks.cli_token";
+let superblocksTracesUrl = undefined;
+let superblocksHostname = "unknown";
+let token = "unknown";
+try {
+  const tokenWithUrl = await getLocalTokenWithUrl();
+  const superblocksBaseUrl = new URL(tokenWithUrl.superblocksBaseUrl);
+  superblocksTracesUrl = superblocksBaseUrl.origin + "/api/v1/traces";
+  superblocksHostname = superblocksBaseUrl.hostname;
+  if ("token" in tokenWithUrl) {
+    token = tokenWithUrl.token.substring(0, 8);
+  }
+} catch (e) {
+  console.error("[tracing init] could not determine superblocks base url", e);
+}
 
-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);
-    },
-  },
+// Initialize the OpenTelemetry SDK
+const sdk = new NodeSDK({
+  resource: Resource.default().merge(
+    new Resource({
+      [ATTR_SERVICE_NAME]: "sdk-dev-server",
+      [ATTR_DEPLOYMENT_ENVIRONMENT]: process.env.SUPERBLOCKS_CLI_ENV,
+      [ATTR_SUPERBLOCKS_BASE_URL]: superblocksHostname,
+      [ATTR_SUPERBLOCKS_CLI_TOKEN]: token,
+    }),
+  ),
+  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
+    new HttpInstrumentation({
+      requestHook: (span: Span, request: any) => {
+        let resource = "GET";
+        if (request) {
+          resource = `${request.method} ${request.url || request.path}`;
+        }
+        span.setAttributes({
+          "resource.name": resource,
+        });
+      },
+    }),
+    // Configure Express instrumentation
+    new ExpressInstrumentation({
+      requestHook: (span: Span, request: any) => {
+        span.setAttributes({
+          "resource.name": `${request.method} ${request.url}`,
+        });
+      },
+    }),
+  ],
 });
 
-tracer.use("express", {
-  hooks: {
-    request: (span, req) => {
-      span?.setTag("resource.name", `${req?.method} ${req?.url}`);
-    },
-  },
-});
+sdk.start();
+
+// Get a tracer instance
+const tracer = trace.getTracer("sdk-dev-server", packageJson.version);
 
 export default tracer;

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")) {