Some Notes For Documentation

[ebebbington]

This is just a list of things i've found that would be good to document, when you decide to start writing it. I may add more as i go along.

1. "What does register() do? Whats the component name?" - From what i've seen, it's a wrapper around customElements.define, and the component name, is the class name, lowercased, being separated by a - before each capital letter, eg word. So for example register(class CButton ...) produces a <c-button> component

2. How to pass in complex data? - From the discord, this can be done using. <component prop:users=${[{...}, {...}]}

3. How to pass in handlers? - From the discord, i've seen this can be done by <component on:click=${handleClick}

[0kku]

Thanks for creating this. For now, I'll answer here:

register() is a wrapper for customElements.define yes. It tries to register a name using the class' name, converting it from PascalCase to kebab-case. If the class in question is already registered, it'll just do nothing and return the element name. Otherwise, it'll attempt to register it, and then return the registered name.

It optionally takes a second argument, which, if false, will add a unique id at the end of the element name to prevent it from throwing when there are multiple classes with similar names (which can happen if you import 3rd party components, for example).

export function register (
  componentConstructor: new () => DestinyElement,
  noHash = true,
): string;

[0kku]

As a side-note — you don't necessarily have to use register() at all. This works:

class Foo extends DestinyElement {}

const bar = xml`
  <${Foo} class="this will automatically register itself with a uuid during parsing" />
`;