vite-plugin-cross-origin-storage 1.2.0 → 1.3.1

package/README.md

@@ -43,6 +43,43 @@ export default defineConfig({
 | `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`).
+
+Add the following `manualChunks` configuration to your `vite.config.ts`:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import cosPlugin from 'vite-plugin-cross-origin-storage';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            // Split each package into its own chunk
+            // 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];
+            return `vendor-${packageName.replace('@', '').replace('/', '-')}`;
+          }
+        },
+      },
+    },
+  },
+  plugins: [
+    cosPlugin({
+      // Only manage these vendor chunks with COS
+      include: ['**/vendor-*'],
+    }),
+  ],
+});
+```
+
 ## How It Works
 
 1. **Build Time**:

package/dist/index.js

@@ -1621,7 +1621,7 @@ var hasStringIsWellFormed = "isWellFormed" in String.prototype;
 function cosPlugin(options = {}) {
   const filter = createFilter(options.include || ["**/*"], options.exclude);
   const __dirname = path.dirname(fileURLToPath(import.meta.url));
-  const loaderPath = path.resolve(__dirname, "loader.js");
+  const loaderPath = path.resolve(__dirname, "./loader.js");
   return {
     name: "vite-plugin-cos",
     apply: "build",

package/dist/loader.js

@@ -0,0 +1,94 @@
+(async function () {
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  const isCOSAvailable = 'crossOriginStorage' in navigator;
+  console.log('COS Loader: isCOSAvailable =', isCOSAvailable);
+
+  // Manifest is injected by the Vite plugin
+  // @ts-ignore
+  const manifest = __COS_MANIFEST__;
+
+  const mainEntry = manifest && manifest['index'];
+  if (!mainEntry) {
+    console.warn('COS Loader: Missing main entry in manifest.');
+    return;
+  }
+
+  // Identify managed chunks (anything with a hash)
+  const chunksToLoad = Object.values(manifest).filter(item => item.hash);
+
+  async function getBlobFromCOS(hash) {
+    if (!isCOSAvailable) return null;
+    try {
+      const handles = await navigator.crossOriginStorage.requestFileHandles([
+        { algorithm: 'SHA-256', value: hash },
+      ]);
+      if (handles && handles.length > 0) {
+        return await handles[0].getFile();
+      }
+    } catch (err) {
+      if (err.name !== 'NotFoundError') console.error('COS Loader: Error checking COS', err);
+    }
+    return null;
+  }
+
+  async function storeBlobInCOS(blob, hash) {
+    if (!isCOSAvailable) return;
+    try {
+      const handles = await navigator.crossOriginStorage.requestFileHandles(
+        [{ algorithm: 'SHA-256', value: hash }],
+        { create: true }
+      );
+      if (handles && handles.length > 0) {
+        const writable = await handles[0].createWritable();
+        await writable.write(blob);
+        await writable.close();
+        console.log('COS Loader: Stored bundle in COS', hash);
+      }
+    } catch (err) {
+      console.error('COS Loader: Failed to store in COS', err);
+    }
+  }
+
+  // Load all managed chunks in parallel
+  // If COS is not available, we skip this and fall back to native network loading via the import() rewrites.
+  if (isCOSAvailable && chunksToLoad.length > 0) {
+    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}`);
+          }
+        } catch (e) {
+          console.error(`COS Loader: Network fetch failed for ${chunk.file}`, e);
+        }
+      }
+
+      // Set global variable if we have a URL
+      if (url && chunk.globalVar) {
+        window[chunk.globalVar] = url;
+      }
+    }));
+  }
+
+  // Start App
+  try {
+    console.log('COS Loader: Starting app...');
+    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.2.0",
+  "version": "1.3.1",
   "description": "Vite plugin to load chunks from Cross-Origin Storage",
   "keywords": [
     "vite",
@@ -35,7 +35,7 @@
     "loader.js"
   ],
   "scripts": {
-    "build": "tsup index.ts --format esm --dts --clean"
+    "build": "tsup index.ts --format esm --dts --clean && cp loader.js dist/"
   },
   "peerDependencies": {
     "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"