vfsjs-test 1.0.13 → 1.0.14

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 +32 -63
  2. package/package.json +1 -1
  3. package/sw.js +15 -30
package/main.js CHANGED
@@ -1,90 +1,59 @@
1
- // main.js - Developer Workspace API
1
+ // main.js - Standardized Developer Environment Bootstrapper
2
2
 
3
3
  window.vfs = {
4
4
  add(filename, contentString, customMime = null) {
5
5
  return window._vfsKernel.write(filename, contentString, customMime);
6
- },
7
- delete(filename) { return window._vfsKernel.remove(filename); },
8
- clear() { return window._vfsKernel.wipe(); }
6
+ }
9
7
  };
10
8
 
11
9
  async function startDeveloperWorkspace() {
12
- // 1. Add standard CSS rules directly
13
- vfs.add('live_theme.css', `
14
- html, body { margin: 0; padding: 40px; height: 100%; overflow: hidden; font-family: monospace; background: #020617; color: #38bdf8; }
15
- body { background: linear-gradient(-45deg, #ff007f, #7f00ff, #00bfff, #00ff7f, #ffea00, #ff007f) !important; background-size: 400% 400% !important; animation: rainbowShift 12s ease infinite !important; color: #ffffff !important; }
16
- @keyframes rainbowShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
17
- `, 'text/css');
18
-
19
- // 2. Add traditional JavaScript code
20
- vfs.add('index.js', `
21
- console.log("VFS Engine: Spin test activated inside the seamless frame!");
22
-
23
- // 1. Inject a global CSS animation rule directly into the frame's head
24
- const styleNode = document.createElement('style');
25
- styleNode.innerHTML = \`
26
- @keyframes customSpinMatrix {
27
- 0% { transform: rotate(0deg); }
28
- 100% { transform: rotate(360deg); }
29
- }
30
- .vfs-spinning-target {
31
- display: inline-block !important;
32
- animation: customSpinMatrix 4s linear infinite !important;
33
- }
34
- \`;
35
- document.head.appendChild(styleNode);
36
-
37
- // 2. Locate all text elements and wrap their text in spinning tags
38
- function applySpinToText() {
39
- // Target headers, paragraphs, lists, and span layers
40
- const textElements = document.querySelectorAll('h1, h2, h3, p, span, li, div');
41
-
42
- textElements.forEach(element => {
43
- // Ignore containers that have children to avoid breaking structure layouts
44
- if (element.children.length === 0 && element.innerText.trim() !== '') {
45
- const words = element.innerText.split(' ');
46
- element.innerHTML = words.map(word =>
47
- \`<span class="vfs-spinning-target">\${word}</span>\`
48
- ).join(' ');
49
- }
50
- });
51
- }
52
-
53
- // Run the spin cycle as soon as the virtual document structure loads
54
- if (document.readyState === 'loading') {
55
- document.addEventListener('DOMContentLoaded', applySpinToText);
56
- } else {
57
- applySpinToText();
58
- }
59
- `, 'text/javascript');
60
-
61
- // 3. Add the main index entry file using native, normal markup tags!
62
- vfs.add('workspace.html', `
10
+ // 1. Developer creates a perfectly normal index.html layout!
11
+ vfs.add('index.html', `
63
12
  <!DOCTYPE html>
64
13
  <html>
65
14
  <head>
66
15
  <meta charset="UTF-8">
16
+ <title>My Normal Project</title>
67
17
  <link rel="stylesheet" href="live_theme.css?vfs=true">
68
18
  </head>
69
19
  <body>
70
- <h2>Infrared Seamless Virtual Environment</h2>
71
- <p>This layout runs seamlessly inside an entirely virtual context.</p>
20
+ <h1>Infrared Seamless Workspace</h1>
21
+ <p>Writing standard file structures entirely in memory.</p>
22
+
72
23
  <script src="index.js?vfs=true"></script>
73
24
  </body>
74
25
  </html>
75
26
  `, 'text/html');
76
27
 
77
- // 4. Point the auto-generated viewport to the entry path!
28
+ // 2. Developer maps standard styling files
29
+ vfs.add('live_theme.css', `
30
+ html, body { margin: 0; padding: 40px; font-family: monospace; }
31
+ body { background: linear-gradient(-45deg, #ff007f, #7f00ff, #00bfff, #00ff7f, #ffea00, #ff007f) !important; background-size: 400% 400% !important; animation: rainbowShift 12s ease infinite !important; color: #ffffff !important; }
32
+ @keyframes rainbowShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
33
+ `, 'text/css');
34
+
35
+ // 3. Developer maps the text spin script we built
36
+ vfs.add('index.js', `
37
+ console.log("Flawless execution!");
38
+ const styleNode = document.createElement('style');
39
+ styleNode.innerHTML = '@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } .spin { display: inline-block; animation: spin 4s linear infinite; }';
40
+ document.head.appendChild(styleNode);
41
+
42
+ const p = document.querySelector('p');
43
+ if (p) {
44
+ p.innerHTML = p.innerText.split(' ').map(w => \`<span class="spin">\${w}</span>\`).join(' ');
45
+ }
46
+ `, 'text/javascript');
47
+
48
+ // 4. Fire up the viewport! Pointing to "./?vfs=true" forces the Service Worker
49
+ // to step in and serve our VIRTUAL index.html instead of the physical server one.
78
50
  const viewport = document.getElementById('canvas-viewport');
79
51
  if (viewport) {
80
- viewport.src = 'workspace.html?vfs=true';
52
+ viewport.src = './?vfs=true';
81
53
  }
82
54
  }
83
55
 
84
- // Automatically bootstrap when document structure is verified
85
56
  document.addEventListener('DOMContentLoaded', async () => {
86
57
  const ready = await window._vfsKernel.init();
87
- if (ready) {
88
- startDeveloperWorkspace();
89
- }
58
+ if (ready) startDeveloperWorkspace();
90
59
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vfsjs-test",
3
- "version": "1.0.13",
3
+ "version": "1.0.14",
4
4
  "description": "",
5
5
  "main": "index.html",
6
6
  "scripts": {
package/sw.js CHANGED
@@ -1,33 +1,32 @@
1
- // sw.js - Version 1.0.8
1
+ // sw.js - Version 1.1.2 (Shadow Router)
2
2
  const vfsStorage = new Map();
3
3
 
4
- const defaultMimes = {
5
- 'js': 'text/javascript',
6
- 'css': 'text/css',
7
- 'html': 'text/html',
8
- 'json': 'application/json'
9
- };
10
-
11
4
  self.addEventListener('install', e => e.waitUntil(self.skipWaiting()));
12
5
  self.addEventListener('activate', e => e.waitUntil(self.clients.claim()));
13
6
 
14
7
  self.addEventListener('fetch', (event) => {
15
8
  const url = new URL(event.request.url);
9
+ let filename = url.pathname.split('/').pop().split('?')[0];
16
10
 
17
- // Strip paths and query parameters to get raw file names
18
- const filename = url.pathname.split('/').pop().split('?')[0];
11
+ // ROUTING TRICK: If requesting the root domain "/" or "/index.html",
12
+ // prioritize our virtual memory database file!
13
+ if (filename === '' || url.pathname.endsWith('/')) {
14
+ filename = 'index.html';
15
+ }
16
+
19
17
  const isVfsExplicit = url.searchParams.get('vfs') === 'true';
20
18
 
21
- // Intercept if we have the file in memory OR if the developer explicitly tagged it
19
+ // Intercept if it's our target index or explicitly tagged
22
20
  if (vfsStorage.has(filename) || isVfsExplicit) {
23
21
  event.respondWith(
24
- // Use a short promise loop to wait if the asset hasn't finished writing to memory yet
25
22
  new Promise((resolve) => {
26
23
  const checkFile = () => {
27
24
  if (vfsStorage.has(filename)) {
28
25
  const fileData = vfsStorage.get(filename);
29
26
  const ext = filename.split('.').pop().toLowerCase();
30
- const contentType = fileData.mime || defaultMimes[ext] || 'application/octet-stream';
27
+
28
+ const mimeMatrix = { 'js': 'text/javascript', 'css': 'text/css', 'html': 'text/html' };
29
+ const contentType = fileData.mime || mimeMatrix[ext] || 'application/octet-stream';
31
30
 
32
31
  resolve(new Response(fileData.content, {
33
32
  status: 200,
@@ -38,8 +37,7 @@ self.addEventListener('fetch', (event) => {
38
37
  }
39
38
  }));
40
39
  } else {
41
- // Retry shortly if the network thread beat the main thread execution
42
- setTimeout(checkFile, 10);
40
+ setTimeout(checkFile, 5);
43
41
  }
44
42
  };
45
43
  checkFile();
@@ -49,20 +47,7 @@ self.addEventListener('fetch', (event) => {
49
47
  });
50
48
 
51
49
  self.addEventListener('message', (event) => {
52
- if (!event.data || !event.data.type) return;
53
-
54
- switch (event.data.type) {
55
- case 'VFS_WRITE':
56
- vfsStorage.set(event.data.filename, {
57
- content: event.data.content,
58
- mime: event.data.mime || null
59
- });
60
- break;
61
- case 'VFS_DELETE':
62
- vfsStorage.delete(event.data.filename);
63
- break;
64
- case 'VFS_CLEAR':
65
- vfsStorage.clear();
66
- break;
50
+ if (event.data && event.data.type === 'VFS_WRITE') {
51
+ vfsStorage.set(event.data.filename, { content: event.data.content, mime: event.data.mime });
67
52
  }
68
53
  });