create-zenbu-app 0.0.21 → 0.0.22
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/package.json +1 -1
- package/templates/tailwind/src/renderer/components/app.tsx.tmpl +11 -0
- package/templates/tailwind/src/renderer/{App.tsx.tmpl → components/home.tsx.tmpl} +6 -25
- package/templates/tailwind/src/renderer/components/titlebar.tsx.tmpl +9 -0
- package/templates/tailwind/src/renderer/main.css +21 -0
- package/templates/tailwind/src/renderer/main.tsx.tmpl +2 -2
- package/templates/tailwind/src/renderer/splash.html +10 -5
- package/templates/vanilla/src/renderer/components/app.tsx.tmpl +11 -0
- package/templates/vanilla/src/renderer/{App.tsx.tmpl → components/home.tsx.tmpl} +2 -21
- package/templates/vanilla/src/renderer/components/titlebar.tsx.tmpl +9 -0
- package/templates/vanilla/src/renderer/{app.css → main.css} +42 -10
- package/templates/vanilla/src/renderer/main.tsx.tmpl +2 -2
- package/templates/vanilla/src/renderer/splash.html +10 -5
- package/templates/tailwind/src/renderer/app.css +0 -11
- package/templates/tailwind/src/renderer/installing.html +0 -118
- package/templates/vanilla/src/renderer/installing.html +0 -118
package/package.json
CHANGED
|
@@ -1,26 +1,16 @@
|
|
|
1
1
|
import { useRpc } from "@zenbujs/core/react"
|
|
2
2
|
import { useState } from "react"
|
|
3
3
|
|
|
4
|
-
function
|
|
5
|
-
return (
|
|
6
|
-
<div
|
|
7
|
-
className="h-10 shrink-0 border-b border-[#222]"
|
|
8
|
-
// @ts-expect-error webkit property
|
|
9
|
-
style={{ WebkitAppRegion: "drag" }}
|
|
10
|
-
/>
|
|
11
|
-
)
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function Home() {
|
|
4
|
+
export function Home() {
|
|
15
5
|
const rpc = useRpc()
|
|
16
6
|
const [cwd, setCwd] = useState<string | null>(null)
|
|
17
7
|
const [copied, setCopied] = useState(false)
|
|
18
8
|
|
|
19
9
|
return (
|
|
20
|
-
<main className="flex-1 px-8 pt-6 pb-8 font-sans text-
|
|
10
|
+
<main className="flex-1 px-8 pt-6 pb-8 font-sans text-zinc-900 dark:text-zinc-100">
|
|
21
11
|
<h1 className="text-2xl font-bold mb-2">Welcome to Zenbu.js</h1>
|
|
22
|
-
<p className="text-
|
|
23
|
-
Edit <code>src/renderer/
|
|
12
|
+
<p className="text-zinc-500 dark:text-zinc-400 mb-6">
|
|
13
|
+
Edit <code>src/renderer/components/home.tsx</code> to get started.
|
|
24
14
|
</p>
|
|
25
15
|
|
|
26
16
|
<button
|
|
@@ -35,11 +25,11 @@ function Home() {
|
|
|
35
25
|
|
|
36
26
|
{cwd && (
|
|
37
27
|
<div className="mt-3 flex items-center gap-2 max-w-md">
|
|
38
|
-
<code className="flex-1 p-2 rounded bg-
|
|
28
|
+
<code className="flex-1 p-2 rounded bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 text-xs truncate">
|
|
39
29
|
{cwd}
|
|
40
30
|
</code>
|
|
41
31
|
<button
|
|
42
|
-
className="bg-zinc-800 hover:bg-zinc-700 px-3 py-2 rounded text-xs"
|
|
32
|
+
className="bg-zinc-200 hover:bg-zinc-300 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-900 dark:text-zinc-100 px-3 py-2 rounded text-xs"
|
|
43
33
|
onClick={async () => {
|
|
44
34
|
await navigator.clipboard.writeText(cwd)
|
|
45
35
|
setCopied(true)
|
|
@@ -53,12 +43,3 @@ function Home() {
|
|
|
53
43
|
</main>
|
|
54
44
|
)
|
|
55
45
|
}
|
|
56
|
-
|
|
57
|
-
export function App() {
|
|
58
|
-
return (
|
|
59
|
-
<div className="flex flex-col min-h-screen">
|
|
60
|
-
<Titlebar />
|
|
61
|
-
<Home />
|
|
62
|
-
</div>
|
|
63
|
-
)
|
|
64
|
-
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
|
|
3
|
+
* {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
html,
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
height: 100%;
|
|
11
|
+
background: #fafafa;
|
|
12
|
+
color: #18181b;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@media (prefers-color-scheme: dark) {
|
|
16
|
+
html,
|
|
17
|
+
body {
|
|
18
|
+
background: #09090b;
|
|
19
|
+
color: #f4f4f5;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createRoot } from "react-dom/client"
|
|
2
2
|
import { ZenbuProvider } from "@zenbujs/core/react"
|
|
3
|
-
import { App } from "./
|
|
4
|
-
import "./
|
|
3
|
+
import { App } from "./components/app"
|
|
4
|
+
import "./main.css"
|
|
5
5
|
|
|
6
6
|
createRoot(document.getElementById("root")!).render(
|
|
7
7
|
<ZenbuProvider>
|
|
@@ -2,21 +2,26 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
|
-
|
|
5
|
+
<!--
|
|
6
|
+
Per-theme BaseWindow background colors. Zenbu's main process picks the
|
|
7
|
+
matching tag based on `nativeTheme.shouldUseDarkColors`, so the pre-paint
|
|
8
|
+
window flash matches the splash body.
|
|
9
|
+
-->
|
|
10
|
+
<meta name="zenbu-bg" content="#fafafa" media="(prefers-color-scheme: light)">
|
|
11
|
+
<meta name="zenbu-bg" content="#09090b" media="(prefers-color-scheme: dark)">
|
|
6
12
|
<style>
|
|
7
13
|
html, body {
|
|
8
14
|
height: 100%;
|
|
9
15
|
margin: 0;
|
|
10
16
|
padding: 0;
|
|
11
|
-
background: #
|
|
17
|
+
background: #fafafa;
|
|
12
18
|
}
|
|
13
19
|
@media (prefers-color-scheme: dark) {
|
|
14
20
|
html, body {
|
|
15
|
-
background: #
|
|
21
|
+
background: #09090b;
|
|
16
22
|
}
|
|
17
23
|
}
|
|
18
24
|
</style>
|
|
19
25
|
</head>
|
|
20
|
-
<body>
|
|
21
|
-
</body>
|
|
26
|
+
<body></body>
|
|
22
27
|
</html>
|
|
@@ -1,17 +1,7 @@
|
|
|
1
1
|
import { useRpc } from "@zenbujs/core/react"
|
|
2
2
|
import { useState } from "react"
|
|
3
3
|
|
|
4
|
-
function
|
|
5
|
-
return (
|
|
6
|
-
<div
|
|
7
|
-
className="titlebar"
|
|
8
|
-
// @ts-expect-error webkit property
|
|
9
|
-
style={{ WebkitAppRegion: "drag" }}
|
|
10
|
-
/>
|
|
11
|
-
)
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function Home() {
|
|
4
|
+
export function Home() {
|
|
15
5
|
const rpc = useRpc()
|
|
16
6
|
const [cwd, setCwd] = useState<string | null>(null)
|
|
17
7
|
const [copied, setCopied] = useState(false)
|
|
@@ -20,7 +10,7 @@ function Home() {
|
|
|
20
10
|
<main className="home">
|
|
21
11
|
<h1>Welcome to Zenbu.js</h1>
|
|
22
12
|
<p className="lede">
|
|
23
|
-
Edit <code>src/renderer/
|
|
13
|
+
Edit <code>src/renderer/components/home.tsx</code> to get started.
|
|
24
14
|
</p>
|
|
25
15
|
|
|
26
16
|
<button
|
|
@@ -51,12 +41,3 @@ function Home() {
|
|
|
51
41
|
</main>
|
|
52
42
|
)
|
|
53
43
|
}
|
|
54
|
-
|
|
55
|
-
export function App() {
|
|
56
|
-
return (
|
|
57
|
-
<div className="app">
|
|
58
|
-
<Titlebar />
|
|
59
|
-
<Home />
|
|
60
|
-
</div>
|
|
61
|
-
)
|
|
62
|
-
}
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
box-sizing: border-box;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
+
html,
|
|
5
6
|
body {
|
|
6
7
|
margin: 0;
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
height: 100%;
|
|
9
|
+
background: #fafafa;
|
|
10
|
+
color: #18181b;
|
|
9
11
|
font-family:
|
|
10
12
|
ui-sans-serif,
|
|
11
13
|
system-ui,
|
|
@@ -15,6 +17,14 @@ body {
|
|
|
15
17
|
sans-serif;
|
|
16
18
|
}
|
|
17
19
|
|
|
20
|
+
@media (prefers-color-scheme: dark) {
|
|
21
|
+
html,
|
|
22
|
+
body {
|
|
23
|
+
background: #09090b;
|
|
24
|
+
color: #f4f4f5;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
18
28
|
.app {
|
|
19
29
|
display: flex;
|
|
20
30
|
flex-direction: column;
|
|
@@ -24,13 +34,18 @@ body {
|
|
|
24
34
|
.titlebar {
|
|
25
35
|
height: 40px;
|
|
26
36
|
flex-shrink: 0;
|
|
27
|
-
border-bottom: 1px solid #
|
|
37
|
+
border-bottom: 1px solid #e4e4e7;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (prefers-color-scheme: dark) {
|
|
41
|
+
.titlebar {
|
|
42
|
+
border-bottom-color: #27272a;
|
|
43
|
+
}
|
|
28
44
|
}
|
|
29
45
|
|
|
30
46
|
.home {
|
|
31
47
|
flex: 1;
|
|
32
48
|
padding: 24px 32px 32px;
|
|
33
|
-
color: #e5e5e5;
|
|
34
49
|
}
|
|
35
50
|
|
|
36
51
|
.home h1 {
|
|
@@ -40,7 +55,7 @@ body {
|
|
|
40
55
|
}
|
|
41
56
|
|
|
42
57
|
.home .lede {
|
|
43
|
-
color: #
|
|
58
|
+
color: #71717a;
|
|
44
59
|
margin: 0 0 24px;
|
|
45
60
|
}
|
|
46
61
|
|
|
@@ -76,8 +91,8 @@ body {
|
|
|
76
91
|
flex: 1;
|
|
77
92
|
padding: 8px;
|
|
78
93
|
border-radius: 4px;
|
|
79
|
-
background: #
|
|
80
|
-
color: #
|
|
94
|
+
background: #f4f4f5;
|
|
95
|
+
color: #3f3f46;
|
|
81
96
|
font-size: 12px;
|
|
82
97
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
83
98
|
overflow: hidden;
|
|
@@ -85,9 +100,16 @@ body {
|
|
|
85
100
|
white-space: nowrap;
|
|
86
101
|
}
|
|
87
102
|
|
|
103
|
+
@media (prefers-color-scheme: dark) {
|
|
104
|
+
.cwd-value {
|
|
105
|
+
background: #18181b;
|
|
106
|
+
color: #d4d4d8;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
88
110
|
.copy-button {
|
|
89
|
-
background: #
|
|
90
|
-
color:
|
|
111
|
+
background: #e4e4e7;
|
|
112
|
+
color: #18181b;
|
|
91
113
|
border: 0;
|
|
92
114
|
padding: 8px 12px;
|
|
93
115
|
border-radius: 4px;
|
|
@@ -97,5 +119,15 @@ body {
|
|
|
97
119
|
}
|
|
98
120
|
|
|
99
121
|
.copy-button:hover {
|
|
100
|
-
background: #
|
|
122
|
+
background: #d4d4d8;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
@media (prefers-color-scheme: dark) {
|
|
126
|
+
.copy-button {
|
|
127
|
+
background: #27272a;
|
|
128
|
+
color: #f4f4f5;
|
|
129
|
+
}
|
|
130
|
+
.copy-button:hover {
|
|
131
|
+
background: #3f3f46;
|
|
132
|
+
}
|
|
101
133
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createRoot } from "react-dom/client"
|
|
2
2
|
import { ZenbuProvider } from "@zenbujs/core/react"
|
|
3
|
-
import { App } from "./
|
|
4
|
-
import "./
|
|
3
|
+
import { App } from "./components/app"
|
|
4
|
+
import "./main.css"
|
|
5
5
|
|
|
6
6
|
createRoot(document.getElementById("root")!).render(
|
|
7
7
|
<ZenbuProvider>
|
|
@@ -2,21 +2,26 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
|
-
|
|
5
|
+
<!--
|
|
6
|
+
Per-theme BaseWindow background colors. Zenbu's main process picks the
|
|
7
|
+
matching tag based on `nativeTheme.shouldUseDarkColors`, so the pre-paint
|
|
8
|
+
window flash matches the splash body.
|
|
9
|
+
-->
|
|
10
|
+
<meta name="zenbu-bg" content="#fafafa" media="(prefers-color-scheme: light)">
|
|
11
|
+
<meta name="zenbu-bg" content="#09090b" media="(prefers-color-scheme: dark)">
|
|
6
12
|
<style>
|
|
7
13
|
html, body {
|
|
8
14
|
height: 100%;
|
|
9
15
|
margin: 0;
|
|
10
16
|
padding: 0;
|
|
11
|
-
background: #
|
|
17
|
+
background: #fafafa;
|
|
12
18
|
}
|
|
13
19
|
@media (prefers-color-scheme: dark) {
|
|
14
20
|
html, body {
|
|
15
|
-
background: #
|
|
21
|
+
background: #09090b;
|
|
16
22
|
}
|
|
17
23
|
}
|
|
18
24
|
</style>
|
|
19
25
|
</head>
|
|
20
|
-
<body>
|
|
21
|
-
</body>
|
|
26
|
+
<body></body>
|
|
22
27
|
</html>
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="zenbu-bg" content="#111">
|
|
6
|
-
<title>Installing</title>
|
|
7
|
-
<style>
|
|
8
|
-
html, body {
|
|
9
|
-
height: 100%;
|
|
10
|
-
margin: 0;
|
|
11
|
-
padding: 0;
|
|
12
|
-
background: #111;
|
|
13
|
-
color: #ddd;
|
|
14
|
-
font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
15
|
-
-webkit-app-region: drag;
|
|
16
|
-
user-select: none;
|
|
17
|
-
}
|
|
18
|
-
body {
|
|
19
|
-
display: flex;
|
|
20
|
-
flex-direction: column;
|
|
21
|
-
align-items: center;
|
|
22
|
-
justify-content: center;
|
|
23
|
-
gap: 18px;
|
|
24
|
-
padding: 32px;
|
|
25
|
-
box-sizing: border-box;
|
|
26
|
-
}
|
|
27
|
-
.label {
|
|
28
|
-
font-size: 14px;
|
|
29
|
-
color: #f0f0f0;
|
|
30
|
-
letter-spacing: 0.2px;
|
|
31
|
-
min-height: 1.4em;
|
|
32
|
-
text-align: center;
|
|
33
|
-
}
|
|
34
|
-
.bar {
|
|
35
|
-
width: min(360px, 70%);
|
|
36
|
-
height: 4px;
|
|
37
|
-
background: #2a2a2a;
|
|
38
|
-
border-radius: 2px;
|
|
39
|
-
overflow: hidden;
|
|
40
|
-
position: relative;
|
|
41
|
-
}
|
|
42
|
-
.bar-fill {
|
|
43
|
-
position: absolute;
|
|
44
|
-
inset: 0 auto 0 0;
|
|
45
|
-
width: 0%;
|
|
46
|
-
background: #f0f0f0;
|
|
47
|
-
transition: width 180ms ease-out;
|
|
48
|
-
}
|
|
49
|
-
.bar.indeterminate .bar-fill {
|
|
50
|
-
width: 30%;
|
|
51
|
-
animation: slide 1.2s ease-in-out infinite;
|
|
52
|
-
}
|
|
53
|
-
@keyframes slide {
|
|
54
|
-
0% { transform: translateX(-100%); }
|
|
55
|
-
100% { transform: translateX(366%); }
|
|
56
|
-
}
|
|
57
|
-
.message {
|
|
58
|
-
font-size: 11px;
|
|
59
|
-
color: #888;
|
|
60
|
-
font-family: "SF Mono", Menlo, Consolas, monospace;
|
|
61
|
-
max-width: min(420px, 90%);
|
|
62
|
-
text-align: center;
|
|
63
|
-
overflow: hidden;
|
|
64
|
-
text-overflow: ellipsis;
|
|
65
|
-
white-space: nowrap;
|
|
66
|
-
min-height: 1.4em;
|
|
67
|
-
}
|
|
68
|
-
</style>
|
|
69
|
-
</head>
|
|
70
|
-
<body>
|
|
71
|
-
<div class="label" id="label">Starting…</div>
|
|
72
|
-
<div class="bar indeterminate" id="bar"><div class="bar-fill" id="fill"></div></div>
|
|
73
|
-
<div class="message" id="message"></div>
|
|
74
|
-
<script>
|
|
75
|
-
// The framework's built-in preload exposes `window.zenbuInstall` with
|
|
76
|
-
// `.on(event, cb)` returning an unsubscribe function. Events:
|
|
77
|
-
// step: { id: "clone" | "fetch" | "install" | "handoff", label }
|
|
78
|
-
// message: { text }
|
|
79
|
-
// progress: { phase?, loaded?, total?, ratio? }
|
|
80
|
-
// done: { id }
|
|
81
|
-
// error: { id?, message }
|
|
82
|
-
const api = window.zenbuInstall;
|
|
83
|
-
const labelEl = document.getElementById("label");
|
|
84
|
-
const messageEl = document.getElementById("message");
|
|
85
|
-
const barEl = document.getElementById("bar");
|
|
86
|
-
const fillEl = document.getElementById("fill");
|
|
87
|
-
if (api) {
|
|
88
|
-
api.on("step", (p) => {
|
|
89
|
-
if (p && p.label) labelEl.textContent = p.label;
|
|
90
|
-
barEl.classList.add("indeterminate");
|
|
91
|
-
fillEl.style.width = "";
|
|
92
|
-
});
|
|
93
|
-
api.on("message", (p) => {
|
|
94
|
-
if (p && p.text) messageEl.textContent = p.text;
|
|
95
|
-
});
|
|
96
|
-
api.on("progress", (p) => {
|
|
97
|
-
const ratio = p && typeof p.ratio === "number" ? p.ratio : null;
|
|
98
|
-
if (ratio != null && ratio >= 0) {
|
|
99
|
-
barEl.classList.remove("indeterminate");
|
|
100
|
-
fillEl.style.width = Math.max(2, Math.min(100, ratio * 100)) + "%";
|
|
101
|
-
} else {
|
|
102
|
-
barEl.classList.add("indeterminate");
|
|
103
|
-
}
|
|
104
|
-
});
|
|
105
|
-
api.on("done", () => {
|
|
106
|
-
messageEl.textContent = "";
|
|
107
|
-
});
|
|
108
|
-
api.on("error", (p) => {
|
|
109
|
-
labelEl.textContent = "Failed";
|
|
110
|
-
if (p && p.message) messageEl.textContent = p.message;
|
|
111
|
-
barEl.classList.remove("indeterminate");
|
|
112
|
-
fillEl.style.width = "100%";
|
|
113
|
-
fillEl.style.background = "#d04444";
|
|
114
|
-
});
|
|
115
|
-
}
|
|
116
|
-
</script>
|
|
117
|
-
</body>
|
|
118
|
-
</html>
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="zenbu-bg" content="#111">
|
|
6
|
-
<title>Installing</title>
|
|
7
|
-
<style>
|
|
8
|
-
html, body {
|
|
9
|
-
height: 100%;
|
|
10
|
-
margin: 0;
|
|
11
|
-
padding: 0;
|
|
12
|
-
background: #111;
|
|
13
|
-
color: #ddd;
|
|
14
|
-
font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
15
|
-
-webkit-app-region: drag;
|
|
16
|
-
user-select: none;
|
|
17
|
-
}
|
|
18
|
-
body {
|
|
19
|
-
display: flex;
|
|
20
|
-
flex-direction: column;
|
|
21
|
-
align-items: center;
|
|
22
|
-
justify-content: center;
|
|
23
|
-
gap: 18px;
|
|
24
|
-
padding: 32px;
|
|
25
|
-
box-sizing: border-box;
|
|
26
|
-
}
|
|
27
|
-
.label {
|
|
28
|
-
font-size: 14px;
|
|
29
|
-
color: #f0f0f0;
|
|
30
|
-
letter-spacing: 0.2px;
|
|
31
|
-
min-height: 1.4em;
|
|
32
|
-
text-align: center;
|
|
33
|
-
}
|
|
34
|
-
.bar {
|
|
35
|
-
width: min(360px, 70%);
|
|
36
|
-
height: 4px;
|
|
37
|
-
background: #2a2a2a;
|
|
38
|
-
border-radius: 2px;
|
|
39
|
-
overflow: hidden;
|
|
40
|
-
position: relative;
|
|
41
|
-
}
|
|
42
|
-
.bar-fill {
|
|
43
|
-
position: absolute;
|
|
44
|
-
inset: 0 auto 0 0;
|
|
45
|
-
width: 0%;
|
|
46
|
-
background: #f0f0f0;
|
|
47
|
-
transition: width 180ms ease-out;
|
|
48
|
-
}
|
|
49
|
-
.bar.indeterminate .bar-fill {
|
|
50
|
-
width: 30%;
|
|
51
|
-
animation: slide 1.2s ease-in-out infinite;
|
|
52
|
-
}
|
|
53
|
-
@keyframes slide {
|
|
54
|
-
0% { transform: translateX(-100%); }
|
|
55
|
-
100% { transform: translateX(366%); }
|
|
56
|
-
}
|
|
57
|
-
.message {
|
|
58
|
-
font-size: 11px;
|
|
59
|
-
color: #888;
|
|
60
|
-
font-family: "SF Mono", Menlo, Consolas, monospace;
|
|
61
|
-
max-width: min(420px, 90%);
|
|
62
|
-
text-align: center;
|
|
63
|
-
overflow: hidden;
|
|
64
|
-
text-overflow: ellipsis;
|
|
65
|
-
white-space: nowrap;
|
|
66
|
-
min-height: 1.4em;
|
|
67
|
-
}
|
|
68
|
-
</style>
|
|
69
|
-
</head>
|
|
70
|
-
<body>
|
|
71
|
-
<div class="label" id="label">Starting…</div>
|
|
72
|
-
<div class="bar indeterminate" id="bar"><div class="bar-fill" id="fill"></div></div>
|
|
73
|
-
<div class="message" id="message"></div>
|
|
74
|
-
<script>
|
|
75
|
-
// The framework's built-in preload exposes `window.zenbuInstall` with
|
|
76
|
-
// `.on(event, cb)` returning an unsubscribe function. Events:
|
|
77
|
-
// step: { id: "clone" | "fetch" | "install" | "handoff", label }
|
|
78
|
-
// message: { text }
|
|
79
|
-
// progress: { phase?, loaded?, total?, ratio? }
|
|
80
|
-
// done: { id }
|
|
81
|
-
// error: { id?, message }
|
|
82
|
-
const api = window.zenbuInstall;
|
|
83
|
-
const labelEl = document.getElementById("label");
|
|
84
|
-
const messageEl = document.getElementById("message");
|
|
85
|
-
const barEl = document.getElementById("bar");
|
|
86
|
-
const fillEl = document.getElementById("fill");
|
|
87
|
-
if (api) {
|
|
88
|
-
api.on("step", (p) => {
|
|
89
|
-
if (p && p.label) labelEl.textContent = p.label;
|
|
90
|
-
barEl.classList.add("indeterminate");
|
|
91
|
-
fillEl.style.width = "";
|
|
92
|
-
});
|
|
93
|
-
api.on("message", (p) => {
|
|
94
|
-
if (p && p.text) messageEl.textContent = p.text;
|
|
95
|
-
});
|
|
96
|
-
api.on("progress", (p) => {
|
|
97
|
-
const ratio = p && typeof p.ratio === "number" ? p.ratio : null;
|
|
98
|
-
if (ratio != null && ratio >= 0) {
|
|
99
|
-
barEl.classList.remove("indeterminate");
|
|
100
|
-
fillEl.style.width = Math.max(2, Math.min(100, ratio * 100)) + "%";
|
|
101
|
-
} else {
|
|
102
|
-
barEl.classList.add("indeterminate");
|
|
103
|
-
}
|
|
104
|
-
});
|
|
105
|
-
api.on("done", () => {
|
|
106
|
-
messageEl.textContent = "";
|
|
107
|
-
});
|
|
108
|
-
api.on("error", (p) => {
|
|
109
|
-
labelEl.textContent = "Failed";
|
|
110
|
-
if (p && p.message) messageEl.textContent = p.message;
|
|
111
|
-
barEl.classList.remove("indeterminate");
|
|
112
|
-
fillEl.style.width = "100%";
|
|
113
|
-
fillEl.style.background = "#d04444";
|
|
114
|
-
});
|
|
115
|
-
}
|
|
116
|
-
</script>
|
|
117
|
-
</body>
|
|
118
|
-
</html>
|