Use AppRun in the browser¶

Get AppRun from CDN¶

You can use AppRun directly from the unpkg.com CDN:

<script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
<script>
  const view = state => `<div>${state}</div>`;
  app.start(document.body, 'hello AppRun', view);
</script>

Use the ESM version¶

<script type="module">
  import { app } from 'https://unpkg.com/apprun/dist/apprun-html.esm.js';
  const view = state => `<div>${state}</div>`;
  app.start(document.body, 'hello AppRun ESM', view);
</script>

Use Other Libraries¶

lit-html¶

<html>
<body>
  <script type="module">
    import { app } from 'https://esm.run/apprun';
    import { html, render } from 'https://esm.run/lit-html';

    // use lit-html
    app.use_render(render);
    class Counter extends Component {
      state = 0;
      view = state => {
        return html`<div>
          <h1>${state}</h1>
          <button @click=${()=>this.run("-1")}>-1</button>
          <button @click=${()=>this.run("+1")}>+1</button>
        </div>`;
      };
      update = {
        '+1': state => state + 1,
        '-1': state => state - 1
      };
    }
    new Counter().start(document.body);
  </script>
</body>
</html>

htm¶

<html>
<body>
  <script type="module">
    import { app } from 'https://unpkg.com/apprun/dist/apprun.esm.js';
    import { html, render } from 'https://unpkg.com/htm/preact/standalone.module.js';
    app.use_render(render);

    const add = (state, delta) => state + delta;
    const view = state => html`<div>
      <h1>${state}</h1>
      <button onClick=${() => app.run('-1')}>-1</button>
      <button onClick=${() => app.run('+1')}>+1</button>
    </div>
    `;
    const update = {
      '+1': state => state + 1,
      '-1': state => state - 1
    };
    app.start(document.body, 0, view, update);
  </script>
</body>
</html>

Installation¶

AppRun is distributed on npm. To get it, run:

npm install apprun