tsrx · Marko

Write Marko components in TSRX.

Show before & after

TSRX

Marko

export default component() { <h1>{"Groceries"}</h1> let items = []; <ul> for (const counter of items; index i; key counter.id) { let count = 1; <li> <span>{text counter.label}</span> <button onClick={() => { if (--count < 1) { items = items.toSpliced(i, 1); } }}>{"−"}</button> <span>{count}</span> <button onClick={() => { count++ }}>{"+"}</button> </li> } </ul> let id = 0; <form onSubmit={(e) => { e.preventDefault(); items = items.concat({ id: id++, label: e.target.item.value }); e.target.reset(); }}> <input name="item" /> <button>{"Add"}</button> </form> }

<h1>Groceries</h1> <let/items=[]> <ul> <for|counter, i| of=items by="id"> <let/count=1> <li> <span>${counter.label}</span> <button onClick() { if (--count < 1) { items = items.toSpliced(i, 1); } }>−</button> <span>${count}</span> <button onClick() { count++ }>+</button> </li> </for> </ul> <let/id=0> <form onSubmit(e) { e.preventDefault(); items = items.concat({ id: id++, label: e.target.item.value }); e.target.reset(); }> <input name="item"> <button>Add</button> </form>

Packages

• @marko/tsrx: compiles .tsrx to .marko Tags API
• @marko/vite-plugin-tsrx: Vite plugin that serves compiled output as virtual .marko files

Examples

• examples/basic-spa — Vite SPA
• examples/marko-run — full-stack with @marko/run

Development

npm install
npm run build
npm test