Help understanding use of JS assets in Lume Components

[ghost]

Hi,
I've been studying the documentation on Components, and playing around with an example, and running into errors such that I don't really get what's going on with JS 'assets'

I get that Lume Components are meant for generating static html. CSS behaves as I would expect: it gets merged into components.css in the output. I can't get JS to work, however. It seems to be executing in the build side (e.g. I get the error 'document global is not available in Deno' when I'm writing code intended to be executed in the browser).

Am I misunderstanding how this is supposed to be used? If this isn't how I should use JS Component assets, why provide the mechanism at all? Adding to my confusion is that I need to subsequently include components.css and components.js elsewhere in my templates, which feels again like it kind of defeats the purpose of encapsulating stuff in components (except of course stripping unused assets at build time).

I've tried several times to use components to isolate pieces of UI with styling and some lightweight JS needs, but keep running up against this issue and it seems easier to just write the JS in a 'global' script instead.

[oscarotero]

Technically, the css and js keys of Lume components are just string values that are added to components.css and component.js files if the component is used at least once. If the js value is executed in the build side, probably it's not a string value.
For example, this is valid:

export const js = `customElements.define("my-button", class extends HTMLElement {})`;

export default function ({ content }) {
  return `<my-button>${content}</my-button>`
}

But this is not, because the js key contains real js code:

export const js = customElements.define("my-button", class extends HTMLElement {});

export default function ({ content }) {
  return `<my-button>${content}</my-button>`
}

In the incoming Lume 3, it's possible to define the css and js code in different files, so you don't have to use string values inside the main component file and the editor can highlight the code. More info here: https://github.com/lumeland/blog/blob/main/posts/lume-3.md#folder-components

[ghost]

ah, so I was maybe getting my quotes messed up in yaml frontmatter ...

So to confirm, these kinds of components are meant to be used to output client-side JS?

[oscarotero]

So to confirm, these kinds of components are meant to be used to output client-side JS?

Yes, the js key of components are meant to output JS code for the browser.

[ghost]

ok, great. thank you.