Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mikhail-ev/lit-project-template

Lit-element project template powered by typescript, redux and stringify-jsx
https://github.com/mikhail-ev/lit-project-template

jsx lit-element lit-html redux stringify-jsx typescript

Last synced: 3 days ago
JSON representation

Lit-element project template powered by typescript, redux and stringify-jsx

Awesome Lists containing this project

README

        

# lit-project-template
Example of [lit-element](https://lit-element.polymer-project.org/) project powered by [stringify-jsx](https://github.com/TargetTaiga/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:
```js
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:
```jsx harmony

```
Will be transformed into
```

```
Full configuration can be found in ``rollup.config.js``