fix: use WebWorker polyfill to fix terminate error;

fix: esm.sh typescript `bare.ts` typo;
fix: not bundle on url load issue;
chore: replace rollup-plugin-virtual-fs with @rollup/plugin-virtual;
chore: update deps;

package.json

@@ -35,6 +35,7 @@
         "@okikio/animate": "^2.4.0",
         "@okikio/emitter": "^2.1.7",
         "@okikio/native": "^3.0.1",
+        "@rollup/plugin-virtual": "^2.0.3",
         "assert": "^2.0.0",
         "browser-builtins": "^3.3.1",
         "buffer": "^6.0.3",
@@ -48,8 +49,7 @@
         "path": "^0.12.7",
         "prettier": "^2.4.1",
         "pretty-bytes": "^5.6.0",
-        "rollup-plugin-virtual-fs": "^4.0.1-alpha.0",
-        "solid-js": "^1.1.4",
+        "solid-js": "^1.1.5",
         "stream": "^0.0.2",
         "typescript": "^4.4.3",
         "web-animations-js": "^2.3.2",
@@ -84,7 +84,7 @@
         "postcss-csso": "^5.0.1",
         "postcss-scss": "^4.0.0",
         "rollup": "^2.56.3",
-        "sass": "^1.41.1",
+        "sass": "^1.42.0",
         "standard-version": "^9.3.1",
         "tailwindcss": "^2.2.15",
         "workbox-build": "^6.3.0"

src/assets/_headers

@@ -14,6 +14,7 @@
   Link: <https://fonts.gstatic.com/s/materialiconsround/v62/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2>; rel=preload; as=font; type=font/woff2; crossorigin=anonymous
   Link: </js/theme.min.js>; rel=modulepreload
   Link: </js/critical.min.js>; rel=modulepreload
+  Link: </sw.js>; rel=prefetch
 
 /
   Link: </js/monaco.min.css>; rel=preload; as=style

src/pug/index.pug

@@ -56,7 +56,7 @@ block content
         .loading
       #editor
       +editor-btns
-
+      
     .app#output
       .center-container
         .loading

src/pug/layouts/layout.pug

@@ -69,7 +69,7 @@ html.dark(lang="en")
           .flex-1
           button.btn.dismiss(type="button") DISMISS
         .info-prompt.reload
-          p New content is available. Click OK to refresh.
+          p New content is available. Click OK to refresh all open tabs.
           .flex-1
           div.flex.self-end
             button.btn.accept(type="button") OK

src/ts/critical.ts

@@ -4,6 +4,9 @@ import { Navbar } from "./services/Navbar";
 import { themeSet, themeGet, runTheme } from "./scripts/theme";
 import { hit } from "countapi-js";
 
+import { Workbox } from "workbox-window";
+import { animate } from "@okikio/animate";
+
 try {
     // On theme switcher button click (mouseup is a tiny bit more efficient) toggle the theme between dark and light mode
     let themeSwitch = Array.from(document.querySelectorAll(".theme-toggle"));
@@ -85,10 +88,7 @@ window.addEventListener("load", () => {
 
 // Check that service workers are supported
 (async () => {
-    if ("serviceWorker" in navigator) {
-        const { Workbox } = await import("workbox-window");
-        const { animate } = await import("@okikio/animate");
-
+    if ("serviceWorker" in navigator) {        
         let reloadDialog = document.querySelector(
             ".info-prompt.reload"
         ) as HTMLElement;
@@ -111,7 +111,8 @@ window.addEventListener("load", () => {
                     target: dialogEl,
                     translateY: [200, 0],
                     fillMode: "both",
-                    easing: "ease-out",
+                    easing: "ease",
+                    duration: 350
                 };
 
                 let animateOut = {
@@ -162,18 +163,19 @@ window.addEventListener("load", () => {
             // that a user can either accept or reject.
             dialog("confirm")
                 .then(() => {
-                    // Assuming the user accepted the update, set up a listener
-                    // that will reload the page as soon as the previously waiting
-                    // service worker has taken control.
-                    wb.addEventListener("controlling", (event) => {
-                        window.location.reload();
-                    });
 
                     wb.messageSkipWaiting();
                 })
                 .catch(() => { });
         });
 
+        // Assuming the user accepted the update, set up a listener
+        // that will reload the page as soon as the previously waiting
+        // service worker has taken control.
+        wb.addEventListener("controlling", (event) => {
+            window.location.reload();
+        });
+
         wb.addEventListener("activated", (event) => {
             // `event.isUpdate` will be true if another version of the service
             // worker was controlling the page when this version was registered.
@@ -186,8 +188,6 @@ window.addEventListener("load", () => {
             }
         });
 
-        window.addEventListener("load", () => {
-            wb.register();
-        });
+        wb.register();
     }
 })();