Web Components?

[gloparco]

First off, what a great idea Svelte is. I've been thinking this was the way to go for years now, but big business just seems to want Angular or React.

Anyway, I think Svelte could be THE killer framework if it supported pure web components, as opposed to Svelte components. I think I saw mention of Web Components being on your radar. I was just wondering what your roadmap/plans look like at this point? Is it on the horizon or far off on your list of "to dos".

One other unrelated suggestion - are you able to submit Svelte to some of the benchmarking sites so that people can compare the performance its output to that of other frameworks?

Thanks for all your hard work and good luck to you!

[alexcorvi]

Regarding performance, there's a 3rd party perf test you can look at here. you can also compare svelte DB monster implementation here with other implementations here.

spoiler alert: it's quite impressive.

[leeoniya]

RE: performance

you can always check the current standings here [1]. svelte is indeed quite fast. unfortunately there's no keyed implementation submitted to compare more thoroughly.

[1] https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts/table.html

[bestguy]

I've looked at this a little, and it seems fairly easy to expose a Svelte component as a web component, for example:

// register.js
export default function register(tagName, Component) {

  class SvelteElement extends HTMLElement {
    createdCallback() {
      this.svelteComponent = new Component({
        target: this
        // TODO other attr values as data?
      });
    }

    detachedCallback() {
      this.svelteComponent.teardown();
    }

    attributeChangedCallback(attr, oldValue, newValue) {
      const data = {};
      data[attr] = newValue;

      this.svelteComponent.set(data);
    }
  }

  return document.registerElement(tagName, SvelteElement);
}


// Your app
import register from './register.js';
import Myo from './MySvelteComponent.html';

register('my-component', MySvelteComponent);

Which you can then use in your html as <my-component />

[bestguy]

One issue though is syncing attributes, it seems attributeChangedCallback is not functioning correctly in my code above.

[gloparco]

Thanks to all for the links re: performance. As expected, it is quite impressive!

As for Web Components, I think the key for uptake of the lib would be if the compilation process automatically produced web components as output, rather than requiring an extra step of wrapping the output into web components.

My strategic thinking is that it will be hard for Svelte to make a name for itself vs. React or Angular (or vue or you-name-it), but if it is positioned as the standard for compiling pure web components, I think it could become the leading WC solution ahead of even Polymer. And if Web Components finally take off, it will be ideally positioned.

Just my $.02

[Rich-Harris]

unfortunately there's no keyed implementation submitted to compare more thoroughly

thanks for reminding me! Svelte now supports keyed updates, so we should submit an update.

As for Web Components, I think the key for uptake of the lib would be if the compilation process automatically produced web components as output

I agree, at least among folks who already use web components (I can never gauge how many people are using them — I often get the sense that most people aren't totally convinced, but maybe I just follow too many React/Ember people on Twitter...), and you're totally right that it would be a unique selling point. It would also make for a nicer dev experience, being able to e.g. change attributes in the DOM without having to reinvent devtools.

Having different compilers for different scenarios (e.g. baking in MobX bindings or what-have-you) is definitely something we've talked about previously, whether that means having completely separate compilers or somehow making the compiler pluggable. Either way it's quite tricky, with a number of unknowns, so for now the plan is to just have the two built-in compilers (DOM and SSR) and make sure that the API is flexible enough to allow those other use cases (MobX bindings, Web Component registration) to be handled by the user.

To that end, I think @bestguy has the right approach in the near term. I'd love to see the more comprehensive version eventually though.

Thanks for the kind words!

[Rich-Harris]

I've created a svelte-custom-elements project. Feedback welcome!

[Rich-Harris]

Also, this issue is more or less a dupe of #12, so I'll close it — we can continue discussing a future straight-to-web-components compiler over there. Thanks all