npm - vite-plugin-cross-origin-storage - Versions diffs - 1.7.0 → 1.8.0 - Mend

vite-plugin-cross-origin-storage 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -95,26 +95,39 @@ export default defineConfig({
 ## How It Works
-1. **Build Time**:
-   - 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`.
-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.
+### Build Time
+1. **Magic Externals**: For `include` patterns that resolve to npm package
+   names (e.g. `vendor-react` → `react`), the plugin externalizes the package
+   from Rollup and uses esbuild to produce a single self-contained ESM bundle.
+   This bundle is emitted as a hashed asset (e.g. `assets/react-a1b2c3d4.js`)
+   and treated as a managed chunk.
+2. **Import Rewriting**: All inter-chunk imports are rewritten from relative
+   paths (`"./chunk.js"`) to bare specifiers (`"coschunk-assets-chunk-js"`).
+   This applies to both managed and unmanaged chunks, because managed chunks
+   run as Blob URLs and cannot resolve relative paths at runtime.
+3. **Manifest Generation**: A JSON manifest is built containing the base path,
+   the entry chunk filename, a map of every managed chunk filename to its
+   SHA-256 hash, and a list of unmanaged chunks that need network-URL entries
+   in the import map.
+4. **Loader Injection**: The plugin disables the default
+   `<script type="module">` entry tag and injects a `<script id="cos-loader">`
+   containing the runtime loader with the manifest inlined.
+### Runtime
+1. The loader checks for `navigator.crossOriginStorage`.
+2. For each managed chunk it calls
+   `navigator.crossOriginStorage.requestFileHandles([{ algorithm: 'SHA-256', value: hash }])`:
+   - **Cache hit**: wraps the returned `File` as a Blob URL.
+   - **Cache miss**: fetches the chunk from the network, stores it in COS via
+     `requestFileHandles(..., { create: true })`, then wraps it as a Blob URL.
+3. Unmanaged chunks receive absolute network URLs.
+4. An `<script type="importmap">` is injected into `<head>` mapping every
+   `coschunk-*` bare specifier to its resolved URL.
+5. The entry point is imported via its bare specifier inside a `setTimeout`
+   callback so the browser has time to register the import map before the
+   first module resolution occurs.
 ## Requirements

package/dist/index.js CHANGED Viewed

@@ -30,6 +30,7 @@ var require_constants = __commonJS({
     "use strict";
     var WIN_SLASH = "\\\\/";
     var WIN_NO_SLASH = `[^${WIN_SLASH}]`;
+    var DEFAULT_MAX_EXTGLOB_RECURSION = 0;
     var DOT_LITERAL = "\\.";
     var PLUS_LITERAL = "\\+";
     var QMARK_LITERAL = "\\?";
@@ -80,6 +81,7 @@ var require_constants = __commonJS({
       SEP: "\\"
     };
     var POSIX_REGEX_SOURCE = {
+      __proto__: null,
       alnum: "a-zA-Z0-9",
       alpha: "a-zA-Z",
       ascii: "\\x00-\\x7F",
@@ -96,6 +98,7 @@ var require_constants = __commonJS({
       xdigit: "A-Fa-f0-9"
     };
     module.exports = {
+      DEFAULT_MAX_EXTGLOB_RECURSION,
       MAX_LENGTH: 1024 * 64,
       POSIX_REGEX_SOURCE,
       // regular expressions
@@ -646,6 +649,213 @@ var require_parse = __commonJS({
     var syntaxError = (type, char) => {
       return `Missing ${type}: "${char}" - use "\\\\${char}" to match literal characters`;
     };
+    var splitTopLevel = (input) => {
+      const parts = [];
+      let bracket = 0;
+      let paren = 0;
+      let quote = 0;
+      let value = "";
+      let escaped = false;
+      for (const ch of input) {
+        if (escaped === true) {
+          value += ch;
+          escaped = false;
+          continue;
+        }
+        if (ch === "\\") {
+          value += ch;
+          escaped = true;
+          continue;
+        }
+        if (ch === '"') {
+          quote = quote === 1 ? 0 : 1;
+          value += ch;
+          continue;
+        }
+        if (quote === 0) {
+          if (ch === "[") {
+            bracket++;
+          } else if (ch === "]" && bracket > 0) {
+            bracket--;
+          } else if (bracket === 0) {
+            if (ch === "(") {
+              paren++;
+            } else if (ch === ")" && paren > 0) {
+              paren--;
+            } else if (ch === "|" && paren === 0) {
+              parts.push(value);
+              value = "";
+              continue;
+            }
+          }
+        }
+        value += ch;
+      }
+      parts.push(value);
+      return parts;
+    };
+    var isPlainBranch = (branch) => {
+      let escaped = false;
+      for (const ch of branch) {
+        if (escaped === true) {
+          escaped = false;
+          continue;
+        }
+        if (ch === "\\") {
+          escaped = true;
+          continue;
+        }
+        if (/[?*+@!()[\]{}]/.test(ch)) {
+          return false;
+        }
+      }
+      return true;
+    };
+    var normalizeSimpleBranch = (branch) => {
+      let value = branch.trim();
+      let changed = true;
+      while (changed === true) {
+        changed = false;
+        if (/^@\([^\\()[\]{}|]+\)$/.test(value)) {
+          value = value.slice(2, -1);
+          changed = true;
+        }
+      }
+      if (!isPlainBranch(value)) {
+        return;
+      }
+      return value.replace(/\\(.)/g, "$1");
+    };
+    var hasRepeatedCharPrefixOverlap = (branches) => {
+      const values = branches.map(normalizeSimpleBranch).filter(Boolean);
+      for (let i = 0; i < values.length; i++) {
+        for (let j = i + 1; j < values.length; j++) {
+          const a = values[i];
+          const b = values[j];
+          const char = a[0];
+          if (!char || a !== char.repeat(a.length) || b !== char.repeat(b.length)) {
+            continue;
+          }
+          if (a === b || a.startsWith(b) || b.startsWith(a)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    var parseRepeatedExtglob = (pattern, requireEnd = true) => {
+      if (pattern[0] !== "+" && pattern[0] !== "*" || pattern[1] !== "(") {
+        return;
+      }
+      let bracket = 0;
+      let paren = 0;
+      let quote = 0;
+      let escaped = false;
+      for (let i = 1; i < pattern.length; i++) {
+        const ch = pattern[i];
+        if (escaped === true) {
+          escaped = false;
+          continue;
+        }
+        if (ch === "\\") {
+          escaped = true;
+          continue;
+        }
+        if (ch === '"') {
+          quote = quote === 1 ? 0 : 1;
+          continue;
+        }
+        if (quote === 1) {
+          continue;
+        }
+        if (ch === "[") {
+          bracket++;
+          continue;
+        }
+        if (ch === "]" && bracket > 0) {
+          bracket--;
+          continue;
+        }
+        if (bracket > 0) {
+          continue;
+        }
+        if (ch === "(") {
+          paren++;
+          continue;
+        }
+        if (ch === ")") {
+          paren--;
+          if (paren === 0) {
+            if (requireEnd === true && i !== pattern.length - 1) {
+              return;
+            }
+            return {
+              type: pattern[0],
+              body: pattern.slice(2, i),
+              end: i
+            };
+          }
+        }
+      }
+    };
+    var getStarExtglobSequenceOutput = (pattern) => {
+      let index = 0;
+      const chars = [];
+      while (index < pattern.length) {
+        const match = parseRepeatedExtglob(pattern.slice(index), false);
+        if (!match || match.type !== "*") {
+          return;
+        }
+        const branches = splitTopLevel(match.body).map((branch2) => branch2.trim());
+        if (branches.length !== 1) {
+          return;
+        }
+        const branch = normalizeSimpleBranch(branches[0]);
+        if (!branch || branch.length !== 1) {
+          return;
+        }
+        chars.push(branch);
+        index += match.end + 1;
+      }
+      if (chars.length < 1) {
+        return;
+      }
+      const source = chars.length === 1 ? utils.escapeRegex(chars[0]) : `[${chars.map((ch) => utils.escapeRegex(ch)).join("")}]`;
+      return `${source}*`;
+    };
+    var repeatedExtglobRecursion = (pattern) => {
+      let depth = 0;
+      let value = pattern.trim();
+      let match = parseRepeatedExtglob(value);
+      while (match) {
+        depth++;
+        value = match.body.trim();
+        match = parseRepeatedExtglob(value);
+      }
+      return depth;
+    };
+    var analyzeRepeatedExtglob = (body, options) => {
+      if (options.maxExtglobRecursion === false) {
+        return { risky: false };
+      }
+      const max = typeof options.maxExtglobRecursion === "number" ? options.maxExtglobRecursion : constants.DEFAULT_MAX_EXTGLOB_RECURSION;
+      const branches = splitTopLevel(body).map((branch) => branch.trim());
+      if (branches.length > 1) {
+        if (branches.some((branch) => branch === "") || branches.some((branch) => /^[*?]+$/.test(branch)) || hasRepeatedCharPrefixOverlap(branches)) {
+          return { risky: true };
+        }
+      }
+      for (const branch of branches) {
+        const safeOutput = getStarExtglobSequenceOutput(branch);
+        if (safeOutput) {
+          return { risky: true, safeOutput };
+        }
+        if (repeatedExtglobRecursion(branch) > max) {
+          return { risky: true };
+        }
+      }
+      return { risky: false };
+    };
     var parse = (input, options) => {
       if (typeof input !== "string") {
         throw new TypeError("Expected a string");
@@ -776,6 +986,8 @@ var require_parse = __commonJS({
         token.prev = prev;
         token.parens = state.parens;
         token.output = state.output;
+        token.startIndex = state.index;
+        token.tokensIndex = tokens.length;
         const output = (opts.capture ? "(" : "") + token.open;
         increment("parens");
         push({ type, value: value2, output: state.output ? "" : ONE_CHAR });
@@ -783,6 +995,26 @@ var require_parse = __commonJS({
         extglobs.push(token);
       };
       const extglobClose = (token) => {
+        const literal = input.slice(token.startIndex, state.index + 1);
+        const body = input.slice(token.startIndex + 2, state.index);
+        const analysis = analyzeRepeatedExtglob(body, opts);
+        if ((token.type === "plus" || token.type === "star") && analysis.risky) {
+          const safeOutput = analysis.safeOutput ? (token.output ? "" : ONE_CHAR) + (opts.capture ? `(${analysis.safeOutput})` : analysis.safeOutput) : void 0;
+          const open = tokens[token.tokensIndex];
+          open.type = "text";
+          open.value = literal;
+          open.output = safeOutput || utils.escapeRegex(literal);
+          for (let i = token.tokensIndex + 1; i < tokens.length; i++) {
+            tokens[i].value = "";
+            tokens[i].output = "";
+            delete tokens[i].suffix;
+          }
+          state.output = token.output + open.output;
+          state.backtrack = true;
+          push({ type: "paren", extglob: true, value, output: "" });
+          decrement("parens");
+          return;
+        }
         let output = token.close + (opts.capture ? ")" : "");
         let rest;
         if (token.type === "negate") {
@@ -1626,6 +1858,22 @@ function cosPlugin(options = {}) {
   const __dirname = path.dirname(fileURLToPath(import.meta.url));
   const loaderPath = path.resolve(__dirname, "./loader.js");
   let config;
+  const cwdRequire = createRequire(path.join(process.cwd(), "index.js"));
+  const esbuildRequire = createRequire(import.meta.url);
+  const esbuild = esbuildRequire("esbuild");
+  const include = options.include || ["**/*"];
+  const includeArray = Array.isArray(include) ? include : [include];
+  function getPackageName(item) {
+    if (typeof item === "string") {
+      return item.startsWith("vendor-") ? item.replace("vendor-", "") : item;
+    }
+    if (item instanceof RegExp) {
+      const source = item.source;
+      const match = source.match(/vendor-([a-zA-Z0-9-@/]+?)(?:[-._]|\/|$)/);
+      return match ? match[1] : null;
+    }
+    return null;
+  }
   return {
     name: "vite-plugin-cos",
     apply: "build",
@@ -1635,25 +1883,11 @@ function cosPlugin(options = {}) {
       config2.build.rollupOptions = config2.build.rollupOptions || {};
       const external = config2.build.rollupOptions.external || [];
       const externalArray = Array.isArray(external) ? external : typeof external === "string" ? [external] : [];
-      const include = options.include || ["**/*"];
-      const includeArray = Array.isArray(include) ? include : [include];
-      const require2 = createRequire(path.join(process.cwd(), "index.js"));
-      function getPackageName(item) {
-        if (typeof item === "string") {
-          return item.startsWith("vendor-") ? item.replace("vendor-", "") : item;
-        }
-        if (item instanceof RegExp) {
-          const source = item.source;
-          const match = source.match(/vendor-([a-zA-Z0-9-@/]+?)(?:[-._]|\/|$)/);
-          return match ? match[1] : null;
-        }
-        return null;
-      }
       for (const item of includeArray) {
         const pkgName = getPackageName(item);
         if (pkgName) {
           try {
-            require2.resolve(pkgName);
+            cwdRequire.resolve(pkgName);
             const externalPatterns = [pkgName, `${pkgName}/*`];
             for (const pattern of externalPatterns) {
               if (!externalArray.includes(pattern)) {
@@ -1676,7 +1910,7 @@ function cosPlugin(options = {}) {
       order: "post",
       handler(html) {
         return html.replace(
-          /<script\s+[^>]*type=["']module["'][^>]*src=["'][^"']*index[^"']*["'][^>]*><\/script>/gi,
+          /<script\s+[^>]*type=["']module["'][^>]*src=["'][^"']+["'][^>]*><\/script>/gi,
           "<!-- Entry script disabled by COS Plugin -->"
         );
       }
@@ -1684,7 +1918,7 @@ function cosPlugin(options = {}) {
     async generateBundle(_options, bundle) {
       const managedChunks = {};
       let mainChunk = null;
-      let htmlAsset = null;
+      const htmlAssets = [];
       for (const fileName in bundle) {
         const chunk = bundle[fileName];
         if (chunk.type === "chunk") {
@@ -1700,32 +1934,18 @@ function cosPlugin(options = {}) {
             managedChunks[fileName] = chunk;
           }
         }
-        if (fileName === "index.html" && chunk.type === "asset") {
-          htmlAsset = chunk;
+        if (fileName.endsWith(".html") && chunk.type === "asset") {
+          htmlAssets.push(chunk);
         }
       }
       const externalToFileName = {};
-      const require2 = createRequire(path.join(process.cwd(), "index.js"));
-      const include = options.include || ["**/*"];
-      const includeArray = Array.isArray(include) ? include : [include];
-      function getPackageName(item) {
-        if (typeof item === "string") {
-          return item.startsWith("vendor-") ? item.replace("vendor-", "") : item;
-        }
-        if (item instanceof RegExp) {
-          const source = item.source;
-          const match = source.match(/vendor-([a-zA-Z0-9-@/]+?)(?:[-._]|\/|$)/);
-          return match ? match[1] : null;
-        }
-        return null;
-      }
       for (const item of includeArray) {
         const pkgName = getPackageName(item);
         if (!pkgName) continue;
         try {
           let pkgPath = "";
           try {
-            const mainPath = require2.resolve(pkgName);
+            const mainPath = cwdRequire.resolve(pkgName);
             let currentDir = path.dirname(mainPath);
             let pkgJsonPath = "";
             while (currentDir !== path.parse(currentDir).root) {
@@ -1751,10 +1971,8 @@ function cosPlugin(options = {}) {
               pkgPath = mainPath;
             }
           } catch (e) {
-            pkgPath = require2.resolve(pkgName);
+            pkgPath = cwdRequire.resolve(pkgName);
           }
-          const esbuildRequire = createRequire(import.meta.url);
-          const esbuild = esbuildRequire("esbuild");
           const buildResult = await esbuild.build({
             entryPoints: [pkgPath],
             bundle: true,
@@ -1784,7 +2002,7 @@ function cosPlugin(options = {}) {
           managedChunks[fileName] = {
             type: "chunk",
             fileName,
-            code: content.toString(),
+            code: Buffer.from(content).toString("utf-8"),
             name: item
           };
           externalToFileName[pkgName] = fileName;
@@ -1863,13 +2081,19 @@ function cosPlugin(options = {}) {
           unmanagedDependencies.add(mainChunk.fileName);
         }
         manifest.unmanaged = Array.from(unmanagedDependencies);
-        if (htmlAsset) {
+        if (htmlAssets.length > 0) {
+          let loaderCode;
           try {
-            let loaderCode = fs.readFileSync(loaderPath, "utf-8");
-            loaderCode = loaderCode.replace(
-              "__COS_MANIFEST__",
-              JSON.stringify(manifest, null, 2)
-            );
+            loaderCode = fs.readFileSync(loaderPath, "utf-8");
+          } catch (e) {
+            console.error("COS Plugin: Failed to read loader.js", e);
+            return;
+          }
+          loaderCode = loaderCode.replace(
+            "__COS_MANIFEST__",
+            JSON.stringify(manifest, null, 2)
+          );
+          for (const htmlAsset of htmlAssets) {
             let htmlSource = htmlAsset.source;
             htmlSource = htmlSource.replace(
               /<link\s+[^>]*rel=["']modulepreload["'][^>]*>/gi,
@@ -1880,8 +2104,6 @@ function cosPlugin(options = {}) {
               () => `<head>
 <script id="cos-loader">${loaderCode}</script>`
             );
-          } catch (e) {
-            console.error("COS Plugin: Failed to read loader.js", e);
           }
         }
       }

package/dist/loader.js CHANGED Viewed

@@ -120,13 +120,14 @@
     // through the import map and can find other managed chunks.
     const entrySpecifier = `coschunk-${mainEntry.replace(/\//g, '-')}`;
-    // Small delay to ensure the browser has fully registered the
-    // import map before resolving the first module.
-    setTimeout(() => {
-      import(entrySpecifier).catch((err) => {
-        console.error('COS Loader: Failed to start app', err);
-      });
-    }, 0);
+    // Yield to the event loop once so the browser registers the dynamically
+    // injected import map before the first module import.
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    try {
+      await import(entrySpecifier);
+    } catch (err) {
+      console.error('COS Loader: Failed to start app', err);
+    }
   } catch (err) {
     console.error('COS Loader: Initialization failed', err);
   }

package/loader.js CHANGED Viewed

@@ -120,13 +120,14 @@
     // through the import map and can find other managed chunks.
     const entrySpecifier = `coschunk-${mainEntry.replace(/\//g, '-')}`;
-    // Small delay to ensure the browser has fully registered the
-    // import map before resolving the first module.
-    setTimeout(() => {
-      import(entrySpecifier).catch((err) => {
-        console.error('COS Loader: Failed to start app', err);
-      });
-    }, 0);
+    // Yield to the event loop once so the browser registers the dynamically
+    // injected import map before the first module import.
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    try {
+      await import(entrySpecifier);
+    } catch (err) {
+      console.error('COS Loader: Failed to start app', err);
+    }
   } catch (err) {
     console.error('COS Loader: Initialization failed', err);
   }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-cross-origin-storage",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Vite plugin to load chunks from Cross-Origin Storage",
   "keywords": [
     "vite",
@@ -37,23 +37,34 @@
   "scripts": {
     "build": "tsup index.ts --format esm --dts --clean && cp loader.js dist/",
     "prepublishOnly": "npm run build",
-    "test:dev": "npm run build && vite testing",
-    "test:build": "npm run build && vite build testing",
-    "test:preview": "vite preview testing"
+    "test:simple:dev": "npm run build && vite testing/simple-test",
+    "test:simple:build": "npm run build && vite build testing/simple-test",
+    "test:simple:preview": "vite preview testing/simple-test",
+    "test:react-hello-world:dev": "npm run build && vite testing/react-hello-world",
+    "test:react-hello-world:build": "npm run build && vite build testing/react-hello-world",
+    "test:react-hello-world:preview": "vite preview testing/react-hello-world",
+    "test:react-todo:dev": "npm run build && vite testing/react-todo",
+    "test:react-todo:build": "npm run build && vite build testing/react-todo",
+    "test:react-todo:preview": "vite preview --port 4174 testing/react-todo"
   },
   "peerDependencies": {
-    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "devDependencies": {
     "@rollup/pluginutils": "^5.3.0",
-    "@types/node": "^25.2.3",
-    "rollup": "^4.57.1",
-    "three": "^0.183.0",
+    "@types/node": "^25.6.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "rollup": "^4.60.3",
+    "three": "^0.184.0",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1"
+    "typescript": "^6.0.3",
+    "vite": "^8.0.11"
   },
   "dependencies": {
-    "esbuild": "^0.27.3"
+    "esbuild": "^0.28.0"
   }
 }