mjstahl/simple-fetch-async.html

## simple-fetch-async.html
<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      import { merge, prepare, render } from 'https://unpkg.com/elementree'

      function Hello (state) {
        if (!state.email) state.requestUser()
        return render`
          <body>
            <p>Hello! ${state.email}</p>
            <button onclick=${() => state.nextEmail()}>Next Email</button>
          </body>
        `
      }

      const HelloState = {
        id: 1,
        email: '',
        nextEmail: function () {
          this.email = null
          this.id += 1
        },
        requestUser: async function () {
          const response = await fetch(`https://reqres.in/api/users/${this.id}`)
          const { data } = await response.json()
          this.email = data.email
        }
      }

      merge('body', prepare(Hello, HelloState))
    </script>
  </body>
</html>

## simple-fetch-promise.html
<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      import { merge, prepare, render } from 'https://unpkg.com/elementree'

      function Hello (state) {
        if (!state.result) {
          fetch('https://httpbin.org/get')
            .then(resp => resp.json())
            .then(value => state.result = value && value.origin)
        }

        return render`
          <body>
            <p>${ !state.result ? 'LOADING....' : state.result }</p>
          </body>
        `
      }

      merge('body', prepare(Hello, {}))
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<script type="module">
	import { merge, prepare, render } from 'https://unpkg.com/elementree'

	function Hello (state) {
	if (!state.email) state.requestUser()
	return render`
	<body>
	<p>Hello! ${state.email}</p>
	<button onclick=${() => state.nextEmail()}>Next Email</button>
	</body>
	`
	}

	const HelloState = {
	id: 1,
	email: '',
	nextEmail: function () {
	this.email = null
	this.id += 1
	},
	requestUser: async function () {
	const response = await fetch(`https://reqres.in/api/users/${this.id}`)
	const { data } = await response.json()
	this.email = data.email
	}
	}

	merge('body', prepare(Hello, HelloState))
	</script>
	</body>
	</html>