Using Svelte editor components from Anki - what causes "TypeError: ctx[3] is not a constructor"?

Anki Development
1

As you can see on my screenshot, the ctx array doesn’t contain the element / class at index 3. So the “new” call is bound to fail. This seems to happen when instantiating the LabelButton. This is the debugger view.

Are Anki’s Svelte components like LabelButton available for addons to use ?

2021-08-17 14_11_04-User 1 - Anki
2021-08-17 14_11_04-User 1 - Anki1920×1739 189 KB

I’m simply trying to do this:
LanguageToolsTest1.svelte

<script>
    const {
        ButtonGroupItem,
        ButtonGroup,
        LabelButton,
    } = components;
    export let api = {};
    let liveUpdates = true;
    function toggleLiveUpdates() {
        liveUpdates = ! liveUpdates;
        bridgeCommand('liveupdates:' + liveUpdates);
    }
</script>

<ButtonGroup {api}>
    <ButtonGroupItem>        
        <LabelButton
            tooltip="toggle live updates"
            on:click={() => toggleLiveUpdates()}>
            LT: Live Updates
            {#if liveUpdates}
                <b>on</b>
            {:else}
                <b>off</b>
            {/if}                
        </LabelButton>
    </ButtonGroupItem>
</ButtonGroup>

addon_test_1.js

import LanguageTools1 from "./LanguageToolsTest1.svelte";

$editorToolbar.then((editorToolbar) => {
    console.log("editor toolbar initialized");

    window.addLanguageToolsGroup = function() {
        console.log("addLanguageToolsGroup");
        editorToolbar.toolbar.insertGroup({component: LanguageTools1, id: "languagetools"});
    }
    
});
2

I kind of gave up trying to leverage Anki’s svelte components. If I just use my own components, I’m still able to add a “group” in the editor, and svelte is a nice upgrade over handcoded html/jquery. So I kind of got it working, but ideally in the future we’d be able to use Anki’s components and style.

3

ButtonGroup and ButtonGroupItem are currently not exported. However the add-on API in the editor is generally still in an Alpha stage. We’re still looking for the best way to allow extension of Svelte components. The current approach unfortunately has some issues.

If you don’t mind, would you link to the add-on that you’re trying to develop here? I wonder how you ended up using your own Svelte components.

1 Like
4

@hengiesel see my editor customization in the screenshot here: Updates

5

I believe the error you were getting should be resolved in 2.1.47rc2, and the exported components should work correctly now, though not everything has been exported yet. To ensure the components work correctly, you’ll need to make sure you mark Svelte as external when bundling: anki_new_format_pack/build.js at no-parents · ankitects/anki_new_format_pack · GitHub

The comments about this being alpha still apply, as things may still need to be moved around/refactored as we get more experience with Svelte. The components global will likely be renamed to something like anki.components at one point for example.

6

thank you @dae , I will give it a try at some point.

7

@dae in the current state of things, is it possible for an addon to use ButtonGroup and ButtonGroupItem elements ?
I want to create a new editor toolbar.

8

I don’t think the API has been finalized yet - presumably we’ll be exporting them via registerPackage() in the future @hengiesel?

9

OK i’d be happy to test potential integrations in the future. Right now I’m using Svelte, but the integration with standard Anki components is so minimal that i’m not really drawing benefits from using Svelte (other than having learned a new web framework which seems decent and works for this purpose).

10

Yes, we’ll be exporting most of the component in the future. The extensibility has to be done slowly, so we don’t create interfaces we cannot support in the future :slight_smile:

1 Like