vfsjs-test 1.0.19 → 1.0.21

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 (3) hide show
  1. package/main.js +19 -103
  2. package/package.json +1 -1
  3. package/vfsjs.js +31 -38
package/main.js CHANGED
@@ -1,113 +1,29 @@
1
- // main.js - Production Developer Environment Layout
2
-
3
- window.vfs = {
4
- // Write local strings straight to memory mapping keyspaces
5
- add(filename, contentString, customMime = null) {
6
- return window._vfsKernel.write(filename, contentString, customMime);
7
- },
8
-
9
- // Remote Proxy Asset Grabber (Requires target destination to support CORS)
10
- async importRemote(localFilename, remoteUrl, customMime = null) {
11
- try {
12
- console.log(`[VFS Proxy] Pulling remote source stream: ${remoteUrl}`);
13
- const response = await fetch(remoteUrl);
14
- if (!response.ok) throw new Error(`HTTP network fault code: ${response.status}`);
15
-
16
- const remoteTextContent = await response.text();
17
- this.add(localFilename, remoteTextContent, customMime);
18
- return true;
19
- } catch (err) {
20
- console.error(`[VFS Proxy Error] Could not map ${localFilename}:`, err);
21
- return false;
22
- }
23
- }
24
- };
1
+ // Inside main.js
25
2
 
26
3
  async function startDeveloperWorkspace() {
27
- // 1. Target a real, open-source library on CDNJS (Canvas Confetti)
4
+ // 1. Fetch remote libraries, populate virtual files, etc.
28
5
  const remoteLibraryUrl = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js';
29
-
30
- // 2. Map the remote asset to a virtual file named "my-confetti-engine.js"
31
- const importSuccess = await vfs.importRemote('my-confetti-engine.js', remoteLibraryUrl, 'text/javascript');
32
-
33
- if (!importSuccess) {
34
- console.error("Failed to fetch library from CDNJS.");
35
- return;
36
- }
37
-
38
- // 3. Create the standard HTML layout referencing the newly mapped virtual file
39
- // Inside main.js -> startDeveloperWorkspace()
6
+ await vfs.importRemote('my-confetti-engine.js', remoteLibraryUrl, 'text/javascript');
40
7
 
41
- vfs.add('index.html', `
42
- <!DOCTYPE html>
43
- <html>
44
- <head>
45
- <meta charset="UTF-8">
46
- <title>Scrollable Workspace Demo</title>
47
- <link rel="stylesheet" href="live_theme.css?vfs=true">
48
- </head>
49
- <body>
50
- <h2>Infrared Scrollable Core</h2>
51
- <p>Scroll down! This page natively handles height overflows now.</p>
52
-
53
- <div style="margin-top: 400px;">👇 Way down here...</div>
54
- <div style="margin-top: 500px;">🎨 Keep scrolling...</div>
55
- <div style="margin-top: 600px;">🚀 Deep in the VFS layout!</div>
56
-
57
- <script src="my-confetti-engine.js?vfs=true"></script>
58
- <script src="index.js?vfs=true"></script>
59
- </body>
60
- </html>
61
- `, 'text/html');
8
+ // 2. Populate your script and style data maps into the active worker cache state
9
+ vfs.add('app.js', `console.log("App script running natively inside virtualized layout context!");`, 'text/javascript');
10
+ vfs.add('style.css', `body { background: #020617; color: #38bdf8; font-family: monospace; }`, 'text/css');
62
11
 
63
- // Make sure the developer's virtual CSS allows vertical scrolling!
64
- vfs.add('live_theme.css', `
65
- html { height: 100%; }
66
- body {
67
- margin: 0;
68
- padding: 40px;
69
- font-family: monospace;
70
- background: linear-gradient(-45deg, #1e1b4b, #311042, #0f172a) !important;
71
- color: #ffffff !important;
72
- text-align: center;
73
-
74
- /* ALLOW THE VIRTUAL BODY TO SCROLL NATURALLY */
75
- min-height: 100%;
76
- overflow-y: auto;
77
- }
78
- h2 { color: #38bdf8; }
79
- `, 'text/css');
80
-
81
- // 5. Execution Script: Call the global function initialized by the CDNJS script
82
- vfs.add('index.js', `
83
- console.log("Launcher script running. Invoking confetti...");
84
-
85
- // Ensure the library attached itself to the virtual window context safely
86
- if (typeof window.confetti === 'function') {
87
- // Fire an endless burst of celebratory confetti particles!
88
- setInterval(() => {
89
- window.confetti({
90
- particleCount: 50,
91
- spread: 60,
92
- origin: { y: 0.6 }
93
- });
94
- }, 1500);
95
- } else {
96
- console.error("Confetti engine not found in virtual window global scope.");
97
- }
98
- `, 'text/javascript');
99
-
100
- // 6. Point the fullscreen viewport to the directory root
101
- const viewport = document.getElementById('canvas-viewport');
102
- if (viewport) {
103
- viewport.src = './?vfs=true';
104
- }
12
+ // 3. CRITICAL: The VFS is loaded, call launch() to spawn the iframe safely!
13
+ window._vfsKernel.launch();
105
14
  }
