@superblocksteam/sdk 2.0.0-next.11 → 2.0.0-next.110

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,26 @@ 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();
+    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-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,

package/src/socket/handlers.ts

@@ -5,6 +5,7 @@ import type {
   ApiToVerify,
   ClientMethods,
   ServerMethods,
+  RequestContextBase,
 } from "@superblocksteam/shared";
 import type { Signature } from "@superblocksteam/util";
 
@@ -29,18 +30,49 @@ export function createRequestHandlers({
   token: string;
   agentUrl?: string;
 }) {
-  const requestHandlers: MethodHandlers<ClientMethods, ServerMethods, unknown> =
-    {
-      v1: {
-        signing: {
-          signApplication: [
-            async ({
+  const requestHandlers: MethodHandlers<
+    ClientMethods,
+    ServerMethods,
+    RequestContextBase
+  > = {
+    v1: {
+      signing: {
+        signApplication: [
+          async ({
+            branchName,
+            toSign,
+          }: {
+            branchName: string;
+            toSign: AppToSign;
+          }) => {
+            if (!agentUrl) {
+              throw new Error(
+                "Agent url not specified. This shouldn't happen.",
+              );
+            }
+            const signature = await signResource({
+              agentUrl,
+              token: token,
               branchName,
-              toSign,
-            }: {
-              branchName: string;
-              toSign: AppToSign;
-            }) => {
+              resource: {
+                literal: {
+                  data: toSign.rootHash,
+                },
+              },
+            });
+            return { signature: signature };
+          },
+        ],
+        signApis: [
+          async ({
+            branchName,
+            toSign,
+          }: {
+            branchName: string;
+            toSign: ApiToSign[];
+          }) => {
+            const signatures: Signature[] = [];
+            for (const { apiPb } of toSign) {
               if (!agentUrl) {
                 throw new Error(
                   "Agent url not specified. This shouldn't happen.",
@@ -50,105 +82,77 @@ export function createRequestHandlers({
                 agentUrl,
                 token: token,
                 branchName,
-                resource: {
-                  literal: {
-                    data: toSign.rootHash,
-                  },
-                },
+                resource: { api: apiPb as any },
               });
-              return { signature: signature };
-            },
-          ],
-          signApis: [
-            async ({
-              branchName,
-              toSign,
-            }: {
-              branchName: string;
-              toSign: ApiToSign[];
-            }) => {
-              const signatures: Signature[] = [];
-              for (const { apiPb } of toSign) {
-                if (!agentUrl) {
-                  throw new Error(
-                    "Agent url not specified. This shouldn't happen.",
-                  );
-                }
-                const signature = await signResource({
-                  agentUrl,
-                  token: token,
-                  branchName,
-                  resource: { api: apiPb as any },
-                });
-                signatures.push(signature);
+              signatures.push(signature);
+            }
+            return { signatures };
+          },
+        ],
+        verifyApplication: [
+          async ({
+            branchName,
+            toVerify,
+          }: {
+            branchName: string;
+            toVerify: AppToVerify;
+          }) => {
+            try {
+              if (!agentUrl) {
+                throw new Error(
+                  "Agent url not specified. This shouldn't happen.",
+                );
               }
-              return { signatures };
-            },
-          ],
-          verifyApplication: [
-            async ({
-              branchName,
-              toVerify,
-            }: {
-              branchName: string;
-              toVerify: AppToVerify;
-            }) => {
-              try {
-                if (!agentUrl) {
-                  throw new Error(
-                    "Agent url not specified. This shouldn't happen.",
-                  );
-                }
-                await verifyResources({
-                  agentUrl,
-                  token,
-                  branchName,
-                  resources: [
-                    {
-                      literal: {
-                        data: toVerify.rootHash,
-                        signature: toVerify.signature,
-                      },
+              await verifyResources({
+                agentUrl,
+                token,
+                branchName,
+                resources: [
+                  {
+                    literal: {
+                      data: toVerify.rootHash,
+                      signature: toVerify.signature,
                     },
-                  ],
-                });
-                return { ok: true };
-              } catch {
-                return { ok: false };
-              }
-            },
-          ],
+                  },
+                ],
+              });
+              return { ok: true };
+            } catch {
+              return { ok: false };
+            }
+          },
+        ],
 
-          verifyApi: [
-            async ({
-              branchName,
-              toVerify,
-            }: {
-              branchName: string;
-              toVerify: ApiToVerify[];
-            }) => {
-              try {
-                if (!agentUrl) {
-                  throw new Error(
-                    "Agent url not specified. This shouldn't happen.",
-                  );
-                }
-                await verifyResources({
-                  agentUrl,
-                  token,
-                  branchName,
-                  resources: toVerify.map(({ apiPb }) => ({
-                    api: apiPb as any,
-                  })),
-                });
-                return { ok: true };
-              } catch {
-                return { ok: false };
+        verifyApi: [
+          async ({
+            branchName,
+            toVerify,
+          }: {
+            branchName: string;
+            toVerify: ApiToVerify[];
+          }) => {
+            try {
+              if (!agentUrl) {
+                throw new Error(
+                  "Agent url not specified. This shouldn't happen.",
+                );
               }
-            },
-          ],
-        },
+              await verifyResources({
+                agentUrl,
+                token,
+                branchName,
+                resources: toVerify.map(({ apiPb }) => ({
+                  api: apiPb as any,
+                })),
+              });
+              return { ok: true };
+            } catch {
+              return { ok: false };
+            }
+          },
+        ],
       },
-    };
+    },
+  };
   return requestHandlers;
 }