pwa: gui パッケージを導入 そもそも以前のコミットで gui パッケージが TypeScript のコンパイラバグ のせいでビルドできなくなってたり、 CustomElement として利用できな かったり (何故 Astro 上では見れていたのかは不明) していた。 なので gui 側にもちょこちょこ変更を加えている。

Changes

8 changed files (+46/-21)

• bun.lockb
• packages/gui/src/components/_utils.ts
  • @@ -33,8 +33,6 @@ },
    }; } - export const INTERNALS = Symbol("yamori.gui.components._utils.internals"); - /** * このプロジェクトで定義する全ての CustomElement の基底クラス。 *
  • @@ -59,10 +57,10 @@ * :is(:state(nonua), :--nonua, [nonua])
    * ``` */ export class YamoriComponent extends HTMLElement { - protected [INTERNALS]: ElementInternals; + internals: ElementInternals; - protected setCustomState(name: string): void { - const internals = this[INTERNALS]; + setCustomState(name: string): void { + const internals = this.internals; if (internals && internals.states) { // https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#compatibility_with_dashed-ident_syntax
  • @@ -76,8 +74,8 @@ this.setAttribute(`--_${name}`, "");
    } } - protected removeCustomState(name: string): void { - const internals = this[INTERNALS]; + removeCustomState(name: string): void { + const internals = this.internals; if (internals && internals.states) { try {
  • @@ -93,7 +91,7 @@
    constructor() { super(); - this[INTERNALS] = this.attachInternals(); + this.internals = this.attachInternals(); this.setCustomState("nonua"); }
• packages/gui/src/components/button/button.ts
  • @@ -1,7 +1,7 @@
    // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only - import { component, INTERNALS, YamoriComponent } from "../_utils"; + import { component, YamoriComponent } from "../_utils"; import css from "./button.css?inline";
  • @@ -47,10 +47,10 @@ this.setCustomState("pending");
    // NOTE: `aria-busy` は Live Region が更新中かどうかのフラグであり、 // ボタンといった内容の変わらないトリガーの状態表示としては不適切 // であるため弄らない。 - this[INTERNALS].ariaDisabled = "true"; + this.internals.ariaDisabled = "true"; } else { this.removeCustomState("pending"); - this[INTERNALS].ariaDisabled = "false"; + this.internals.ariaDisabled = "false"; } }
  • @@ -76,12 +76,15 @@ this.#spinner = document.createElement("div");
    this.#spinner.classList.add("spinner"); shadow.appendChild(this.#spinner); - this.tabIndex = 0; - - this[INTERNALS].role = "button"; + this.internals.role = "button"; } connectedCallback() { + // NOTE: 現状属性に影響を与えずに `tabIndex` を変える方法がない。 + // 属性を変える操作は DOM に接続してから行わないと DOM のエラー + // となるためここで行う必要がある。 + this.tabIndex = 0; + this.addEventListener("click", this.#onClick, { capture: true, });
  • @@ -116,7 +119,11 @@ }
    }; #onKeyDown = (event: KeyboardEvent): void => { - if (!this.#isEnabled() || event.key !== " ") { + if (event.key !== " ") { + return; + } + + if (!this.#isEnabled()) { event.preventDefault(); return; }
  • @@ -125,7 +132,11 @@ this.setCustomState("pressed");
    }; #onKeyUp = (event: KeyboardEvent): void => { - if (!this.#isEnabled() || event.key !== " ") { + if (event.key !== " ") { + return; + } + + if (!this.#isEnabled()) { event.preventDefault(); return; }
• packages/pwa/package.json
  • @@ -9,6 +9,7 @@ "clean": "rm -rf dist"
    }, "dependencies": { "@bufbuild/protobuf": "^2.2.2", + "@yamori/gui": "workspace:*", "@yamori/proto": "workspace:*", "idb": "^8.0.0" },
• packages/pwa/src/app.gleam
  • @@ -33,9 +33,8 @@
    case worker_result { Ok(worker) -> { let button = - dom.html("button") + dom.html("yamori-button") |> dom.append_child(dom.text("List Workspaces")) - |> dom.set_attribute("type", "button") let pre = dom.html("pre") let output = dom.html("output")
  • @@ -47,7 +46,7 @@
    { use _event <- dom.add_event_listener(button, "click") - button |> dom.set_attribute("disabled", "") + button |> dom.set_attribute("pending", "") use response <- backend.request( worker,
  • @@ -56,7 +55,7 @@ "List",
    encode_list_request(), ) - button |> dom.remove_attribute("disabled") + button |> dom.remove_attribute("pending") let text = decode_list_response(response)
• packages/pwa/src/components.ts (new)
  • @@ -0,0 +1,8 @@
    + // 起動時にドキュメントの読み込みを待たずに実行されるスクリプト。 + // + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: AGPL-3.0-only + + import { register } from "@yamori/gui"; + + register();
• packages/pwa/src/index.html
  • @@ -5,9 +5,11 @@ <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="content-security-policy" - content="default-src 'none'; img-src 'self' data:; script-src 'self'; connect-src 'self'; style-src 'self' 'unsafe-inline'; worker-src 'self'" + content="default-src 'none'; img-src 'self' data:; script-src 'self'; connect-src 'self'; style-src 'self' 'unsafe-inline'; worker-src 'self'; font-src 'self' data:" /> + <script type="module" async src="./components.ts"></script> <script type="module" src="./main.ts"></script> + <link rel="stylesheet" href="./styles.css" /> </head> <body></body> </html>
• packages/pwa/src/styles.css (new)
  • @@ -0,0 +1,6 @@
    + /* + * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + * SPDX-License-Identifier: AGPL-3.0-only + */ + + @import "@yamori/gui/all.css";