https://github.com/briefjs/briefjs
Deadly simple declarative JavaScript framework for building UI.
https://github.com/briefjs/briefjs
components declarative dom framework react ui
Last synced: 12 months ago
JSON representation
Deadly simple declarative JavaScript framework for building UI.
- Host: GitHub
- URL: https://github.com/briefjs/briefjs
- Owner: briefjs
- Created: 2018-12-21T03:31:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-24T02:32:36.000Z (about 7 years ago)
- Last Synced: 2024-11-01T22:38:05.614Z (over 1 year ago)
- Topics: components, declarative, dom, framework, react, ui
- Language: JavaScript
- Size: 93.8 KB
- Stars: 68
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BriefJS
Deadly simple declarative JavaScript framework for building UI.
## Why BriefJS?
- Tiny size. (_< 3kb gzipped_)
- Zero dependence.
- Pure ES6.
- No compiler. (_Directly use taged template strings_).
- Stateless.
- Fast and extendable.
## Installation
From CDN:
```html
```
With NPM:
```bash
npm install briefjs
```
## Example
```js
const {tags, component, render} = briefjs;
const {div, span} = tags;
function randomColor() {
const r = Math.round(Math.random() * 255);
const g = Math.round(Math.random() * 255);
const b = Math.round(Math.random() * 255);
return `rgb(${r},${g},${b})`;
}
const MyTag = component({
props: {
color: 'red;',
onclick: 'void(0)',
},
render(props, slot) {
return div({style: {color: props.color}, onclick: props.onclick})`
${span({ref: 'foo'})`1`}
${span`${props.color}`}
${slot}
`;
},
updated() {
console.log(this.refs);
},
});
const Outer = component({
render(props, slot) {
let color = randomColor();
const onclick = () => {
color = randomColor();
this.update();
};
return MyTag({color, onclick})`${slot}`;
},
updated() {
this.node.addEventListener('mousedown', () => {
console.log('mousedown');
});
},
});
const tpl = div`
${Outer`
${span`abc`}
`}
${span`3`}
${span`4`}
${div`
${span`5`}
`}
`;
render(tpl, document.getElementById('app'));
```