106
15
 
107
16
  // Global invocation hook listener
108
17
  document.addEventListener('DOMContentLoaded', async () => {
109
- const isReady = await window._vfsKernel.init();
110
- if (isReady) {
111
- startDeveloperWorkspace();
112
- }
18
+ // Loop interval ensures window._vfsKernel is instantiated and done setting up step 1
19
+ const checker = setInterval(async () => {
20
+ if (window._vfsKernel) {
21
+ clearInterval(checker);
22
+ // Wait for the service worker confirmation to pass back up
23
+ const isReady = await navigator.serviceWorker.ready;
24
+ if (isReady) {
25
+ startDeveloperWorkspace();
26
+ }
27
+ }
28
+ }, 10);
113
29
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vfsjs-test",
3
- "version": "1.0.19",
3
+ "version": "1.0.21",
4
4
  "description": "",
5
5
  "main": "index.html",
6
6
  "scripts": {
package/vfsjs.js CHANGED
@@ -1,73 +1,67 @@
1
- // vfsjs.js - Version 2.1.0 (Full Production DOM Hijacker Engine)
1
+ // vfsjs.js - Version 4.0.0 (Race-Condition Proof Production Engine)
2
2
  (function() {
3
3
  const encoder = new TextEncoder();
4
4
 
5
5
  const engineCore = {
6
6
  async init() {
7
7
  try {
8
- // 1. Core Service Worker Registration Handshake
8
+ // 1. Core Service Worker Handshake
9
9
  await navigator.serviceWorker.register('./sw.js');
10
10
  if (!navigator.serviceWorker.controller) {
11
11
  await new Promise(r => navigator.serviceWorker.addEventListener('controllerchange', r, { once: true }));
12
12
  }
13
13
 
14
- // 2. CRITICAL FIX: Extract sub-resources before wiping the page structure
15
- // We parse scripts and stylesheets to pre-populate empty placeholders or fetch local references
16
- const scripts = Array.from(document.querySelectorAll('script[src*="vfs=true"]'));
17
- const links = Array.from(document.querySelectorAll('link[rel="stylesheet"][href*="vfs=true"]'));
18
-
19
- // Seed baseline virtual assets so the iframe doesn't hit unpkg 404/MIME walls
20
- scripts.forEach(script => {
21
- const cleanUrl = script.getAttribute('src').split('?')[0];
22
- this.write(cleanUrl, `console.log("VFS: Virtual stub active for ${cleanUrl}");`, 'text/javascript');
23
- });
24
-
25
- links.forEach(link => {
26
- const cleanUrl = link.getAttribute('href').split('?')[0];
27
- this.write(cleanUrl, `/* VFS: Virtual stylesheet stub active for ${cleanUrl} */`, 'text/css');
28
- });
29
-
30
- // 3. Capture the developer's raw markup setup
14
+ // 2. Capture the physical file's raw HTML structure exactly as it is written
31
15
  const developerRawHtml = `<!DOCTYPE html>\n<html>${document.documentElement.innerHTML}</html>`;
32
16
  this.write('index.html', developerRawHtml, 'text/html');
33
17
 
34
- // 4. Structural Reset: Enforce absolute zero borders and scroll-locks on parent layout
18
+ // 3. Structural Reset: Wipe page visual nodes and lock outer body down solid
35
19
  document.documentElement.innerHTML = '';
36
20
  Object.assign(document.documentElement.style, { width: '100%', height: '100%', overflow: 'hidden', margin: '0', padding: '0' });
37
21
  Object.assign(document.body.style, { width: '100%', height: '100%', overflow: 'hidden', margin: '0', padding: '0', background: '#020617' });
38
22
 
39
- // 5. Mount the Seamless Full-Window Viewport Canvas
40
- const iframe = document.createElement('iframe');
41
- iframe.id = 'canvas-viewport';
42
- Object.assign(iframe.style, {
43
- position: 'absolute', top: '0', left: '0', width: '100%', height: '100%',
44
- border: 'none', margin: '0', padding: '0', zIndex: '999999'
45
- });
46
- document.body.appendChild(iframe);
47
-
48
- // 6. Direct the iframe context to open the virtual index route natively
49
- iframe.src = './?vfs=true';
50
-
23
+ console.log("[VFS Kernel] Stage 1 Ready: Core cached. Awaiting developer vfs.add() execution...");
51
24
  return true;
52
25
  } catch (err) {
53
- console.error("VFS Hijacker Core Initialization Failure:", err);
26
+ console.error("VFS Core Initialization Failure:", err);
54
27
  return false;
55
28
  }
56
29
  },
57
30
 
31
+ // PHASE 2: Call this ONLY when files are completely mapped to safely spawn the iframe!
32
+ launch() {
33
+ if (document.getElementById('canvas-viewport')) return;
34
+
35
+ console.log("[VFS Kernel] Stage 2 Triggered: All assets populated. Mounting secure viewport sandbox.");
36
+ const iframe = document.createElement('iframe');
37
+ iframe.id = 'canvas-viewport';
38
+ Object.assign(iframe.style, {
39
+ position: 'absolute', top: '0', left: '0', width: '100%', height: '100%',
40
+ border: 'none', margin: '0', padding: '0', zIndex: '999999'
41
+ });
42
+ document.body.appendChild(iframe);
43
+
44
+ // Point to the virtual root route safely now that assets are loaded
45
+ iframe.src = './?vfs=true';
46
+ },
47
+
58
48
  write(filename, contentString, customMime) {
59
49
  if (!navigator.serviceWorker.controller) return false;
60
50
 
61
- // Auto-detect simple extension MIME variants if left blank
51
+ let cleanKey = filename.split('?')[0];
52
+ if (cleanKey.includes('/')) {
53
+ cleanKey = cleanKey.split('/').pop();
54
+ }
55
+
62
56
  if (!customMime) {
63
- const ext = filename.split('.').pop().toLowerCase();
64
- const mimeMatrix = { 'js': 'text/javascript', 'css': 'text/css', 'html': 'text/html' };
57
+ const ext = cleanKey.split('.').pop().toLowerCase();
58
+ const mimeMatrix = { 'js': 'text/javascript', 'css': 'text/css', 'html': 'text/html', 'json': 'application/json' };
65
59
  customMime = mimeMatrix[ext] || 'application/octet-stream';
66
60
  }
67
61
 
68
62
  navigator.serviceWorker.controller.postMessage({
69
63
  type: 'VFS_WRITE',
70
- filename: filename,
64
+ filename: cleanKey,
71
65
  content: encoder.encode(contentString),
72
66
  mime: customMime
73
67
  });
@@ -77,7 +71,6 @@
77
71
 
78
72
  window._vfsKernel = engineCore;
79
73
 
80
- // Trigger orchestration hook automatically when the structural baseline DOM is parsed
81
74
  if (document.readyState === 'loading') {
82
75
  document.addEventListener('DOMContentLoaded', () => engineCore.init());
83
76
  } else {