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

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