@superblocksteam/sdk 2.0.0-next.8 → 2.0.0-next.80

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/index.ts

@@ -1,13 +1,7 @@
-import { createISocketClient, ISocket } from "@superblocksteam/shared";
-import WebSocket from "ws";
+import { connectISocket } from "@superblocksteam/shared";
+import tracer from "../dev-utils/dev-tracer.js";
 import { createRequestHandlers } from "./handlers.js";
-import type {
-  GenericMiddleware,
-  ISocketClient,
-  MethodHandlers,
-  RequestContextBase,
-  SocketTimeouts,
-} from "../types/index.js";
+import type { ISocketClient } from "../types/index.js";
 import type { ClientMethods, ServerMethods } from "@superblocksteam/shared";
 
 export type StdISocketRPCClient = ISocketClient<ServerMethods>;
@@ -44,96 +38,10 @@ export async function connectToISocketRPCServer({
     authorization,
     requestHandlers,
     [],
+    tracer,
     {
       connectionTimeoutInSeconds: 6 * 60, // 6 minutes
       noResponseTimeoutInSeconds: 5 * 60, // 5 minutes
     },
   );
 }
-
-// a subclass of ISocket that sends an auth token on the first request
-// this is useful for client-side sockets that need to authenticate
-// TODO(george): if we start using this for long-lived connections, we should add a way to refresh the token
-export class ISocketWithClientAuth<
-  ImplementedMethods,
-  CallableMethods,
-  RequestContext extends RequestContextBase,
-> extends ISocket<ImplementedMethods, CallableMethods, RequestContext> {
-  private readonly authorization?: string;
-  private hasSentAuth = false;
-
-  constructor(
-    ws: WebSocket,
-    authorization: string | undefined,
-    requestHandlers: MethodHandlers<
-      ImplementedMethods,
-      CallableMethods,
-      RequestContext
-    >,
-    globalMiddlewares: GenericMiddleware<CallableMethods, RequestContext>[],
-    timeouts?: SocketTimeouts,
-  ) {
-    super(ws, requestHandlers, globalMiddlewares, timeouts);
-    this.authorization = authorization;
-  }
-
-  // override `request` from the base class to send `authorization` when appropriate
-  async request<Params, Result>(
-    method: string,
-    params: Params,
-  ): Promise<Result> {
-    // only send `authorization` on the first request
-    const authorization = this.hasSentAuth ? undefined : this.authorization;
-    const result = await super.request<Params, Result>(
-      method,
-      params,
-      authorization,
-    );
-    this.hasSentAuth = true;
-    return result;
-  }
-}
-
-export async function connectISocket<
-  CallableMethods,
-  ImplementedMethods,
-  RequestContext extends RequestContextBase = RequestContextBase,
->(
-  wsUrl: string,
-  authorization: string | undefined,
-  requestHandlers: MethodHandlers<
-    ImplementedMethods,
-    CallableMethods,
-    RequestContext
-  >,
-  globalMiddlewares: GenericMiddleware<CallableMethods, RequestContext>[],
-  timeouts?: SocketTimeouts,
-): Promise<ISocketClient<CallableMethods>> {
-  const ws = await connectWebSocket(wsUrl);
-  const isocket = new ISocketWithClientAuth(
-    ws,
-    authorization,
-    requestHandlers,
-    globalMiddlewares,
-    timeouts,
-  );
-  return createISocketClient(isocket);
-}
-
-export function connectWebSocket(wsUrl: string): Promise<WebSocket> {
-  return new Promise((resolve, reject) => {
-    const ws = new WebSocket(wsUrl);
-
-    ws.addEventListener("open", () => {
-      // Resolve the promise with the WebSocket instance when the connection is open
-      resolve(ws);
-    });
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    ws.addEventListener("error", (error: Error) => {
-      // Reject the promise if there's an error
-      reject(error);
-    });
-  });
-}

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 [];
+}