@superblocksteam/sdk 2.0.3-next.174 → 2.0.3-next.176

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,
@@ -669,9 +693,6 @@ export async function superblocksCdnPlugin(
     {
       name: "vite-plugin-superblocks-cdn",
 
-      // run before Vite's module resolution
-      enforce: "pre",
-
       /**
        * Configure Vite to properly handle CDN modules
        * - Exclude CDN modules from optimization
@@ -735,6 +756,8 @@ export async function superblocksCdnPlugin(
 
           cdnDependencyChunks.set(dep, resolved);
         }
+
+        debug("dependencies of CDN modules", cdnDependencyChunks);
       },
 
       resolveId(id, importer) {
@@ -762,6 +785,8 @@ export async function superblocksCdnPlugin(
        * These modules will be loaded from CDN at runtime, so we return empty content
        */
       async load(id: string) {
+        debug("loading module", id);
+
         if (id.startsWith("cdn:")) {
           debug(`Providing empty module for CDN import: ${id}`);
           return "";
@@ -792,9 +817,13 @@ export async function superblocksCdnPlugin(
             }
           }
         }
+
+        debug({ moduleToChunkMap, importToChunkMap });
       },
 
       async transformIndexHtml(html, { server }) {
+        debug("transforming index.html");
+
         const isDevMode = !!server;
 
         // Create the base import map with explicit ordering for proper resolution
@@ -802,10 +831,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
@@ -851,7 +882,6 @@ export async function superblocksCdnPlugin(
 
                   // Get the asset URL as it would be served to the browser
                   // For Vite to correctly resolve this module in the browser
-
                   if (resolvedChunkUrl.startsWith("/")) {
                     // For paths starting with /, they're already root-relative
                     // Make sure we don't duplicate the base path
@@ -871,6 +901,8 @@ export async function superblocksCdnPlugin(
                 const chunkPath = importToChunkMap.get(moduleName);
                 if (chunkPath) {
                   dependencyChunkUrl = `${base}${chunkPath}`;
+                } else if (wellKnownPackages.has(moduleName)) {
+                  dependencyChunkUrl = wellKnownPackages.get(moduleName)!;
                 }
               }
 
@@ -884,6 +916,8 @@ export async function superblocksCdnPlugin(
                 debug(`Resolved %s to %s`, moduleName, dependencyChunkUrl);
                 // Store in the import map scope
                 importMap.scopes[baseUrl][moduleName] = dependencyChunkUrl;
+                // Also add to main imports for external dependencies
+                importMap.imports[moduleName] = dependencyChunkUrl;
               }
             }
           }

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;
 }

package/src/socket/index.ts

@@ -1,14 +1,16 @@
-import { createISocketClient, ISocket } from "@superblocksteam/shared";
-import WebSocket from "ws";
+import {
+  connectWebSocket,
+  createISocketClient,
+  ISocketWithClientAuth,
+} from "@superblocksteam/shared";
+import tracer from "../dev-utils/dev-tracer.js";
 import { createRequestHandlers } from "./handlers.js";
+import type { ISocketClient } from "../types/index.js";
 import type {
-  GenericMiddleware,
-  ISocketClient,
-  MethodHandlers,
+  ClientMethods,
   RequestContextBase,
-  SocketTimeouts,
-} from "../types/index.js";
-import type { ClientMethods, ServerMethods } from "@superblocksteam/shared";
+  ServerMethods,
+} from "@superblocksteam/shared";
 
 export type StdISocketRPCClient = ISocketClient<ServerMethods>;
 
@@ -39,101 +41,19 @@ export async function connectToISocketRPCServer({
     wsUrl.hostname = "127.0.0.1";
   }
 
-  return await connectISocket<ServerMethods, ClientMethods>(
-    wsUrl.href,
-    authorization,
-    requestHandlers,
-    [],
-    {
+  const ws = await connectWebSocket(wsUrl.href);
+  const isocket = new ISocketWithClientAuth<
+    ClientMethods,
+    ServerMethods,
+    RequestContextBase
+  >(ws, authorization, requestHandlers, [], tracer, {
+    timeouts: {
       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);
-    });
+    onClose: () => {
+      // Noop
+    },
   });
+  return createISocketClient(isocket);
 }

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