Metron JSX

Install

pnpm add metron-core metron-jsx

Update tsconfig to use jsx runtime:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "metron-jsx/web-dom"
  }
}

Usage

import { render } from 'metron-jsx/web-dom/render.js';

const appRoot = document.querySelector('#main');

function Header() {
  return <h1>Hello World</h1>;
}

const App = (
  <div>
    <Header />
  </div>
);

render({
  root: appRoot,
  children: App,
});

Examples

If you'd like more info on the reactive primitives to use checkout the Metron Core README.

Counter Component

import { createMutatorAtom } from 'metron-core/atom.js';

function Counter() {
  const [countAtom, updateCount] = createMutatorAtom(0);
  return (
    <button on:click={() => updateCount((oldCount) => oldCount + 1)}>
      Count: {countAtom}
    </button>
  );
}

Todo List

Example code can be found here.