vfsjs-test 1.0.28 → 1.0.29

package/main.js

@@ -1,77 +1,62 @@
 // main.js - Production Build Core Orchestrator
 
 window.vfs = {
-    add(filename, contentString, customMime = null) {
-        return window._vfsKernel.write(filename, contentString, customMime);
+    add(filename, contentString) {
+        window._vfsKernel.write(filename, contentString);
     },
-    async importRemote(localFilename, remoteUrl, customMime = null) {
-        try {
-            const response = await fetch(remoteUrl);
-            if (!response.ok) throw new Error(`HTTP network error: ${response.status}`);
-            const text = await response.text();
-            this.add(localFilename, text, customMime);
-            return true;
-        } catch (err) {
-            console.error(`[VFS Proxy Error]`, err);
-            return false;
-        }
+    importRemote(remoteUrl) {
+        window._vfsKernel.pushRemoteScript(remoteUrl);
     }
 };
 
-async function runProductionBuild() {
-    // 1. Fetch remote script engine and write it into local cache immediately
-    await vfs.importRemote('my-confetti-engine.js', 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js', 'text/javascript');
+function runProductionBuild() {
+    // Stage third-party framework asset links directly
+    vfs.importRemote('https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js');
 
-    // 2. Inject app.js with a small pool verification to bind the action button cleanly
+    // Register application code logic structures
     vfs.add('app.js', `
-        console.log("Application loop booted inside clean VFS space!");
+        console.log("Application loop booted inside clean isolated VFS Space!");
         
-        document.addEventListener('DOMContentLoaded', () => {
-            let container = document.querySelector('.js-card');
-            if (!container) {
-                container = document.createElement('div');
-                container.className = 'js-card';
-                container.innerHTML = '<h3>Automated Clean Shell Live</h3><p>The environment is isolated cleanly.</p>';
-                document.body.appendChild(container);
+        const container = document.createElement('div');
+        container.className = 'js-card';
+        container.innerHTML = '<h3>Pure Handshake Isolation Live</h3><p>Zero Service Worker race conditions. 100% stable execution context.</p>';
+        document.body.appendChild(container);
+
+        const button = document.createElement('button');
+        button.id = 'action-btn';
+        button.innerText = 'Trigger Confetti';
+        container.appendChild(button);
+
+        button.addEventListener('click', () => {
+            if (typeof window.confetti === 'function') {
+                window.confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
+                console.log("[VFS Runtime] Confetti burst executed smoothly.");
+            } else {
+                console.error("[VFS Runtime Error] Confetti module reference missing on execution thread.");
             }
-
-            const button = document.createElement('button');
-            button.id = 'action-btn';
-            button.innerText = 'Trigger Confetti';
-            container.appendChild(button);
-
-            // Robust polling wrapper to guarantee framework availability on click
-            button.addEventListener('click', () => {
-                const targetWindow = window.parent.vfs ? window.parent : window;
-                if (typeof targetWindow.confetti === 'function') {
-                    targetWindow.confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
-                } else if (typeof window.confetti === 'function') {
-                    window.confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
-                } else {
-                    console.error("Confetti fallback execution error: Reference missing.");
-                }
-            });
         });
-    `, 'text/javascript');
+    `);
 
+    // Register explicit application presentation rules
     vfs.add('style.css', `
         body { background: #020617; color: #f8fafc; font-family: system-ui, sans-serif; text-align: center; padding: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; margin: 0; }
         h1 { color: #38bdf8; font-size: 2.5rem; }
-        p { color: #94a3b8; max-width: 500px; }
-        .js-card { background: #0f172a; border: 1px solid #1e293b; padding: 25px; border-radius: 12px; max-width: 400px; margin-top: 20px; }
+        p { color: #94a3b8; }
+        .js-card { background: #0f172a; border: 1px solid #1e293b; padding: 25px; border-radius: 12px; max-width: 400px; margin-top: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
         .js-card h3 { color: #34d399; margin-top: 0; }
-        button { background: #38bdf8; color: #020617; border: none; padding: 12px 24px; font-weight: 600; border-radius: 6px; cursor: pointer; margin-top: 15px; }
+        button { background: #38bdf8; color: #020617; border: none; padding: 12px 24px; font-weight: 600; border-radius: 6px; cursor: pointer; margin-top: 15px; font-size: 14px; }
         button:hover { background: #7dd3fc; }
-    `, 'text/css');
+    `);
 
-    // 3. Open viewport canvas wrapper framework
+    // Deploy the viewport framework
     window._vfsKernel.openViewport();
 }
 
+// Verification block loop execution
 (function verifyKernelAvailability() {
-    if (window._vfsKernel && navigator.serviceWorker && navigator.serviceWorker.controller) {
+    if (window._vfsKernel) {
         runProductionBuild();
     } else {
-        setTimeout(verifyKernelAvailability, 15);
+        setTimeout(verifyKernelAvailability, 10);
     }
 })();

package/package.json

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

package/vfsjs.js

@@ -1,81 +1,122 @@
-// vfsjs.js - Version 12.0.0 (Zero-Leak Pure Extraction Engine)
+// vfsjs.js - Version 14.0.0 (Pure Handshake Messaging Kernel)
 (function() {
+    // If somehow executed inside a frame, self-destruct immediately
     if (window.self !== window.top) return;
 
-    const encoder = new TextEncoder();
+    const vfsMemory = {
+        'index.html': '',
+        'app.js': '',
+        'style.css': '',
+        'remote_scripts': []
+    };
 
     const engineCore = {
-        async init() {
-            // Reassuring, bold console warning statement
-            console.warn(
-                "%c[VFS Kernel] NOTICE: Any 'MIME type text/plain' or 'NS_ERROR_CORRUPTED_CONTENT' logs above are expected Phase-1 browser artifacts. The engine gracefully isolates them.", 
-                "font-weight: bold; font-size: 11px;"
-            );
-
-            try {
-                await navigator.serviceWorker.register('./sw.js');
-                if (!navigator.serviceWorker.controller) {
-                    await new Promise(r => navigator.serviceWorker.addEventListener('controllerchange', r, { once: true }));
-                }
+        init() {
+            console.log("%c[VFS Kernel] Initializing Pure Handshake Engine...", "color: #38bdf8; font-weight: bold;");
 
-                // Get raw HTML code strings cleanly
-                let htmlString = `<!DOCTYPE html>\n<html>${document.documentElement.innerHTML}</html>`;
+            // 1. Capture the physical HTML content written on the server file
+            let rawHtml = document.documentElement.innerHTML;
 
-                // Wipe infrastructure script tags via string manipulation to block DOMParser leaks
-                htmlString = htmlString.replace(/<script\s+src="vfsjs\.js"><\/script>/gi, '');
-                htmlString = htmlString.replace(/<script\s+src="main\.js"><\/script>/gi, '');
+            // Strip out the host infrastructure scripts so they don't get sent to the iframe
+            rawHtml = rawHtml.replace(/<script\s+src="vfsjs\.js"><\/script>/gi, '');
+            rawHtml = rawHtml.replace(/<script\s+src="main\.js"><\/script>/gi, '');
+            vfsMemory['index.html'] = rawHtml;
 
-                // Clean the parent view area completely
-                document.documentElement.innerHTML = '<head><meta charset="UTF-8"><title>VFS Container Shell</title></head><body></body>';
-                
-                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' });
+            // 2. Wipe parent window clean immediately (No lookahead pre-parser network leaks!)
+            document.documentElement.innerHTML = '<head><meta charset="UTF-8"><title>VFS Execution Shell</title></head><body></body>';
+            
+            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' });
 
-                this.write('index.html', htmlString, 'text/html');
-                return true;
-            } catch (err) {
-                console.error("VFS Extraction Fault:", err);
-                return false;
-            }
+            // 3. Listen for the sandboxed iframe asking for its application bundle
+            window.addEventListener('message', (event) => {
+                if (event.data && event.data.type === 'VFS_FRAME_READY') {
+                    const iframeWindow = document.getElementById('canvas-viewport').contentWindow;
+                    iframeWindow.postMessage({
+                        type: 'VFS_DELIVER_PAYLOAD',
+                        payload: vfsMemory
+                    }, '*');
+                }
+            });
         },
 
         openViewport() {
-            console.log("[VFS Kernel] Spawning isolated rendering viewport.");
+            console.log("[VFS Kernel] Spawning blank, secure canvas environment.");
+            
             const iframe = document.createElement('iframe');
             iframe.id = 'canvas-viewport';
             Object.assign(iframe.style, {
                 position: 'fixed', top: '0', left: '0', width: '100%', height: '100%',
                 border: 'none', margin: '0', padding: '0', zIndex: '999999', background: '#020617'
             });
+            
             document.body.appendChild(iframe);
-            iframe.src = './index.html?vfs=true';
-        },
 
-        write(filename, contentString, customMime) {
-            if (!navigator.serviceWorker.controller) return false;
-            let cleanKey = filename.split('?')[0].split('/').pop();
+            // Construct an entirely self-contained runtime client inside the iframe
+            // It boots up, asks the parent for the virtual files, and executes them cleanly
+            const bootloaderScript = `
+                <!DOCTYPE html>
+                <html>
+                <head>
+                    <meta charset="UTF-8">
+                    <script>
+                        window.addEventListener('message', (event) => {
+                            if (event.data && event.data.type === 'VFS_DELIVER_PAYLOAD') {
+                                const { payload } = event.data;
+                                
+                                // 1. Inject Styles
+                                const style = document.createElement('style');
+                                style.textContent = payload['style.css'];
+                                document.head.appendChild(style);
 
-            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';
-            }
+                                // 2. Inject External Scripts (Like Confetti Engine) sequentially
+                                Promise.all(payload.remote_scripts.map(url => {
+                                    return new Promise((resolve, reject) => {
+                                        const script = document.createElement('script');
+                                        script.src = url;
+                                        script.onload = resolve;
+                                        script.onerror = reject;
+                                        document.head.appendChild(script);
+                                    });
+                                })).then(() => {
+                                    // 3. Inject and run Application loop script only AFTER dependencies load
+                                    const appScript = document.createElement('script');
+                                    appScript.textContent = payload['app.js'];
+                                    document.body.appendChild(appScript);
+                                }).catch(err => console.error("Dependency Load Failure:", err));
+                            }
+                        });
 
-            navigator.serviceWorker.controller.postMessage({
-                type: 'VFS_WRITE',
-                filename: cleanKey,
-                content: encoder.encode(contentString),
-                mime: customMime
-            });
-            return true;
+                        // Tell the parent window we are ready to receive files
+                        window.parent.postMessage({ type: 'VFS_FRAME_READY' }, '*');
+                    <\/script>
+                </head>
+                <body>
+                    <script>
+                        window.addEventListener('message', (e) => {
+                            if (e.data && e.data.type === 'VFS_DELIVER_PAYLOAD') {
+                                const parser = new DOMParser();
+                                const doc = parser.parseFromString(e.data.payload['index.html'], 'text/html');
+                                document.body.innerHTML = doc.body.innerHTML;
+                            }
+                        }, { once: true });
+                    </script>
+                </body>
+                </html>
+            `;
+
+            iframe.srcdoc = bootloaderScript;
+        },
+
+        write(filename, contentString) {
+            vfsMemory[filename] = contentString;
+        },
+
+        pushRemoteScript(url) {
+            vfsMemory['remote_scripts'].push(url);
         }
     };
 
     window._vfsKernel = engineCore;
-
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', () => engineCore.init());
-    } else {
-        engineCore.init();
-    }
+    engineCore.init();
 })();