vfsjs-test 1.0.6 → 1.0.8

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 (5) hide show
  1. package/index.html +6 -2
  2. package/main.js +31 -49
  3. package/package.json +1 -1
  4. package/sw.js +30 -13
  5. package/vfsjs.js +46 -11
package/index.html CHANGED
@@ -4,6 +4,11 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Infrared Engine Workspace</title>
7
+
8
+ <script src="vfsjs.js"></script>
9
+ <script src="main.js"></script>
10
+
11
+ <link rel="stylesheet" href="live_theme.css?vfs=true">
7
12
  </head>
8
13
  <body style="background: #0f172a; color: #38bdf8; font-family: monospace; padding: 20px;">
9
14
 
@@ -12,7 +17,6 @@
12
17
  > Initializing isolated modular framework...
13
18
  </div>
14
19
 
15
- <script src="vfsjs.js"></script>
16
- <script src="main.js"></script>
20
+ <script src="index.js?vfs=true"></script>
17
21
  </body>
18
22
  </html>
package/main.js CHANGED
@@ -1,71 +1,53 @@
1
- // main.js - User API Facade and Browser Orchestration
1
+ // main.js - Simple Developer Interface Facade
2
2
  const display = document.getElementById('status');
3
3
 
4
+ // Clean user-facing API surface area
4
5
  window.vfs = {
5
6
  add(filename, contentString, customMime = null) {
6
- if (!window._vfsKernel) return console.error("VFS Engine Kernel Offline.");
7
7
  return window._vfsKernel.write(filename, contentString, customMime);
8
8
  },
9
9
  delete(filename) {
10
- if (!window._vfsKernel) return console.error("VFS Engine Kernel Offline.");
11
10
  return window._vfsKernel.remove(filename);
12
11
  },
13
12
  clear() {
14
- if (!window._vfsKernel) return console.error("VFS Engine Kernel Offline.");
15
13
  return window._vfsKernel.wipe();
14
+ },
15
+ hook(filename, type) {
16
+ // type should be 'js' or 'css'
17
+ return window._vfsKernel.mount(filename, type);
18
+ },
19
+ unhook() {
20
+ return window._vfsKernel.unmount();
16
21
  }
17
22
  };
18
23
 
