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:

<script> import { browser } from '$app/environment'; </script>

	{#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 😂

https://www.sveltelab.dev/oqemi2o2rjdmj54