so://phie

figure

The vanilla alternative for writing JSX-based React applications
git clone git://soophie.de/figure

• log
• tree
• refs
• README
• LICENSE

branch:main tag:v1.2.1 tag:23.07 tag:23.09 tag:v1.0.0

• README.md [new file] [old file]

  1# figure
  2The vanilla alternative for writing JSX-based React applications
  2
  4### Example
  3### The vanilla alternative for writing JSX-based React applications
  4<br/>
  5
  6The figure framework offers a unique approach to writing React applications by leveraging vanilla JavaScript syntax instead of JSX, making it an excellent tool for programmers who prefer to avoid the bloat of the NodeJS/npm ecosystem. With its use of template literals, figure provides a more natural way of writing code, making it ideal for building smaller applications.
  7
  8If you're looking for a more efficient way to build React applications, figure might just be the tool you need.
  9<br/>
  10<br/>
  11
  12```javascript
  7import figure from '...';
  13import figure from 'https://typable.dev/cdn/figure/lib.js';
  14
  9// initialize figure
  15const { dict } = figure(React.createElement);
  11
  12// add your component to the dictionary
  13const html = dict({
  14  el: {
  15    button: Button,
  16  },
  17});
  16const html = dict();
  17
  18function App() {
  19  return html`
  21    <main>
  22      <el:button
  23        type="primary"
  24        on:click=${() => console.log('It works!')}
  25      >
  26        <span>Click me</span>
  27      </el:button>
  28    </main>
  29  `;
  30}
  31
  32function Button() {
  33  return html`
  34    <button
  35      on:click=${props?.onClick}
  36      class="btn btn--${props?.type}"
  37    >
  38      ${props?.children}
  39    </button>
  20    <h1>I figured it out!</h1>
  21  `;
  22}
  42
  43// render your App component as usual
  44const root = document.querySelector('#root');
  45ReactDOM.render(React.createElement(App), root);
  23```