vite-plugin-cross-origin-storage 1.3.19 → 1.3.20

package/dist/index.js

@@ -1722,8 +1722,10 @@ function cosPlugin(options = {}) {
             hasDefault
           };
         }
+        const entryFileName = mainChunk.fileName;
         manifest["index"] = {
-          file: `${config.base.endsWith("/") ? config.base : config.base + "/"}${mainChunk.fileName}`
+          fileName: entryFileName,
+          file: `${base}${entryFileName}`
         };
         if (htmlAsset) {
           try {

package/dist/loader.js

@@ -1,6 +1,4 @@
 (async function () {
-  await new Promise((resolve) => setTimeout(resolve, 100));
-
   const isCOSAvailable = 'crossOriginStorage' in navigator;
   console.log('COS Loader: isCOSAvailable =', isCOSAvailable);
 
@@ -16,8 +14,6 @@
 
   // Identify managed chunks (anything with a hash)
   const chunksToLoad = Object.values(manifest).filter((item) => item.hash);
-  const chunksByFileName = {};
-  chunksToLoad.forEach(c => chunksByFileName[c.fileName] = c);
 
   async function getBlobFromCOS(hash) {
     if (!isCOSAvailable) return null;
@@ -46,23 +42,14 @@
         const writable = await handles[0].createWritable();
         await writable.write(blob);
         await writable.close();
-        console.log('COS Loader: Stored bundle in COS', hash);
+        console.log('COS Loader: Stored chunk in COS', hash);
       }
     } catch (err) {
       console.error('COS Loader: Failed to store in COS', err);
     }
   }
 
-  // Cache for resolved URLs
-  const resolvedUrls = {}; // fileName -> { blobUrl, shimUrl }
-  const processing = new Set();
-
-  // Cache for raw text content
-  const rawContent = {}; // fileName -> string
-
-  async function loadRawContent(chunk) {
-    if (rawContent[chunk.fileName]) return rawContent[chunk.fileName];
-
+  async function getChunkDataUrl(chunk) {
     let blob = await getBlobFromCOS(chunk.hash);
     if (!blob) {
       console.log(`COS Loader: ${chunk.file} not in COS, fetching...`);
@@ -70,97 +57,50 @@
         const resp = await fetch(chunk.file);
         if (!resp.ok) throw new Error(`Status ${resp.status}`);
         blob = await resp.blob();
-        storeBlobInCOS(blob, chunk.hash);
+        await storeBlobInCOS(blob, chunk.hash);
       } catch (e) {
         console.error(`COS Loader: Failed to fetch ${chunk.file}`, e);
         return null;
       }
     }
-    const text = await blob.text();
-    rawContent[chunk.fileName] = text;
-    return text;
-  }
-
-  async function resolveChunk(fileName) {
-    if (resolvedUrls[fileName]) return resolvedUrls[fileName];
-    if (processing.has(fileName)) {
-      console.warn(`COS Loader: Circular dependency detected for ${fileName}. Breaking cycle with placeholder (may fail).`);
-      // We cannot solve cycles with Direct Data Injection easily. 
-      // Returning null might cause failure, but we hope merging chunks avoided this.
-      return null; 
-    }
-
-    processing.add(fileName);
-    const chunk = chunksByFileName[fileName];
-    if (!chunk) {
-      // Unmanaged dependency? Should have been handled by absolute/base logic but we reverted to ./
-      // If it's ./unmanaged.js, we don't have it in manifest.
-      // We can't inject it.
-      console.warn(`COS Loader: Unknown dependency ${fileName}`);
-      return null;
-    }
 
-    let code = await loadRawContent(chunk);
-    if (!code) return null;
+    // Convert blob to Data URL
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.readAsDataURL(blob);
+    });
+  }
 
