mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-11 00:38:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Move browser incompatibility check outside the JS bundle

Browse source
This commit is contained in:
Keavon Chambers 2022-11-02 18:01:38 -07:00
parent 5be59f7fce
commit f7fd1d94eb
2 changed files with 42 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/public/index.html
View file

@ -21,6 +21,42 @@
<noscript>JavaScript is required</noscript>
<!-- tabindex is used to allow the app to have focus while inside of it -->
<div data-app id="app" tabindex="0"></div>
<script>
// Confirm the browser is compatible before initializing the application
// Display an error if the browser is incompatible with a required API
// This is run outside the JS code bundle in case unsupported features cause a syntax error when parsing the bundle, preventing the any bundle code from running
let error;
if (!("BigUint64Array" in window)) {
error = `
<style>
h2, p, a { text-align: center; color: white; }
#app { display: none; }
</style>
<h2>This browser is too old to run Graphite</h2>
<p>Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.</p>
<p>(The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a>
JavaScript API must be supported by the browser for Graphite to function.)</p>
`.trim();
}
if (error) {
document.body.innerHTML = error + document.body.innerHTML;
delete window.graphiteAppInit;
} else {
const retry = () => {
if (window.graphiteAppInit) {
const init = window.graphiteAppInit;
delete window.graphiteAppInit;
init();
}
else {
setTimeout(retry, 0);
}
};
retry();
}
</script>
</body>
</html>

34
frontend/src/main.ts
View file

@ -1,43 +1,21 @@
// This file is the browser's entry point for the JS bundle
// reflect-metadata allows for runtime reflection of types in JavaScript.
// It is needed for class-transformer to work and is imported as a side effect.
// The library replaces the Reflect API on the window to support more features.
import "reflect-metadata";
import { createApp } from "vue";
import { stripIndents } from "@/utility-functions/strip-indents";
import { initWasm } from "@/wasm-communication/editor";
import App from "@/App.vue";
// Browser app entry point
(async (): Promise<void> => {
// Confirm the browser is compatible before initializing the application
if (!checkBrowserCompatibility()) return;
// This exported function is called in `index.html` after confirming that the browser supports all required JS standards
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(window as any).graphiteAppInit = async (): Promise<void> => {
// Initialize the WASM module for the editor backend
await initWasm();
// Initialize the Vue application
createApp(App).mount("#app");
})();
function checkBrowserCompatibility(): boolean {
if (!("BigUint64Array" in window)) {
const body = document.body;
const message = stripIndents`
<style>
h2, p, a { text-align: center; color: white; }
#app { display: none; }
</style>
<h2>This browser is too old</h2>
<p>Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.</p>
<p>(The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a>
JavaScript API must be supported by the browser for Graphite to function.)</p>
`;
body.innerHTML = message + body.innerHTML;
return false;
}
return true;
}
};