Prototyping the dream code for a new frontend framework

likes.js

import { createStorage } from './bassics/storage'
import { html, until, render } from './bassics/html'

const storage = createStorage()

const likes = storage.state('likes', fetchLikes())

function reloadLikes () {
  return likes.update(fetchLikes())
}

function fetchLikes () {
  return new Promise((resolve, reject) => {
    // fake server call
    setTimeout(() => {
      resolve(Math.floor(Math.random() * 1000))
    }, 3000)
  })
}

const likesTemplate = async () => {
  const amount = await likes.value
  return html`
    <p>${amount} likes</p>
  `
}

const template = (props) => html`
  <div>
    ${until(
      likesTemplate,
      html`<p>Loading likes...</p>`
    )}
    <a href="#" @click=${() => { reloadLikes() }}>Reload</a>
  </div>
`

const el = document.body

render(template, el)

storage.every(() => {
  // rerender every change
  render(template, el)
})