demos/web.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simply Reactive</title>
  </head>
  <body>
    <div>
      <span id="out-a"></span>
      *
      <span id="out-b"></span>
      =
      <span id="out-product"></span>
    </div>
    <lable>
      A:
      <input id="in-a" />
    </lable>
    <lable>
      B:
      <input id="in-b" />
    </lable>

    <br />
    <label for="should-render">
      Render Changes
      <input type="checkbox" id="should-render" checked></input>
    </label>
    <br />
    <label for="do-update">
      Do Updates
      <input type="checkbox" id="do-update" checked></input>
    </label>

    <br />

    <pre class="mermaid" id="dep-graph"></pre>
    <div id="dep-graph-out"></div>

    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
      mermaid.mermaidAPI.initialize({ startOnLoad: false });
      import {
        createAtom,
        createSelector,
        createEffect,
        createEffectGroup,
        visualizeDependencyGraph,
      } from '../cdn/simply-reactive.mjs';

      const renderGraph = async () =>
        (document.querySelector('#dep-graph-out').innerHTML =
          await mermaid.mermaidAPI.render(
            'dep-graph',
            visualizeDependencyGraph()
          ));

      const A = createAtom({
        key: 'Atom A',
        default: 2,
      });

      const B = createAtom({
        key: 'Atom B',
        default: 3,
      });

      const Product = createSelector({
        key: 'Product',
        get: () => A.get() * B.get(),
      });

      const RenderA = createEffect(
        () => {
          document.getElementById('in-a').value = A.get();
          document.getElementById('out-a').innerText = A.get();
        },
        { key: 'Render A' }
      );

      const RenderB = createEffect(
        () => {
          document.getElementById('in-b').value = B.get();
          document.getElementById('out-b').innerText = B.get();
        },
        { key: 'Render B' }
      );

      const RenderProduct = createEffect(
        () => {
          document.getElementById('out-product').innerText = Product.get();
        },
        { key: 'Render Product' }
      );

      const EventListeners = createEffectGroup([
        () => {
          const listener = (ev) => A.set(parseInt(ev.target.value, 10));
          document
            .getElementById('in-a')
            .addEventListener('change', listener);
          return () => document
            .getElementById('in-a')
            .removeEventListener('change', listener);
        },
        () => {
          const listener = (ev) => B.set(parseInt(ev.target.value, 10));
          document
            .getElementById('in-b')
            .addEventListener('change', listener);
          return () => document
            .getElementById('in-b')
            .removeEventListener('change', listener);
        }
      ]);

      document.getElementById('do-update').addEventListener('click', (ev) => {
        if (ev.target.checked) {
          EventListeners.restore();
        } else {
          EventListeners.destroy();
        }
        renderGraph();
      });

      document.getElementById('should-render').addEventListener('click', (ev) => {
        if (ev.target.checked) {
          RenderA.restore();
          RenderB.restore();
          RenderProduct.restore();
        } else {
          RenderA.destroy();
          RenderB.destroy();
          RenderProduct.destroy();
        }
        renderGraph();
      });

      renderGraph();
    </script>
  </body>
</html>