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

• examples/counter.html [new file]

  1<div id="app"></div>
  2
  3<script type="module">
  4
  5  import {useState, createElement} from 'https://cdn.skypack.dev/react';
  6  import {render} from 'https://cdn.skypack.dev/react-dom';
  7  import {segment, html, css} from '../segment.js';
  8
  9  const Counter = () => {
  10    const [count, setCount] = useState(0);
  11
  12    const style = css`
  13      .counter {
  14        display: inline-flex;
  15        align-items: center;
  16        gap: 10px;
  17        padding: 50px;
  18      }
  19  
  20      .counter p {
  21        width: 30px;
  22        margin: 0px;
  23        text-align: center;
  24        font-family: monospace;
  25        font-size: 16px;
  26      }
  27      
  28      .counter button {
  29        width: 32px;
  30        height: 32px;
  31        cursor: pointer;
  32      }
  33    `;
  34
  35    return html`
  36      <div class="counter">
  37        ${style}
  38        <button @click="${() => setCount(count - 1)}">-</button>
  39        <p>${count}</p>
  40        <button @click="${() => setCount(count + 1)}">+</button>
  41      </div>
  42    `;
  43  }
  44  
  45  const app = document.querySelector('#app');
  46  segment({createElement});
  47  render(createElement(Counter), app);
  48
  49</script>