vfsjs-test 1.0.25 → 1.0.27

package/main.js

@@ -1,57 +1,78 @@
 // main.js - Production Build Core Orchestrator
 
-// SECURITY SHIELD: Do not execute orchestrations inside the iframe viewport container
-if (window.self !== window.top) {
-    // Hide the uncompiled natively authored markup inside the frame until VFS style loads
-    document.addEventListener('DOMContentLoaded', () => {
-        document.documentElement.style.visibility = 'hidden';
-    });
-} else {
-    window.vfs = {
-        add(filename, contentString, customMime = null) {
-            return window._vfsKernel.write(filename, contentString, customMime);
-        },
-        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;
-            }
+window.vfs = {
+    add(filename, contentString, customMime = null) {
+        return window._vfsKernel.write(filename, contentString, customMime);
+    },
+    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;
         }
-    };
-
-    async function runProductionBuild() {
-        // Seed files exactly ONCE
-        vfs.add('app.js', `
-            console.log("Application loop booted inside clean VFS space!");
-            if (typeof window.confetti === 'function') {
-                setInterval(() => {
-                    window.confetti({ particleCount: 50, spread: 60 });
-                }, 2500);
+    }
+};
+
+async function runProductionBuild() {
+    // Seed app.js with single-execution target handlers
+    vfs.add('app.js', `
+        console.log("Application loop booted inside clean VFS space!");
+        
+        // Wait for the pristine iframe DOM structure to land safely
+        document.addEventListener('DOMContentLoaded', () => {
+            // Find your native body elements or append a single action block card cleanly
+            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 parent DOM was wiped. This environment is 100% isolated.</p>';
+                document.body.appendChild(container);
             }
-        `, 'text/javascript');
 
-        vfs.add('style.css', `
-            html, body { background: #020617 !important; color: #f8fafc !important; font-family: monospace !important; visibility: visible !important; }
-            body { text-align: center; padding: 50px; }
-            h2 { color: #38bdf8; }
-        `, 'text/css');
+            // Append exactly ONE action trigger button cleanly
+            const button = document.createElement('button');
+            button.id = 'action-btn';
+            button.innerText = 'Trigger Confetti';
+            container.appendChild(button);
 
-        await vfs.importRemote('my-confetti-engine.js', 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js', 'text/javascript');
+            button.addEventListener('click', () => {
+                if (typeof window.confetti === 'function') {
+                    window.confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
+                } else {
+                    console.error("Confetti script framework is loading or missing reference mapping.");
+                }
+            });
+        });
+    `, 'text/javascript');
 
-        window._vfsKernel.openViewport();
-    }
+    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; line-height: 1.6; }
+        
+        .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.4); }
+        .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; font-size: 14px; transition: background 0.15s ease; }
+        button:hover { background: #7dd3fc; }
+    `, 'text/css');
 
-    (function verifyKernelAvailability() {
-        if (window._vfsKernel && navigator.serviceWorker && navigator.serviceWorker.controller) {
-            runProductionBuild();
-        } else {
-            setTimeout(verifyKernelAvailability, 15);
-        }
-    })();
-}
+    // Fetch the external engine framework dependencies natively
+    await vfs.importRemote('my-confetti-engine.js', 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js', 'text/javascript');
+
+    window._vfsKernel.openViewport();
+}
+
+(function verifyKernelAvailability() {
+    if (window._vfsKernel && navigator.serviceWorker && navigator.serviceWorker.controller) {
+        runProductionBuild();
+    } else {
+        setTimeout(verifyKernelAvailability, 15);
+    }
+})();

package/package.json

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

package/vfsjs.js

@@ -1,19 +1,12 @@
-// vfsjs.js - Version 8.0.0 (Anti-Recursion Production Engine)
+// vfsjs.js - Version 11.0.0 (Pristine Shell Extraction Engine)
 (function() {
-    // SECURITY SHIELD: If this is running inside the iframe, KILL EXECUTION IMMEDIATELY.
-    if (window.self !== window.top) {
-        return; 
-    }
+    if (window.self !== window.top) return;
 
     const encoder = new TextEncoder();
 
     const engineCore = {
         async init() {
-            // Reassuring Console Explanation Message
-            console.log(
-                "%c[VFS Kernel] NOTICE: Any 'MIME type text/plain' or 'NS_ERROR_CORRUPTED_CONTENT' errors appearing above this line are completely normal Phase-1 browser artifacts. The VFS engine gracefully abandons those uninstalled network requests and handles them safely in memory.", 
-                "color: #38bdf8; font-weight: bold; background: #0f172a; padding: 4px 8px; border-radius: 4px;"
-            );
+            console.log("%c[VFS Kernel] Cleaning setup artifacts and isolating scope...", "color: #34d399; font-weight: bold;");
 
             try {
                 await navigator.serviceWorker.register('./sw.js');
@@ -21,36 +14,42 @@
                     await new Promise(r => navigator.serviceWorker.addEventListener('controllerchange', r, { once: true }));
                 }
 
-                const rawHtml = document.documentElement.innerHTML;
-                this.write('index.html', `<!DOCTYPE html>\n<html>${rawHtml}</html>`, 'text/html');
+                // 1. Create a live virtual DOM node to sanitize the markup
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(`<!DOCTYPE html><html>${document.documentElement.innerHTML}</html>`, 'text/html');
+
+                // 2. CRITICAL CLEANUP: Strip infrastructure scripts out so they NEVER run inside the iframe
+                const structuralScripts = doc.querySelectorAll('script[src="vfsjs.js"], script[src="main.js"]');
+                structuralScripts.forEach(script => script.remove());
+
+                const nativeMarkup = `<!DOCTYPE html>\n<html>${doc.documentElement.innerHTML}</html>`;
+                
+                // 3. Wipe parent frame clean to keep a blank workspace shell
+                document.documentElement.innerHTML = '<head><meta charset="UTF-8"><title>VFS Container</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' });
+
+                // 4. Send the sanitized native markup down to the worker
+                this.write('index.html', nativeMarkup, 'text/html');
 
-                console.log("[VFS Kernel] Core initialized. Communication channel open.");
                 return true;
             } catch (err) {
-                console.error("VFS Kernel Boot Fault:", err);
+                console.error("VFS Separation Fault:", err);
                 return false;
             }
         },
 
         openViewport() {
-            console.log("[VFS Kernel] Deploying canvas sandboxed frame wrapper.");
+            console.log("[VFS Kernel] Spawning isolated rendering viewport.");
             
-            // FLASH FIX: Give the main body a dark background instantly so there is no bright/unstyled flash
-            document.documentElement.style.background = '#020617';
-            document.body.style.background = '#020617';
-            document.body.style.margin = '0';
-            document.body.style.padding = '0';
-            document.body.style.overflow = 'hidden';
-
             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' // Force iframe background dark before content arrives
+                border: 'none', margin: '0', padding: '0', zIndex: '999999', background: '#020617'
             });
             document.body.appendChild(iframe);
-
             iframe.src = './index.html?vfs=true';
         },