Improved add-on extension API

.prettierignore

@@ -2,5 +2,6 @@ licenses.json
 vendor
 node_modules
 bazel-*
+.bazel
 ftl/usage
-.mypy_cache
+.mypy_cache

qt/aqt/browser/browser.py

@@ -413,9 +413,6 @@ def setupEditor(self) -> None:
 
         def add_preview_button(editor: Editor) -> None:
             editor._links["preview"] = lambda _editor: self.onTogglePreview()
-            editor.web.eval(
-                "noteEditorPromise.then(noteEditor => noteEditor.toolbar.notetypeButtons.appendButton({ component: editorToolbar.PreviewButton, id: 'preview' }));",
-            )
 
         gui_hooks.editor_did_init.append(add_preview_button)
         self.editor = aqt.editor.Editor(
@@ -633,9 +630,7 @@ def _renderPreview(self) -> None:
 
     def toggle_preview_button_state(self, active: bool) -> None:
         if self.editor.web:
-            self.editor.web.eval(
-                f"editorToolbar.togglePreviewButtonState({json.dumps(active)});"
-            )
+            self.editor.web.eval(f"togglePreviewButtonState({json.dumps(active)});")
 
     def _cleanup_preview(self) -> None:
         if self._previewer:

qt/aqt/editor.py

@@ -174,7 +174,7 @@ def setupWeb(self) -> None:
         righttopbtns_defs = ", ".join([json.dumps(button) for button in righttopbtns])
         righttopbtns_js = (
             f"""
-uiPromise.then(noteEditor => noteEditor.toolbar.toolbar.appendGroup({{
+require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].toolbar.toolbar.append({{
     component: editorToolbar.AddonButtons,
     id: "addons",
     props: {{ buttons: [ {righttopbtns_defs} ] }},
@@ -525,7 +525,9 @@ def oncallback(arg: Any) -> None:
             js += " setSticky(%s);" % json.dumps(sticky)
 
         js = gui_hooks.editor_will_load_note(js, self.note, self)
-        self.web.evalWithCallback(f"uiPromise.then(() => {{ {js} }})", oncallback)
+        self.web.evalWithCallback(
+            f'require("anki/ui").loaded.then(() => {{ {js} }})', oncallback
+        )
 
     def _save_current_note(self) -> None:
         "Call after note is updated with data from webview."
@@ -579,8 +581,12 @@ def _update_duplicate_display(self, result: NoteFieldsCheckResult.V) -> None:
         elif result == NoteFieldsCheckResult.FIELD_NOT_CLOZE:
             cloze_hint = tr.adding_cloze_outside_cloze_field()
 
-        self.web.eval(f"uiPromise.then(() => setBackgrounds({json.dumps(cols)}));")
-        self.web.eval(f"uiPromise.then(() => setClozeHint({json.dumps(cloze_hint)}));")
+        self.web.eval(
+            'require("anki/ui").loaded.then(() => {'
+            f"setBackgrounds({json.dumps(cols)});\n"
+            f"setClozeHint({json.dumps(cloze_hint)});\n"
+            "}); "
+        )
 
     def showDupes(self) -> None:
         aqt.dialogs.open(
@@ -1353,14 +1359,12 @@ def reverse_url_quoting(txt: str, editor: Editor) -> str:
 
 
 def set_cloze_button(editor: Editor) -> None:
-    if editor.note.note_type()["type"] == MODEL_CLOZE:
-        editor.web.eval(
-            'uiPromise.then((noteEditor) => noteEditor.toolbar.templateButtons.showButton("cloze")); '
-        )
-    else:
-        editor.web.eval(
-            'uiPromise.then((noteEditor) => noteEditor.toolbar.templateButtons.hideButton("cloze")); '
-        )
+    action = "show" if editor.note.note_type()["type"] == MODEL_CLOZE else "hide"
+    editor.web.eval(
+        'require("anki/ui").loaded.then(() =>'
+        f'require("anki/NoteEditor").instances[0].toolbar.templateButtons.{action}("cloze")'
+        "); "
+    )
 
 
 gui_hooks.editor_did_load_note.append(set_cloze_button)

ts/change-notetype/NotetypeSelector.svelte

@@ -6,9 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { ChangeNotetypeState } from "./lib";
     import StickyContainer from "../components/StickyContainer.svelte";
     import ButtonToolbar from "../components/ButtonToolbar.svelte";
-    import Item from "../components/Item.svelte";
     import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
     import LabelButton from "../components/LabelButton.svelte";
     import Badge from "../components/Badge.svelte";
     import { arrowRightIcon, arrowLeftIcon } from "./icons";
@@ -33,41 +31,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     --sticky-borders="0 0 1px"
 >
     <ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
-        <Item>
-            <ButtonGroupItem>
-                <LabelButton disabled={true}>
-                    {$info.oldNotetypeName}
-                </LabelButton>
-            </ButtonGroupItem>
-        </Item>
-        <Item>
-            <Badge iconSize={70}>
-                {#if window.getComputedStyle(document.body).direction == "rtl"}
-                    {@html arrowLeftIcon}
-                {:else}
-                    {@html arrowRightIcon}
-                {/if}
-            </Badge>
-        </Item>
-        <Item>
-            <ButtonGroup class="flex-grow-1">
-                <ButtonGroupItem>
-                    <SelectButton class="flex-grow-1" on:change={blur}>
-                        {#each $notetypes as entry}
-                            <SelectOption
-                                value={String(entry.idx)}
-                                selected={entry.current}
-                            >
-                                {entry.name}
-                            </SelectOption>
-                        {/each}
-                    </SelectButton>
-                </ButtonGroupItem>
-            </ButtonGroup>
-        </Item>
+        <LabelButton disabled={true}>
+            {$info.oldNotetypeName}
+        </LabelButton>
+        <Badge iconSize={70}>
+            {#if window.getComputedStyle(document.body).direction == "rtl"}
+                {@html arrowLeftIcon}
+            {:else}
+                {@html arrowRightIcon}
+            {/if}
+        </Badge>
+        <ButtonGroup class="flex-grow-1">
+            <SelectButton class="flex-grow-1" on:change={blur}>
+                {#each $notetypes as entry}
+                    <SelectOption value={String(entry.idx)} selected={entry.current}>
+                        {entry.name}
+                    </SelectOption>
+                {/each}
+            </SelectButton>
+        </ButtonGroup>
 
-        <Item>
-            <SaveButton {state} />
-        </Item>
+        <SaveButton {state} />
     </ButtonToolbar>
 </StickyContainer>

ts/change-notetype/SaveButton.svelte

@@ -8,7 +8,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { getPlatformString } from "../lib/shortcuts";
 
     import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
     import LabelButton from "../components/LabelButton.svelte";
     import Shortcut from "../components/Shortcut.svelte";
 
@@ -25,12 +24,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <ButtonGroup>
-    <ButtonGroupItem>
-        <LabelButton
-            theme="primary"
-            tooltip={getPlatformString(keyCombination)}
-            on:click={save}>{tr.actionsSave()}</LabelButton
-        >
-        <Shortcut {keyCombination} on:action={save} />
-    </ButtonGroupItem>
+    <LabelButton
+        theme="primary"
+        tooltip={getPlatformString(keyCombination)}
+        on:click={save}
+        --border-left-radius="5px"
+        --border-right-radius="5px">{tr.actionsSave()}</LabelButton
+    >
+    <Shortcut {keyCombination} on:action={save} />
 </ButtonGroup>

ts/components/BUILD.bazel

@@ -42,6 +42,7 @@ svelte_check(
         "//sass:breakpoints_lib",
         "//sass/bootstrap",
         "@npm//@types/bootstrap",
+        "//ts/lib:lib_pkg",
         "//ts/sveltelib:sveltelib_pkg",
     ],
 )

ts/components/ButtonDropdown.svelte

@@ -12,17 +12,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let className = "";
     export { className as class };
 
-    export let api: Record<string, unknown> | undefined = undefined;
-
     setContext(dropdownKey, null);
 </script>
 
-<ButtonToolbar
-    {id}
-    class="dropdown-menu btn-dropdown-menu {className}"
-    wrap={false}
-    {api}
->
+<ButtonToolbar {id} class="dropdown-menu btn-dropdown-menu {className}" wrap={false}>
     <div on:mousedown|preventDefault|stopPropagation on:click>
         <slot />
     </div>

ts/components/ButtonGroup.svelte

@@ -2,35 +2,12 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
-<script context="module" lang="ts">
-    import type { SvelteComponent } from "./registration";
-    import type { Identifier } from "./identifier";
-
-    export interface ButtonGroupAPI {
-        insertButton(button: SvelteComponent, position: Identifier): void;
-        appendButton(button: SvelteComponent, position: Identifier): void;
-        showButton(position: Identifier): void;
-        hideButton(position: Identifier): void;
-        toggleButton(position: Identifier): void;
-    }
-</script>
-
 <script lang="ts">
-    import ButtonGroupItem from "./ButtonGroupItem.svelte";
-    import { setContext } from "svelte";
-    import { writable } from "svelte/store";
-    import { buttonGroupKey } from "./context-keys";
-    import { insertElement, appendElement } from "./identifier";
-    import type { ButtonRegistration } from "./buttons";
-    import { ButtonPosition } from "./buttons";
-    import { makeInterface } from "./registration";
-
     export let id: string | undefined = undefined;
     let className: string = "";
     export { className as class };
 
     export let size: number | undefined = undefined;
-
     export let wrap: boolean | undefined = undefined;
 
     $: buttonSize = size ? `--buttons-size: ${size}rem; ` : "";
@@ -42,86 +19,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     $: style = buttonSize + buttonWrap;
-
-    function makeRegistration(): ButtonRegistration {
-        const detach = writable(false);
-        const position = writable(ButtonPosition.Standalone);
-        return { detach, position };
-    }
-
-    const { registerComponent, items, dynamicItems, getDynamicInterface } =
-        makeInterface(makeRegistration);
-
-    $: for (const [index, item] of $items.entries()) {
-        item.position.update(() => {
-            if ($items.length === 1) {
-                return ButtonPosition.Standalone;
-            } else if (index === 0) {
-                return ButtonPosition.InlineStart;
-            } else if (index === $items.length - 1) {
-                return ButtonPosition.InlineEnd;
-            } else {
-                return ButtonPosition.Center;
-            }
-        });
-    }
-
-    setContext(buttonGroupKey, registerComponent);
-
-    export let api: Partial<ButtonGroupAPI> | undefined = undefined;
-    let buttonGroupRef: HTMLDivElement;
-
-    function createApi(): void {
-        const { addComponent, updateRegistration } =
-            getDynamicInterface(buttonGroupRef);
-
-        const insertButton = (button: SvelteComponent, position: Identifier = 0) =>
-            addComponent(button, (added, parent) =>
-                insertElement(added, parent, position),
-            );
-        const appendButton = (button: SvelteComponent, position: Identifier = -1) =>
-            addComponent(button, (added, parent) =>
-                appendElement(added, parent, position),
-            );
-
-        const showButton = (id: Identifier) =>
-            updateRegistration(({ detach }) => detach.set(false), id);
-        const hideButton = (id: Identifier) =>
-            updateRegistration(({ detach }) => detach.set(true), id);
-        const toggleButton = (id: Identifier) =>
-            updateRegistration(
-                ({ detach }) => detach.update((old: boolean): boolean => !old),
-                id,
-            );
-
-        Object.assign(api, {
-            insertButton,
-            appendButton,
-            showButton,
-            hideButton,
-            toggleButton,
-        } as ButtonGroupAPI);
-    }
-
-    $: if (api && buttonGroupRef) {
-        createApi();
-    }
 </script>
 
-<div
-    bind:this={buttonGroupRef}
-    {id}
-    class="button-group btn-group {className}"
-    {style}
-    dir="ltr"
-    role="group"
->
+<div {id} class="button-group btn-group {className}" {style} dir="ltr" role="group">
     <slot />
-    {#each $dynamicItems as item (item[0].id)}
-        <ButtonGroupItem id={item[0].id} registration={item[1]}>
-            <svelte:component this={item[0].component} {...item[0].props} />
-        </ButtonGroupItem>
-    {/each}
 </div>
 
 <style lang="scss">