https://github.com/ontech7/mini-transpiler
A transpiler that converts JSX code into nodes compatible with @9elt/miniframe
https://github.com/ontech7/mini-transpiler
Last synced: 5 months ago
JSON representation
A transpiler that converts JSX code into nodes compatible with @9elt/miniframe
- Host: GitHub
- URL: https://github.com/ontech7/mini-transpiler
- Owner: ontech7
- Created: 2024-11-18T16:28:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-18T17:10:40.000Z (over 1 year ago)
- Last Synced: 2024-11-18T17:45:42.156Z (over 1 year ago)
- Language: JavaScript
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mini-transpiler
A transpiler for [@9elt/miniframe](https://github.com/9elt/miniframe)
## usage
```
npm i --save-dev @9elt/mini-transpiler
```
then add in your `tsconfig.json`:
```json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@9elt/mini-transpiler"
}
}
```
## example
A simple counter that stops at 10
```js
import { createNode, State } from "@9elt/miniframe";
const counter = new State(0);
function Root() {
return (
current count: {counter}
(c < 10 ? "green" : "red")),
}}
>
{counter.as((c) => (c < 10 ? "keep going" : "stop!"))}
counter.value++}
disabled={counter.as((c) => c === 10)}
>
increment
);
}
document.body.appendChild(createNode(Root()));
```