@superblocksteam/sdk 2.0.0-next.63 → 2.0.0-next.69

package/dist/vite-plugin-inject-sb-ids-transform.mjs

@@ -0,0 +1,86 @@
+import path from "node:path";
+import babelGenerate from "@babel/generator";
+import { parse } from "@babel/parser";
+import { supplementElementIds, generateRootSource, } from "@superblocksteam/vite-plugin-file-sync";
+import { yellow, red } from "colorette";
+import fs from "fs-extra";
+import { createLogger } from "vite";
+import { getLogger } from "./dev-utils/dev-logger.mjs";
+const routesFileBaseName = "routes.json";
+/**
+ * Creates a Vite plugin that injects Superblocks IDs into the application.
+ * This will primarily be used during builds, as the dev server leverages the
+ * file sync manager to inject and keep the IDs up to date.
+ *
+ * Features:
+ * - Injects the root component with the routes data
+ * - Injects Superblocks IDs into all components
+ *
+ * @param root - The root directory of the application
+ * @returns A Vite plugin that injects Superblocks IDs into the application's components
+ */
+export async function injectSuperblocksIdsPlugin(root) {
+    const viteLogger = createLogger();
+    const logger = getLogger();
+    viteLogger.info = logger.info;
+    viteLogger.warn = (msg) => {
+        logger.warn(yellow(msg));
+    };
+    viteLogger.warnOnce = (msg) => {
+        logger.warn(yellow(msg));
+    };
+    viteLogger.error = (msg) => {
+        logger.error(red(msg));
+    };
+    viteLogger.clearScreen = () => { };
+    const routes = await getRoutes(root, viteLogger);
+    return {
+        name: "sb-inject-superblocks-ids",
+        enforce: "pre",
+        transform(code, id) {
+            const relativePath = path.relative(root, id);
+            if (relativePath === "root.tsx") {
+                const source = generateRootSource(code, routes);
+                return {
+                    code: source,
+                    map: null,
+                };
+            }
+            else if (id.endsWith(".tsx")) {
+                const ast = parse(code, {
+                    sourceType: "module",
+                    sourceFilename: id,
+                    plugins: ["jsx"],
+                });
+                supplementElementIds({
+                    fileName: id,
+                    ast,
+                    shouldModifyAst: true,
+                });
+                const result = babelGenerate.default(ast);
+                return result.code;
+            }
+            return code;
+        },
+    };
+}
+async function getRoutes(root, logger) {
+    const routesFile = path.join(root, routesFileBaseName);
+    if (!(await fs.pathExists(routesFile))) {
+        logger.warn(`routes file not found at expected location: ${routesFile}`);
+        return [];
+    }
+    try {
+        const routesData = await fs.readFile(routesFile, "utf-8");
+        const routes = JSON.parse(routesData);
+        return Object.entries(routes).map(([path, { file }]) => ({
+            path,
+            component: file,
+        }));
+    }
+    catch (err) {
+        logger.error(`error reading routes file: ${routesFile}. error=[${JSON.stringify(err)}]`);
+    }
+    return [];
+}
+//# sourceMappingURL=vite-plugin-inject-sb-ids-transform.mjs.map

package/dist/vite-plugin-inject-sb-ids-transform.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin-inject-sb-ids-transform.mjs","sourceRoot":"","sources":["../src/vite-plugin-inject-sb-ids-transform.mts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/sdk",
-  "version": "2.0.0-next.63",
+  "version": "2.0.0-next.69",
   "type": "module",
   "description": "Superblocks JS SDK",
   "homepage": "https://www.superblocks.com",
@@ -16,6 +16,10 @@
     }
   },
   "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/exporter-trace-otlp-http": "^0.55.0",
@@ -25,10 +29,10 @@
     "@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/bucketeer-sdk": "0.5.0",
     "@superblocksteam/shared": "0.9146.0",
-    "@superblocksteam/util": "2.0.0-next.63",
-    "@superblocksteam/vite-plugin-file-sync": "2.0.0-next.63",
+    "@superblocksteam/util": "2.0.0-next.69",
+    "@superblocksteam/vite-plugin-file-sync": "2.0.0-next.69",
     "@vitejs/plugin-react": "^4.3.4",
     "axios": "^1.4.0",
     "chokidar": "^4.0.3",
@@ -56,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/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/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/vite-plugin-inject-sb-ids-transform.mts

@@ -0,0 +1,104 @@
+import path from "node:path";
+import babelGenerate from "@babel/generator";
+import { parse } from "@babel/parser";
+import {
+  supplementElementIds,
+  generateRootSource,
+} from "@superblocksteam/vite-plugin-file-sync";
+import { yellow, red } from "colorette";
+import fs from "fs-extra";
+import { createLogger } from "vite";
+import { getLogger } from "./dev-utils/dev-logger.mjs";
+import type { HydratedRoute } from "@superblocksteam/vite-plugin-file-sync";
+import type { Logger, Plugin } from "vite";
+
+const routesFileBaseName = "routes.json";
+
+/**
+ * Creates a Vite plugin that injects Superblocks IDs into the application.
+ * This will primarily be used during builds, as the dev server leverages the
+ * file sync manager to inject and keep the IDs up to date.
+ *
+ * Features:
+ * - Injects the root component with the routes data
+ * - Injects Superblocks IDs into all components
+ *
+ * @param root - The root directory of the application
+ * @returns A Vite plugin that injects Superblocks IDs into the application's components
+ */
+export async function injectSuperblocksIdsPlugin(root: 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 routes: HydratedRoute[] = await getRoutes(root, viteLogger);
+
+  return {
+    name: "sb-inject-superblocks-ids",
+    enforce: "pre",
+
+    transform(code, id) {
+      const relativePath = path.relative(root, id);
+
+      if (relativePath === "root.tsx") {
+        const source = generateRootSource(code, routes);
+        return {
+          code: source,
+          map: null,
+        };
+      } else if (id.endsWith(".tsx")) {
+        const ast = parse(code, {
+          sourceType: "module",
+          sourceFilename: id,
+          plugins: ["jsx"],
+        });
+
+        supplementElementIds({
+          fileName: id,
+          ast,
+          shouldModifyAst: true,
+        });
+
+        const result = babelGenerate.default(ast);
+        return result.code;
+      }
+
+      return code;
+    },
+  } as Plugin;
+}
+
+async function getRoutes(root: string, logger: Logger) {
+  const routesFile = path.join(root, routesFileBaseName);
+  if (!(await fs.pathExists(routesFile))) {
+    logger.warn(`routes file not found at expected location: ${routesFile}`);
+    return [];
+  }
+
+  try {
+    const routesData = await fs.readFile(routesFile, "utf-8");
+    const routes = JSON.parse(routesData) as Record<string, { file: string }>;
+
+    return Object.entries(routes).map(([path, { file }]) => ({
+      path,
+      component: file,
+    }));
+  } catch (err) {
+    logger.error(
+      `error reading routes file: ${routesFile}. error=[${JSON.stringify(err)}]`,
+    );
+  }
+
+  return [];
+}