so the thing I'm hoping to interface with (Foundry...

# javascript

[Bernhard]

so the thing I'm hoping to interface with (FoundryVTT) uses plain Handlebars and simply re-renders everything on a change; since writing plain HTML is a bit of a pain, I'm looking for a sort of nice wrapper on top of Web Components, so I can just drop in some HTML into the Handlebars templates and have it work fine; any suggestions/recommendations for that? LitHtml looks like it could work, but I'm not sure if Kotlin even supports decorators yet

[Artem Kobzar]

@turansky as far as I remember, you were working on something like this

[turansky]

For now we have CustomElementData, which simplifies web component creation/registration.

[turansky]

> LitHtml looks like it could work, but I'm not sure if Kotlin even supports decorators yet
@Bernhard Could you please describe your cases?
Which options of LitHtml (or Lit) do you need?

[Bernhard]

here's an example

import {LitElement, css, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  // Define scoped styles right with your component, in plain CSS
  static styles = css`
    :host {
      color: blue;
    }
  `;

  // Declare reactive properties
  @property()
  name?: string = 'World';

  // Render the UI as a function of component state
  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

[Bernhard]

that one uses @customElement and @property

[Bernhard]

I don't think those can be easily added in kotlin js, since decorators don't seem to be supported

[Bernhard]

as for the general usecase: I'm just looking for a simple wrapper around web components so I can use them in non component frameworks

[turansky]

@customElement -> CustomElementData + some initialization logic

[Bernhard]

the main big features I want are templates, styles and some event handlers

[turansky]

@property in Kotlin can be implemented in different ways and I would preffer to use custom at start

[turansky]

the main big features I want are templates, styles and some event handlers

If you use Kotlin Wrappers - you will need 2 additional builders:
1. For HTML (we have similar in React)
2. For CSS (we have similar in React) - or you want styles as text block?

[Bernhard]

text block suffices

[Bernhard]

I'm also fine with khtml

[turansky]

Do you need builder example?

[Bernhard]

or maybe a link to the docs if that's ok