A simple front-end framework.
import {render, html} from '@hyper-views/framework';
const target = document.querySelector('body');
const cls = 'app';
const view = () => html`
<div id="app" class=${cls} />
`;
render(view(), target);
This doesn't do much right now, but it does demonstrate a few things.
- How to render an element with no children. The self closing
/>
is required even on tags that normally wouldn't need it and it's allowed on all, even those that normally wouldn't allow it. - How to render static attributes.
id="app"
is static. It will be the same each time this view is rendered. - How to render dynamic attributes.
class=${cls}
is an dynamic attribute. It can change each time this view is rendered.
const view = (state) => html`
<div id="app">
<ol>
${state.items.map(
(item) =>
html`
<li>${item}</li>
`
)}
</ol>
</div>
`;
This shows how you can have dynamic children and how you'd output an array of items.
Sometimes you'll have some html that needs to be dynamic once but after that can be treated as if it were static. That's where cache
comes into play.
import {cache, html} from '@hyper-views/framework';
const title = 'The heading';
const heading = cache(
html`
<h1>${title}</h1>
`
);
const view = (state) => html`
<div id="app">
${heading}
<ol>
${state.items.map(
(item) =>
html`
<li>${item}</li>
`
)}
</ol>
</div>
`;
Sometimes you need to change properties, not attributes, especially with form elements and web components. You can indicate a property with :
, a single colon.
let hasFoo = true;
let barValue = "I'm the bar value";
const view = (state) => html`
<form id="app">
<label>
Has foo
<input type="checkbox" :checked=${hasFoo} />
</label>
<label>
Bar value
<input type="text" :value=${barValue} />
</label>
</form>
`;
Also worth pointing out in this example is that hasFoo
is a boolean, which demonstrates how to render boolean properties.
const onClick = (e) => {
e.preventDefault();
};
const view = (state) => html`
<div id="app">
<button @click=${onClick}>Click here</button>
</div>
`;
import {stringify, html} from '@hyper-views/framework/stringify.js';
const view = (state) => html`
<div id="app">
<ol>
${state.items.map(
(item) =>
html`
<li>${item}</li>
`
)}
</ol>
</div>
`;
const staticHTML = stringify(view({items}));
res.write(staticHTML);