Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/mikhail-ev/lit-project-template
- Owner: mikhail-ev
- Created: 2019-10-10T09:12:46.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T22:26:48.000Z (about 2 years ago)
- Last Synced: 2025-01-02T03:53:32.442Z (6 days ago)
- Topics: jsx, lit-element, lit-html, redux, stringify-jsx, typescript
- Language: TypeScript
- Homepage:
- Size: 85.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
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``