vfsjs-test 1.0.17 → 1.0.18
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 +8 -4
- package/main.js +40 -23
- package/package.json +1 -1
- package/vfsjs.js +24 -19
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
|
-
<
|
|
6
|
-
<title>Infrared Engine Workspace</title>
|
|
7
|
+
<title>My Completely Normal Project</title>
|
|
7
8
|
|
|
8
|
-
<
|
|
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
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
</
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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
package/vfsjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// vfsjs.js - Version
|
|
1
|
+
// vfsjs.js - Version 2.0.0 (DOM Hijacker Core)
|
|
2
2
|
(function() {
|
|
3
3
|
const encoder = new TextEncoder();
|
|
4
4
|
|
|
@@ -11,30 +11,33 @@
|
|
|
11
11
|
await new Promise(r => navigator.serviceWorker.addEventListener('controllerchange', r, { once: true }));
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
// 2.
|
|
14
|
+
// 2. HIJACK STEP: Capture the exact raw HTML code the developer wrote on the page
|
|
15
|
+
// We wrap it back into a standard root <html> tag structure
|
|
16
|
+
const developerRawHtml = `<!DOCTYPE html>\n<html>${document.documentElement.innerHTML}</html>`;
|
|
17
|
+
|
|
18
|
+
// 3. Commit their real file markup into the Virtual File System instantly
|
|
19
|
+
this.write('index.html', developerRawHtml, 'text/html');
|
|
20
|
+
|
|
21
|
+
// 4. Structural Reset: Wipe the main window clear and lock it down
|
|
22
|
+
document.documentElement.innerHTML = '';
|
|
15
23
|
Object.assign(document.documentElement.style, { width: '100%', height: '100%', overflow: 'hidden', margin: '0', padding: '0' });
|
|
16
24
|
Object.assign(document.body.style, { width: '100%', height: '100%', overflow: 'hidden', margin: '0', padding: '0', background: '#020617' });
|
|
17
25
|
|
|
18
|
-
//
|
|
26
|
+
// 5. Spawn the seamless canvas iframe over the blank screen
|
|
19
27
|
const iframe = document.createElement('iframe');
|
|
20
28
|
iframe.id = 'canvas-viewport';
|
|
21
|
-
iframe.setAttribute('scrolling', 'no');
|
|
22
29
|
Object.assign(iframe.style, {
|
|
23
|
-
position: 'absolute',
|
|
24
|
-
|
|
25
|
-
left: '0',
|
|
26
|
-
width: '100%',
|
|
27
|
-
height: '100%',
|
|
28
|
-
border: 'none',
|
|
29
|
-
margin: '0',
|
|
30
|
-
padding: '0',
|
|
31
|
-
zIndex: '999999'
|
|
30
|
+
position: 'absolute', top: '0', left: '0', width: '100%', height: '100%',
|
|
31
|
+
border: 'none', margin: '0', padding: '0', zIndex: '999999'
|
|
32
32
|
});
|
|
33
|
-
|
|
34
33
|
document.body.appendChild(iframe);
|
|
34
|
+
|
|
35
|
+
// 6. Point the canvas to our newly virtualized file route!
|
|
36
|
+
iframe.src = './?vfs=true';
|
|
37
|
+
|
|
35
38
|
return true;
|
|
36
39
|
} catch (err) {
|
|
37
|
-
console.error("VFS
|
|
40
|
+
console.error("VFS Hijacker Core Failure:", err);
|
|
38
41
|
return false;
|
|
39
42
|
}
|
|
40
43
|
},
|
|
@@ -42,14 +45,16 @@
|
|
|
42
45
|
write(filename, contentString, customMime) {
|
|
43
46
|
if (!navigator.serviceWorker.controller) return false;
|
|
44
47
|
navigator.serviceWorker.controller.postMessage({
|
|
45
|
-
type: 'VFS_WRITE',
|
|
46
|
-
filename: filename,
|
|
47
|
-
content: encoder.encode(contentString),
|
|
48
|
-
mime: customMime
|
|
48
|
+
type: 'VFS_WRITE', filename: filename, content: encoder.encode(contentString), mime: customMime
|
|
49
49
|
});
|
|
50
50
|
return true;
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
|
|
54
54
|
window._vfsKernel = engineCore;
|
|
55
|
+
|
|
56
|
+
// AUTOMATION: Run the hijack sequence as soon as the DOM tree is structured
|
|
57
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
58
|
+
engineCore.init();
|
|
59
|
+
});
|
|
55
60
|
})();
|