2.2.1 • Published 5 years ago
bepis v2.2.1
:dog2: bepis

Dynamic HTML + CSS in JavaScript.
npm i bepis
Examples
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);
:text, :map and :comp directives.
- 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}..`
Basics
- 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.
Up next
- minimal diffing with updator functions.
Related Projects
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.
2.2.1
5 years ago
2.2.0
5 years ago
2.1.21
5 years ago
2.1.20
5 years ago
2.1.19
5 years ago
2.1.18
5 years ago
2.1.17
6 years ago
2.1.16
6 years ago
2.1.14
6 years ago
2.1.15
6 years ago
2.1.13
6 years ago
2.1.11
6 years ago
2.1.10
6 years ago
2.1.9
6 years ago
2.1.8
6 years ago
2.1.6
6 years ago
2.1.7
6 years ago
2.1.5
6 years ago
2.1.3
6 years ago
2.1.2
6 years ago
2.1.0
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.0.14
6 years ago
1.0.13
6 years ago
1.0.11
6 years ago
1.0.9
6 years ago
1.0.7
6 years ago
1.0.4
6 years ago