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.

[w3rafu]

Thank you for saving me so much time.

[Extarys]

RIP I get: Cannot find module 'typewriter-editor/lib/Toolbar.svelte' or its corresponding type declarations.ts(2307)

And if I try to import typewriter in the script section:

dev: Error [ERR_MODULE_NOT_FOUND]: Cannot find module './my-turbo/node_modules/@typewriter/document/dist/deltaToText' imported from ./my-turbo-2024/node_modules/@typewriter/document/dist/index.js

(I had to install @typewriter/document manually because it was throwing an error about it missing.)

Is this suppose to be svelte compatible ? I don't see any documentation about it working :joy:

https://www.sveltelab.dev/oqemi2o2rjdmj54