https://github.com/olian04/brynja
Brynja is a virtual DOM implementation with a declarative chaining based javascript API.
https://github.com/olian04/brynja
javascript npm-package typescript vdom
Last synced: 2 months ago
JSON representation
Brynja is a virtual DOM implementation with a declarative chaining based javascript API.
- Host: GitHub
- URL: https://github.com/olian04/brynja
- Owner: Olian04
- License: mit
- Created: 2018-05-28T12:23:13.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-23T15:48:33.000Z (over 1 year ago)
- Last Synced: 2025-04-13T22:40:13.125Z (2 months ago)
- Topics: javascript, npm-package, typescript, vdom
- Language: TypeScript
- Homepage: https://olian04.github.io/brynja/
- Size: 692 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/brynja)
[](https://bundlephobia.com/result?p=brynja)
[](LICENSE)
[](https://circleci.com/gh/Olian04/brynja)
[](https://codecov.io/gh/Olian04/brynja)
> Brynja is a virtual DOM implementation with a declarative chaining based javascript API.
# Why Brynja
* It's small. Less than 4kb gzipped.
* It requires NO transpilation, everything runs as is in the browser.
* Everything is 100% typed and ready for Typescript!
# Installation
__NPM:__
[`npm install brynja`](https://www.npmjs.com/package/brynja)
__CDN:__
```html
```
# Upgrading from 3.x to 4.x
_See [upgrading guide](./guides/upgrading-from-3.x-to-4.x.md)_
# Help me help you
Please ⭐️ this repository!
# Demos
* Hello World:
* Counting:
* Table generation:
* Probabilistic Propagation:
* Interpolation animation:
* Aim trainer game:
* With [html-router](https://github.com/Olian04/html-router):
* With [simply-reactive](https://github.com/Olian04/simply-reactive):
# Setup - Hello World
You can setup brynja in one of two ways.
## Using the default "render" method
The default render method expects a dom element with id 'root' to exsist.
```ts
import { render } from 'brynja';
render(_=>_
.child('p', _=>_
.text('Hello World!')
)
);
```
## Setting up your own Renderer instance
```ts
import { Renderer } from 'brynja';
const { render } = new Renderer({
rootElement: document.getElementById('root')
});
render(_=>_
.child('p', _=>_
.text('Hello World!')
)
);
```
# Operations
In brynja, method that are exposed on the chaining api is referred to as _operations_ and are divided into 4 categories; Nesting operations, Mutating operations, Control flow operations, and Effect free operations.
- [Nesting operations](#nesting-operations)
- [.child(tagName, ctx)](#childtagname-ctx)
- [.children(tagName, count | items[], ctx)](#childrentagname-count--items-ctx)
- [Mutating operations](#mutating-operations)
- [.id(value)](#idvalue)
- [.class(valuesArr)](#classvaluesarr)
- [.name(value)](#namevalue)
- [.value(value)](#valuevalue)
- [.text(value)](#textvalue)
- [.prop(key, value)](#propkey-value)
- [.on(eventName, callback)](#oneventname-callback)
- [.style(styleObject)](#stylestyleobject)
- [Control flow operations](#control-flow-operations)
- [.when(booleanExpression, then_ctx, else_ctx?)](#whenbooleanexpression-then_ctx-else_ctx)
- [.while(predicate, ctx)](#whilepredicate-ctx)
- [.do(ctx)](#doctx)
- [Effect free operations](#effect-free-operations)
- [.peek(callback)](#peekcallback)
## Nesting operations
Nesting operations are used to append children to the current vdom node.
### .child(tagName, ctx)
```ts
render(_=>_
.child('div', _=>_
.text('Hello World!')
)
);
```
```html
Hello World!
```
### .children(tagName, count | items[], ctx)
```ts
render(_=>_
.children('div', 3, (_, i)=>_
.text(i)
)
.children('div', ['a', 'b', 'c'], (_, item)=>_
.text(item)
)
);
```
```html
0
1
2
a
b
c
```
## Mutating operations
Mutating operations are used for adding and modifying data on the current vdom node.
### .id(value)
```ts
render(_=>_
.child('div', _=>_
.id('foo')
)
);
```
```html
```
### .class(valuesArr)
```ts
render(_=>_
.child('div', _=>_
.class('foo', 'bar')
.class('biz')
)
);
```
```html
```
### .name(value)
```ts
render(_=>_
.child('div', _=>_
.name('foo')
)
);
```
```html
```
### .value(value)
```ts
render(_=>_
.child('div', _=>_
.value('foo')
)
);
```
```html
```
### .text(value)
```ts
render(_=>_
.child('div', _=>_
.text('Foo')
)
);
```
```html
Foo
```
### .prop(key, value)
```ts
render(_=>_
.child('div', _=>_
.prop('foo', 'bar')
)
);
```
```html
```
### .on(eventName, callback)
```ts
render(_=>_
.child('div', _=>_
.on('click', e => console.log(e))
)
);
```
```html
```
### .style(styleObject)
```ts
render(_=>_
.child('div', _=>_
.text('Hello')
.style({
background: 'blue',
':hover': {
background: 'red'
}
})
)
);
```
```html
Hello
.brynja-k8xf37 {
background: blue;
}
.brynja-k8xf37:hover {
background: red;
}
```
## Control flow operations
Control flow operations are used for conditional rendering.
### .when(booleanExpression, then_ctx, else_ctx?)
```ts
render(_=>_
.when(true, _=>_
.child('h1', _=>_)
)
.when(false, _=>_
.child('h1', _=>_)
,_=>_
.child('h2', _=>_)
)
);
```
```html
```
### .while(predicate, ctx)
```ts
render(_=>_
.while(i => i < 3, (_, i)=>_
.child('div', _=>_
.text(i)
)
)
);
```
```html
0
1
2
```
### .do(ctx)
```ts
import { createComponent } from 'brynja';
const Image = createComponent((width, height, src) => _=>_
.child('img', _=>_
.prop('width', width)
.prop('height', heigh)
.prop('src', src)
.prop('alt', src.substring(src.lastIndexOf('/'), src.lastIndexOf('.')))
)
);
render(_=>_
.do(
Image(64, 64, '/assets/logo_small.png'),
Image(192, 192, '/assets/logo_medium.png')
)
);
```
```html
```
## Effect free operations
When using Effect free operations you can be sure that no changes will be made in either the dom nor the vdom.
### .peek(callback)
Peek at the current vdom node.
```ts
render(_=>_
.peek(console.log)
);
```
```js
> { tag: 'div', value: null, text: '', events: {}, props: {}, children: [] }
```
# Legal
Licensed under MIT. See [LICENSE](LICENSE).