@superblocksteam/sdk 2.0.34 → 2.0.35-next.0

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

@@ -1,1033 +0,0 @@
-import { commaLists, stripIndent } from "common-tags";
-import baseDebug from "debug";
-import { parse, init } from "es-module-lexer";
-import prettier from "prettier";
-import {
-  type Plugin,
-  type ConfigEnv,
-  type UserConfig,
-  createIdResolver,
-} from "vite";
-import { reactTransformPlugin } from "./vite-plugin-react-transform.mjs";
-
-import type { Environment, ResolvedConfig } from "vite";
-
-// Create and extend the debug logger
-const debug = baseDebug("sb:sdk:vite-plugin-import-map");
-
-/**
- * Options for configuring the import map plugin
- */
-export interface ImportMapOptions {
-  /**
-   * Base imports that apply globally
-   */
-  imports?: Record<string, string>;
-  /**
-   * Additional scoped imports to add manually
-   */
-  scopes?: Record<string, Record<string, string>>;
-  /**
-   * CSS imports that need to be loaded from CDN
-   */
-  cssImports?: Record<string, string>;
-}
-
-/**
- * Represents a module to be preloaded with optional integrity information
- */
-interface PreloadModule {
-  /** The URL of the module to preload */
-  url: string;
-  /** The content of the module (if available) */
-  content?: string;
-  /** The integrity hash (if calculated) */
-  integrity?: string;
-}
-
-/**
- * Injects content into HTML after the charset meta tag, or falls back to before </head>
- *
- * @param html - The original HTML content
- * @param contentToInject - The content to inject
- * @param debugMessage - Optional debug message to log
- * @returns The modified HTML with content injected
- */
-function injectAfterCharset(
-  html: string,
-  contentToInject: string,
-  debugMessage?: string,
-): string {
-  if (!contentToInject) return html;
-
-  if (debugMessage) {
-    debug(debugMessage);
-  }
-
-  // Try to find the charset meta tag
-  const charsetRegex = /<meta[^>]*charset[^>]*>/i;
-  const charsetMatch = html.match(charsetRegex);
-
-  if (charsetMatch && charsetMatch.index !== undefined) {
-    // Calculate position right after the charset tag
-    const insertPosition = charsetMatch.index + charsetMatch[0].length;
-
-    // Insert content after the charset tag
-    const result =
-      html.substring(0, insertPosition) +
-      contentToInject +
-      html.substring(insertPosition);
-    debug("Inserted content after charset meta tag");
-    return result;
-  } else {
-    // Fallback: insert before closing head tag if no charset tag is found
-    debug("No charset meta tag found, inserting content before </head>");
-    return html.replace("</head>", `${contentToInject}</head>`);
-  }
-}
-
-/**
- * Calculates a SHA-384 integrity hash for a resource
- *
- * @param content - The content to hash (string, ArrayBuffer, or Uint8Array)
- * @returns The base64-encoded SHA-384 hash prefixed with 'sha384-'
- */
-async function calculateIntegrity(
-  content: string | ArrayBuffer | Uint8Array | unknown,
-): Promise<string> {
-  // Safely handle different content types
-  let buffer: ArrayBuffer;
-  if (content instanceof ArrayBuffer) {
-    buffer = content;
-  } else if (content instanceof Uint8Array) {
-    buffer = content.buffer;
-  } else {
-    // Handle string or any other type by converting to string first
-    buffer = new TextEncoder().encode(String(content));
-  }
-
-  // Calculate SHA-384 hash
-  const hashBuffer = await crypto.subtle.digest("SHA-384", buffer);
-
-  // Convert to base64
-  const hashBase64 = btoa(
-    Array.from(new Uint8Array(hashBuffer))
-      .map((byte) => String.fromCharCode(byte))
-      .join(""),
-  );
-
-  return `sha384-${hashBase64}`;
-}
-
-/**
- * Extracts import specifiers from JavaScript/TypeScript code
- *
- * @param code - The source code to analyze
- * @returns An array of import specifiers found in the code
- */
-interface ParsedImports {
-  absolute: string[];
-  relative: string[];
-}
-
-/**
- * Extracts import specifiers from JavaScript/TypeScript code, separating absolute and relative imports
- *
- * @param code - The source code to analyze
- * @returns Object containing absolute and relative imports found in the code
- */
-async function extractImportsFromCode(code: string): Promise<ParsedImports> {
-  try {
-    // Initialize the lexer if it hasn't been initialized yet
-    await init;
-
-    const [imports] = parse(code);
-
-    const allImports: string[] = [];
-
-    for (const imp of imports) {
-      // d === -1 means it's a static import (not dynamic, not import.meta)
-      if (imp.d === -1) {
-        // For static imports, use the name field when available
-        // or extract from the source string
-        const importSpecifier = imp.n || code.substring(imp.s, imp.e);
-
-        // Clean up the import string if needed (remove quotes)
-        const cleanedImport =
-          typeof importSpecifier === "string"
-            ? importSpecifier.replace(/['"\`]/g, "")
-            : "";
-
-        // Only include if it's not an absolute URL
-        if (cleanedImport && !cleanedImport.startsWith("http")) {
-          allImports.push(cleanedImport);
-        }
-      }
-    }
-
-    debug("Processed imports:", allImports);
-
-    // Separate into absolute and relative imports
-    const absolute: string[] = [];
-    const relative: string[] = [];
-
-    for (const imp of allImports) {
-      if (
-        imp.startsWith("/") ||
-        imp.startsWith("./") ||
-        imp.startsWith("../")
-      ) {
-        relative.push(imp);
-      } else if (!imp.startsWith("/")) {
-        // Skip absolute file paths
-        absolute.push(imp);
-      }
-    }
-
-    return { absolute, relative };
-  } catch (err) {
-    console.error("Failed to parse imports:", err);
-    return { absolute: [], relative: [] };
-  }
-}
-
-/**
- * Results from analyzing modules including all dependencies and visited modules
- */
-interface AnalysisResult {
-  /** Direct and indirect module dependencies (absolute imports) */
-  dependencies: Set<string>;
-  /** The content of the main module */
-  content: string;
-  /** The binary data of the main module */
-  binary: ArrayBuffer;
-  /** Map of all visited modules with their content and binary data */
-  visitedModules: Map<string, { content: string; binary: ArrayBuffer }>;
-}
-
-/**
- * Fetches a module and recursively analyzes all its imports
- *
- * @param baseUrl - The base URL for resolving relative imports
- * @param url - The URL of the module to analyze
- * @param debug - Whether to output debug information
- * @param visited - Set of already visited URLs to prevent cycles
- * @param visitedModules - Map to track all visited modules with their content
- * @returns Object containing all dependencies, content, binary data, and visited modules
- */
-async function analyzeModuleGraph(
-  baseUrl: string,
-  url: string,
-  visited: Set<string> = new Set(),
-  visitedModules: Map<
-    string,
-    { content: string; binary: ArrayBuffer }
-  > = new Map(),
-): Promise<AnalysisResult> {
-  // 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: "",
-      binary: new ArrayBuffer(0),
-      visitedModules,
-    };
-  }
-
-  visited.add(url);
-
-  try {
-    debug(`Fetching module: ${url}`);
-
-    // First fetch as ArrayBuffer for efficiency
-    const response = await fetch(url);
-
-    if (!response.ok) {
-      throw new Error(
-        `Failed to fetch ${url}: ${response.status} ${response.statusText}`,
-      );
-    }
-
-    // Get binary data once
-    const binary = await response.arrayBuffer();
-
-    // Convert to text for import analysis
-    const decoder = new TextDecoder();
-    const code = decoder.decode(binary);
-
-    // Store this module in the visitedModules map
-    visitedModules.set(url, { content: code, binary });
-
-    // Extract both absolute and relative imports
-    const { absolute, relative } = await extractImportsFromCode(code);
-
-    debug(
-      `Found in ${url}:\n  Absolute: ${absolute.join(", ")}\n  Relative: ${relative.join(", ")}`,
-    );
-
-    // Initialize with the direct absolute dependencies
-    const dependencies = new Set(absolute);
-
-    // Recursively process relative imports
-    for (const relativeImport of relative) {
-      // Resolve relative path against the current URL
-      const resolvedUrl = new URL(relativeImport, url).href;
-
-      debug(
-        `Resolving relative import ${relativeImport} from ${url} to ${resolvedUrl}`,
-      );
-
-      // Recursively analyze this dependency
-      const { dependencies: nestedDeps } = await analyzeModuleGraph(
-        baseUrl,
-        resolvedUrl,
-        visited,
-        visitedModules,
-      );
-
-      // Add all nested dependencies to our set
-      for (const dep of nestedDeps) {
-        dependencies.add(dep);
-      }
-    }
-
-    return { dependencies, content: code, binary, visitedModules };
-  } catch (err) {
-    console.error(`Error analyzing ${url}:`, err);
-    return {
-      dependencies: new Set(),
-      content: "",
-      binary: new ArrayBuffer(0),
-      visitedModules,
-    };
-  }
-}
-
-/**
- * Fetches a remote module and extracts all its imports, including following relative imports
- *
- * @param url - The URL of the module to analyze
- * @param debug - Whether to output debug information
- * @returns Object containing all found dependencies, content, binary data, and all visited modules
- */
-async function analyzeRemoteModule(url: string): Promise<{
-  dependencies: string[];
-  content: string;
-  binary: ArrayBuffer;
-  allModules: Map<string, { content: string; binary: ArrayBuffer }>;
-  neededExports: Map<string, Set<string>>;
-}> {
-  try {
-    debug(`Analyzing remote module: ${url}`);
-    const baseUrl = new URL(url).href;
-    const { dependencies, content, binary, visitedModules } =
-      await analyzeModuleGraph(baseUrl, url);
-
-    // First analyze the main module's needed exports
-    const mainModuleNeededExports = await extractNeededExports(url, content);
-
-    // Start with the main module's exports and merge in exports from dependencies
-    const allNeededExports = new Map<string, Set<string>>(
-      mainModuleNeededExports,
-    );
-
-    // Recursively analyze all related modules to find their imports
-    // This is critical for handling transitive dependencies
-    let analyzedModules = 0;
-    for (const [moduleUrl, moduleData] of visitedModules.entries()) {
-      if (moduleUrl === url) continue; // Skip the main module we already analyzed
-
-      analyzedModules++;
-      const moduleNeededExports = await extractNeededExports(
-        moduleUrl,
-        moduleData.content,
-      );
-
-      // Merge all needed exports into our map
-      for (const [
-        importedModule,
-        exportNames,
-      ] of moduleNeededExports.entries()) {
-        if (!allNeededExports.has(importedModule)) {
-          allNeededExports.set(importedModule, new Set());
-        }
-
-        // Add all export names from this module
-        for (const name of exportNames) {
-          allNeededExports.get(importedModule)?.add(name);
-        }
-      }
-    }
-
-    debug(
-      `Analyzed ${analyzedModules} related modules for ${url}\n` +
-        `Found ${dependencies.size} dependencies: ${Array.from(dependencies).join(", ")}`,
-    );
-
-    // Log all needed exports for debugging
-    if (allNeededExports.size > 0) {
-      debug(`Needed exports from dependencies:`);
-      for (const [module, exports] of allNeededExports.entries()) {
-        debug(`  ${module}: ${[...exports].join(", ")}`);
-      }
-    } else {
-      debug(`No dependency exports needed by ${url}`);
-    }
-
-    return {
-      dependencies: Array.from(dependencies),
-      content,
-      binary,
-      allModules: visitedModules,
-      neededExports: allNeededExports,
-    };
-  } catch (err) {
-    console.error(`Error analyzing remote module ${url}:`, err);
-    return {
-      dependencies: [],
-      content: "",
-      binary: new ArrayBuffer(0),
-      allModules: new Map(),
-      neededExports: new Map(),
-    };
-  }
-}
-
-/**
- * Extracts export specifiers used by a module and its dependencies
- * @param content - The source code to analyze
- * @returns Map of module names to their needed exports
- */
-async function extractNeededExports(
-  moduleName: string,
-  content: string,
-): Promise<Map<string, Set<string>>> {
-  try {
-    // Initialize the lexer if it hasn't been initialized yet
-    await init;
-
-    const result = new Map<string, Set<string>>();
-    const [imports] = parse(content);
-
-    for (const imp of imports) {
-      // Static imports
-      if (imp.d === -1 && imp.n) {
-        // Get the imported module name
-        const importedModule = imp.n;
-
-        // Check for namespace imports: import * as X from 'module'
-        if (imp.ss === -1) {
-          // This is a namespace import, meaning we need all exports
-          if (!result.has(importedModule)) {
-            result.set(importedModule, new Set(["*"]));
-          }
-          continue;
-        }
-
-        // Extract the specific imported names for named imports
-        const importCode = content.substring(imp.ss, imp.se);
-        const namedImportMatch = importCode.match(/\{([^}]*)\}/);
-
-        if (namedImportMatch) {
-          const namedImports = namedImportMatch[1]
-            .split(",")
-            .map((name) => name.trim().split(" as ")[0].trim())
-            .filter(Boolean);
-
-          if (!result.has(importedModule)) {
-            result.set(importedModule, new Set());
-          }
-
-          for (const name of namedImports) {
-            result.get(importedModule)?.add(name);
-          }
-        } else {
-          // Default import: import X from 'module'
-          if (!result.has(importedModule)) {
-            result.set(importedModule, new Set(["default"]));
-          } else {
-            result.get(importedModule)?.add("default");
-          }
-        }
-      }
-    }
-
-    debug(
-      `Extracted needed exports for ${moduleName}: %O`,
-      Object.fromEntries(
-        Array.from(result.entries()).map(([key, value]) => [
-          key,
-          Array.from(value),
-        ]),
-      ),
-    );
-
-    return result;
-  } catch (err) {
-    console.error(`Error extracting needed exports for ${moduleName}:`, err);
-    return new Map();
-  }
-}
-
-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"],
-  ["./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";
-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.
- *
- * Features:
- * - Automatically discovers and maps imports in remote modules
- * - Efficiently fetches binary data once and reuses it for multiple purposes
- * - In production mode, adds integrity hashes and modulepreload directives
- * - In development mode, only adds the import map for faster iteration
- * - Ensures proper ordering of elements in head for correct module resolution
- *
- * @param options - The import map configuration options
- * @returns A Vite plugin that injects the import map into HTML
- */
-export async function superblocksCdnPlugin(
-  options: ImportMapOptions,
-): Promise<Plugin[]> {
-  const {
-    imports: initialImportMap = {},
-    scopes: additionalScopes = {},
-    cssImports = {},
-  } = options;
-
-  let mode: string;
-  let config: ResolvedConfig;
-
-  // Get the keys from the imports object to use as the ignored imports
-  const imports = Object.keys(initialImportMap);
-
-  // tracks imports of modules so we can map them to chunks later
-  const moduleToImportsMap = new Map<string, Set<string>>();
-  // maps imports to chunks so we can resolve them in the import map
-  const importToChunkMap = new Map<string, string>();
-  // tracks the dependencies of modules in the import map
-  const importMapModulesDependencies: Map<string, string[]> = new Map();
-  // tracks remote modules to preload with their content and integrity
-  const modulesToPreload = new Map<string, PreloadModule>();
-  // a map of imports required by CDN bundles, grouped by their import specifier
-  const cdnDependencies: Map<string, Set<string>> = new Map();
-  // a map tracking the chunks that CDN dependencies end up in, created in buildStart()
-  const cdnDependencyChunks: Map<string, string> = new Map();
-
-  // For each import, download the file and analyze its imports
-  for (const [, importUrl] of Object.entries(initialImportMap)) {
-    // Skip non-HTTP imports
-    if (!importUrl.startsWith("http")) continue;
-
-    // Add the main module to preload
-    modulesToPreload.set(importUrl, { url: importUrl });
-
-    // Extract the base URL (e.g., http://localhost:4173/)
-    const urlObj = new URL(importUrl);
-    const baseUrl = `${urlObj.protocol}//${urlObj.host}/`;
-    debug(`Extracted base URL from %s: %s`, importUrl, baseUrl);
-
-    // Analyze the remote module to find all dependencies (including recursive ones)
-    const { dependencies, content, binary, allModules, neededExports } =
-      await analyzeRemoteModule(importUrl);
-
-    // Store the list of dependencies for this import
-    importMapModulesDependencies.set(baseUrl, [
-      ...(importMapModulesDependencies.get(baseUrl) ?? []),
-      ...dependencies,
-    ]);
-
-    // Store the needed exports for each dependency
-    for (const [dependency, exportNames] of neededExports) {
-      if (
-        dependency.startsWith("/") ||
-        dependency.startsWith("./") ||
-        dependency.startsWith("../")
-      ) {
-        continue;
-      }
-
-      if (!cdnDependencies.has(dependency)) {
-        cdnDependencies.set(dependency, new Set());
-      }
-
-      // Add all needed exports from this CDN module
-      for (const exportName of exportNames) {
-        cdnDependencies.get(dependency)?.add(exportName);
-      }
-    }
-
-    // Add module info to preload map for main module
-    const modulePreloadData = modulesToPreload.get(importUrl);
-    if (modulePreloadData) {
-      modulePreloadData.content = content;
-
-      // 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
-    for (const [moduleUrl, moduleData] of allModules) {
-      // Don't add the main module again
-      if (moduleUrl === importUrl) continue;
-
-      // Only add modules from the same origin (relative modules)
-      if (moduleUrl.startsWith(baseUrl)) {
-        // Add the module to preload if not already added
-        if (!modulesToPreload.has(moduleUrl)) {
-          // 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,
-            integrity,
-          });
-          debug(
-            `Added relative module for preload: %s with integrity %s`,
-            moduleUrl,
-            integrity,
-          );
-        }
-      }
-    }
-  }
-
-  return [
-    reactTransformPlugin(),
-
-    /**
-     * When a CDN module imports symbols from a local package (e.g., h, Fragment
-     * from preact), Vite/Rollup may tree-shake these exports if they're not used locally.
-     * This causes runtime errors when the CDN module tries to use these missing exports.
-     *
-     * This plugin creates virtual entry chunks that import and re-export exactly
-     * the symbols needed by CDN modules. By using emitFile with preserveSignature: "strict",
-     * we ensure these specific exports are preserved without modifying the original chunks.
-     */
-    {
-      name: "preserve-cdn-dependency-imports",
-
-      // When a module is parsed that matches one of the dependencies of our CDN bundle,
-      // create a virtual chunk for it to ensure its exports remain available
-      moduleParsed(moduleInfo) {
-        const match = [...cdnDependencyChunks.entries()].find(
-          ([, id]) => id === moduleInfo.id,
-        );
-        if (!match) return;
-
-        const [specifier] = match;
-        const exportList = cdnDependencies.get(specifier);
-
-        debug(
-          `Emitting virtual chunk for ${specifier} with exports: ${
-            exportList ? [...exportList].join(", ") : "none"
-          }`,
-        );
-
-        // create a virtual chunk that Rollup treats as an entry point,
-        // forcing exports to be preserved
-        this.emitFile({
-          type: "chunk",
-          id: `virtual:preserve-exports/${specifier}`,
-          // this option ensures that the modules' import/export signature remains unmodified
-          preserveSignature: "strict",
-        });
-      },
-
-      resolveId(id) {
-        if (id.startsWith("virtual:preserve-exports")) {
-          debug(`Resolving virtual export preservation module: ${id}`);
-          // return the id unchanged to handle it in the load hook
-          return id;
-        }
-
-        return null;
-      },
-
-      // Generate the content for our virtual export preservation modules
-      load(id) {
-        if (id.startsWith("virtual:preserve-exports/")) {
-          const parts = id.split("/");
-          const dependency = parts.slice(1).join("/");
-          const exports = cdnDependencies.get(dependency);
-
-          if (!exports || exports.size === 0) {
-            debug(`No exports to preserve for ${dependency}`);
-            return "";
-          }
-
-          const exportsList = Array.from(exports);
-          debug(
-            `Generating preservation module for ${dependency} with exports: ${exportsList.join(", ")}`,
-          );
-
-          return stripIndent`
-            import { ${commaLists`${exportsList}`} } from "${dependency}";
-            export { ${commaLists`${exportsList}`} };
-          `;
-        }
-
-        return null;
-      },
-    },
-
-    {
-      name: "vite-plugin-superblocks-cdn",
-
-      /**
-       * Configure Vite to properly handle CDN modules
-       * - Exclude CDN modules from optimization
-       * - Configure build for proper chunking and export preservation
-       */
-      config(_config: UserConfig, { mode: configuredMode }: ConfigEnv) {
-        mode = configuredMode;
-        debug(`Plugin initializing in ${mode} mode`);
-
-        // Exclude CDN imports from pre-bundling
-        // This prevents Vite from trying to resolve and optimize modules
-        // that will actually be loaded from CDN at runtime
-        const optimizeDepsExclude = [
-          ...(_config.optimizeDeps?.exclude || []),
-          ...Object.keys(initialImportMap),
-        ];
-
-        debug(
-          `Excluding CDN modules from optimization: ${optimizeDepsExclude.join(", ")}`,
-        );
-
-        return {
-          ..._config,
-          optimizeDeps: {
-            ..._config.optimizeDeps,
-            exclude: optimizeDepsExclude,
-          },
-          build: {
-            ..._config.build,
-            rollupOptions: {
-              ..._config.build?.rollupOptions,
-              output: {
-                ..._config.build?.rollupOptions?.output,
-                // Group all node_modules into a vendor chunk
-                manualChunks: (source) =>
-                  source.includes("node_modules") ? "vendor" : null,
-              },
-            },
-          },
-        };
-      },
-
-      configResolved(_config) {
-        config = _config;
-      },
-
-      async buildStart() {
-        // create an internal resolver to avoid calling this.resolve(),
-        // which would trigger most plugin hooks.
-        const resolver = createIdResolver(config);
-
-        // resolve all CDN dependencies to their local modules
-        for (const [dep] of cdnDependencies) {
-          if (cdnDependencyChunks.has(dep)) continue;
-
-          const resolved = await resolver(
-            this.environment as unknown as Environment,
-            dep,
-          );
-          if (!resolved) continue;
-
-          cdnDependencyChunks.set(dep, resolved);
-        }
-
-        debug("dependencies of CDN modules", cdnDependencyChunks);
-      },
-
-      resolveId(id, importer) {
-        // Build a graph of module relationships for later chunk resolution
-        // This is needed for mapping imports in the scopes section of the import map
-        if (importer) {
-          if (!moduleToImportsMap.has(importer)) {
-            moduleToImportsMap.set(importer, new Set());
-          }
-          moduleToImportsMap.get(importer)?.add(id);
-        }
-
-        // 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: `${shouldRedirectToCdn ? "cdn:" : ""}${id}`,
-            external: true,
-          };
-        }
-
-        return null;
-      },
-
-      /**
-       * Handle loading of externalized CDN modules
-       * 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 "";
-        }
-
-        // returning null here will cause Vite to continue with default behavior
-        return null;
-      },
-
-      // track which modules are bundled in which runtime chunk
-      generateBundle(_, bundle) {
-        const moduleToChunkMap = new Map();
-
-        for (const [fileName, chunk] of Object.entries(bundle)) {
-          if (chunk.type === "chunk" && chunk.modules) {
-            for (const moduleId in chunk.modules) {
-              moduleToChunkMap.set(moduleId, fileName);
-            }
-          }
-        }
-
-        // Map imports to chunks using our tracking data
-        for (const [moduleId, importIds] of moduleToImportsMap) {
-          const chunkName = moduleToChunkMap.get(moduleId);
-          if (chunkName) {
-            for (const importId of importIds) {
-              importToChunkMap.set(importId, chunkName);
-            }
-          }
-        }
-
-        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
-        // Important: Import maps require an "imports" object at the top level
-        const importMap = {
-          imports: {
-            ...Object.fromEntries(
-              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
-          scopes: { ...additionalScopes },
-        };
-
-        for (const [baseUrl, dependencies] of importMapModulesDependencies) {
-          if (dependencies.length === 0) continue;
-
-          // Create a scope for this remote URL if we found dependencies
-          importMap.scopes = importMap.scopes || {};
-          importMap.scopes[baseUrl] = importMap.scopes[baseUrl] || {};
-
-          debug(
-            `Creating scope for %s with %s dependencies`,
-            baseUrl,
-            dependencies.length,
-          );
-
-          const base = config.base ?? "/";
-
-          for (const moduleName of dependencies) {
-            let dependencyChunkUrl: string = "";
-
-            try {
-              if (isDevMode) {
-                // this.resolve is not available in this plugin hook
-                const mod =
-                  await server.moduleGraph.ensureEntryFromUrl(moduleName);
-
-                if (mod) {
-                  // Need to get a properly resolved path for the browser
-                  // For import maps to work correctly, the URL must be resolvable by the browser
-
-                  // First try to get the resolved URL from Vite
-                  let resolvedChunkUrl = "";
-
-                  // Use the module's resolved URL or its resolved ID
-                  if (mod.id) {
-                    // mod.id contains the full absolute path to the file, change to relative
-                    resolvedChunkUrl = mod.id.replace(server.config.root, "");
-                  }
-
-                  // 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
-                    dependencyChunkUrl = resolvedChunkUrl.startsWith(base)
-                      ? resolvedChunkUrl
-                      : `${base}${resolvedChunkUrl.slice(1)}`;
-                  } else if (resolvedChunkUrl.startsWith("http")) {
-                    // For absolute URLs, use them directly
-                    dependencyChunkUrl = resolvedChunkUrl;
-                  } else {
-                    // For other paths, prepend the base path
-                    dependencyChunkUrl = `${base}${resolvedChunkUrl}`;
-                  }
-                }
-              } else {
-                // Production mode approach
-                const chunkPath = importToChunkMap.get(moduleName);
-                if (chunkPath) {
-                  dependencyChunkUrl = `${base}${chunkPath}`;
-                } else if (wellKnownPackages.has(moduleName)) {
-                  dependencyChunkUrl = wellKnownPackages.get(moduleName)!;
-                }
-              }
-
-              if (dependencyChunkUrl === "") {
-                throw new Error("No module found for " + moduleName);
-              }
-            } catch (error) {
-              console.warn(`Failed to resolve module ${moduleName}: %O`, error);
-            } finally {
-              if (dependencyChunkUrl) {
-                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;
-              }
-            }
-          }
-        }
-
-        const importMapJson = JSON.stringify(importMap, null, 2);
-
-        debug(`Final generated import map:\n${importMapJson}`);
-
-        const script = `<script type="importmap">${importMapJson}</script>`;
-
-        // Generate preload links with integrity when available
-        const preloadLinks = Array.from(modulesToPreload.values())
-          .map((module) => {
-            const integrityAttr = module.integrity
-              ? ` integrity="${module.integrity}" crossorigin="anonymous"`
-              : "";
-            return `<link rel="modulepreload" href="${module.url}"${integrityAttr}>`;
-          })
-          .join("\n");
-
-        // Import map must come before preload links for proper module resolution
-        const combinedContent = preloadLinks
-          ? `${script}\n${preloadLinks}`
-          : script;
-
-        // Use the utility function to inject content after charset meta tag
-        const modifiedHtml = injectAfterCharset(
-          html,
-          combinedContent,
-          "Injecting import map and preload links after charset meta tag",
-        );
-
-        // Format the HTML and return
-        return await prettier.format(modifiedHtml, {
-          parser: "html",
-          embeddedLanguageFormatting: "auto",
-        });
-      },
-    } satisfies Plugin,
-
-    /**
-     * Injects CDN stylesheets into the HTML. CSS files are not supported in import maps,
-     * which is why we need a separate solution for it.
-     */
-    {
-      name: "inject-cdn-stylesheets",
-      transform(code) {
-        // Create a regex pattern for each CSS import to remove
-        // This allows for multiple CSS files to be imported
-        const cssImportPatterns = Object.keys(cssImports).map((key) => {
-          // Create a regex that matches imports for this key
-          // Escaping slashes and dots in the import path
-          const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-          return new RegExp(`import ["'](\.\.\/)*(${escapedKey})["'];?`, "g");
-        });
-
-        // Apply all patterns to the code
-        let transformedCode = code;
-        for (const pattern of cssImportPatterns) {
-          transformedCode = transformedCode.replace(pattern, "");
-        }
-
-        if (transformedCode !== code) {
-          debug("Removed CSS imports from code");
-          return transformedCode;
-        }
-
-        return code;
-      },
-
-      async transformIndexHtml(html) {
-        // Get cssImports from options, with a default empty object
-        const cssImportsMap = options.cssImports || {};
-
-        // Generate link tags for each CSS import
-        const cssLinks = Object.values(cssImportsMap)
-          .map((url) => `<link rel="stylesheet" href="${url}">\n`)
-          .join("");
-
-        if (!cssLinks) {
-          return await prettier.format(html, {
-            parser: "html",
-            embeddedLanguageFormatting: "auto",
-          });
-        }
-
-        // Use the shared utility function to inject CSS links
-        const modifiedHtml = injectAfterCharset(
-          html,
-          cssLinks,
-          `Injecting CSS links: ${cssLinks}`,
-        );
-
-        return await prettier.format(modifiedHtml, {
-          parser: "html",
-          embeddedLanguageFormatting: "auto",
-        });
-      },
-    },
-  ];
-}