19
- // Helper function to mount our virtual files safely into the DOM runtime
20
- function executeVirtualEnvironment() {
21
- display.innerHTML += "<br>> Mounting virtual assets into DOM tree...";
24
+ async function startDeveloperWorkspace() {
25
+ // 1. Fire up the kernel underneath automatically
26
+ const ready = await window._vfsKernel.init();
27
+ if (!ready) return;
22
28
 
23
- // 1. Inject the Style Layer
24
- const styleLink = document.createElement('link');
25
- styleLink.rel = 'stylesheet';
26
- styleLink.href = 'live-theme.css';
27
- document.head.appendChild(styleLink);
28
-
29
- // 2. Inject the Logic Layer
30
- const scriptTag = document.createElement('script');
31
- scriptTag.src = 'index.js';
32
- document.body.appendChild(scriptTag);
33
- }
29
+ display.innerHTML += "<br>> Running developer asset deployment...";
34
30
 
35
- async function bootEngine() {
36
- try {
37
- const registration = await navigator.serviceWorker.register('./sw.js');
38
- display.innerHTML += "<br>> Service worker synchronized.";
31
+ // 2. Add your scripts and styles to memory
32
+ vfs.add('live-theme.css', `
33
+ body { background: #020617 !important; color: #a5f3fc !important; }
34
+ #status { border-color: #334155 !important; background: #0f172a !important; }
35
+ `, 'text/css');
39
36
 
40
- if (!navigator.serviceWorker.controller) {
41
- display.innerHTML += "<br>> Activating routing links... (Please refresh if stuck)";
42
- await new Promise(r => {
43
- navigator.serviceWorker.addEventListener('controllerchange', r, { once: true });
44
- });
45
- }
46
- display.innerHTML += "<br>> Pipeline linked. Writing data layers...";
37
+ vfs.add('index.js', `
38
+ console.log("VFS Engine: Hooked successfully!");
39
+ document.getElementById('status').innerHTML += "<br>> <span style='color: #22c55e;'>Virtual asset code running live!</span>";
40
+ `, 'text/javascript');
47
41
 
48
- // Write targets directly into memory first
49
- vfs.add('live-theme.css', `
50
- body { background: #030712 !important; color: #22d3ee !important; }
51
- #status { border-color: #1f2937 !important; background: #0b0f19 !important; }
52
- `, 'text/css');
42
+ // Give the worker split-second thread cache timing
43
+ await new Promise(r => setTimeout(r, 50));
53
44
 
54
- vfs.add('index.js', `
55
- console.log("VFS Live: Running perfectly under dynamic injection!");
56
- document.getElementById('status').innerHTML += "<br>> <span style='color: #34d399;'>Virtual routing complete. Engine stable.</span>";
57
- `, 'text/javascript');
45
+ // 3. Mount them into the page environment using your new API!
46
+ vfs.hook('live-theme.css', 'css');
47
+ vfs.hook('index.js', 'js');
58
48
 
59
- // Give the background worker thread a brief split-second to cache the blobs
60
- await new Promise(r => setTimeout(r, 50));
61
-
62
- // Now run them safely!
63
- executeVirtualEnvironment();
64
-
65
- } catch (err) {
66
- display.innerHTML += `<br>><span style="color: #ef4444;"> Boot Exception: ${err.message}</span>`;
67
- console.error(err);
68
- }
49
+ // Example Test: You can run vfs.unhook() anytime later to completely pull them out!
50
+ // setTimeout(() => { vfs.unhook(); }, 5000);
69
51
  }
70
52
 
71
- bootEngine();
53
+ startDeveloperWorkspace();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vfsjs-test",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "description": "",
5
5
  "main": "index.html",
6
6
  "scripts": {
package/sw.js CHANGED
@@ -1,4 +1,4 @@
1
- // sw.js - Isolated Network Intercept Core
1
+ // sw.js - Version 1.0.8
2
2
  const vfsStorage = new Map();
3
3
 
4
4
  const defaultMimes = {
@@ -13,21 +13,38 @@ self.addEventListener('activate', e => e.waitUntil(self.clients.claim()));
13
13
 
14
14
  self.addEventListener('fetch', (event) => {
15
15
  const url = new URL(event.request.url);
16
+
17
+ // Strip paths and query parameters to get raw file names
16
18
  const filename = url.pathname.split('/').pop().split('?')[0];
19
+ const isVfsExplicit = url.searchParams.get('vfs') === 'true';
17
20
 
18
- if (vfsStorage.has(filename)) {
19
- const fileData = vfsStorage.get(filename);
20
- const ext = filename.split('.').pop().toLowerCase();
21
- const contentType = fileData.mime || defaultMimes[ext] || 'application/octet-stream';
21
+ // Intercept if we have the file in memory OR if the developer explicitly tagged it
22
+ if (vfsStorage.has(filename) || isVfsExplicit) {
23
+ event.respondWith(
24
+ // Use a short promise loop to wait if the asset hasn't finished writing to memory yet
25
+ new Promise((resolve) => {
26
+ const checkFile = () => {
27
+ if (vfsStorage.has(filename)) {
28
+ const fileData = vfsStorage.get(filename);
29
+ const ext = filename.split('.').pop().toLowerCase();
30
+ const contentType = fileData.mime || defaultMimes[ext] || 'application/octet-stream';
22
31
 
23
- event.respondWith(new Response(fileData.content, {
24
- status: 200,
25
- headers: {
26
- 'Content-Type': contentType,
27
- 'Access-Control-Allow-Origin': '*',
28
- 'X-Content-Type-Options': 'nosniff'
29
- }
30
- }));
32
+ resolve(new Response(fileData.content, {
33
+ status: 200,
34
+ headers: {
35
+ 'Content-Type': contentType,
36
+ 'Access-Control-Allow-Origin': '*',
37
+ 'X-Content-Type-Options': 'nosniff'
38
+ }
39
+ }));
40
+ } else {
41
+ // Retry shortly if the network thread beat the main thread execution
42
+ setTimeout(checkFile, 10);
43
+ }
44
+ };
45
+ checkFile();
46
+ })
47
+ );
31
48
  }
32
49
  });
33
50
 
package/vfsjs.js CHANGED
@@ -1,13 +1,30 @@
1
- // vfsjs.js - Internal Core Logic Engine
1
+ // vfsjs.js - Upgraded Core Logic Engine
2
2
  (function() {
3
3
  const encoder = new TextEncoder();
4
4
  const display = document.getElementById('status');
5
+ let injectedNodes = []; // Tracks dynamically mounted elements
5
6
 
6
- // Internal core operations dictionary
7
7
  const engineCore = {
8
+ // Automatically registers and activates the Service Worker thread
9
+ async init() {
10
+ try {
11
+ await navigator.serviceWorker.register('./sw.js');
12
+ if (display) display.innerHTML += "<br>> Service worker synchronized.";
13
+
14
+ if (!navigator.serviceWorker.controller) {
15
+ if (display) display.innerHTML += "<br>> Securing worker routing links...";
16
+ await new Promise(r => navigator.serviceWorker.addEventListener('controllerchange', r, { once: true }));
17
+ }
18
+ if (display) display.innerHTML += "<br>> Matrix pipeline fully established.";
19
+ return true;
20
+ } catch (err) {
21
+ if (display) display.innerHTML += `<br>><span style="color: #ef4444;"> Core Init Failure: ${err.message}</span>`;
22
+ return false;
23
+ }
24
+ },
25
+
8
26
  write(filename, contentString, customMime) {
9
27
  if (!navigator.serviceWorker.controller) return false;
10
-
11
28
  navigator.serviceWorker.controller.postMessage({
12
29
  type: 'VFS_WRITE',
13
30
  filename: filename,
@@ -20,24 +37,42 @@
20
37
 
21
38
  remove(filename) {
22
39
  if (!navigator.serviceWorker.controller) return false;
23
-
24
- navigator.serviceWorker.controller.postMessage({
25
- type: 'VFS_DELETE',
26
- filename: filename
27
- });
40
+ navigator.serviceWorker.controller.postMessage({ type: 'VFS_DELETE', filename: filename });
28
41
  if (display) display.innerHTML += `<br>> Core Remove: <span style="color: #ef4444;">${filename}</span>`;
29
42
  return true;
30
43
  },
31
44
 
32
45
  wipe() {
33
46
  if (!navigator.serviceWorker.controller) return false;
34
-
35
47
  navigator.serviceWorker.controller.postMessage({ type: 'VFS_CLEAR' });
36
- if (display) display.innerHTML += `<br>><span style="color: #f59e0b;"> Core Clear: Matrix registers flushed.</span>`;
48
+ if (display) display.innerHTML += `<br>><span style="color: #f59e0b;"> Core Clear: Matrix flushed.</span>`;
37
49
  return true;
50
+ },
51
+
52
+ // Dynamically injects virtual assets into the browser frame safely
53
+ mount(filename, type) {
54
+ if (type === 'css') {
55
+ const el = document.createElement('link');
56
+ el.rel = 'stylesheet';
57
+ el.href = filename;
58
+ document.head.appendChild(el);
59
+ injectedNodes.push(el);
60
+ } else if (type === 'js') {
61
+ const el = document.createElement('script');
62
+ el.src = filename;
63
+ document.body.appendChild(el);
64
+ injectedNodes.push(el);
65
+ }
66
+ if (display) display.innerHTML += `<br>> Frame Hooked: Loaded [${filename}]`;
67
+ },
68
+
69
+ // Pulls all injected elements back out of the DOM frame
70
+ unmount() {
71
+ injectedNodes.forEach(node => node.remove());
72
+ injectedNodes = [];
73
+ if (display) display.innerHTML += `<br>><span style="color: #f43f5e;"> Frame Unhooked: Virtual nodes detached.</span>`;
38
74
  }
39
75
  };
40
76
 
41
- // Expose internal engine safely to global scope window context
42
77
  window._vfsKernel = engineCore;
43
78
  })();