# JSX with SigPro SigPro works seamlessly with JSX. ## Configuration ### TypeScript ```json // tsconfig.json { "compilerOptions": { "jsx": "react", "jsxFactory": "$html", "jsxFragmentFactory": "Fragment" } } ``` ### Vite ```js // vite.config.js import { defineConfig } from 'vite' export default defineConfig({ esbuild: { jsxFactory: '$html', jsxFragmentFactory: 'Fragment' } }) ``` ### Babel ```js // babel.config.js export default { plugins: [ ['@babel/plugin-transform-react-jsx', { pragma: '$html', pragmaFrag: 'Fragment' }] ] } ``` ## Usage Example ```jsx // App.jsx import { $, $mount, Fragment } from 'sigpro'; const Button = ({ onClick, children }) => ( ); const App = () => { const count = $(0); return (

SigPro with JSX

Multiple elements

Without extra wrapper
); }; $mount(App, '#app'); ``` ## What Gets Compiled Your JSX: ```jsx
``` Compiles to: ```javascript $html('div', { class: "container" }, $html(Button, {}, "Click") ) ``` ## Without Build Step (CDN) SigPro automatically injects `Div()`, `Button()`, `Span()`, and all other HTML tag helpers globally when loaded via CDN. `Fragment` is also available. ```html
``` ## Template Literals Alternative (htm) For a JSX-like syntax without a build step, use `htm`: ```javascript import { $, $mount } from 'https://unpkg.com/sigpro'; import htm from 'https://esm.sh/htm'; const html = htm.bind($html); const App = () => { const count = $(0); return html`

SigPro Demo

`; }; $mount(App, '#app'); ``` ## Summary | Method | Build Step | Syntax | |--------|------------|--------| | JSX | Required | `
...
` | | CDN (Tag Helpers) | Optional | `Div({}, ...)` | | htm | Optional | `` html`
...
` `` | > [!TIP] > **Recommendation:** Use JSX for large projects, CDN tag helpers (`Div()`, `Button()`) for simple projects, or htm for buildless projects that want HTML-like syntax.