Skip to content

o0101/bepis

Repository files navigation

Bepis Logo

🐕 bepis download badge version badge

Dynamic HTML + CSS in JavaScript. Implemented using a custom parser for a new HTML templating DSL.

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

About

🐕 bepis - Write components concisely. Like to play? https://cutt.ly/bepis?drincc!

Topics

Resources

Security policy

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published