vite-plugin-cross-origin-storage 1.3.11 → 1.3.13

package/README.md

@@ -1,16 +1,25 @@
 # vite-plugin-cross-origin-storage
 
-A Vite plugin to cache and load static assets (chunks) using the [Cross-Origin Storage (COS) API](https://github.com/WICG/cross-origin-storage).
+A Vite plugin to cache and load static assets (chunks) using the
+[Cross-Origin Storage (COS) API](https://github.com/WICG/cross-origin-storage).
 
-This plugin progressively enhances your application by attempting to load vendor chunks and other assets from a shared Cross-Origin Storage, reducing bandwidth usage and improving load times across different sites that share common dependencies.
+This plugin progressively enhances your application by attempting to load vendor
+chunks and other assets from a shared Cross-Origin Storage, reducing bandwidth
+usage and improving load times across different sites that share common
+dependencies.
 
 ## Features
 
-- **Automatic Import Rewriting**: Rewrites static imports to use COS-loaded Blob URLs when available.
-- **Network Fallback**: Gracefully falls back to standard network requests if COS is unavailable or the asset is missing.
-- **Smart Caching**: Automatically stores fetched assets into COS for future use.
-- **Configurable**: Easily include or exclude specific chunks using glob patterns.
-- **Runtime Loader**: Injects a lightweight loader to handle COS interactions transparently.
+- **Automatic Import Rewriting**: Rewrites static imports to use COS-loaded Blob
+  URLs when available.
+- **Network Fallback**: Gracefully falls back to standard network requests if
+  COS is unavailable or the asset is missing.
+- **Smart Caching**: Automatically stores fetched assets into COS for future
+  use.
+- **Configurable**: Easily include or exclude specific chunks using glob
+  patterns.
+- **Runtime Loader**: Injects a lightweight loader to handle COS interactions
+  transparently.
 
 ## Installation
 
@@ -38,14 +47,16 @@ export default defineConfig({
 
 ## Configuration
 
-| Option | Type | Default | Description |
-| :--- | :--- | :--- | :--- |
-| `include` | `string \| RegExp \| Array` | `['**/*']` | Pattern to include chunks to be managed by COS. |
-| `exclude` | `string \| RegExp \| Array` | `undefined` | Pattern to exclude chunks from being managed. |
+| Option    | Type                        | Default     | Description                                     |
+| :-------- | :-------------------------- | :---------- | :---------------------------------------------- |
+| `include` | `string \| RegExp \| Array` | `['**/*']`  | Pattern to include chunks to be managed by COS. |
+| `exclude` | `string \| RegExp \| Array` | `undefined` | Pattern to exclude chunks from being managed.   |
 
 ## Recipe: Granular Vendor Splitting
 
-To maximize caching benefits, it is recommended to split your `node_modules` dependencies into separate chunks. This ensures that updates to one package (e.g., `react`) do not invalidate the cache for others (e.g., `lodash`).
+To maximize caching benefits, it is recommended to split your `node_modules`
+dependencies into separate chunks. This ensures that updates to one package
+(e.g., `react`) do not invalidate the cache for others (e.g., `lodash`).
 
 Add the following `manualChunks` configuration to your `vite.config.ts`:
 
@@ -64,7 +75,9 @@ export default defineConfig({
             // e.g. "node_modules/react/..." -> "vendor-react"
             // e.g. "node_modules/@scope/pkg/..." -> "vendor-scope-pkg"
             const parts = id.split('node_modules/')[1].split('/');
-            const packageName = parts[0].startsWith('@') ? `${parts[0]}/${parts[1]}` : parts[0];
+            const packageName = parts[0].startsWith('@')
+              ? `${parts[0]}/${parts[1]}`
+              : parts[0];
             return `vendor-${packageName.replace('@', '').replace('/', '-')}`;
           }
         },
@@ -83,21 +96,30 @@ export default defineConfig({
 ## How It Works
 
 1. **Build Time**:
-   - The plugin analyzes your bundle and identifies chunks matching the `include` pattern.
+   - The plugin analyzes your bundle and identifies chunks matching the
+     `include` pattern.
    - It generates a stable hash for each managed chunk.
-   - It rewrites imports in your code to look for a global variable (e.g., `window.__COS_CHUNK_...`) containing the Blob URL of the chunk, falling back to the relative network path if the variable is unset.
-   - It disables the default `<script type="module" src="...">` entry point in your `index.html` and injects a custom `loader.js`.
+   - It rewrites imports in your code to look for a global variable (e.g.,
+     `window.__COS_CHUNK_...`) containing the Blob URL of the chunk, falling
+     back to the relative network path if the variable is unset.
+   - It disables the default `<script type="module" src="...">` entry point in
+     your `index.html` and injects a custom `loader.js`.
 
 2. **Runtime**:
    - The injected loader checks for `navigator.crossOriginStorage`.
-   - If supported, it requests the file handle for each managed chunk using its hash.
-   - **Cache Hit**: If found, it creates a Blob URL and assigns it to the corresponding global variable.
-   - **Cache Miss**: If not found, it fetches the file from the network, stores it in COS, and then creates the Blob URL.
-   - Finally, the loader imports your application's entry point, which now seamlessly uses the cached assets.
+   - If supported, it requests the file handle for each managed chunk using its
+     hash.
+   - **Cache Hit**: If found, it creates a Blob URL and assigns it to the
+     corresponding global variable.
+   - **Cache Miss**: If not found, it fetches the file from the network, stores
+     it in COS, and then creates the Blob URL.
+   - Finally, the loader imports your application's entry point, which now
+     seamlessly uses the cached assets.
 
 ## Requirements
 
-- A browser with `Cross-Origin Storage` support (or a [browser extension](https://chromewebstore.google.com/detail/cross-origin-storage/denpnpcgjgikjpoglpjefakmdcbmlgih)).
+- A browser with `Cross-Origin Storage` support (or a
+  [browser extension](https://chromewebstore.google.com/detail/cross-origin-storage/denpnpcgjgikjpoglpjefakmdcbmlgih)).
 
 ## License
 

package/dist/index.js

@@ -1651,7 +1651,9 @@ function cosPlugin(options = {}) {
             mainChunk = chunk;
           } else {
             const res = filter(fileName);
-            console.log(`COS Plugin: [FILTER] ${fileName} -> ${res ? "INCLUDE" : "SKIP"}`);
+            console.log(
+              `COS Plugin: [FILTER] ${fileName} -> ${res ? "INCLUDE" : "SKIP"}`
+            );
             if (res) {
               managedChunks[fileName] = chunk;
             }
@@ -1662,7 +1664,9 @@ function cosPlugin(options = {}) {
         }
       }
       if (mainChunk) {
-        const allChunks = Object.values(bundle).filter((c) => c.type === "chunk");
+        const allChunks = Object.values(bundle).filter(
+          (c) => c.type === "chunk"
+        );
         const managedChunkNames = new Set(Object.keys(managedChunks));
         const managedChunkInfo = {};
         for (const fileName in managedChunks) {
@@ -1682,26 +1686,25 @@ function cosPlugin(options = {}) {
             if (isTargetManaged || isDepManaged) {
               let relPath = path.relative(importerDir, depFileName);
               if (!relPath.startsWith(".")) relPath = "./" + relPath;
-              const escapedRelPath = relPath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+              const escapedRelPath = relPath.replace(
+                /[.*+?^${}()|[\]\\]/g,
+                "\\$&"
+              );
               const bareSpecifier = depFileName;
-              const staticPattern = `import\\s*(?:(?:\\{\\s*([^}]+)\\s*\\}|\\*\\s+as\\s+([^\\s]+)|([^\\s\\{\\}]+))\\s*from\\s*)?['"]${escapedRelPath}['"];?`;
+              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, named, namespace, defaultImport) => {
-                if (named) return `import {${named}} from "${bareSpecifier}";`;
-                if (namespace) return `import * as ${namespace} from "${bareSpecifier}";`;
-                if (defaultImport) return `import ${defaultImport} from "${bareSpecifier}";`;
-                return `import "${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}")`);
-              const exportPattern = `export\\s*(?:(?:\\{\\s*([^}]+)\\s*\\}|\\*\\s*(?:as\\s+([^\\s]+))?))\\s*from\\s*['"]${escapedRelPath}['"];?`;
-              const exportRegex = new RegExp(exportPattern, "g");
-              targetChunk.code = targetChunk.code.replace(exportRegex, (_match, named, namespace) => {
-                if (named) return `export {${named}} from "${bareSpecifier}";`;
-                if (namespace) return `export * as ${namespace} from "${bareSpecifier}";`;
-                return `export * from "${bareSpecifier}";`;
-              });
+              targetChunk.code = targetChunk.code.replace(
+                dynamicRegex,
+                () => `import("${bareSpecifier}")`
+              );
             }
           }
         }
@@ -1725,7 +1728,10 @@ function cosPlugin(options = {}) {
         if (htmlAsset) {
           try {
             let loaderCode = fs.readFileSync(loaderPath, "utf-8");
-            loaderCode = loaderCode.replace("__COS_MANIFEST__", JSON.stringify(manifest));
+            loaderCode = loaderCode.replace(
+              "__COS_MANIFEST__",
+              JSON.stringify(manifest)
+            );
             let htmlSource = htmlAsset.source;
             htmlSource = htmlSource.replace(
               /<link\s+[^>]*rel=["']modulepreload["'][^>]*>/gi,

package/dist/loader.js

@@ -1,5 +1,5 @@
 (async function () {
-  await new Promise(resolve => setTimeout(resolve, 100));
+  await new Promise((resolve) => setTimeout(resolve, 100));
 
   const isCOSAvailable = 'crossOriginStorage' in navigator;
   console.log('COS Loader: isCOSAvailable =', isCOSAvailable);
@@ -15,7 +15,7 @@
   }
 
   // Identify managed chunks (anything with a hash)
-  const chunksToLoad = Object.values(manifest).filter(item => item.hash);
+  const chunksToLoad = Object.values(manifest).filter((item) => item.hash);
 
   async function getBlobFromCOS(hash) {
     if (!isCOSAvailable) return null;
@@ -27,7 +27,8 @@
         return await handles[0].getFile();
       }
     } catch (err) {
-      if (err.name !== 'NotFoundError') console.error('COS Loader: Error checking COS', err);
+      if (err.name !== 'NotFoundError')
+        console.error('COS Loader: Error checking COS', err);
     }
     return null;
   }
@@ -58,48 +59,69 @@
     // Longest prefix wins in Import Maps, so specific managed entries below take precedence.
     // We assume all chunks are in the same relative directory as the managed ones.
     const firstChunk = chunksToLoad[0];
-    const assetsDir = firstChunk.fileName.substring(0, firstChunk.fileName.lastIndexOf('/') + 1);
-    const assetsUrl = firstChunk.file.substring(0, firstChunk.file.lastIndexOf('/') + 1);
+    const assetsDir = firstChunk.fileName.substring(
+      0,
+      firstChunk.fileName.lastIndexOf('/') + 1
+    );
+    const assetsUrl = firstChunk.file.substring(
+      0,
+      firstChunk.file.lastIndexOf('/') + 1
+    );
     if (assetsDir && assetsUrl) {
       importMap.imports[assetsDir] = assetsUrl;
     }
 
-    await Promise.all(chunksToLoad.map(async (chunk) => {
-      let url = null;
+    await Promise.all(
+      chunksToLoad.map(async (chunk) => {
+        let url = null;
 
-      const cosBlob = await getBlobFromCOS(chunk.hash);
-      if (cosBlob) {
-        console.log(`COS Loader: Loaded ${chunk.file} from COS!`);
-        url = URL.createObjectURL(new Blob([cosBlob], { type: 'application/javascript' }));
-      } else {
-        console.log(`COS Loader: ${chunk.file} not in COS, fetching...`);
-        try {
-          const response = await fetch(chunk.file);
-          if (response.ok) {
-            const blob = await response.blob();
-            url = URL.createObjectURL(new Blob([blob], { type: 'application/javascript' }));
-            // Store in COS for next time
-            storeBlobInCOS(blob, chunk.hash);
-          } else {
-            console.error(`COS Loader: Fetch failed with status ${response.status}`);
+        const cosBlob = await getBlobFromCOS(chunk.hash);
+        if (cosBlob) {
+          console.log(`COS Loader: Loaded ${chunk.file} from COS!`);
+          url = URL.createObjectURL(
+            new Blob([cosBlob], { type: 'text/javascript' })
+          );
+        } else {
+          console.log(`COS Loader: ${chunk.file} not in COS, fetching...`);
+          try {
+            const response = await fetch(chunk.file);
+            if (response.ok) {
+              const blob = await response.blob();
+              url = URL.createObjectURL(
+                new Blob([blob], { type: 'text/javascript' })
+              );
+              // Store in COS for next time
+              storeBlobInCOS(blob, chunk.hash);
+            } else {
+              console.error(
+                `COS Loader: Fetch failed with status ${response.status}`
+              );
+            }
+          } catch (e) {
+            console.error(
+              `COS Loader: Network fetch failed for ${chunk.file}`,
+              e
+            );
           }
-        } catch (e) {
-          console.error(`COS Loader: Network fetch failed for ${chunk.file}`, e);
         }
-      }
 
-      if (url) {
-        // Map the bare specifier and absolute path directly to the Blob URL.
-        // This avoids the indirection of a Data URL shim and handles cycles naturally.
-        importMap.imports[chunk.fileName] = url;
-        importMap.imports[chunk.file] = url;
+        if (url) {
+          // Use a Data URL shim to decouple the import graph.
+          // This ensures that the circular dependency between React and React-DOM
+          // doesn't cause a lockout/deadlock during the module graph instantiation.
+          const shim = `export * from "${url}";${chunk.hasDefault ? `export { default } from "${url}";` : ''}`;
+          const shimUrl = `data:text/javascript;base64,${btoa(shim)}`;
+
+          importMap.imports[chunk.fileName] = shimUrl;
+          importMap.imports[chunk.file] = shimUrl;
 
-        // Also set global if anyone still needs it (legacy)
-        if (chunk.globalVar) {
-          window[chunk.globalVar] = url;
+          // Also set global if anyone still needs it (legacy)
+          if (chunk.globalVar) {
+            window[chunk.globalVar] = url;
+          }
         }
-      }
-    }));
+      })
+    );
 
     // Inject the importmap
     if (Object.keys(importMap.imports).length > 0) {
@@ -113,6 +135,8 @@
   // Start App
   try {
     console.log('COS Loader: Starting app...');
+    // Ensure the importmap is registered before importing
+    await new Promise((resolve) => setTimeout(resolve, 0));
     await import(mainEntry.file);
   } catch (err) {
     console.error('COS Loader: Failed to start app', err);

package/loader.js

@@ -1,5 +1,5 @@
 (async function () {
-  await new Promise(resolve => setTimeout(resolve, 100));
+  await new Promise((resolve) => setTimeout(resolve, 100));
 
   const isCOSAvailable = 'crossOriginStorage' in navigator;
   console.log('COS Loader: isCOSAvailable =', isCOSAvailable);
@@ -15,7 +15,7 @@
   }
 
   // Identify managed chunks (anything with a hash)
-  const chunksToLoad = Object.values(manifest).filter(item => item.hash);
+  const chunksToLoad = Object.values(manifest).filter((item) => item.hash);
 
   async function getBlobFromCOS(hash) {
     if (!isCOSAvailable) return null;
@@ -27,7 +27,8 @@
         return await handles[0].getFile();
       }
     } catch (err) {
-      if (err.name !== 'NotFoundError') console.error('COS Loader: Error checking COS', err);
+      if (err.name !== 'NotFoundError')
+        console.error('COS Loader: Error checking COS', err);
     }
     return null;
   }
@@ -58,48 +59,69 @@
     // Longest prefix wins in Import Maps, so specific managed entries below take precedence.
     // We assume all chunks are in the same relative directory as the managed ones.
     const firstChunk = chunksToLoad[0];
-    const assetsDir = firstChunk.fileName.substring(0, firstChunk.fileName.lastIndexOf('/') + 1);
-    const assetsUrl = firstChunk.file.substring(0, firstChunk.file.lastIndexOf('/') + 1);
+    const assetsDir = firstChunk.fileName.substring(
+      0,
+      firstChunk.fileName.lastIndexOf('/') + 1
+    );
+    const assetsUrl = firstChunk.file.substring(
+      0,
+      firstChunk.file.lastIndexOf('/') + 1
+    );
     if (assetsDir && assetsUrl) {
       importMap.imports[assetsDir] = assetsUrl;
     }
 
-    await Promise.all(chunksToLoad.map(async (chunk) => {
-      let url = null;
+    await Promise.all(
+      chunksToLoad.map(async (chunk) => {
+        let url = null;
 
-      const cosBlob = await getBlobFromCOS(chunk.hash);
-      if (cosBlob) {
-        console.log(`COS Loader: Loaded ${chunk.file} from COS!`);
-        url = URL.createObjectURL(new Blob([cosBlob], { type: 'application/javascript' }));
-      } else {
-        console.log(`COS Loader: ${chunk.file} not in COS, fetching...`);
-        try {
-          const response = await fetch(chunk.file);
-          if (response.ok) {
-            const blob = await response.blob();
-            url = URL.createObjectURL(new Blob([blob], { type: 'application/javascript' }));
-            // Store in COS for next time
-            storeBlobInCOS(blob, chunk.hash);
-          } else {
-            console.error(`COS Loader: Fetch failed with status ${response.status}`);
+        const cosBlob = await getBlobFromCOS(chunk.hash);
+        if (cosBlob) {
+          console.log(`COS Loader: Loaded ${chunk.file} from COS!`);
+          url = URL.createObjectURL(
+            new Blob([cosBlob], { type: 'text/javascript' })
+          );
+        } else {
+          console.log(`COS Loader: ${chunk.file} not in COS, fetching...`);
+          try {
+            const response = await fetch(chunk.file);
+            if (response.ok) {
+              const blob = await response.blob();
+              url = URL.createObjectURL(
+                new Blob([blob], { type: 'text/javascript' })
+              );
+              // Store in COS for next time
+              storeBlobInCOS(blob, chunk.hash);
+            } else {
+              console.error(
+                `COS Loader: Fetch failed with status ${response.status}`
+              );
+            }
+          } catch (e) {
+            console.error(
+              `COS Loader: Network fetch failed for ${chunk.file}`,
+              e
+            );
           }
-        } catch (e) {
-          console.error(`COS Loader: Network fetch failed for ${chunk.file}`, e);
         }
-      }
 
-      if (url) {
-        // Map the bare specifier and absolute path directly to the Blob URL.
-        // This avoids the indirection of a Data URL shim and handles cycles naturally.
-        importMap.imports[chunk.fileName] = url;
-        importMap.imports[chunk.file] = url;
+        if (url) {
+          // Use a Data URL shim to decouple the import graph.
+          // This ensures that the circular dependency between React and React-DOM
+          // doesn't cause a lockout/deadlock during the module graph instantiation.
+          const shim = `export * from "${url}";${chunk.hasDefault ? `export { default } from "${url}";` : ''}`;
+          const shimUrl = `data:text/javascript;base64,${btoa(shim)}`;
+
+          importMap.imports[chunk.fileName] = shimUrl;
+          importMap.imports[chunk.file] = shimUrl;
 
-        // Also set global if anyone still needs it (legacy)
-        if (chunk.globalVar) {
-          window[chunk.globalVar] = url;
+          // Also set global if anyone still needs it (legacy)
+          if (chunk.globalVar) {
+            window[chunk.globalVar] = url;
+          }
         }
-      }
-    }));
+      })
+    );
 
     // Inject the importmap
     if (Object.keys(importMap.imports).length > 0) {
@@ -113,6 +135,8 @@
   // Start App
   try {
     console.log('COS Loader: Starting app...');
+    // Ensure the importmap is registered before importing
+    await new Promise((resolve) => setTimeout(resolve, 0));
     await import(mainEntry.file);
   } catch (err) {
     console.error('COS Loader: Failed to start app', err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-cross-origin-storage",
-  "version": "1.3.11",
+  "version": "1.3.13",
   "description": "Vite plugin to load chunks from Cross-Origin Storage",
   "keywords": [
     "vite",