@superblocksteam/sdk 1.14.2 → 2.0.3-next.46

package/dist/dev-utils/vite-plugin-sb-cdn.mjs

@@ -0,0 +1,720 @@
+import { commaLists, stripIndent } from "common-tags";
+import baseDebug from "debug";
+import { parse, init } from "es-module-lexer";
+import prettier from "prettier";
+import { createIdResolver, } from "vite";
+import { reactTransformPlugin } from "./vite-plugin-react-transform.mjs";
+// Create and extend the debug logger
+const debug = baseDebug("sb:sdk:vite-plugin-import-map");
+/**
+ * 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, contentToInject, debugMessage) {
+    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) {
+    // Safely handle different content types
+    let buffer;
+    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, 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) {
+    try {
+        // Initialize the lexer if it hasn't been initialized yet
+        await init;
+        const [imports] = parse(code);
+        const allImports = [];
+        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 = [];
+        const relative = [];
+        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: [] };
+    }
+}
+/**
+ * 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, url, visited = new Set(), visitedModules = new Map()) {
+    // Avoid circular dependencies
+    if (visited.has(url)) {
+        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) {
+    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(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, content) {
+    try {
+        // Initialize the lexer if it hasn't been initialized yet
+        await init;
+        const result = new Map();
+        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();
+    }
+}
+/**
+ * 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) {
+    const { imports: initialImportMap = {}, scopes: additionalScopes = {}, cssImports = {}, } = options;
+    let mode;
+    let config;
+    // 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();
+    // maps imports to chunks so we can resolve them in the import map
+    const importToChunkMap = new Map();
+    // tracks the dependencies of modules in the import map
+    const importMapModulesDependencies = new Map();
+    // tracks remote modules to preload with their content and integrity
+    const modulesToPreload = new Map();
+    // a map of imports required by CDN bundles, grouped by their import specifier
+    const cdnDependencies = new Map();
+    // a map tracking the chunks that CDN dependencies end up in, created in buildStart()
+    const cdnDependencyChunks = 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;
+            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
+                    const 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",
+            // run before Vite's module resolution
+            enforce: "pre",
+            /**
+             * Configure Vite to properly handle CDN modules
+             * - Exclude CDN modules from optimization
+             * - Configure build for proper chunking and export preservation
+             */
+            config(_config, { mode: configuredMode }) {
+                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, dep);
+                    if (!resolved)
+                        continue;
+                    cdnDependencyChunks.set(dep, resolved);
+                }
+            },
+            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)) {
+                    debug(`Externalizing module for CDN resolution: ${id}`);
+                    return { id: `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) {
+                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);
+                        }
+                    }
+                }
+            },
+            async transformIndexHtml(html, { server }) {
+                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]) => [
+                            `${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 = "";
+                        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}`;
+                                }
+                            }
+                            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;
+                            }
+                        }
+                    }
+                }
+                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",
+                });
+            },
+        },
+        /**
+         * 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",
+                });
+            },
+        },
+    ];
+}
+//# sourceMappingURL=vite-plugin-sb-cdn.mjs.map