Demo site loads correctly again

package.json

@@ -1,8 +1,9 @@
 {
   "name": "superellipse-squircle",
+  "private": true,
   "version": "0.1.12",
   "type": "module",
-  "main": "src/index.js",
+  "main": "index.js",
   "description": "Smoothest CSS squircles south of Saskatchewan",
   "homepage": "https://tim-harding.github.io/squircle",
   "license": "MIT",

pages/index.html

@@ -4,6 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="/favicon.svg" />
+
+    <script type="module" src="./src/main.js" async></script>
+
     <link href="/style.css" rel="stylesheet" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -125,7 +128,5 @@ <h1>Squircle</h1>
         </form>
       </th-tester>
     </main>
-
-    <script type="module" src="./src/main.js"></script>
   </body>
 </html>

pages/src/control.js

@@ -1,4 +1,3 @@
-import { loaded } from "pages/main";
 import { listenPassive } from "pages/shared";
 
 export class Control extends HTMLElement {
@@ -22,9 +21,7 @@ export class Control extends HTMLElement {
     const listen = listenPassive.bind(this, input);
     listen("input", this._handleChange);
 
-    loaded.then(() => {
-      this._emitChange(input);
-    });
+    this._emitChange(input);
   }
 
   /**

pages/src/corner.js

@@ -1,5 +1,4 @@
 import { listenPassive } from "pages/shared";
-import { loaded } from "pages/main";
 
 export class Corner extends HTMLElement {
   #isPressed = false;
@@ -45,12 +44,10 @@ export class Corner extends HTMLElement {
     switch (name) {
       case "side": {
         this.#side = newValue;
-        loaded.then(() => {
-          const event = new CustomEvent("th-corner__register", {
-            bubbles: true,
-          });
-          this.dispatchEvent(event);
+        const event = new CustomEvent("th-corner__register", {
+          bubbles: true,
         });
+        this.dispatchEvent(event);
         break;
       }
     }

pages/src/main.js

@@ -1,28 +1,18 @@
-const { promise, resolve } = Promise.withResolvers();
-export const loaded = promise;
+import { createCustomElement, register } from "@/index.js";
+import { Tester } from "pages/tester.js";
+import { DragArea } from "pages/drag-area.js";
+import { Control } from "pages/control.js";
+import { Corner } from "pages/corner.js";
+import { ThemeButton } from "pages/theme-button.js";
 
-export async function load() {
-  await Promise.all([loadPaintWorklet(), loadComponents()]);
-  resolve(undefined);
-}
-
-async function loadComponents() {
-  const promises = [
-    import("./tester.js"),
-    import("./drag-area.js"),
-    import("./control.js"),
-    import("./corner.js"),
-    import("./theme-button.js"),
-  ].map((promise) =>
-    promise.then(({ NAME, Component }) => {
-      customElements.define(NAME, Component);
-    }),
-  );
-  await Promise.all(promises);
-}
-
-async function loadPaintWorklet() {
-  const { register, createCustomElement } = await import("@");
+function main() {
   register();
   createCustomElement("th-squircle");
+  customElements.define("th-tester", Tester);
+  customElements.define("th-drag-area", DragArea);
+  customElements.define("th-control", Control);
+  customElements.define("th-corner", Corner);
+  customElements.define("th-theme-button", ThemeButton);
 }
+
+main();

pages/src/theme-button.js

@@ -1,6 +1,6 @@
 import { listenPassive } from "pages/shared";
 
-class ThemeButton extends HTMLElement {
+export class ThemeButton extends HTMLElement {
   _isLight = true;
   /** @type {ElementInternals} */
   _internals;