🐕 bepis
![version badge](https://camo.githubusercontent.com/df357979f6330eea7bbfbe398c93d60a6eec5080ffcfc4163e70cef219ea3ab3/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f62657069732f6c6174657374)
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.