@superblocksteam/sdk 2.0.6-next.6 → 2.0.6-next.60

package/src/dev-utils/dev-logger.mts

@@ -1,39 +1,113 @@
 import { createLogger, format, transports } from "winston";
+import type winston from "winston";
 
-export type DevLogger = {
-  debug: (message: string, ...meta: any[]) => void;
-  info: (message: string, ...meta: any[]) => void;
-  warn: (message: string, ...meta: any[]) => void;
-  error: (message: string, ...meta: any[]) => void;
-};
+const activeTransports: winston.transport[] = [];
+
+if (process.env.SUPERBLOCKS_IS_CSB === "true") {
+  activeTransports.push(
+    new transports.File({
+      format: format.json(),
+      filename: `/tmp/dev-server.log`,
+      level: "info",
+    }),
+  );
+}
+
+activeTransports.push(
+  new transports.Console({
+    format: format.combine(
+      format.colorize(),
+      format.timestamp({
+        format: "HH:mm:ss.SSS",
+      }),
+      format.printf((props) => {
+        const { message, timestamp, error, level } = props;
+        const base =
+          process.env.SUPERBLOCKS_IS_CSB === "true"
+            ? `${timestamp} ${message}`
+            : `${message}`;
+        if (level === "error") {
+          return `${base} ${(error as ErrorMeta["error"]).message} ${(error as ErrorMeta["error"]).stack}`;
+        }
+        return base;
+      }),
+    ),
+  }),
+);
 
 const winstonLogger = createLogger({
-  level: "info",
+  level: "debug",
   exitOnError: false,
   format: format.json(),
-  transports: [
-    new transports.File({ filename: `/tmp/dev-server.log`, level: "info" }),
-    new transports.Console({
-      format: format.combine(
-        format.printf(({ message }) => `${message}`),
-        format.colorize({ message: true }),
-      ),
-      level: "debug",
-    }),
-  ],
+  transports: activeTransports,
+});
+
+interface ErrorMeta {
+  error: {
+    kind: string;
+    message: string;
+    stack?: string;
+  };
+}
+
+export interface DevLogger {
+  log: (...messages: string[]) => void;
+  debug: (...messages: string[]) => void;
+  info: (...messages: string[]) => void;
+  warn: (...messages: string[]) => void;
+  error: (message: string, meta?: ErrorMeta) => void;
+}
+const logger: DevLogger = Object.freeze({
+  debug: (...messages: string[]) =>
+    winstonLogger.debug(
+      messages.length > 0 ? messages.join(" ") : (messages[0] as string),
+    ),
+  log: (...messages: string[]) =>
+    winstonLogger.info(
+      messages.length > 0 ? messages.join(" ") : (messages[0] as string),
+    ),
+  info: (...messages: string[]) =>
+    winstonLogger.info(
+      messages.length > 0 ? messages.join(" ") : (messages[0] as string),
+    ),
+  warn: (...messages: string[]) =>
+    winstonLogger.warn(
+      messages.length > 0 ? messages.join(" ") : (messages[0] as string),
+    ),
+  error: (message: string, meta?: ErrorMeta) =>
+    winstonLogger.error(message, meta),
 });
 
 export function getLogger(
-  loggerOverride?: (message: string) => void,
+  loggerOverride?: (...messages: string[]) => void,
 ): DevLogger {
   if (!loggerOverride) {
-    return winstonLogger;
+    return logger;
   }
 
   return {
     debug: loggerOverride,
     info: loggerOverride,
     warn: loggerOverride,
-    error: loggerOverride,
+    log: loggerOverride,
+    error: loggerOverride as any,
+  };
+}
+
+export function getErrorMeta(error: unknown): ErrorMeta {
+  if (error instanceof Error) {
+    return {
+      error: {
+        kind: error.name,
+        message: error.message,
+        stack: error.stack,
+      },
+    };
+  }
+  return {
+    error: {
+      kind: "Unknown Error",
+      message: JSON.stringify(error),
+    },
   };
 }

package/src/dev-utils/dev-server.mts

@@ -18,7 +18,8 @@ import {
   customComponentsPlugin,
   isCustomComponentsEnabled,
 } from "./custom-build.mjs";
