Anki Forums

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

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 ?

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

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.

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

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

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.

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