🐕 bepis
Dynamic HTML + CSS in JavaScript. Implemented using a custom parser for a new HTML templating DSL.
npm i bepis
Simple keyed list, play with it here:
First, import:
import { w, clone } from "bepis";
Then set up some data:
const myItems = [
{ name: "Screw", description: "Part", key: "a3" },
{ name: "Moxie", description: "Intangible", key: "x5" },
{ name: "Sand", description: "Material", key: "p4" },
];
const newName = "Mojo";
Make some views:
const KeyedItem = item =>
w` ${item.key}
li p,
:text ${item.description}.
a ${{ href: item.url }} :text ${item.name}..`;
const SingletonList = items =>
w` ${true}
ul :map ${items} ${KeyedItem}`;
Render the data and mount the view to the document
SingletonList(myItems)(document.body);
Make a change and see it
const myChangedItems = clone(myItems);
myChangedItems[1].name = newName;
setTimeout(() => SingletonList(myChangedItems), 2000);
- Use
:text
to insert text, and:map
to insert lists, as in the above example. - Use
:comp
to insert components:w` main, h1 ${"Demo"}. :comp ${myChangedItems} ${SingletonList}..`
- Use template literals tagged with
w
. This creates a 'bepis' - Use ',' operator to save an insertion point
- Use '.' operator to load an insertion point
<tag name> ${attributes} ${styles}
is the format.- Whitespace is ignored.
- minimal diffing with updator functions.
I don't know. I didn't search any "prior art." Let me know how I reinvented this beautiful wheel by opening a PR request.