code reorganized

src/backend/main.tsx

@@ -35,7 +35,7 @@ export const mainPageHandler: RequestHandler = (req, res) => {
                     type="submit"
                     name={key}
                     value={`${counters[key] - 1}`}
-                    is="button-query-tracker"
+                    is="reactive-button"
                     track={key}
                     delta="-1"
                   >
@@ -45,7 +45,7 @@ export const mainPageHandler: RequestHandler = (req, res) => {
                     type="submit"
                     name={key}
                     value={`${counters[key] + 1}`}
-                    is="button-query-tracker"
+                    is="reactive-button"
                     track={key}
                     delta="+1"
                   >
@@ -53,7 +53,7 @@ export const mainPageHandler: RequestHandler = (req, res) => {
                   </button>
                 </form>{" "}
                 Value of "{key}":{" "}
-                <span class="counter" is="span-query-tracker" track={key}>
+                <span class="counter" is="reactive-span" track={key}>
                   {counters[key]}
                 </span>
               </li>

src/frontend/app.ts

@@ -1,13 +1,9 @@
 import { computeAllSolutions } from "../shared/solver.ts";
 import { rules } from "../shared/tictactoe-rules.ts";
-import { ProgressiveForm } from "./progressive-form.ts";
+import { initializeWebComponents } from "./components/index.ts";
-import { ButtonTracker, SpanTracker } from "./query-tracker.ts";
-
-customElements.define("progressive-form", ProgressiveForm, { extends: "form" });
-customElements.define("span-query-tracker", SpanTracker, { extends: "span" });
-customElements.define("button-query-tracker", ButtonTracker, { extends: "button" });
 
 document.addEventListener("DOMContentLoaded", function () {
+  initializeWebComponents();
   const allSolutions = computeAllSolutions(3, 3, rules);
   console.log(allSolutions.size);
   console.log(allSolutions);

src/frontend/components/index.ts

@@ -0,0 +1,16 @@
+import { ProgressiveForm } from "./progressive-form.ts";
+import { ReactiveButton } from "./reactive-button.ts";
+import { ReactiveSpan } from "./reactive-span.ts";
+
+export const initializeWebComponents = () => {
+  if ((window as Partial<typeof window>).customElements?.define) {
+    // We need to define customized built-in elements first,
+    // because WebKit (Safari) is not standard-compliant[1] and doesn't support them,
+    // so hopefully these calls will throw, leaving us with all custom elements or none,
+    // instead of defining autonomous custom elements and skipping customized built-in elements.
+    // [1]: https://github.com/WebKit/standards-positions/issues/97
+    customElements.define("progressive-form", ProgressiveForm, { extends: "form" });
+    customElements.define("reactive-button", ReactiveButton, { extends: "button" });
+    customElements.define("reactive-span", ReactiveSpan, { extends: "span" });
+  }
+};

src/frontend/components/reactive-button.ts

@@ -0,0 +1,22 @@
+import { TrackingTools } from "../lib/query-tracking-utils.ts";
+
+export class ReactiveButton extends HTMLButtonElement {
+  private readonly trackingTools = new TrackingTools(this);
+
+  handleTrackedValueUpdate(newValue: string | null) {
+    const delta = parseInt(this.getAttribute("delta") ?? "0", 10);
+    this.value = (parseInt(newValue ?? "0", 10) + delta).toString();
+  }
+
+  connectedCallback() {
+    this.trackingTools.connectedCallback();
+  }
+
+  attributeChangedCallback() {
+    this.trackingTools.attributeChangedCallback();
+  }
+
+  disconnectedCallback() {
+    this.trackingTools.disconnectedCallback();
+  }
+}

src/frontend/components/reactive-span.ts

@@ -0,0 +1,21 @@
+import { TrackingTools } from "../lib/query-tracking-utils.ts";
+
+export class ReactiveSpan extends HTMLSpanElement {
+  private readonly trackingTools = new TrackingTools(this);
+
+  handleTrackedValueUpdate(newValue: string | null) {
+    this.innerText = newValue ?? "[null]";
+  }
+
+  connectedCallback() {
+    this.trackingTools.connectedCallback();
+  }
+
+  attributeChangedCallback() {
+    this.trackingTools.attributeChangedCallback();
+  }
+
+  disconnectedCallback() {
+    this.trackingTools.disconnectedCallback();
+  }
+}

src/frontend/lib/query-tracking-utils.ts

@@ -16,7 +16,7 @@ const createQueryStringTracker = (key: string, onChange: (newValue: string | nul
   };
 };
 
-class TrackingTools<
+export class TrackingTools<
   TElement extends HTMLElement & { handleTrackedValueUpdate(this: TElement, newValue: string | null): void },
 > {
   private currentTrackKey: string | null = null;
@@ -56,44 +56,3 @@ class TrackingTools<
     }
   }
 }
-
-export class SpanTracker extends HTMLSpanElement {
-  private readonly trackingTools = new TrackingTools(this);
-
-  handleTrackedValueUpdate(newValue: string | null) {
-    this.innerText = newValue ?? "[null]";
-  }
-
-  connectedCallback() {
-    this.trackingTools.connectedCallback();
-  }
-
-  attributeChangedCallback() {
-    this.trackingTools.attributeChangedCallback();
-  }
-
-  disconnectedCallback() {
-    this.trackingTools.disconnectedCallback();
-  }
-}
-
-export class ButtonTracker extends HTMLButtonElement {
-  private readonly trackingTools = new TrackingTools(this);
-
-  handleTrackedValueUpdate(newValue: string | null) {
-    const delta = parseInt(this.getAttribute("delta") ?? "0", 10);
-    this.value = (parseInt(newValue ?? "0", 10) + delta).toString();
-  }
-
-  connectedCallback() {
-    this.trackingTools.connectedCallback();
-  }
-
-  attributeChangedCallback() {
-    this.trackingTools.attributeChangedCallback();
-  }
-
-  disconnectedCallback() {
-    this.trackingTools.disconnectedCallback();
-  }
-}