vanilla-beans
Version:
Thin layer on top of HTML and DOM API, dramatically simplify development of SPA using Vanilla Js.
105 lines (81 loc) • 2.93 kB
HTML
<html>
<head>
<title>load from dom</title>
</head>
<body>
<div id="sources" style="display: none">
<H1>beans library</H1>
<beans-import src="hello-world" beans-as="mod" type="html"></beans-import>
<beans-import src="./hh/mod.js" beans-as="mod.js" type="js"></beans-import>
<div beans-as="a-first-bean" beans-usetag="table">
<div beans-ref="cc">cc</div>
aa */
<!--comment-->
<built-in.slot beans-ref="n1">
slot content
</built-in.slot>
<script type="javascript">
/**
*
*/
console.log('Hello world')
$appContext,a ='a'
</script>
</div>
<div beans-as="b-bean">
<!--comment-->
bb
</div>
<mod.inner beans-as="c-bean">
bb
</mod.inner>
<mod.double-hello-world beans-as="hello-">
<h1>Hello World</h1>
</mod.double-hello-world>
</div>
<div id="hello-world" style="display: none;">
any one can be placed between components definitions,
##hello-world component
<div beans-as="hello-world" beans-shadow="
mode = closed;
delegatesFocus = true;
">
<h1 beans-body></h1>
<beans-shadow shadowrootmode="open" beans-style>
Hey ho
</beans-shadow>
<input beans-ref="input" placeholder="type your name here">
<h2>Hello <span beans-ref="name">Anonimous</span>!</h2>
<script type="javascript">
$ref.input.oninput = function (e) {
this.beanUpdate($ref.input.value);
}.bind(this);
this.onBeanUpdate = function (data) {
$ref.name.innerText = data || 'Anonimous';
};
</script>
</div>
##root of app
<div beans-as="double-hello-world">
<div beans-body></div>
<hello-world beans-ref="first">Hello first</hello-world>
<hr>
<hello-world beans-ref="second">Hello second</hello-world>
</div>
</div>
<script type="module">
import parse from '../lib/loader/html-dom-parser.mjs'
import prepare from '../lib/factory/prepare-module.mjs'
import factory from '../lib/factory/factory.mjs'
const src1 = 'hello-world'
const source1 = document.getElementById(src1)
const def1 = prepare(parse(source1.innerHTML), src1)
factory.put(def1)(def1.src).with({})
const src = 'sources'
const source = document.getElementById(src)
const def = prepare(source.children, src)
factory.put(def)(def.src).with({}).create('hello-').beanMount(document.body)
</script>
</body>
</html>