Recommended way of reusing the components?

[Atulin]

To build a Snuggsi component I can just do

<x-count count=0 >
    <span>Count is {count}.</span>
</x-count>

<script src=//unpkg.com/snuggsi></script>
<script>
    Element `x-count`
    (class extends HTMLElement {
      set count
        ( value = this.getAttribute `count` )
          { this.setAttribute (`count`, value) }
      get count ()
        { return this.getAttribute `count` }       
      onclick (e) {
        this.count++;
      }
    })
</script>

and it's going to work in that spot. But what if I want to reuse <x-count count=7></x-count> in another place? The way I understand the docs, I would have to re-declare the markup everywhere I need the component, and Snuggsi is more of an Alpine equivalent than a LitElement one.

What is the recommended way to pack the component into a single .js file so I can do

<x-count count=5></x-count>
<script src=//unpkg.com/snuggsi></script>
<script src=/js/counter.js></script>

?

[brandondees]

each component should only need to be defined once and it can be re-used. i don't think the docs have gotten very clear yet about patterns for exporting / importing but I think basically the idea was to define an ecmascript module that defines everything it needs when loaded, so that you just write the script import then put the custom element wherever you want it. there should be an example of that somewhere, maybe @snuggs can help point to it.

in your example, i think the issue could be just that you're loading the script after using the element, whereas i think you may need to import the definition first before use, but i could be mistaken about that.

[Atulin]

Can the markup for the component be packaged inside of the module? I don't think JS is like PHP, in that you can just put raw HTML inside of a JS file, so how would it be done?

[brandondees]

yeah i'm pretty sure you can either define a template string within js that would be injected into the dom, or you can write the js in script tags inside an html module and import that.

[Atulin]

No recommended way then, gotta wing something, gotcha.

[brandondees]

@snuggs should have some ideas but i haven't spent a lot of time with it to know. please let us know whatever you do end up with, this repo could use some better documentation examples etc.

[Atulin]

For now, I ended up shelving the idea of using Snuggsi. Lit works well enough for the moment, and as much as I prefer Snuggsi's syntax, I could not come up with any decent way of reusing the components.