baremetal.js 1.0.1 → 1.2.1
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/CHANGELOG.md +9 -0
- package/README.md +32 -37
- package/SECURITY.md +2 -2
- package/dist/baremetal.js +637 -0
- package/dist/baremetal.min.js +1 -0
- package/docs/api.md +17 -35
- package/package.json +21 -4
- package/src/index.js +20 -2
- package/src/loader.js +96 -71
- package/src/router.js +46 -45
- package/src/state.js +27 -20
- package/src/transition.js +14 -12
- package/src/virtualize.js +65 -0
- package/.gitattributes +0 -2
- package/.github/workflows/npm-publish.yml +0 -34
- package/CODE_OF_CONDUCT.md +0 -122
- package/CONTRIBUTING.md +0 -53
- package/demo/assets/audio/darren_hirst-20-474737.mp3 +0 -0
- package/demo/assets/js/media_player.js +0 -9
- package/demo/assets/js/page1_specific.js +0 -23
- package/demo/assets/js/page2_specific.js +0 -15
- package/demo/assets/js/shared.js +0 -56
- package/demo/assets/js/sidebar.js +0 -49
- package/demo/main.js +0 -18
- package/demo/page1.html +0 -139
- package/demo/page2.html +0 -132
- package/demo/page3_normal.html +0 -26
package/demo/page1.html
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<title>BareMetal Demo - Page 1</title>
|
|
7
|
-
<style>
|
|
8
|
-
body {
|
|
9
|
-
font-family: sans-serif;
|
|
10
|
-
margin: 0;
|
|
11
|
-
background-color: #f5f5f5;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
#sidebar {
|
|
15
|
-
position: fixed;
|
|
16
|
-
left: 0;
|
|
17
|
-
top: 0;
|
|
18
|
-
height: 100vh;
|
|
19
|
-
width: 250px;
|
|
20
|
-
background-color: #2c3e50;
|
|
21
|
-
color: white;
|
|
22
|
-
transition: width 0.3s ease;
|
|
23
|
-
overflow: hidden;
|
|
24
|
-
padding-top: 15px;
|
|
25
|
-
text-align: center;
|
|
26
|
-
z-index: 1000;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
#sidebar-toggle {
|
|
30
|
-
background: none;
|
|
31
|
-
border: none;
|
|
32
|
-
color: white;
|
|
33
|
-
font-size: 24px;
|
|
34
|
-
cursor: pointer;
|
|
35
|
-
margin-bottom: 20px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.nav-links a {
|
|
39
|
-
display: block;
|
|
40
|
-
padding: 15px;
|
|
41
|
-
color: #ecf0f1;
|
|
42
|
-
text-decoration: none;
|
|
43
|
-
font-weight: bold;
|
|
44
|
-
transition: background 0.2s;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.nav-links a:hover {
|
|
48
|
-
background-color: #34495e;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
#main-content {
|
|
52
|
-
margin-left: 250px;
|
|
53
|
-
/* default expanded */
|
|
54
|
-
padding: 30px;
|
|
55
|
-
transition: margin-left 0.3s ease;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.widget {
|
|
59
|
-
border: 1px solid #ccc;
|
|
60
|
-
padding: 20px;
|
|
61
|
-
margin-bottom: 20px;
|
|
62
|
-
border-radius: 8px;
|
|
63
|
-
background: white;
|
|
64
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.shared {
|
|
68
|
-
border-left: 4px solid #27ae60;
|
|
69
|
-
}
|
|
70
|
-
</style>
|
|
71
|
-
</head>
|
|
72
|
-
|
|
73
|
-
<body>
|
|
74
|
-
|
|
75
|
-
<div id="sidebar">
|
|
76
|
-
<button id="sidebar-toggle">☰</button>
|
|
77
|
-
<div class="nav-links">
|
|
78
|
-
<a href="/demo/page1.html" data-link>Page 1</a>
|
|
79
|
-
<a href="/demo/page2.html" data-link>Page 2</a>
|
|
80
|
-
<a href="/demo/page3_normal.html">Page 3 (No SPA)</a>
|
|
81
|
-
<a href="https://example.com" target="_blank">External</a>
|
|
82
|
-
</div>
|
|
83
|
-
</div>
|
|
84
|
-
|
|
85
|
-
<div id="main-content">
|
|
86
|
-
<h1>Welcome to Page 1</h1>
|
|
87
|
-
<p>This page uses a shared Translation Checker module, a Sidebar, and a specific Page 1 module.</p>
|
|
88
|
-
|
|
89
|
-
<div id="shared-widget" class="widget shared">
|
|
90
|
-
<h3>Shared Translation Module</h3>
|
|
91
|
-
<p>Translation count: <span id="trans-count">0</span></p>
|
|
92
|
-
<button id="btn-translate">Simulate Translation</button>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
<div id="page1-widget" class="widget">
|
|
96
|
-
<h3>Page 1 Specific Module</h3>
|
|
97
|
-
<p>This module only exists on Page 1 and will be destroyed when navigating away.</p>
|
|
98
|
-
</div>
|
|
99
|
-
|
|
100
|
-
<div class="widget" style="border-color: #e74c3c;">
|
|
101
|
-
<h3>Error Boundary Demo</h3>
|
|
102
|
-
<p>Click below to navigate to a page that doesn't exist.</p>
|
|
103
|
-
<a href="/does-not-exist.html"
|
|
104
|
-
style="display: inline-block; padding: 10px; background: #e74c3c; color: white; text-decoration: none; border-radius: 4px;">Trigger
|
|
105
|
-
404 Error</a>
|
|
106
|
-
</div>
|
|
107
|
-
</div>
|
|
108
|
-
|
|
109
|
-
<div id="media-container"
|
|
110
|
-
style="position: fixed; bottom: 20px; right: 20px; background: white; padding: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 1000; border-radius: 8px; transition: all 0.5s ease;">
|
|
111
|
-
<h4 style="margin-top:0; margin-bottom: 10px;">Uninterrupted Native Media</h4>
|
|
112
|
-
<video id="demo-video" data-baremetal-preserve width="300" controls autoplay muted loop>
|
|
113
|
-
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
|
|
114
|
-
Your browser does not support HTML video.
|
|
115
|
-
</video>
|
|
116
|
-
<br />
|
|
117
|
-
<audio id="demo-audio" data-baremetal-preserve controls style="width: 300px; margin-top: 10px;">
|
|
118
|
-
<source src="./assets/audio/darren_hirst-20-474737.mp3" type="audio/mpeg">
|
|
119
|
-
Your browser does not support the audio element.
|
|
120
|
-
</audio>
|
|
121
|
-
</div>
|
|
122
|
-
|
|
123
|
-
<!-- BareMetal Engine -->
|
|
124
|
-
<script type="module" src="./main.js"></script>
|
|
125
|
-
|
|
126
|
-
<!-- Page Configuration -->
|
|
127
|
-
<script type="module">
|
|
128
|
-
import { loader } from '../src/index.js';
|
|
129
|
-
loader({
|
|
130
|
-
sidebar: "/demo/assets/js/sidebar.js",
|
|
131
|
-
shared: "/demo/assets/js/shared.js",
|
|
132
|
-
page1: "/demo/assets/js/page1_specific.js",
|
|
133
|
-
mediaPlayer: "/demo/assets/js/media_player.js"
|
|
134
|
-
});
|
|
135
|
-
</script>
|
|
136
|
-
|
|
137
|
-
</body>
|
|
138
|
-
|
|
139
|
-
</html>
|
package/demo/page2.html
DELETED
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<title>BareMetal Demo - Page 2</title>
|
|
7
|
-
<style>
|
|
8
|
-
body {
|
|
9
|
-
font-family: sans-serif;
|
|
10
|
-
margin: 0;
|
|
11
|
-
background-color: #f5f5f5;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
#sidebar {
|
|
15
|
-
position: fixed;
|
|
16
|
-
left: 0;
|
|
17
|
-
top: 0;
|
|
18
|
-
height: 100vh;
|
|
19
|
-
width: 250px;
|
|
20
|
-
background-color: #2c3e50;
|
|
21
|
-
color: white;
|
|
22
|
-
transition: width 0.3s ease;
|
|
23
|
-
overflow: hidden;
|
|
24
|
-
padding-top: 15px;
|
|
25
|
-
text-align: center;
|
|
26
|
-
z-index: 1000;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
#sidebar-toggle {
|
|
30
|
-
background: none;
|
|
31
|
-
border: none;
|
|
32
|
-
color: white;
|
|
33
|
-
font-size: 24px;
|
|
34
|
-
cursor: pointer;
|
|
35
|
-
margin-bottom: 20px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.nav-links a {
|
|
39
|
-
display: block;
|
|
40
|
-
padding: 15px;
|
|
41
|
-
color: #ecf0f1;
|
|
42
|
-
text-decoration: none;
|
|
43
|
-
font-weight: bold;
|
|
44
|
-
transition: background 0.2s;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.nav-links a:hover {
|
|
48
|
-
background-color: #34495e;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
#main-content {
|
|
52
|
-
margin-left: 250px; /* default expanded */
|
|
53
|
-
padding: 30px;
|
|
54
|
-
transition: margin-left 0.3s ease;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.widget {
|
|
58
|
-
border: 1px solid #ccc;
|
|
59
|
-
padding: 20px;
|
|
60
|
-
margin-bottom: 20px;
|
|
61
|
-
border-radius: 8px;
|
|
62
|
-
background: white;
|
|
63
|
-
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.shared {
|
|
67
|
-
border-left: 4px solid #27ae60;
|
|
68
|
-
}
|
|
69
|
-
</style>
|
|
70
|
-
</head>
|
|
71
|
-
|
|
72
|
-
<body>
|
|
73
|
-
|
|
74
|
-
<div id="sidebar">
|
|
75
|
-
<button id="sidebar-toggle">☰</button>
|
|
76
|
-
<div class="nav-links">
|
|
77
|
-
<a href="/demo/page1.html" data-link>Page 1</a>
|
|
78
|
-
<a href="/demo/page2.html" data-link>Page 2</a>
|
|
79
|
-
<a href="/demo/page3_normal.html">Page 3 (No SPA)</a>
|
|
80
|
-
<a href="https://example.com" target="_blank">External</a>
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
83
|
-
|
|
84
|
-
<div id="main-content">
|
|
85
|
-
<h1>Welcome to Page 2</h1>
|
|
86
|
-
<p>This is a completely different page, but notice the sidebar and translation widget state are maintained perfectly!</p>
|
|
87
|
-
|
|
88
|
-
<div id="media-container" class="widget" style="background: #333; color: white; border-left: 4px solid #e74c3c; transition: all 0.5s ease;">
|
|
89
|
-
<h3 style="margin-top:0;">Deeply Nested & Transformed!</h3>
|
|
90
|
-
<p>I am still embedded in the main content flow, but my container's text and CSS synced seamlessly!</p>
|
|
91
|
-
<video id="demo-video" data-baremetal-preserve width="100%" controls autoplay muted loop>
|
|
92
|
-
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
|
|
93
|
-
Your browser does not support HTML video.
|
|
94
|
-
</video>
|
|
95
|
-
<br/>
|
|
96
|
-
<audio id="demo-audio" data-baremetal-preserve controls style="width: 300px; margin-top: 10px;">
|
|
97
|
-
<source src="./assets/audio/darren_hirst-20-474737.mp3" type="audio/mpeg">
|
|
98
|
-
Your browser does not support the audio element.
|
|
99
|
-
</audio>
|
|
100
|
-
</div>
|
|
101
|
-
|
|
102
|
-
<div id="shared-widget" class="widget shared">
|
|
103
|
-
<h3>Shared Translation Module</h3>
|
|
104
|
-
<p>Translation count: <span id="trans-count">0</span></p>
|
|
105
|
-
<button id="btn-translate">Simulate Translation</button>
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
<div id="page2-widget" class="widget">
|
|
109
|
-
<h3>Page 2 Specific Module</h3>
|
|
110
|
-
<p>This is a completely different module loaded dynamically.</p>
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
</div>
|
|
115
|
-
|
|
116
|
-
<!-- BareMetal Engine -->
|
|
117
|
-
<script type="module" src="./main.js"></script>
|
|
118
|
-
|
|
119
|
-
<!-- Page Configuration -->
|
|
120
|
-
<script type="module">
|
|
121
|
-
import { loader } from '../src/index.js';
|
|
122
|
-
loader({
|
|
123
|
-
sidebar: "/demo/assets/js/sidebar.js",
|
|
124
|
-
shared: "/demo/assets/js/shared.js",
|
|
125
|
-
page2: "/demo/assets/js/page2_specific.js",
|
|
126
|
-
mediaPlayer: "/demo/assets/js/media_player.js"
|
|
127
|
-
});
|
|
128
|
-
</script>
|
|
129
|
-
|
|
130
|
-
</body>
|
|
131
|
-
|
|
132
|
-
</html>
|
package/demo/page3_normal.html
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>BareMetal Demo - Normal Page</title>
|
|
6
|
-
<style>
|
|
7
|
-
body { font-family: sans-serif; padding: 20px; background-color: #f9f9f9; }
|
|
8
|
-
.nav { margin-bottom: 20px; padding: 10px; background: #eee; }
|
|
9
|
-
.nav a { margin-right: 15px; text-decoration: none; color: blue; }
|
|
10
|
-
</style>
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
|
|
14
|
-
<div class="nav">
|
|
15
|
-
<strong>Navigation:</strong>
|
|
16
|
-
<a href="/demo/page1.html">Back to Page 1</a>
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
<h1>Welcome to Page 3 (Normal Page)</h1>
|
|
20
|
-
<p>This page <strong>does not</strong> contain a BareMetal <code>loader({...})</code> configuration.</p>
|
|
21
|
-
<p>Because of this, the BareMetal Router detected it and performed a standard browser navigation (hard reload) to get here.</p>
|
|
22
|
-
|
|
23
|
-
<p>Notice that your translation counter from Page 1 and 2 has been reset because we left the SPA environment!</p>
|
|
24
|
-
|
|
25
|
-
</body>
|
|
26
|
-
</html>
|