-    // Find dependencies in the code: import ... from "./dep.js"
-    // Regex matches the one used in build: `from "./..."`
-    const depRegex = /from\s+['"]\.\/([^'"]+)['"]/g;
-    let match;
-    const deps = new Set();
-    while ((match = depRegex.exec(code)) !== null) {
-      deps.add(match[1]); // The filename relative to current
-    }
+  // Initialize
+  try {
+    console.log('COS Loader: Starting app...');
 
-    // Resolve dependencies recursively
-    const replacements = [];
-    for (const depName of deps) {
-      const res = await resolveChunk(depName);
-      if (res && res.shimUrl) {
-        replacements.push({ depName, url: res.shimUrl });
+    // Resolve all chunks to Data URLs
+    const importMap = { imports: {} };
+    const loadPromises = chunksToLoad.map(async (chunk) => {
+      const dataUrl = await getChunkDataUrl(chunk);
+      if (dataUrl) {
+        // Map the relative path (as used in the plugin's bare specifier rewrite) to the data URL
+        importMap.imports[`./${chunk.fileName}`] = dataUrl;
       }
-    }
+    });
 
-    // Replace in code
-    for (const { depName, url } of replacements) {
-      // Replace ALL occurrences
-      // We need to be careful with regex replacement safer:
-      // Replace `from "./depName"` with `from "url"`
-      code = code.split(`from "./${depName}"`).join(`from "${url}"`);
-      code = code.split(`from './${depName}'`).join(`from "${url}"`);
+    await Promise.all(loadPromises);
 
-      // Also dynamic imports: import("./depName")
-      code = code.split(`import("./${depName}")`).join(`import("${url}")`);
-      code = code.split(`import('./${depName}')`).join(`import("${url}")`);
-    }
-
-    const blob = new Blob([code], { type: 'text/javascript' });
-    const blobUrl = URL.createObjectURL(blob);
+    // Inject Import Map
+    const script = document.createElement('script');
+    script.type = 'importmap';
+    script.textContent = JSON.stringify(importMap);
+    document.head.appendChild(script);
 
-    // Create Shim
-    const shim = `export * from "${blobUrl}";${chunk.hasDefault ? `export { default } from "${blobUrl}";` : ''}`;
-    const shimUrl = `data:text/javascript;base64,${btoa(shim)}`;
+    console.log('COS Loader: Import Map injected');
 
-    resolvedUrls[fileName] = { blobUrl, shimUrl };
-    processing.delete(fileName);
-    return resolvedUrls[fileName];
-  }
-
-  // Initialize
-  try {
-    console.log('COS Loader: Starting app...');
-    // Resolve main entry
+    // Import the main entry.
+    // The main entry itself is also managed and rewritten to use bare specifiers.
     const entryFileName = mainEntry.fileName;
-    // We assume mainEntry doesn't need to be shimmed for ITSELF, but its deps do.
-    // Actually resolveChunk returns the shimUrl.
-    const res = await resolveChunk(entryFileName);
+    await import(`./${entryFileName}`);
 
-    if (res) {
-      // Import the SHIM of the main entry
-      await import(res.shimUrl);
-    } else {
-      console.error('COS Loader: Failed to resolve main entry');
-    }
   } catch (err) {
     console.error('COS Loader: Failed to start app', err);
   }

package/loader.js

@@ -1,6 +1,4 @@
 (async function () {
-  await new Promise((resolve) => setTimeout(resolve, 100));
-
   const isCOSAvailable = 'crossOriginStorage' in navigator;
   console.log('COS Loader: isCOSAvailable =', isCOSAvailable);
 
@@ -16,8 +14,6 @@
 
   // Identify managed chunks (anything with a hash)
   const chunksToLoad = Object.values(manifest).filter((item) => item.hash);
-  const chunksByFileName = {};
-  chunksToLoad.forEach(c => chunksByFileName[c.fileName] = c);
 
   async function getBlobFromCOS(hash) {
     if (!isCOSAvailable) return null;
@@ -46,23 +42,14 @@
         const writable = await handles[0].createWritable();
         await writable.write(blob);
         await writable.close();
-        console.log('COS Loader: Stored bundle in COS', hash);
+        console.log('COS Loader: Stored chunk in COS', hash);
       }
     } catch (err) {
       console.error('COS Loader: Failed to store in COS', err);
     }
   }
 
-  // Cache for resolved URLs
-  const resolvedUrls = {}; // fileName -> { blobUrl, shimUrl }
-  const processing = new Set();
-
-  // Cache for raw text content
-  const rawContent = {}; // fileName -> string
-
-  async function loadRawContent(chunk) {
-    if (rawContent[chunk.fileName]) return rawContent[chunk.fileName];
-
+  async function getChunkDataUrl(chunk) {
     let blob = await getBlobFromCOS(chunk.hash);
     if (!blob) {
       console.log(`COS Loader: ${chunk.file} not in COS, fetching...`);
@@ -70,97 +57,50 @@
         const resp = await fetch(chunk.file);
         if (!resp.ok) throw new Error(`Status ${resp.status}`);
         blob = await resp.blob();
-        storeBlobInCOS(blob, chunk.hash);
+        await storeBlobInCOS(blob, chunk.hash);
       } catch (e) {
         console.error(`COS Loader: Failed to fetch ${chunk.file}`, e);
         return null;
       }
     }
-    const text = await blob.text();
-    rawContent[chunk.fileName] = text;
-    return text;
-  }
-
-  async function resolveChunk(fileName) {
-    if (resolvedUrls[fileName]) return resolvedUrls[fileName];
-    if (processing.has(fileName)) {
-      console.warn(`COS Loader: Circular dependency detected for ${fileName}. Breaking cycle with placeholder (may fail).`);
-      // We cannot solve cycles with Direct Data Injection easily. 
-      // Returning null might cause failure, but we hope merging chunks avoided this.
-      return null; 
-    }
-
-    processing.add(fileName);
-    const chunk = chunksByFileName[fileName];
-    if (!chunk) {
-      // Unmanaged dependency? Should have been handled by absolute/base logic but we reverted to ./
-      // If it's ./unmanaged.js, we don't have it in manifest.
-      // We can't inject it.
-      console.warn(`COS Loader: Unknown dependency ${fileName}`);
-      return null;
-    }
 
-    let code = await loadRawContent(chunk);
-    if (!code) return null;
+    // Convert blob to Data URL
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.readAsDataURL(blob);
+    });
+  }
 
