Loaded promise

demo/assets/js/corner.js

@@ -1,5 +1,5 @@
 import { listenPassive } from "./shared.js";
-import { NAME as NAME_DRAG_AREA } from "./drag-area.js";
+import { loaded } from "./loading.js";
 
 export class Corner extends HTMLElement {
   _isPressed = false;
@@ -27,7 +27,7 @@ export class Corner extends HTMLElement {
     switch (name) {
       case "side": {
         this._side = newValue;
-        customElements.whenDefined(NAME_DRAG_AREA).then(() => {
+        loaded.then(() => {
           const event = new CustomEvent("th-corner__register", {
             bubbles: true,
           });

demo/assets/js/demo.js → demo/assets/js/loading.js

@@ -1,20 +1,28 @@
 const IS_PAINT_SUPPORTED = CSS.supports("background", "paint(id)");
 
-function main() {
-  loadSquircleComponent();
-  loadPaintWorklet();
-  const modulePromises = [
+const { promise, resolve } = Promise.withResolvers();
+export const loaded = promise;
+
+export async function load() {
+  await Promise.all([
+    loadSquircleComponent(),
+    loadPaintWorklet(),
+    loadComponents(),
+  ]);
+  resolve(undefined);
+}
+
+async function loadComponents() {
+  const modules = await Promise.all([
     import("./tester.js"),
     import("./drag-area.js"),
     import("./control.js"),
     import("./corner.js"),
-  ];
-  Promise.all(modulePromises).then((modules) => {
-    for (const module of modules) {
-      const { NAME, Component } = module;
-      customElements.define(NAME, Component);
-    }
-  });
+  ]);
+  for (const module of modules) {
+    const { NAME, Component } = module;
+    customElements.define(NAME, Component);
+  }
 }
 
 async function loadPaintWorklet() {
@@ -32,5 +40,3 @@ async function loadSquircleComponent() {
   const module = await promise;
   customElements.define("th-squircle", module.default);
 }
-
-main();

demo/index.html

@@ -7,11 +7,11 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <script
-      src="{{ '/assets/js/demo.js' | relative_url }}"
-      type="module"
-      async
-    ></script>
+    <script type="module">
+      import("{{ '/assets/js/loading.js' | relative_url }}").then(({ load }) =>
+        load(),
+      );
+    </script>
 
     <link
       href="https://unpkg.com/[email protected]/index.css"