example.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>example</title>
    <script src="./index.js"></script>
  </head>
  <body class="">
    <div id="ashjs"></div>
    <script type="text/javascript">
      const routes = {
        "/": () => `
            -div(id="wrapper")
            --div(id="count")
            ---"Current count: ${store.count}"
            --button(onclick='increaseCountBy("1")')
            ---"Increase count"
            --button(onclick='increaseCountBy("2")')
            ---"Increase count by two"
            --button(onclick="goToCountPage")
            ---"go to count page"
          `,
        "/count/:count": ({ urlInformation }) => `
          -div(id="count")
          --"Showing count ${urlInformation.urlParams.count}"
        `,
      };

      const store = { count: 0 };
      const events = {
        increaseCountBy: (rawData, render) => {
          const data = JSON.parse(rawData);
          const byValue = parseInt(data);
          if (isNaN(byValue)) {
            return;
          }

          store.count += byValue;

          render("count");
        },
        goToCountPage: (_data, render, emit) => {
          emit("go", `/count/${store.count}`);
        },
      };

      const ash = new window.Ash(routes, events);
    </script>
  </body>
</html>