https://github.com/o0101/bepis

:dog2: bepis - Write components concisely. Like to play? https://cutt.ly/bepis?drincc!
https://github.com/o0101/bepis

framework html js-framework

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/o0101/bepis
• Owner: o0101
• Created: 2020-01-03T16:38:03.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-07T16:15:38.000Z (over 1 year ago)
• Last Synced: 2024-04-27T10:09:13.094Z (9 months ago)
• Topics: framework, html, js-framework
• Language: JavaScript
• Homepage:
• Size: 572 KB
• Stars: 50
• Watchers: 3
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • Security: SECURITY.md

Awesome Lists containing this project

README

        


  



# :dog2: [bepis](#drincc) ![download badge](https://img.shields.io/npm/dt/bepis) ![version badge](https://img.shields.io/npm/v/bepis/latest)

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

[It Is On Npm](https://www.npmjs.com/package/bepis)

```console

npm i bepis

```

## Examples

Simple keyed list, play with it [here](https://codesandbox.io/s/bepis-latest-playground-6cggy):

First, import:

```js

import { w, clone } from "bepis";

```

Then set up some data:

```js

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:

```js

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

```js

SingletonList(myItems)(document.body);

```

Make a change and see it

```js

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:

  ```javascript

  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

- ` ${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.

----------