examples/jsx.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example!</title>
  </head>

  <body>
    <script type="module">
      // expanded sample from htm (https://github.com/developit/htm#example)
      import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.module.js'
      import { trackingFactory } from 'https://unpkg.com/simpledomtracking?module'

      /* -------------------------------------------------- */

      const tracking = trackingFactory(
        {
          category: 'category',
          label: 'label',
        },
        keys => keys.category
      )

      /* -------------------------------------------------- */

      class App extends Component {
        addTodo() {
          const { todos = [] } = this.state
          this.setState({ todos: todos.concat(`Item ${todos.length}`) })
        }

        render({ page }, { todos = [] }) {
          return html`
            <div class="app">
              <${Header} name="ToDo's (${page})" />
              <ul>
                ${todos.map(
                  todo => html`
                    <li
                      key="${todo}"
                      ...${tracking.create(keys => ({
                        [keys.category]: 'todo-click',
                        [keys.label]: todo,
                      }))}
                    >
                      ${todo}
                    </li>
                  `
                )}
              </ul>

              <button
                onClick=${() => this.addTodo()}
                ...${tracking.create(keys => ({
                  [keys.category]: 'add-todo-click',
                  [keys.label]: 'really really',
                }))}
              >
                Add Todo
              </button>

              <${Footer}>footer content here<//>
            </div>
          `
        }
      }

      const Header = ({ name }) => html`<h1>${name} List</h1>`
      const Footer = props => html`<footer ...${props} />`
      render(html`<${App} page="All" />`, document.body)

      /* -------------------------------------------------- */

      document.addEventListener('click', ({ target }) => {
        if (!tracking.isTracking(target)) return

        console.log('sending data!!', tracking.getTrackingData(target))
      })
    </script>

    <script nomodule>
      document.body.innerHTML = '<h1>GOD, Y U DO DIS??</h1>'
    </script>
  </body>
</html>