vfsjs-test 1.0.21 → 1.0.23

package/main.js

@@ -1,29 +1,57 @@
-// Inside main.js
+// main.js - Production Build Wrapper
 
-async function startDeveloperWorkspace() {
-    // 1. Fetch remote libraries, populate virtual files, etc.
-    const remoteLibraryUrl = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js';
-    await vfs.importRemote('my-confetti-engine.js', remoteLibraryUrl, 'text/javascript');
+window.vfs = {
+    add(filename, contentString, customMime = null) {
+        // Strip out query paths down to base keys
+        let cleanKey = filename.split('?')[0].split('/').pop();
+        window._vfsVirtualCache[cleanKey] = { content: contentString, mime: customMime };
+        console.log(`[VFS Cache] Staging file asset: ${cleanKey}`);
+        return true;
+    },
 
-    // 2. Populate your script and style data maps into the active worker cache state
-    vfs.add('app.js', `console.log("App script running natively inside virtualized layout context!");`, 'text/javascript');
-    vfs.add('style.css', `body { background: #020617; color: #38bdf8; font-family: monospace; }`, 'text/css');
+    async importRemote(localFilename, remoteUrl, customMime = null) {
+        try {
+            const response = await fetch(remoteUrl);
+            if (!response.ok) throw new Error(`HTTP Fault: ${response.status}`);
+            const text = await response.text();
+            this.add(localFilename, text, customMime);
+            return true;
+        } catch (err) {
+            console.error(`[VFS Proxy Error]`, err);
+            return false;
+        }
+    }
+};
+
+async function buildProductionApplication() {
+    // 1. Stage compilation data targets
+    vfs.add('app.js', `
+        console.log("Launcher script running. Invoking confetti...");
+        if (typeof window.confetti === 'function') {
+            setInterval(() => {
+                window.confetti({ particleCount: 40, spread: 50, origin: { y: 0.6 } });
+            }, 2000);
+        } else {
+            console.error("Confetti script missing from global iframe execution scope.");
+        }
+    `, 'text/javascript');
 
-    // 3. CRITICAL: The VFS is loaded, call launch() to spawn the iframe safely!
-    window._vfsKernel.launch();
+    vfs.add('style.css', `
+        body { background: #020617 !important; color: #38bdf8 !important; font-family: monospace; padding: 40px; text-align: center; }
+        h2 { text-shadow: 0 0 8px rgba(56,189,248,0.5); }
+    `, 'text/css');
+
+    // 2. Fetch CDNJS/jsDelivr packages that bypass scope paths safely
+    await vfs.importRemote('my-confetti-engine.js', 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js', 'text/javascript');
+
+    // 3. Compile and open viewport
+    window._vfsKernel.openViewport();
 }
 
-// Global invocation hook listener
-document.addEventListener('DOMContentLoaded', async () => {
-    // Loop interval ensures window._vfsKernel is instantiated and done setting up step 1
-    const checker = setInterval(async () => {
-        if (window._vfsKernel) {
-            clearInterval(checker);
-            // Wait for the service worker confirmation to pass back up
-            const isReady = await navigator.serviceWorker.ready;
-            if (isReady) {
-                startDeveloperWorkspace();
-            }
-        }
-    }, 10);
-});
+(function verifyKernelAvailability() {
+    if (window._vfsKernel) {
+        buildProductionApplication();
+    } else {
+        setTimeout(verifyKernelAvailability, 10);
+    }
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vfsjs-test",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "",
   "main": "index.html",
   "scripts": {

package/vfsjs.js

@@ -1,74 +1,85 @@
-// vfsjs.js - Version 4.0.0 (Race-Condition Proof Production Engine)
+// vfsjs.js - Version 6.0.0 (Zero-Network Tag Inline Engine)
 (function() {
-    const encoder = new TextEncoder();
-
     const engineCore = {
         async init() {
             try {
-                // 1. Core Service Worker Handshake
+                // 1. Boot Service Worker for the root frame route interception if needed
                 await navigator.serviceWorker.register('./sw.js');
                 if (!navigator.serviceWorker.controller) {
                     await new Promise(r => navigator.serviceWorker.addEventListener('controllerchange', r, { once: true }));
                 }
 
-                // 2. Capture the physical file's raw HTML structure exactly as it is written
-                const developerRawHtml = `<!DOCTYPE html>\n<html>${document.documentElement.innerHTML}</html>`;
-                this.write('index.html', developerRawHtml, 'text/html');
+                // 2. Capture the developer's original raw HTML string structure
+                const rawHtml = document.documentElement.innerHTML;
+                window._vfsRawTemplate = `<!DOCTYPE html>\n<html>${rawHtml}</html>`;
 
-                // 3. Structural Reset: Wipe page visual nodes and lock outer body down solid
+                // 3. Clear parent UI layout instantly
                 document.documentElement.innerHTML = ''; 
                 Object.assign(document.documentElement.style, { width: '100%', height: '100%', overflow: 'hidden', margin: '0', padding: '0' });
                 Object.assign(document.body.style, { width: '100%', height: '100%', overflow: 'hidden', margin: '0', padding: '0', background: '#020617' });
 
-                console.log("[VFS Kernel] Stage 1 Ready: Core cached. Awaiting developer vfs.add() execution...");
+                // 4. Create the pristine layout iframe container
+                const iframe = document.createElement('iframe');
+                iframe.id = 'canvas-viewport';
+                Object.assign(iframe.style, {
+                    position: 'absolute', top: '0', left: '0', width: '100%', height: '100%',
+                    border: 'none', margin: '0', padding: '0', zIndex: '999999'
+                });
+                document.body.appendChild(iframe);
+
                 return true;
             } catch (err) {
-                console.error("VFS Core Initialization Failure:", err);
+                console.error("VFS Critical Bootstrap Failure:", err);
                 return false;
             }
         },
 
-        // PHASE 2: Call this ONLY when files are completely mapped to safely spawn the iframe!
-        launch() {
-            if (document.getElementById('canvas-viewport')) return;
+        // Called by main.js after vfs.add loops complete
+        openViewport() {
+            const iframe = document.getElementById('canvas-viewport');
+            if (!iframe) return;
 
-            console.log("[VFS Kernel] Stage 2 Triggered: All assets populated. Mounting secure viewport sandbox.");
-            const iframe = document.createElement('iframe');
-            iframe.id = 'canvas-viewport';
-            Object.assign(iframe.style, {
-                position: 'absolute', top: '0', left: '0', width: '100%', height: '100%',
-                border: 'none', margin: '0', padding: '0', zIndex: '999999'
-            });
-            document.body.appendChild(iframe);
+            // Create a virtual document parser out of our captured template
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(window._vfsRawTemplate, 'text/html');
 
-            // Point to the virtual root route safely now that assets are loaded
-            iframe.src = './?vfs=true';
-        },
+            // 1. Process and inline all marked script tags out of VFS memory maps
+            const scripts = Array.from(doc.querySelectorAll('script[src*="vfs=true"]'));
+            scripts.forEach(script => {
+                const srcAttr = script.getAttribute('src').split('?')[0].split('/').pop();
+                const virtualCode = window._vfsVirtualCache[srcAttr];
+                
+                if (virtualCode) {
+                    const inlineScript = doc.createElement('script');
+                    inlineScript.textContent = virtualCode.content;
+                    script.parentNode.replaceChild(inlineScript, script);
+                }
+            });
 
-        write(filename, contentString, customMime) {
-            if (!navigator.serviceWorker.controller) return false;
-            
-            let cleanKey = filename.split('?')[0];
-            if (cleanKey.includes('/')) {
-                cleanKey = cleanKey.split('/').pop();
-            }
+            // 2. Process and inline all marked style sheets out of VFS memory maps
+            const links = Array.from(doc.querySelectorAll('link[rel="stylesheet"][href*="vfs=true"]'));
+            links.forEach(link => {
+                const hrefAttr = link.getAttribute('href').split('?')[0].split('/').pop();
+                const virtualCSS = window._vfsVirtualCache[hrefAttr];
+                
+                if (virtualCSS) {
+                    const inlineStyle = doc.createElement('style');
+                    inlineStyle.textContent = virtualCSS.content;
+                    link.parentNode.replaceChild(inlineStyle, link);
+                }
+            });
 
-            if (!customMime) {
-                const ext = cleanKey.split('.').pop().toLowerCase();
-                const mimeMatrix = { 'js': 'text/javascript', 'css': 'text/css', 'html': 'text/html', 'json': 'application/json' };
-                customMime = mimeMatrix[ext] || 'application/octet-stream';
-            }
+            // 3. Convert modified dynamic DOM tree back to a string bundle
+            const compilationOutput = `<!DOCTYPE html>\n<html>${doc.documentElement.innerHTML}</html>`;
 
-            navigator.serviceWorker.controller.postMessage({
-                type: 'VFS_WRITE',
-                filename: cleanKey,
-                content: encoder.encode(contentString),
-                mime: customMime
-            });
-            return true;
+            // 4. Inject compilation cleanly via srcdoc to bypass unpkg scope boundaries completely!
+            iframe.srcdoc = compilationOutput;
+            console.log("[VFS Kernel] Execution compilation injected successfully via srcdoc channel.");
         }
     };
 
+    // Shared internal key store memory map allocation
+    window._vfsVirtualCache = {};
     window._vfsKernel = engineCore;
 
     if (document.readyState === 'loading') {