-    // Find dependencies in the code: import ... from "./dep.js"
-    // Regex matches the one used in build: `from "./..."`
-    const depRegex = /from\s+['"]\.\/([^'"]+)['"]/g;
-    let match;
-    const deps = new Set();
-    while ((match = depRegex.exec(code)) !== null) {
-      deps.add(match[1]); // The filename relative to current
-    }
+  // Initialize
+  try {
+    console.log('COS Loader: Starting app...');
 
-    // Resolve dependencies recursively
-    const replacements = [];
-    for (const depName of deps) {
-      const res = await resolveChunk(depName);
-      if (res && res.shimUrl) {
-        replacements.push({ depName, url: res.shimUrl });
+    // Resolve all chunks to Data URLs
+    const importMap = { imports: {} };
+    const loadPromises = chunksToLoad.map(async (chunk) => {
+      const dataUrl = await getChunkDataUrl(chunk);
+      if (dataUrl) {
+        // Map the relative path (as used in the plugin's bare specifier rewrite) to the data URL
+        importMap.imports[`./${chunk.fileName}`] = dataUrl;
       }
-    }
+    });
 
-    // Replace in code
-    for (const { depName, url } of replacements) {
-      // Replace ALL occurrences
-      // We need to be careful with regex replacement safer:
-      // Replace `from "./depName"` with `from "url"`
-      code = code.split(`from "./${depName}"`).join(`from "${url}"`);
-      code = code.split(`from './${depName}'`).join(`from "${url}"`);
+    await Promise.all(loadPromises);
 
-      // Also dynamic imports: import("./depName")
-      code = code.split(`import("./${depName}")`).join(`import("${url}")`);
-      code = code.split(`import('./${depName}')`).join(`import("${url}")`);
-    }
-
-    const blob = new Blob([code], { type: 'text/javascript' });
-    const blobUrl = URL.createObjectURL(blob);
+    // Inject Import Map
+    const script = document.createElement('script');
+    script.type = 'importmap';
+    script.textContent = JSON.stringify(importMap);
+    document.head.appendChild(script);
 
-    // Create Shim
-    const shim = `export * from "${blobUrl}";${chunk.hasDefault ? `export { default } from "${blobUrl}";` : ''}`;
-    const shimUrl = `data:text/javascript;base64,${btoa(shim)}`;
+    console.log('COS Loader: Import Map injected');
 
-    resolvedUrls[fileName] = { blobUrl, shimUrl };
-    processing.delete(fileName);
-    return resolvedUrls[fileName];
-  }
-
-  // Initialize
-  try {
-    console.log('COS Loader: Starting app...');
-    // Resolve main entry
+    // Import the main entry.
+    // The main entry itself is also managed and rewritten to use bare specifiers.
     const entryFileName = mainEntry.fileName;
-    // We assume mainEntry doesn't need to be shimmed for ITSELF, but its deps do.
-    // Actually resolveChunk returns the shimUrl.
-    const res = await resolveChunk(entryFileName);
+    await import(`./${entryFileName}`);
 
-    if (res) {
-      // Import the SHIM of the main entry
-      await import(res.shimUrl);
-    } else {
-      console.error('COS Loader: Failed to resolve main entry');
-    }
   } 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.19",
+  "version": "1.3.20",
   "description": "Vite plugin to load chunks from Cross-Origin Storage",
   "keywords": [
     "vite",