Quick start
Scaffold a project
bash
npm create continuum-js@latest my-app
cd my-app
npm install
npm run devYou get a Vite + TypeScript project:
my-app/
├─ index.html
├─ vite.config.ts
├─ tsconfig.json # jsx: react-jsx, jsxImportSource: @continuum-js/dom
└─ src/
├─ main.tsx # mount(document.getElementById("app")!, () => <App />)
├─ App.tsx # a counter to delete
└─ App.test.tsx # a vitest test to keep you honestnpm run build type-checks and bundles; npm test runs vitest.
Add to an existing Vite project
bash
npm i @continuum-js/frp @continuum-js/dom @continuum-js/stdPoint JSX at the Continuum runtime in tsconfig.json:
json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@continuum-js/dom"
}
}Mount a view:
tsx
import { mount } from "@continuum-js/dom";
mount(document.getElementById("app")!, () => <App />);mount returns an unmount function that disposes the whole subtree — subscriptions, timers, DOM.
First edit
Open src/App.tsx and make the counter count double:
tsx
const count = state(0);
const doubled = count.map((n) => n * 2); Put {doubled} anywhere in the JSX. Notice what you didn't do: no dependency array, no memo, no re-render — doubled is derived from count by construction.
Next
- Thinking in States and Streams — the model behind what you just wrote.
- Concepts → Components — what a component is here.