Beako.js

What is Beako.js?

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

You can experience single page application development with just a web browser.

She support Web browsers and Deno.

Examples

Glitch Examples

Usage

Beako.js use ES Modules from jsDelivr.

CDN

<!DOCTYPE html>
<meta charset="UTF-8">
<body>Loading...</body>
<script type="module">
  import { watch, mount } from 'https://cdn.jsdelivr.net/gh/ittedev/beako@0.11.0/beako.js'

  const data = {
    count: 1
  }

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

  watch(data)

  mount(document.body, `Counter: {{ count }}`, data)
</script>

Deno

deno install -fA https://deno.land/x/beako_cli@0.1.1/beako.ts

import { watch, mount } from 'https://deno.land/x/beako@0.11.0/mod.ts'

const data = {
  count: 1
}

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

watch(data)

mount(document.body, `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>