vfsjs-test 1.0.17 → 1.0.19

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 (4) hide show
  1. package/index.html +8 -4
  2. package/main.js +40 -23
  3. package/package.json +1 -1
  4. package/vfsjs.js +47 -16
package/index.html CHANGED
@@ -1,13 +1,17 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
3
  <head>
4
+ <script src="vfsjs.js"></script>
5
+
4
6
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Infrared Engine Workspace</title>
7
+ <title>My Completely Normal Project</title>
7
8
 
8
- <script src="vfsjs.js"></script>
9
- <script src="main.js"></script>
9
+ <link rel="stylesheet" href="style.css?vfs=true">
10
10
  </head>
11
11
  <body>
12
+ <h1>Natively Authored Content</h1>
13
+ <p>This markup was written physically in the server file, captured by the engine, and isolated seamlessly.</p>
14
+
15
+ <script src="app.js?vfs=true"></script>
12
16
  </body>
13
17
  </html>
package/main.js CHANGED
@@ -36,30 +36,47 @@ async function startDeveloperWorkspace() {
36
36
  }
37
37
 
38
38
  // 3. Create the standard HTML layout referencing the newly mapped virtual file
39
- vfs.add('index.html', `
40
- <!DOCTYPE html>
41
- <html>
42
- <head>
43
- <meta charset="UTF-8">
44
- <title>CDNJS Virtualization Demo</title>
45
- <link rel="stylesheet" href="live_theme.css?vfs=true">
46
- </head>
47
- <body>
48
- <h2>CDNJS Virtualization Success!</h2>
49
- <p>The confetti script was loaded out of memory as a local same-origin asset.</p>
50
-
51
- <script src="my-confetti-engine.js?vfs=true"></script>
52
- <script src="index.js?vfs=true"></script>
53
- </body>
54
- </html>
55
- `, 'text/html');
39
+ // Inside main.js -> startDeveloperWorkspace()
40
+
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');
56
62
 
57
- // 4. Standard Background Theme Layout
58
- vfs.add('live_theme.css', `
59
- html, body { margin: 0; padding: 40px; height: 100%; font-family: monospace; background: #020617; color: #f8fafc; text-align: center; }
60
- body { background: linear-gradient(-45deg, #1e1b4b, #311042, #0f172a) !important; color: #ffffff !important; }
61
- h2 { color: #38bdf8; text-shadow: 0 0 10px rgba(56, 189, 248, 0.4); }
62
- `, 'text/css');
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');
63
80
 
64
81
  // 5. Execution Script: Call the global function initialized by the CDNJS script
65
82
  vfs.add('index.js', `
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vfsjs-test",
3
- "version": "1.0.17",
3
+ "version": "1.0.19",
4
4
  "description": "",
5
5
  "main": "index.html",
6
6
  "scripts": {
package/vfsjs.js CHANGED
@@ -1,46 +1,70 @@
1
- // vfsjs.js - Version 1.2.0 Automated Unified Kernel
1
+ // vfsjs.js - Version 2.1.0 (Full Production DOM Hijacker 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. Establish background proxy thread interception
8
+ // 1. Core Service Worker Registration 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. Structural Reset: Enforce full-screen boundary constraints on main window
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
31
+ const developerRawHtml = `<!DOCTYPE html>\n<html>${document.documentElement.innerHTML}</html>`;
32
+ this.write('index.html', developerRawHtml, 'text/html');
33
+
34
+ // 4. Structural Reset: Enforce absolute zero borders and scroll-locks on parent layout
35
+ document.documentElement.innerHTML = '';
15
36
  Object.assign(document.documentElement.style, { width: '100%', height: '100%', overflow: 'hidden', margin: '0', padding: '0' });
16
37
  Object.assign(document.body.style, { width: '100%', height: '100%', overflow: 'hidden', margin: '0', padding: '0', background: '#020617' });
17
38
 
18
- // 3. Viewport Ingestion: Spawn the seamless full-window workspace canvas iframe
39
+ // 5. Mount the Seamless Full-Window Viewport Canvas
19
40
  const iframe = document.createElement('iframe');
20
41
  iframe.id = 'canvas-viewport';
21
- iframe.setAttribute('scrolling', 'no');
22
42
  Object.assign(iframe.style, {
23
- position: 'absolute',
24
- top: '0',
25
- left: '0',
26
- width: '100%',
27
- height: '100%',
28
- border: 'none',
29
- margin: '0',
30
- padding: '0',
31
- zIndex: '999999'
43
+ position: 'absolute', top: '0', left: '0', width: '100%', height: '100%',
44
+ border: 'none', margin: '0', padding: '0', zIndex: '999999'
32
45
  });
33
-
34
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
+
35
51
  return true;
36
52
  } catch (err) {
37
- console.error("VFS Static Initialization Failure:", err);
53
+ console.error("VFS Hijacker Core Initialization Failure:", err);
38
54
  return false;
39
55
  }
40
56
  },
41
57
 
42
58
  write(filename, contentString, customMime) {
43
59
  if (!navigator.serviceWorker.controller) return false;
60
+
61
+ // Auto-detect simple extension MIME variants if left blank
62
+ if (!customMime) {
63
+ const ext = filename.split('.').pop().toLowerCase();
64
+ const mimeMatrix = { 'js': 'text/javascript', 'css': 'text/css', 'html': 'text/html' };
65
+ customMime = mimeMatrix[ext] || 'application/octet-stream';
66
+ }
67
+
44
68
  navigator.serviceWorker.controller.postMessage({
45
69
  type: 'VFS_WRITE',
46
70
  filename: filename,
@@ -52,4 +76,11 @@
52
76
  };
53
77
 
54
78
  window._vfsKernel = engineCore;
79
+
80
+ // Trigger orchestration hook automatically when the structural baseline DOM is parsed
81
+ if (document.readyState === 'loading') {
82
+ document.addEventListener('DOMContentLoaded', () => engineCore.init());
83
+ } else {
84
+ engineCore.init();
85
+ }
55
86
  })();