Svelte: Using external library as component

[creationix]

I'm considering writing an app using svelte, but I'm at a loss as how to integrate something like codemirror. It's a giant JS library with tons of code packaged in it's own CJS/AMD style hybrid.

Should I port the code to helpers and svelte components (a lot of work) or is there a way to simply include external mutable components inside a svelte component? How should the lifecycle work?

[creationix]

I'd love to somehow take advantage of svelte or rollup's features to compile codemirror itself so that I only include the code I'm actually using, but I'm not how to do that short of completely repackaging the entire codebase to ES6 modules or something.

[Rich-Harris]

You can use import statements in a Svelte component and they'll be preserved in the resulting JS module (or converted into e.g. require statements if you're generating a CommonJS module) so that a bundler can then use them.

For the REPL, I cheated – am just bundling up the bits of CodeMirror I need into codemirror-bundle.js and slapping it on the page, then accessing it as a global inside the <CodeMirror/> component:

https://github.com/sveltejs/svelte.technology/blob/master/src/repl/components/CodeMirror.html

Regardless of how you get the external library accessible within the component, the way it works is that in the onrender hook, the CodeMirror instance is created, then we destroy it if the component is torn down. You can basically do any custom integrations you want with that approach.

[creationix]

Thanks

[creationix]

I've been using a similar technique for a while. I guess if I get annoyed enough I'll port the parts of codemirror I need (or write some sort of automated compiler) to ES6 format for easier tooling.

[phungleson]

Hey guys, I probably ran into a similar issue, trying to use https://github.com/ivmartel/dwv with svelte.

I couldn't get rollup to compile the whole thing together (various errors). So I am thinking of loading dwv as a separate file. However all the links here seem to be invalid, so wonder what is the current idiomatic way to solve the problem? Thanks in advance.

[milahu]

I couldn't get rollup to compile the whole thing together (various errors).

some libraries work better with webpack
https://github.com/sveltejs/template-webpack

all the links here seem to be invalid, so wonder what is the current idiomatic way to solve the problem?

https://svelte.school/tutorials/introduction-to-actions
https://svelte.school/tutorials/external-libraries-in-svelte-and-sapper-using-actions
https://www.nielsvandermolen.com/external-javascript-sveltejs/

basically:
you wrap all your init code into a handleOnMount(){ /* .... */ } function
and use svelte's onMount(handleOnMount)