-import { getLogger } from "./dev-logger.mjs";
+import { getErrorMeta, getLogger } from "./dev-logger.mjs";
+import { buildManifestStubPlugin } from "./vite-plugin-build-manifest-stub.mjs";
 import { ddRumPlugin } from "./vite-plugin-dd-rum.mjs";
 import { superblocksCdnPlugin } from "./vite-plugin-sb-cdn.mjs";
 import type { AiService } from "@superblocksteam/vite-plugin-file-sync/ai-service";
@@ -187,13 +188,6 @@ export async function createDevServer({
     }, viteReject);
   });
 
-  // TODO(code-mode): remove this soon
-  app.get("/_sb_disconnect", async (_req, res) => {
-    console.log("GET /_sb_disconnect");
-    // TODO(code-mode): should this include any validation checks, such as getting a token?
-    await gracefulShutdown({ logger, serverInitiated: false });
-    res.send("ok");
-  });
   app.post("/_sb_disconnect", async (req, res) => {
     const { initiatedByEmail, switchingTo } = req.body;
     // TODO(code-mode): should this include any validation checks, such as getting a token?
@@ -206,7 +200,7 @@ export async function createDevServer({
       });
       res.send("ok");
     } catch (e) {
-      console.error("Error disconnecting from dev server", e);
+      logger.error("Error disconnecting from dev server", getErrorMeta(e));
       res.status(500).send("Error disconnecting from dev server");
     }
   });
