How to Install
callbag-jsx itself is a small package that can be installed via NPM
(or yarn). However, callbag-jsx is best used when you code in JSX (which is an extension for JavaScript)
and not in pure JavaScript. For that purpose, you need a transpiler, that is configured to work properly with callbag-jsx.
linkStarter Templates
callbag-jsx has two official starter templates to get you started quickly. Click on your preferred
template and follow the instructions on the README of the template repository.
 Template |  Template | |
|---|---|---|
| Transpiler | Babel (plugin-transform-react-jsx) | TypeScript |
| Dev Server | Snowpack | Snowpack |
| Bundler | Webpack | Webpack |
| Linter | ESLint | typescript-eslint |
| Type Checking | No | Yes |
| Pipeline Operator | Yes (plugin-proposal-pipeline-operator) | No (see this isse) |
| Repository | callbag-jsx-starter-js | callbag-jsx-starter-ts |
| Use Template | Use Template |
👉 If you do not have a GitHub account or don't want the repo on GitHub, you can conveniently start a new project using
degit:
linkManual Installation
For manual installation, install the package via NPM (or yarn):
1link$npm i callbag-jsx
To configure your transpiler to work with callbag-jsx, include the following
pragmas at the beginning of your .tsx / .jsx files:
1link/** @jsx renderer.create */
2link/** @jsxFrag renderer.fragment */
👉 It is recommended to configure your transpiler on a project level instead of including per-file configs. Here are how sample configurations would look like with popular build tools:
linkBabel
1link{
2link "plugins": [
3link ["@babel/plugin-transform-react-jsx", {
4link "pragma": "renderer.create",
5link "pragmaFrag": "renderer.fragment"
6link }]
7link ]
8link}
linkTypeScript
1link{
2link "compilerOptions": {
3link "jsx": "react",
4link "jsxFactory": "renderer.create",
5link "jsxFragmentFactory": "renderer.fragment",
6link "target": "es6",
7link "declaration": false,
8link "sourceMap": true,
9link "moduleResolution": "node",
10link "esModuleInterop": true,
11link "allowSyntheticDefaultImports": true,
12link "lib": [
13link "es2017",
14link "dom"
15link ]
16link },
17link "include": [
18link "./src/**/*",
19link ]
20link}
linkSnowpack
1linkmodule.exports = {
2link mount: { /* ... */ },
3link plugins: [ /* ... */ ],
4link packageOptions: { /* ... */ },
5link devOptions: { /* ... */ },
6link buildOptions: {
7link jsxFactory: 'renderer.create',
8link jsxFragment: 'renderer.fragment',
9link },
10link}
Though its not recommended, you CAN use
callbag-jsxwithout JSX, and you would not need a transpiler as well. Read this entry to learn more about usingcallbag-jsxwithout JSX.
linkUsing via CDN
Enable live JSX transpilation by adding this script to your head tag:
1link<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
Now you can import and use Callbag JSX in your script tags:
1link<script type="text/babel" data-type="module">
2link /** @jsx renderer.create */
3link /** @jsxFrag renderer.fragment */
4link import { makeRenderer } from 'https://unpkg.com/callbag-jsx/dist/bundles/callbag-jsx.es.min.js'
5link
6link const renderer = makeRenderer()
7link renderer.render(<div>Hellow World!</div>).on(document.body)
8link</script>
👉 If you need to import libraries that do not have ES bundles on their own, you can use skypack:
1linkimport { state } from 'https://cdn.skypack.dev/callbag-state'
2linkimport { expr } from 'https://cdn.skypack.dev/callbag-expr'
3link
4linkconst count = state(0);
5link
6linkconst add = () => count.set(count.get() + 1)
7linkconst color = expr($ => $(count) % 2 ? 'red' : 'green')
8link
9linkrenderer.render(
10link <div onclick={add} style={{ color }}>
11link You have clicked {count} times!
12link </div>
13link).on(document.body)
linkIn Production
JSX transpilation in production is NOT RECOMMENDED, unless you don't have much code to begin with, loading performance is not a particular concern, or you need to do live transpilation (e.g. online playgrounds).
👉 To disable JSX transpilation, simply do not import @babel/standalone script, and change your script tags to this:
1link<script type="module">
2link import { makeRenderer } from 'https://unpkg.com/callbag-jsx@0.1.13/dist/bundles/callbag-jsx.es.min.js'
3link import { state } from 'https://cdn.skypack.dev/callbag-state'
4link import { expr } from 'https://cdn.skypack.dev/callbag-expr'
5link
6link const renderer = makeRenderer()
7link const count = state(0);
8link
9link const add = () => count.set(count.get() + 1);
10link const color = expr($ => $(count) % 2 ? 'red' : 'green')
11link
12link renderer.render(
13link renderer.create(
14link 'div',
15link {
16link onclick: add,
17link style: { color }
18link },
19link 'You have clicked ', count, ' times !'
20link )
21link ).on(document.body)
22link</script>
☝️ In production, also fix the version you are importing. In above example we have fixed callbag-jsx@0.1.13.
Using
callbag-jsxin this way means you cannot use JSX. Read this entry to learn more about usingcallbag-jsxwithout JSX.
linkIn Older Browsers
Include the following script tag in your HTML header:
1link<script src="https://unpkg.com/callbag-jsx/dist/bundles/callbag-jsx.es6.min.js"></script>
This script registers callbagJSX global variable. It is recommended to also add the following
dependencies to your header as well:
1link<script src="https://unpkg.com/callbag-state/dist/bundles/callbag-state.es6.min.js"></script>
2link<script src="https://unpkg.com/callbag-expr/dist/bundles/callbag-expr.es6.min.js"></script>
They will also register global variables callbagState and callbagExpr respectively.
1linkconst { makeRenderer } = callbagJSX;
2linkconst { state } = callbagState;
3link
4linkconst renderer = makeRenderer();
5link
6linkconst s = state(0);
7link
8linkrenderer.render(
9link renderer.create('div', {}, 'You were here for ', s, ' seconds!')
10link).on(document.body);
11link
12linksetInterval(() => s.set(s.get() + 1), 1000);
👉 For use on production, it is recommended to fetch specific versions of the bundles, i.e.
Using
callbag-jsxin this way means you cannot use JSX. Read this entry to learn more about usingcallbag-jsxwithout JSX.
