Skip to content
🐕 bepis - Write components concisely. Like to play? https://cutt.ly/brivrAu?drincc://bepis.arpa
JavaScript HTML
Branch: master
Clone or download
Latest commit 1f6b899 Jan 27, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create FUNDING.yml Jan 27, 2020
readme-images
.gitignore
.npmignore
README.md
UPDATOR_FUNCTIONS.md
index.html
index.js
package-lock.json
package.json
test.js

README.md

Bepis Logo

🐕 bepis download badge version badge

Dynamic HTML + CSS in JavaScript.

It Is On Npm

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.


Bepis Wants You

You can’t perform that action at this time.