https://github.com/mixpanel/snabbdom-jsx-lite
Write snabbdom templates in .jsx or .tsx (JSX for TypeScript)
https://github.com/mixpanel/snabbdom-jsx-lite
keep mxpnl-analytics
Last synced: about 1 year ago
JSON representation
Write snabbdom templates in .jsx or .tsx (JSX for TypeScript)
- Host: GitHub
- URL: https://github.com/mixpanel/snabbdom-jsx-lite
- Owner: mixpanel
- License: mit
- Created: 2020-05-09T01:55:47.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-02-18T00:37:01.000Z (over 1 year ago)
- Last Synced: 2025-03-24T13:50:47.265Z (about 1 year ago)
- Topics: keep, mxpnl-analytics
- Language: TypeScript
- Homepage:
- Size: 354 KB
- Stars: 11
- Watchers: 33
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# snabbdom-jsx-lite
[](https://github.com/mixpanel/snabbdom-jsx-lite/actions?query=workflow%3Abuild)
[](https://www.npmjs.com/package/snabbdom-jsx-lite)
Write snabbdom templates in .tsx with Typescript or via Babel in .jsx files.
[JSX](https://facebook.github.io/jsx/) is an XML-like syntax extension to JavaScript (ECMAScript).
[Typescript support for JSX](https://www.typescriptlang.org/docs/handbook/jsx.html) supports embedding, type checking,
and compiling JSX directly to JavaScript.
Instead of using snabbdom's `h` (hyperscript function `h(tag, data, children)`) to define the virtual tree,
with `snabbdom-jsx-lite`, you get an similar `jsx` function that is JSX compatible with Babel and Typescript.
Top level props can be any of the the [initialized snabbdom modules](https://github.com/snabbdom/snabbdom#modules-documentation)
such as `class`, `attrs`, `props`, `on`, `style`, `hooks` e.t.c.
### JSX with Typescript
Install: `yarn add snabbdom-jsx-lite`
tsconfig.json
```json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "jsx"
}
}
```
profile.tsx
```tsx
import {jsx} from 'snabbdom-jsx-lite';
const profile = (
{/* `sel` is css selector shorthand, ![]()
is same as ![]()
*/}
![]()
{[user.firstName, user.lastName].join(' ')}
);
```
### JSX with Babel
Install: `yarn add snabbdom-jsx-lite @babel/plugin-transform-react-jsx`
.babelrc
```json
{
"plugins": [
[
"@babel/plugin-transform-react-jsx",
{
"pragma": "jsx",
"pragmaFrag": "Frag"
}
]
]
}
```
profile.jsx
```jsx
import {jsx} from 'snabbdom-jsx-lite';
const profile = (
![]()
{[user.firstName, user.lastName].join(' ')}
);
```
### JSX Fragments
[Fragments](https://reactjs.org/docs/fragments.html) let you group a list of children without adding extra nodes to the DOM.
Use `jsxFragmentFactory` compiler option with Typescript available after version 4.0.0.
```json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "jsx",
"jsxFragmentFactory": "null"
}
}
```
```jsx
import {jsx} from 'snabbdom-jsx-lite';
const render = () => (
<>
![]()
{[user.firstName, user.lastName].join(' ')}
>
);
```
## Example & Demo
A Clock App example is in provided in the repo that uses Functional Components and Fragments.
See [example/app.tsx](example/app.tsx)
Demo is available at [nojvek.github.io/snabbdom-jsx-lite](https://nojvek.github.io/snabbdom-jsx-lite/)
### Performance
`snabbdom-jsx-lite`'s `jsx` function is optimized for performance.
It avoids expensive string manipulation like other snabbdom-jsx libraries.
We test that a million vnodes can be created within 200ms on a github actions virtual core (~2GHz).
See [perf.spec.tsx](tests/jsx-perf.spec.tsx).
### JSX examples
- [TSX Clock](http://nojvek.github.io/snabbdom-jsx-lite/)
- [TSX Clock source](example/)
### Third party JSX modules
These notable third party modules support an optional flattened flavor of jsx.
- [snabbdom-pragma](https://github.com/Swizz/snabbdom-pragma)
- [snabbdom-jsx](https://github.com/snabbdom-jsx/snabbdom-jsx)