code reorganized

main
Inga 🏳‍🌈 5 days ago
parent 7bba979de8
commit f96447c8d1
  1. 6
      src/backend/main.tsx
  2. 8
      src/frontend/app.ts
  3. 16
      src/frontend/components/index.ts
  4. 0
      src/frontend/components/progressive-form.ts
  5. 22
      src/frontend/components/reactive-button.ts
  6. 21
      src/frontend/components/reactive-span.ts
  7. 0
      src/frontend/lib/navigation-utils.ts
  8. 43
      src/frontend/lib/query-tracking-utils.ts

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

@ -1,13 +1,9 @@
import { computeAllSolutions } from "../shared/solver.ts"; import { computeAllSolutions } from "../shared/solver.ts";
import { rules } from "../shared/tictactoe-rules.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 () { document.addEventListener("DOMContentLoaded", function () {
initializeWebComponents();
const allSolutions = computeAllSolutions(3, 3, rules); const allSolutions = computeAllSolutions(3, 3, rules);
console.log(allSolutions.size); console.log(allSolutions.size);
console.log(allSolutions); console.log(allSolutions);

@ -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" });
}
};

@ -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();
}
}

@ -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();
}
}

@ -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 }, TElement extends HTMLElement & { handleTrackedValueUpdate(this: TElement, newValue: string | null): void },
> { > {
private currentTrackKey: string | null = null; 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();
}
}
Loading…
Cancel
Save