2.2.1 • Published 4 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
4 years ago
2.2.0
4 years ago
2.1.21
4 years ago
2.1.20
4 years ago
2.1.19
4 years ago
2.1.18
4 years ago
2.1.17
4 years ago
2.1.16
4 years ago
2.1.14
4 years ago
2.1.15
4 years ago
2.1.13
4 years ago
2.1.11
4 years ago
2.1.10
4 years ago
2.1.9
4 years ago
2.1.8
4 years ago
2.1.6
4 years ago
2.1.7
4 years ago
2.1.5
4 years ago
2.1.3
4 years ago
2.1.2
4 years ago
2.1.0
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.11
4 years ago
1.0.9
4 years ago
1.0.7
4 years ago
1.0.4
4 years ago