Beako.js

Beako.js is web component tools with Data Binding, Template Engine and Virtual DOM.

She support Deno and Web browsers.

What is Beako.js?

Please wait for it to be released in the near future.

The explanation in Japanese is written here.

Usage

Beako.js use ES Modules

Deno

deno install -f --allow-read --allow-write --allow-env --allow-run https://deno.land/x/beako@v0.9.16/cli/beako.ts

import { watch, hack } from 'https://deno.land/x/beako@v0.9.17/mod.ts'

const data = {
  count: 1
}

setInterval(() => { data.count++ }, 1000)

watch(data)

hack(document, `Counter: {{ count }}`, data)

Build:

beako build script.ts --outdir=public

To Import it into html:

<!DOCTYPE html>
<meta charset="UTF-8">
<body>Loading...</body>
<script type="module" src="script.js"></script>

CDN

<!DOCTYPE html>
<meta charset="UTF-8">
<body>Loading...</body>
<script type="module">
  import { watch, hack } from 'https://unpkg.com/beako@0.9.17/beako.js'

  const data = {
    count: 1
  }

  setInterval(() => { data.count++ }, 1000)

  watch(data)

  hack(document, `Counter: {{ count }}`, data)
</script>