Converting to Lit HTML

Generally, it's very easy to convert a Skate component to a Lit HTML component. The component abstraction has been designed so that for both types of components the core fuctions are the same. This means that usually in order convert from one to the other, all that needs to change is the rendering and component inheritance and a little prop maintenance.

1. Component Inheritance

Your Skate components will be defined close to this:

export class MyComponent extends BaseComponent<YourAppManager> {}

The first thing you need to change is what your component extends. Change to a lit component like so:

export class MyComponent extends BaseLitComponent<YourAppManager> {}

You will need to export BaseLitComponent from the framework library.

2. Update Rendering

Your Skate component componentMarkup function is next to be changed. Currently, it will look something like:

componentMarkup (): JSXElement {

    return (
        <div className="container">
            <p>My Component</p>
        </div>
    );
}

This now needs to be changed to the lit html style which uses template string markup. E.g.

componentMarkup (): TemplateResult {

    return html`
        <div class="container">
            <p>My Component</p>
        </div>
    `;
}

There are some differences to note here when performing your conversion:

1. The function now returns a TemplateResult type. Export this from the framework.
2. We call the html function as part of returning. Make sure you export this from the framework and not the Lit HTML library.
3. The className attribute can now be called class. Only use className when you want to dynamically generate the contents of the class attribute.

These are the basics but there are a few more rules to remember:

Components within components

For these to work, you must use the component tag name in the markup. E.g.

html`<wc-my-second-component></wc-my-second-component>`;

This is in place of:

<MySecondComponent></MySecondComponent>

Event handlers

Event handlers are bound slightly differently in lit. They use dashes as part of the attribute, e.g.

<wc-my-second-component on-click="${this._onClick}"></wc-my-second-component>

Do not use the camelCase version as per your Skate components.

Boolean attributes

Boolean attributes also have a slightly different syntax:

<wc-my-second-component disabled?="${true}"></wc-my-second-component>

The ? tells lit that these are boolean attributes.

3. Props

Property declaration is mostly the same, using the @prop decorator. The main difference is that you cannot specify whether a property is an attribute or not (they're not). Also, assigning a default value is slightly different as well. Compare the two styles below:

Skate:

@prop({ type: String, attribute: true, default: "My Default" })
strProp: string;

Lit:

@prop({ type: String })
strProp: string = "My Default";

The same rules apply as per deep objects, arrays, etc.

Wrap Up

These are the main differences between the two component types and upgrading isn't so difficult. Most logic is component independent and all the same hooks apply for both component types.