@@ -260,7 +254,7 @@ async function startVite({
 }) {
   const viteLogger = createLogger();
   const logger = getLogger(loggerOverride);
-  viteLogger.info = logger.info;
+  viteLogger.info = (msg: string) => logger.info(msg);
   viteLogger.warn = (msg: string) => {
     logger.warn(yellow(msg));
   };
@@ -276,6 +270,8 @@ async function startVite({
   const isCustomBuildEnabled = await isCustomComponentsEnabled();
   const customFolder = path.join(root, "custom");
 
+  const draftsFolder = path.join(root, ".superblocks");
+
   const cdnUrl = process.env.SUPERBLOCKS_CDN_URL ?? "http://localhost:4040/cdn";
 
   const env = loadEnv(mode, root, "");
@@ -313,7 +309,7 @@ async function startVite({
     server: {
       middlewareMode: true,
       watch: {
-        ignored: [`${customFolder}/**/*`],
+        ignored: [`${customFolder}/**/*`, `${draftsFolder}/**/*`],
       },
       hmr: hmrOptions,
       cors: {
@@ -342,11 +338,13 @@ async function startVite({
           aiService,
           httpServer,
           tracer,
-          logger,
         },
         { isCustomBuildEnabled },
       ) as Plugin,
 
+      // Add a virtual "stub" module for the build manifest
+      buildManifestStubPlugin(),
+
       // for now, only use the CDN locally
       superblocksCdnPlugin({
         imports: {

package/src/dev-utils/vite-plugin-build-manifest-stub.mts

@@ -0,0 +1,30 @@
+import type { Plugin } from "vite";
+
+const BUILD_MANIFEST_MODULE_PATH = "./user-facing/build-manifest.js";
+const VIRTUAL_MODULE_ID = "\0virtual:build-manifest.js";
+
+/**
+ * This plugin is used to stub the build manifest module. It creates a virtual module
+ * for the build manifest module and returns an empty object.
+ *
+ * This is meant to be used to avoid errors when the build manifest module is not found.
+ * This plugin only runs in dev server mode.
+ */
+export const buildManifestStubPlugin = (): Plugin => {
+  return {
+    name: "build-manifest-stub",
+    enforce: "pre",
+    apply: "serve",
+
+    resolveId(source) {
+      if (source === BUILD_MANIFEST_MODULE_PATH) {
+        return VIRTUAL_MODULE_ID;
+      }
+    },
+    load(id) {
+      if (id === VIRTUAL_MODULE_ID) {
+        return "export default {}";
+      }
+    },
+  };
+};

package/src/dev-utils/vite-plugin-sb-cdn.mts

@@ -224,8 +224,8 @@ async function analyzeModuleGraph(
     { content: string; binary: ArrayBuffer }
   > = new Map(),
 ): Promise<AnalysisResult> {
-  // Avoid circular dependencies
-  if (visited.has(url)) {
+  // Avoid circular dependencies and skip the shared library's build manifest reference
+  if (visited.has(url) || url.endsWith("/user-facing/build-manifest.js")) {
     return {
       dependencies: new Set(),
       content: "",
@@ -474,6 +474,13 @@ const wellKnownPackages = new Map<string, string>([
   ["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"],
+  ["./user-facing/build-manifest.js", "/assets/build-manifest.js"],
+  ["/assets/user-facing/build-manifest.js", "/assets/build-manifest.js"],
+]);
+
+const packagesToExcludeFromCdnRedirect = new Set<string>([
+  "./user-facing/build-manifest.js",
+  "/assets/user-facing/build-manifest.js",
 ]);
 
 const react18CdnUrl = "https://esm.sh/react@18.2.0";
@@ -773,8 +780,12 @@ export async function superblocksCdnPlugin(
         // Externalize modules specified in the import map
         // The cdn: prefix ensures they're properly resolved to the CDN URL
         if (imports.includes(id)) {
+          const shouldRedirectToCdn = !packagesToExcludeFromCdnRedirect.has(id);
           debug(`Externalizing module for CDN resolution: ${id}`);
-          return { id: `cdn:${id}`, external: true };
+          return {
+            id: `${shouldRedirectToCdn ? "cdn:" : ""}${id}`,
+            external: true,
+          };
         }
 
         return null;

package/src/vite-plugin-generate-build-manifest.mts

@@ -0,0 +1,193 @@
+import path from "node:path";
+import { parse } from "@babel/parser";
+import { getClientApiId } from "@superblocksteam/library-shared";
+import { resolveLanguageSpecificStepContentFromBlocks } from "@superblocksteam/util";
+import { getPageName } from "@superblocksteam/vite-plugin-file-sync";
+import {
+  extractIdentifierPathsFromApi,
+  extractApiDependencies,
+} from "@superblocksteam/vite-plugin-file-sync/binding-extraction";
+import {
+  getScope,
+  extractImportsFromAst,
+} from "@superblocksteam/vite-plugin-file-sync/parsing";
+import { yellow, red } from "colorette";
+import fg from "fast-glob";
+import fs from "fs-extra";
+import { createLogger } from "vite";
+import yaml from "yaml";
+import { getLogger } from "./dev-utils/dev-logger.mjs";
+import type { ParseResult } from "@babel/parser";
+import type { File } from "@babel/types";
+import type {
+  DeleteMeLibraryApi,
+  StaticScope,
+} from "@superblocksteam/library-shared/types";
+import type { Plugin } from "vite";
+
+export const scopeFileBaseName = "scope.ts";
+export const apiFileBaseName = "api.yaml";
+
+type ApiDependency = {
+  apiName: string;
+  params: string[];
+  dependencies: string[];
+};
+
+/**
+ * Vite plugin that generates a build manifest for the application.
+ *
+ * This plugin will:
+ * 1. Read all api.yaml and api.yml files in the application
+ * 2. Read all scope.ts files in the application
+ * 3. Generate a build manifest for the application
+ * 4. Write the build manifest to a file in the build output directory
+ *
+ * The build manifest is a JSON object with the following properties:
+ * - apis: a map of all apis in the application keyed by their file path
+ * - apiDependencies: an array where each item represents an api and its dependencies
+ *
+ * @param root - The root directory of the application
+ * @returns A Vite plugin that generates a build manifest for the application
+ */
+export function generateBuildManifestPlugin(root: string) {
+  const viteLogger = createLogger();
+  const logger = getLogger();
+  viteLogger.info = (msg: string) => logger.info(msg);
+  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 scopesByPage: Record<string, StaticScope | null> = {};
+  const apiFiles: Record<string, DeleteMeLibraryApi> = {};
+  let buildManifest: {
+    apis: Record<string, { api: DeleteMeLibraryApi; scopeId: string }>;
+    apiDependencies: ApiDependency[];
+  } = { apis: {}, apiDependencies: [] };
+
+  return {
+    name: "sb-generate-build-manifest",
+    apply: "build",
+    enforce: "pre",
+
+    async buildStart() {
+      const apiDocuments = await fg(["**/api.yaml", "**/api.yml"], {
+        cwd: root,
+      });
+
+      for (const apiFilePath of apiDocuments) {
+        const absoluteApiFilePath = path.join(root, apiFilePath);
+
+        const document = await fs.readFile(absoluteApiFilePath, "utf-8");
+        const apiPb = yaml.parse(document);
+
+        await resolveLanguageSpecificStepContentFromBlocks(
+          path.dirname(absoluteApiFilePath),
+          apiPb.blocks ?? [],
+          {},
+        );
+
+        const pageName = getPageName(apiFilePath);
+        apiPb.metadata.id = getClientApiId(apiPb.metadata.name, pageName);
+        apiFiles[apiFilePath] = { apiPb, pageName };
+      }
+    },
+
+    transform(code: string, id: string) {
+      if (id.endsWith(scopeFileBaseName)) {
+        const ast = parse(code, {
+          sourceType: "module",
+          sourceFilename: id,
+          plugins: [["typescript", {}]],
+        });
+
+        const scopeFileMeta: {
+          code: string;
+          ast: ParseResult<File>;
+          imports: Record<string, boolean>;
+        } = {
+          code,
+          ast,
+          imports: extractImportsFromAst(ast),
+        };
+        const scope = getScope(id, scopeFileMeta);
+
+        scopesByPage[getPageName(id)] = scope;
+      }
+
+      return code;
+    },
+
+    async generateBundle() {
+      const allApiNames = getAllUniqueApiNames(apiFiles);
+
+      const allApis = Object.entries(apiFiles).reduce(
+        (acc, [id, api]) => {
+          acc[id] = {
+            api,
+            scopeId: scopesByPage[api.pageName]?.scopeId ?? "",
+          };
+          return acc;
+        },
+        {} as Record<string, { api: DeleteMeLibraryApi; scopeId: string }>,
+      );
+
+      const deps = await getApiDependencies(allApiNames, apiFiles);
+
+      buildManifest = {
+        apis: allApis,
+        apiDependencies: deps,
+      };
+
+      this.emitFile({
+        type: "prebuilt-chunk",
+        fileName: "assets/build-manifest.js",
+        code: `export default ${JSON.stringify(buildManifest)}`,
+        exports: ["default"],
+      });
+    },
+  } as Plugin;
+}
+
+function getAllUniqueApiNames(
+  apiFiles: Record<string, DeleteMeLibraryApi>,
+): string[] {
+  const allApiNamesSet = new Set<string>(
+    Object.values(apiFiles).map((api) => api.apiPb.metadata.name),
+  );
+  return Array.from(allApiNamesSet);
+}
+
+async function getApiDependencies(
+  apiNames: string[],
+  apiFiles: Record<string, DeleteMeLibraryApi>,
+): Promise<ApiDependency[]> {
+  const deps: ApiDependency[] = [];
+
+  // TODO: This logic is a copy of the extractApiParamsAndDependencies function in the
+  // fileSyncVitePlugin (https://github.com/superblocksteam/superblocks/blob/474c0b11d79a1d6988864fb20d5ec26f92931fde/packages/vite-plugin-file-sync/src/file-sync-vite-plugin.ts#L261-L280).
+  //
+  // This logic should be refactored so that it can be shared between the two plugins.
+  await Promise.all([
+    ...Object.values(apiFiles).map(async (api) => {
+      const bindings = await extractIdentifierPathsFromApi(api);
+      const allIdentifiers = bindings.flatMap((binding) => binding.bindings);
+      const apiDependencies = extractApiDependencies(apiNames, bindings);
+      deps.push({
+        apiName: api.apiPb.metadata.name,
+        params: allIdentifiers,
+        dependencies: apiDependencies,
+      });
+    }),
+  ]);
+
+  return deps;
+}

package/src/vite-plugin-inject-sb-ids-transform.mts

@@ -29,7 +29,7 @@ const routesFileBaseName = "routes.json";
 export async function injectSuperblocksIdsPlugin(root: string) {
   const viteLogger = createLogger();
   const logger = getLogger();
-  viteLogger.info = logger.info;
+  viteLogger.info = (msg: string) => logger.info(msg);
   viteLogger.warn = (msg: string) => {
     logger.warn(yellow(msg));
   };