add documentation on "compiling" Svelte components to web components

[mvolkmann]

I don't see a description of how to do this at the svelte.dev site and I haven't been able to find an example of this online. It would be good to see the steps required to build custom elements and then use them in a few other frameworks like React and Vue.

[kylecordes]

I did a couple of videos on using Svelte in this way... on v2, and using Angular for the host app.

https://www.youtube.com/watch?v=dZB2U83iDvg

https://www.youtube.com/watch?v=BzZ_OWqk5UE

[kylecordes]

Short version of how to produce a custom element is here in the docs:

https://svelte.dev/docs#Custom_element_API

Like the docs @kylecordes linked say, you can compile custom elements by setting an option for the compiler.

The only problem with that link is that it says to set customElements to true, but it should be customElement without the s.

[mvolkmann]

Thanks Kyle! I just read that part of the Svelte docs again (maybe the fourth time) and I still don't see it. What I expected to see is that I can run some command (something like "npm run bundle-wc") and get a .js file that contains definitions of web components for all the Svelte components I choose to export in that way. Then I want to import that generated .js file into an Angular/React/Vue application and use those web components. These docs seem to just show how to use a Svelte component as a web component inside a Svelte app. What am I missing?

…

On Sun, Sep 29, 2019 at 7:14 PM Kyle Cordes ***@***.***> wrote: Short version of how to produce a custom element is here in the docs: https://svelte.dev/docs#Custom_element_API — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3638?email_source=notifications&email_token=AAATLUGF4I4UT4E7OAF2723QMFAFFA5CNFSM4I3UUJXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD74CHOY#issuecomment-536355771>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAATLUAV5FESG3HRLBGR7C3QMFAFFANCNFSM4I3UUJXA> .

-- R. Mark Volkmann Object Computing, Inc.

@mvolkmann All you need to do is set the customElement option for the Svelte loader to true, then Svelte will compile JS files that contain custom elements (web components) which you can then import as you like.

As the docs say though, you should also either use the <svelte:options tag="my-element"> tag inside your Svelte component to define a tag name for it, or use:

import MyElement from './MyElement.svelte';

customElements.define('my-element', MyElement);

when you import it.

[mvolkmann]

Thanks Jake! After configuring everything correctly, do I run "npm run build" to generate the web component definition code? Is just written to public/bundle.js? It seems like that file would contain an entire Svelte application, not just web component definitions.

If everything is part of the same application then you can just use import statements to get only the component and the fact it's all in a single bundle shouldn't make any difference.
If bundle size is an issue for you then you can just use dynamic imports and your build tool should do the code splitting for you.

If however you do actually want individual standalone files that are not part of your application and contain a single component each, then you need to compile them individually setting the component file itself as the entry point.

I don't know about Rollup, but in Webpack you can just write a loop to generate a new config for each custom component you want to compile and then import/download those files when you need them.

[mvolkmann]

When you say "everything is part of the same application", are you referring to using custom elements inside a Svelte application? I'm looking for the steps to use a Svelte component as a web component in a non-Svelte application. That's the only reason I want to "compile" the Svelte components to a .js file that I can import into a non-Svelte application.

I think I'm just tripping up on the exact steps to get all of this to work. I'll throw out a challenge. Find any web page on the internet that lists the steps in terms of the actual code and commands to run. I have spent hours searching for such a site. That's why I created this issue. I assert that no such page exists. ;-)

You can import .svelte files in any type of application so long as your build tool is setup to deal with the .svelte extension correctly.

If you're using Webpack, for example, then you set up a rule to trigger when it sees the .svelte extension to compile using the svelte-loader.

In the svelte-loader you just make sure to set customElement to true, and the compiled output will be a normal JS custom element.

The fact you're using the Svelte compiler for some files inside of a mostly React project shouldn't make any difference, since the final compiled output is normal JS anyway, even if you import a .svelte file.

[mvolkmann]

I’m under the impression that customElement is a configuration option for Rollup, but not for Webpack. Are you sure that’s a Webpack option?

Doesn’t it seem like there should be a way to produce a .js file as a build step that reads a set of Svelte components and outputs web component definitions ... then be able to include that .js in any web app and not even be aware that the web components were defined using Svelte? Maybe that’s something we will be able to do in the future, but not now. This is what I imagine when I hear someone like Rich Harris say “compile to web components”.

Yes customElement is definitely available in the svelte-loader since it's just a compiler option.

And if you want individual standalone JS files then you need to build the Svelte components separately from your main project.

All you need to do with Webpack is setup a config that uses your .svelte component as the entry point, set customElement in the svelte-loader to true, make sure you've defined a tag name for your component, and then tell Webpack where to output the final JS file.

You can then use that JS file in any project you like without anyone ever knowing it came from Svelte.

[mvolkmann]

Thanks @jakelucas! I'll try to get that approach to work and will close this issue if I can.

[mvolkmann]

@jakelucas I gave it a shot here: https://github.com/mvolkmann/svelte-in-react/tree/master/svelte-components. I have one very simple Svelte component in the file Greet.svelte. Check out my webpack.config.js file. I run it using the bundle npm script in package.json by entering npm run bundle. This gives the following error:

ERROR in ./Greet.svelte
Module parse failed: /Users/Mark/Documents/programming/languages/javascript/svelte/svelte-in-react/svelte-components/Greet.svelte Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

To me it looks like I have correctly configured use of svelte-loader.
Do you see what I'm doing wrong?

@mvolkmann It works fine for me.

Your package.json didn't have any dependencies in it for the svelte-components folder, so I installed webpack, webpack-cli, and svelte-loader and it all built without problem.

I'm guessing you just don't have svelte-loader installed in that project folder.

[mvolkmann]

Thanks @jakelucas! So close now. I think there's just one more thing I want to figure out.

It works if I tell Webpack to compile just one Svelte component. But I'd like to have it compile a set of components to custom elements, all within a single .js output file. I thought maybe all I would have to do is import each component into index.js or index.svelte and tell Webpack that was my entry. But neither of those worked. Do you know if it is possible to do this? See https://github.com/mvolkmann/svelte-in-react/blob/master/svelte-components/webpack.config.js.