vite-plugin-cross-origin-storage 1.3.24 → 1.4.1

package/dist/index.js

@@ -1619,7 +1619,7 @@ var hasStringIsWellFormed = "isWellFormed" in String.prototype;
 
 // index.ts
 function cosPlugin(options = {}) {
-  const filter = createFilter(options.include || ["**/*"], options.exclude);
+  const filter = options.include || options.exclude ? createFilter(options.include || ["**/*"], options.exclude, { resolve: false }) : () => true;
   const __dirname = path.dirname(fileURLToPath(import.meta.url));
   const loaderPath = path.resolve(__dirname, "./loader.js");
   let config;
@@ -1650,9 +1650,9 @@ function cosPlugin(options = {}) {
             console.log(`COS Plugin: [ENTRY] ${fileName}`);
             mainChunk = chunk;
           } else {
-            const res = filter(fileName);
+            const res = filter(fileName) || filter(chunk.name);
             console.log(
-              `COS Plugin: [FILTER] ${fileName} -> ${res ? "INCLUDE" : "SKIP"}`
+              `COS Plugin: [FILTER] ${fileName} (name: ${chunk.name}) -> ${res ? "INCLUDE" : "SKIP"}`
             );
             if (res) {
               managedChunks[fileName] = chunk;
@@ -1668,19 +1668,13 @@ function cosPlugin(options = {}) {
           (c) => c.type === "chunk"
         );
         const managedChunkNames = new Set(Object.keys(managedChunks));
+        const unmanagedDependencies = /* @__PURE__ */ new Set();
         const base = config.base.endsWith("/") ? config.base : config.base + "/";
-        const managedChunkInfo = {};
-        for (const fileName in managedChunks) {
-          const nameHash = crypto.createHash("sha256").update(fileName).digest("hex").substring(0, 8);
-          managedChunkInfo[fileName] = {
-            globalVar: `__COS_CHUNK_${nameHash}__`,
-            chunk: managedChunks[fileName]
-          };
-        }
         for (const targetChunk of allChunks) {
           const isTargetManaged = managedChunkNames.has(targetChunk.fileName);
           const importerDir = path.dirname(targetChunk.fileName);
-          for (const depFileName in bundle) {
+          const deps = [...targetChunk.imports, ...targetChunk.dynamicImports];
+          for (const depFileName of deps) {
             const depChunk = bundle[depFileName];
             if (!depChunk || depChunk.type !== "chunk") continue;
             const isDepManaged = managedChunkNames.has(depFileName);
@@ -1694,45 +1688,38 @@ function cosPlugin(options = {}) {
               const bareSpecifier = `coschunk-${depFileName.replace(/\//g, "-")}`;
               const staticPattern = `(import|export)\\b\\s*((?:(?!\\bimport\\b|\\bexport\\b)[\\s\\S])*?\\bfrom\\b\\s*)?['"]${escapedRelPath}['"]\\s*;?`;
               const staticRegex = new RegExp(staticPattern, "g");
-              targetChunk.code = targetChunk.code.replace(
-                staticRegex,
-                (match, keyword, fromPart) => {
-                  return `${keyword}${fromPart ? " " + fromPart : " "}"${bareSpecifier}";`;
-                }
-              );
+              targetChunk.code = targetChunk.code.replace(staticRegex, (match, keyword, fromPart) => {
+                return `${keyword}${fromPart ? " " + fromPart : " "}"${bareSpecifier}";`;
+              });
               const dynamicPattern = `import\\s*\\(\\s*['"]${escapedRelPath}['"]\\s*\\)`;
               const dynamicRegex = new RegExp(dynamicPattern, "g");
               targetChunk.code = targetChunk.code.replace(
                 dynamicRegex,
                 () => `import("${bareSpecifier}")`
               );
+              if (!isDepManaged) {
+                unmanagedDependencies.add(depFileName);
+              }
             }
           }
         }
-        const manifest = {};
-        for (const fileName in managedChunkInfo) {
-          const { chunk, globalVar } = managedChunkInfo[fileName];
+        const manifest = {
+          base,
+          entry: mainChunk.fileName,
+          chunks: {}
+        };
+        for (const fileName in managedChunks) {
+          const chunk = managedChunks[fileName];
           const finalHash = crypto.createHash("sha256").update(chunk.code).digest("hex");
-          const hasDefault = chunk.exports.includes("default");
-          manifest[fileName] = {
-            fileName,
-            file: `${base}${fileName}`,
-            hash: finalHash,
-            globalVar,
-            hasDefault
-          };
+          manifest.chunks[fileName] = finalHash;
         }
-        const entryFileName = mainChunk.fileName;
-        manifest["index"] = {
-          fileName: entryFileName,
-          file: `${base}${entryFileName}`
-        };
+        manifest.unmanaged = Array.from(unmanagedDependencies);
         if (htmlAsset) {
           try {
             let loaderCode = fs.readFileSync(loaderPath, "utf-8");
             loaderCode = loaderCode.replace(
               "__COS_MANIFEST__",
-              JSON.stringify(manifest)
+              JSON.stringify(manifest, null, 2)
             );
             let htmlSource = htmlAsset.source;
             htmlSource = htmlSource.replace(

package/dist/loader.js

@@ -6,14 +6,20 @@
   // @ts-ignore
   const manifest = __COS_MANIFEST__;
 
-  const mainEntry = manifest && manifest['index'];
+  const { base, entry, chunks } = manifest;
+  const mainEntry = entry;
+
   if (!mainEntry) {
-    console.warn('COS Loader: Missing main entry in manifest.');
+    console.warn('COS Loader: Missing entry in manifest.');
     return;
   }
 
-  // Identify managed chunks (anything with a hash)
-  const chunksToLoad = Object.values(manifest).filter((item) => item.hash);
+  // Identify managed chunks
+  const chunksToLoad = Object.entries(chunks || {}).map(([fileName, hash]) => ({
+    fileName,
+    hash,
+    file: `${base}${fileName}`,
+  }));
 
   async function getBlobFromCOS(hash) {
     if (!isCOSAvailable) return null;
@@ -51,12 +57,17 @@
 
   async function getChunkDataUrl(chunk) {
     let blob = await getBlobFromCOS(chunk.hash);
+    if (blob) {
+      console.log(`COS Loader: ${chunk.fileName} found in COS`);
+      blob = new Blob([blob], { type: 'text/javascript' });
+    }
     if (!blob) {
       console.log(`COS Loader: ${chunk.file} not in COS, fetching...`);
       try {
         const resp = await fetch(chunk.file);
         if (!resp.ok) throw new Error(`Status ${resp.status}`);
-        blob = await resp.blob();
+        const rawBlob = await resp.blob();
+        blob = new Blob([rawBlob], { type: 'text/javascript' });
         await storeBlobInCOS(blob, chunk.hash);
       } catch (e) {
         console.error(`COS Loader: Failed to fetch ${chunk.file}`, e);
@@ -64,12 +75,10 @@
       }
     }
 
-    // Convert blob to Data URL
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.onloadend = () => resolve(reader.result);
-      reader.readAsDataURL(blob);
-    });
+    // Convert blob to Blob URL
+    // Blob URLs are synchronous and share the page origin,
+    // which helps with module resolution in complex graphs.
+    return URL.createObjectURL(blob);
   }
 
   // Initialize
@@ -78,6 +87,14 @@
 
     // Resolve all chunks to Data URLs
     const importMap = { imports: {} };
+
+    // Set up unmanaged dependencies correctly so Data URLs can resolve them.
+    for (const fileName of manifest.unmanaged || []) {
+      const bareSpecifier = `coschunk-${fileName.replace(/\//g, '-')}`;
+      importMap.imports[bareSpecifier] = window.location.origin + base + fileName;
+    }
+
+    console.log(`COS Loader: Loading ${chunksToLoad.length} chunks...`);
     const loadPromises = chunksToLoad.map(async (chunk) => {
       const dataUrl = await getChunkDataUrl(chunk);
       if (dataUrl) {
@@ -93,19 +110,22 @@
     // Inject Import Map
     const script = document.createElement('script');
     script.type = 'importmap';
-    script.textContent = JSON.stringify(importMap);
+    script.textContent = JSON.stringify(importMap, null, 2);
     document.head.appendChild(script);
 
     console.log('COS Loader: Import Map injected');
 
     // Import the main entry.
-    // If the entry itself were managed, we would use cos-chunk: prefix here too.
-    // For now, it's loaded via its absolute path from the server,
-    // and its internal imports (rewritten by the plugin) will use cos-chunk:
-    const entryUrl = mainEntry.file;
-    await import(entryUrl);
+    const entryUrl = `${base}${mainEntry}`;
 
+    // Small delay to ensure the browser has fully registered the 
+    // import map before resolving the first module.
+    setTimeout(() => {
+      import(entryUrl).catch((err) => {
+        console.error('COS Loader: Failed to start app', err);
+      });
+    }, 0);
   } catch (err) {
-    console.error('COS Loader: Failed to start app', err);
+    console.error('COS Loader: Initialization failed', err);
   }
 })();

package/loader.js

@@ -6,14 +6,20 @@
   // @ts-ignore
   const manifest = __COS_MANIFEST__;
 
-  const mainEntry = manifest && manifest['index'];
+  const { base, entry, chunks } = manifest;
+  const mainEntry = entry;
+
   if (!mainEntry) {
-    console.warn('COS Loader: Missing main entry in manifest.');
+    console.warn('COS Loader: Missing entry in manifest.');
     return;
   }
 
-  // Identify managed chunks (anything with a hash)
-  const chunksToLoad = Object.values(manifest).filter((item) => item.hash);
+  // Identify managed chunks
+  const chunksToLoad = Object.entries(chunks || {}).map(([fileName, hash]) => ({
+    fileName,
+    hash,
+    file: `${base}${fileName}`,
+  }));
 
   async function getBlobFromCOS(hash) {
     if (!isCOSAvailable) return null;
@@ -51,12 +57,17 @@
 
   async function getChunkDataUrl(chunk) {
     let blob = await getBlobFromCOS(chunk.hash);
+    if (blob) {
+      console.log(`COS Loader: ${chunk.fileName} found in COS`);
+      blob = new Blob([blob], { type: 'text/javascript' });
+    }
     if (!blob) {
       console.log(`COS Loader: ${chunk.file} not in COS, fetching...`);
       try {
         const resp = await fetch(chunk.file);
         if (!resp.ok) throw new Error(`Status ${resp.status}`);
-        blob = await resp.blob();
+        const rawBlob = await resp.blob();
+        blob = new Blob([rawBlob], { type: 'text/javascript' });
         await storeBlobInCOS(blob, chunk.hash);
       } catch (e) {
         console.error(`COS Loader: Failed to fetch ${chunk.file}`, e);
@@ -64,12 +75,10 @@
       }
     }
 
-    // Convert blob to Data URL
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.onloadend = () => resolve(reader.result);
-      reader.readAsDataURL(blob);
-    });
+    // Convert blob to Blob URL
+    // Blob URLs are synchronous and share the page origin,
+    // which helps with module resolution in complex graphs.
+    return URL.createObjectURL(blob);
   }
 
   // Initialize
@@ -78,6 +87,14 @@
 
     // Resolve all chunks to Data URLs
     const importMap = { imports: {} };
+
+    // Set up unmanaged dependencies correctly so Data URLs can resolve them.
+    for (const fileName of manifest.unmanaged || []) {
+      const bareSpecifier = `coschunk-${fileName.replace(/\//g, '-')}`;
+      importMap.imports[bareSpecifier] = window.location.origin + base + fileName;
+    }
+
+    console.log(`COS Loader: Loading ${chunksToLoad.length} chunks...`);
     const loadPromises = chunksToLoad.map(async (chunk) => {
       const dataUrl = await getChunkDataUrl(chunk);
       if (dataUrl) {
@@ -93,19 +110,22 @@
     // Inject Import Map
     const script = document.createElement('script');
     script.type = 'importmap';
-    script.textContent = JSON.stringify(importMap);
+    script.textContent = JSON.stringify(importMap, null, 2);
     document.head.appendChild(script);
 
     console.log('COS Loader: Import Map injected');
 
     // Import the main entry.
-    // If the entry itself were managed, we would use cos-chunk: prefix here too.
-    // For now, it's loaded via its absolute path from the server,
-    // and its internal imports (rewritten by the plugin) will use cos-chunk:
-    const entryUrl = mainEntry.file;
-    await import(entryUrl);
+    const entryUrl = `${base}${mainEntry}`;
 
+    // Small delay to ensure the browser has fully registered the 
+    // import map before resolving the first module.
+    setTimeout(() => {
+      import(entryUrl).catch((err) => {
+        console.error('COS Loader: Failed to start app', err);
+      });
+    }, 0);
   } catch (err) {
-    console.error('COS Loader: Failed to start app', err);
+    console.error('COS Loader: Initialization failed', err);
   }
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-cross-origin-storage",
-  "version": "1.3.24",
+  "version": "1.4.1",
   "description": "Vite plugin to load chunks from Cross-Origin Storage",
   "keywords": [
     "vite",
@@ -36,7 +36,10 @@
   ],
   "scripts": {
     "build": "tsup index.ts --format esm --dts --clean && cp loader.js dist/",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test:dev": "npm run build && vite testing",
+    "test:build": "npm run build && vite build testing",
+    "test:preview": "vite preview testing"
   },
   "peerDependencies": {
     "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"