How to use with sveltekit - A mini guide.

[TheBitmonkey]

Here is my good deed for the day. I have gotten it to work with sveltekit finally.

There are three things to do.

1. vite.config.ts add this.

   optimizeDeps: { include: ['typewriter-editor > @typewriter/document'] }

2. svelte.config.ts - add this snippet (I am not sure this step is necessary)

   vitePlugin: { prebundleSvelteLibraries: true, },

3 - Only load in browser .svelte file:

    {#if browser}
        {#await import('./SmartEntry.svelte')}
            {' '}
        {:then e}
            <svelte:component this={e.default} />
        {/await}
    {:else}
        <noscript> Please allow javascript </noscript>
    {/if}

This works in Dev, I think I may need to add @rollup/plugin-commonjs to get it to build for prod. I will report back. Good luck all.

[nathancahill]

Thank you for this.

[cljnilsson]

A more complete example:

<script lang="ts">
    import { browser } from "$app/environment";
</script>

{#if browser}
    {#await import("typewriter-editor")}
        {' '}
    {:then e}
        {@const Editor = e.Editor}
        {@const editor = new Editor()}
        {#await import("typewriter-editor/lib/Toolbar.svelte")}
            {' '}
        {:then e}
            <svelte:component this={e.default} {editor} let:active let:commands>
                <div class="toolbar">
                    <button
                    class="toolbar-button"
                    class:active={active.header === 1}
                    on:click={commands.header1}>H1</button>

                    <button
                    class="toolbar-button"
                    class:active={active.bold}
                    on:click={commands.bold}>B</button>

                    <button
                    class="toolbar-button"
                    class:active={active.italic}
                    on:click={commands.italic}>I</button>
                </div>
            </svelte:component>
        {/await}

        {#await import("typewriter-editor/lib/Root.svelte")}
            {' '}
        {:then e}
            <svelte:component this={e.default} {editor} />
        {/await}
    {/await}
{:else}
    <noscript> Please allow javascript </noscript>
{/if}

However the text is reversed for some reason when I type which is weird.

[MarcGodard]

However the text is reversed for some reason when I type which is weird.

Is this still the case? I was going to use it for my svelte.kit project and add modules as needed, but not interested in using if its this far behind alternatives.