8131401ead
* fix: explain unsupported browsers instead of a blank window The desktop app on macOS 13 with WebKit older than Safari 17.4 opened an empty window because startup called Promise.withResolvers, which Vite lowers nothing for: build.target only rewrites syntax and never polyfills APIs, and the target itself was an implicit Vite default (#744). Make the supported baseline explicit in src/app/shell/support/baseline.ts and feed it to build.target, a lint rule that rejects newer static built-ins in browser-shipped sources, and the documented system requirements. Replace Promise.withResolvers with a createDeferred() helper. Turn src/main.ts into a small gate that checks sentinel features before dynamically importing the app, so an old engine still evaluates enough code to render platform-specific update guidance: macOS/Safari via Software Update, WebKitGTK and WebView2 on Linux and Windows, and each browser's own update path on the web, with a prefilled bug report link. Render-blocking errors during the first route are captured through app.config.errorHandler and shown the same way instead of leaving the window blank. Desktop facts come from tauri-plugin-os and a webview_version command; the bundle now declares macOS 13 as its minimum system version. * build: enforce the browser baseline from compatibility data Replace the hand-maintained list of built-ins newer than the baseline with two data-driven checks. The app and browser-shipped packages pin their TypeScript lib to ES2023, the last edition Chrome 111, Firefox 128 and Safari 16.4 implement in full, so a newer built-in such as Promise.withResolvers fails type-checking. Web APIs, which lib.dom does not version, go through eslint-plugin-compat under oxlint with the same browsers in settings.browsers, scoped to sources that ship to a browser. A unit test keeps the oxlint browser list and the tsconfig libs derived from src/app/shell/support/baseline.ts, so the three cannot drift apart. * fix: recognise production error codes in the boot observer Vue passes the error reference URL as the errorHandler info argument in production builds instead of the development string, so the observer never classified a setup or render failure as fatal in the shipped app and the boot-failure notice only appeared on the dev server. Match Vue's exported ErrorCodes in both forms, and cover the component-setup path in the E2E spec; the scenario was also verified against a production build.
118 lines
3.7 KiB
HTML
118 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" href="/favicon.ico" sizes="any" />
|
|
<link rel="icon" type="image/png" sizes="96x96" href="/brand/favicon-96x96.png" />
|
|
<link rel="icon" type="image/svg+xml" href="/brand/favicon.svg" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#1e1e1e" />
|
|
<title>OpenPencil</title>
|
|
<style>
|
|
:root {
|
|
--loader-bg: #1e1e1e;
|
|
--loader-fg: 255, 255, 255;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--loader-bg: #f3f4f6;
|
|
--loader-fg: 32, 33, 36;
|
|
}
|
|
}
|
|
html[data-theme='dark'] {
|
|
--loader-bg: #1e1e1e;
|
|
--loader-fg: 255, 255, 255;
|
|
}
|
|
html[data-theme='light'] {
|
|
--loader-bg: #f3f4f6;
|
|
--loader-fg: 32, 33, 36;
|
|
}
|
|
body { margin: 0; background: var(--loader-bg); }
|
|
#boot-splash {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
color: rgb(var(--loader-fg));
|
|
background: var(--loader-bg);
|
|
}
|
|
#boot-splash img { width: 40px; height: 40px; }
|
|
#boot-splash .bar {
|
|
position: absolute;
|
|
bottom: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, 40px);
|
|
width: 100px;
|
|
height: 2px;
|
|
background: rgba(var(--loader-fg), 0.08);
|
|
border-radius: 1px;
|
|
overflow: hidden;
|
|
}
|
|
#boot-splash .bar::after {
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
width: 40%;
|
|
background: rgba(var(--loader-fg), 0.25);
|
|
border-radius: 1px;
|
|
animation: slide 1s ease-in-out infinite;
|
|
}
|
|
@keyframes slide {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(350%); }
|
|
}
|
|
/* Pre-boot support notice; the app CSS never loads when it shows. */
|
|
#boot-notice {
|
|
box-sizing: border-box;
|
|
min-height: 100vh;
|
|
padding: 48px 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
max-width: 560px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
color: rgb(var(--loader-fg));
|
|
background: var(--loader-bg);
|
|
font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
#boot-notice img { width: 40px; height: 40px; margin-bottom: 8px; }
|
|
#boot-notice h1 { margin: 0; font-size: 18px; font-weight: 600; }
|
|
#boot-notice p { margin: 0; color: rgba(var(--loader-fg), 0.75); }
|
|
#boot-notice nav { margin-top: 8px; color: rgba(var(--loader-fg), 0.45); }
|
|
#boot-notice a { color: rgb(var(--loader-fg)); text-underline-offset: 3px; }
|
|
#boot-notice details { margin-top: 16px; max-width: 100%; color: rgba(var(--loader-fg), 0.6); }
|
|
#boot-notice summary { cursor: pointer; }
|
|
#boot-notice pre {
|
|
margin: 8px 0 0;
|
|
padding: 12px;
|
|
max-height: 40vh;
|
|
overflow: auto;
|
|
text-align: left;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-size: 12px;
|
|
border-radius: 6px;
|
|
background: rgba(var(--loader-fg), 0.06);
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div id="boot-splash">
|
|
<img src="/brand/app-icon.svg" width="40" height="40" alt="OpenPencil" />
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|