vfsjs-test 1.0.7 → 1.0.9
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.
- package/index.html +6 -2
- package/main.js +16 -30
- package/package.json +1 -1
- package/sw.js +30 -13
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="
|
|
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,7 +1,5 @@
|
|
|
1
|
-
// main.js -
|
|
2
|
-
const display = document.getElementById('status');
|
|
1
|
+
// main.js - User API Facade and Browser Orchestration
|
|
3
2
|
|
|
4
|
-
// Clean user-facing API surface area
|
|
5
3
|
window.vfs = {
|
|
6
4
|
add(filename, contentString, customMime = null) {
|
|
7
5
|
return window._vfsKernel.write(filename, contentString, customMime);
|
|
@@ -11,43 +9,31 @@ window.vfs = {
|
|
|
11
9
|
},
|
|
12
10
|
clear() {
|
|
13
11
|
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();
|
|
21
12
|
}
|
|
22
13
|
};
|
|
23
14
|
|
|
24
15
|
async function startDeveloperWorkspace() {
|
|
25
|
-
//
|
|
26
|
-
const
|
|
27
|
-
if (
|
|
16
|
+
// FIX: Look up the display element now that the DOM layout is guaranteed to exist
|
|
17
|
+
const display = document.getElementById('status');
|
|
18
|
+
if (display) display.innerHTML += "<br>> Running developer asset deployment...";
|
|
28
19
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
// 2. Add your scripts and styles to memory
|
|
32
|
-
vfs.add('live-theme.css', `
|
|
20
|
+
// Add your scripts and styles to memory target registers
|
|
21
|
+
vfs.add('live_theme.css', `
|
|
33
22
|
body { background: #020617 !important; color: #a5f3fc !important; }
|
|
34
23
|
#status { border-color: #334155 !important; background: #0f172a !important; }
|
|
35
24
|
`, 'text/css');
|
|
36
25
|
|
|
37
26
|
vfs.add('index.js', `
|
|
38
|
-
console.log("VFS Engine:
|
|
39
|
-
document.getElementById('status')
|
|
27
|
+
console.log("VFS Engine: Intercepted via head script execution successfully!");
|
|
28
|
+
const statusEl = document.getElementById('status');
|
|
29
|
+
if (statusEl) statusEl.innerHTML += "<br>> <span style='color: #22c55e;'>Virtual asset code running live!</span>";
|
|
40
30
|
`, 'text/javascript');
|
|
41
|
-
|
|
42
|
-
// Give the worker split-second thread cache timing
|
|
43
|
-
await new Promise(r => setTimeout(r, 50));
|
|
44
|
-
|
|
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');
|
|
48
|
-
|
|
49
|
-
// Example Test: You can run vfs.unhook() anytime later to completely pull them out!
|
|
50
|
-
// setTimeout(() => { vfs.unhook(); }, 5000);
|
|
51
31
|
}
|
|
52
32
|
|
|
53
|
-
|
|
33
|
+
// FIX: Wait for the DOM to be built before initializing the workspace thread structures
|
|
34
|
+
document.addEventListener('DOMContentLoaded', async () => {
|
|
35
|
+
const ready = await window._vfsKernel.init();
|
|
36
|
+
if (ready) {
|
|
37
|
+
startDeveloperWorkspace();
|
|
38
|
+
}
|
|
39
|
+
});
|
package/package.json
CHANGED
package/sw.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// sw.js -
|
|
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
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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
|
|