@superblocksteam/sdk 2.0.6-next.4 → 2.0.6-next.41

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