lit-project-template

Example of lit-element project powered by stringify-jsx.

stringify-jsx configuration

To be able to use @event, .value and ?boolean bindings that are not valid in JSX the following configuration has been used:

stringifyJsx({
    customAttributeReplacementFn: (nodePath, defaultReplacement) => {
        if (defaultReplacement) {
        return defaultReplacement;
        }
        const attribute = nodePath.node.name;
        if (attribute.startsWith('a-')) {
        return '@' + attribute.slice(2);
        }
        if (attribute.startsWith('d-')) {
        return '.' + attribute.slice(2);
        }
        if (attribute.startsWith('q-')) {
        return '?' + attribute.slice(2);
        }
        return attribute;
    }
}, {
    plugins: ["@babel/plugin-syntax-dynamic-import"]
})

Thus this code:

<input a-input={this.handleInput}/>

Will be transformed into

<input @input="${this.handleInput}"/>

Full configuration can be found in rollup.config.js