README
Brynja is a virtual DOM implementation with a declarative chaining based javascript API.
Why Brynja?
- It's small.
- It requires NO transpilation, everything runs as is in the browser.
- It's fully extendable!
- Everything is 100% typed and ready for Typescript!
Installation
NPM:
CDN:
<script src="https://cdn.jsdelivr.net/npm/brynja/cdn/brynja.js"></script>
Help me help you
Demos
- Hello World: https://jsfiddle.net/olian04/kcfserx5/
- Table generation: https://jsfiddle.net/olian04/4feazykx/
- Updates: https://jsfiddle.net/olian04/6tnLbvaz/
- User input: https://jsfiddle.net/olian04/jwqa6Le1/40/
- Probabilistic Propagation: https://jsfiddle.net/olian04/bL0hjrd5/
- Interpolation animation:
- With html-router: https://jsfiddle.net/olian04/mu5sz029/
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.
import { render } from 'brynja';
render(_=>_
.child('p', _=>_
.text('Hello World!')
)
);
Setting up your own Renderer instance
import { Renderer } from 'brynja';
const { render } = Renderer({
rootElement: document.getElementById('root')
});
render(_=>_
.child('p', _=>_
.text('Hello World!')
)
);
Operations
In brynja, method that are exposed on the chaining api is refered to as operations and are devided into 4 categories; Nesting operations, Mutating operations, Control flow operations, and Effect free operations.
- Nesting operations
- Mutating operations
- Control flow operations
- Effect free operations
- Custom operations
Nesting operations
Nesting operations are used to append children to the current vdom node.
.child(tagName, ctx)
render(_=>_
.child('div', _=>_
.text('Hello World!')
)
);
<div><!--Root-->
<div>
Hello World!
</div>
</div>
.children(tagName, count, ctx)
render(_=>_
.children('div', 3, (_, i)=>_
.text(i)
)
);
<div><!--Root-->
<div>0</div>
<div>1</div>
<div>2</div>
</div>
Mutating operations
Mutating operations are used for adding and modifying data on the current vdom node.
.id(value)
render(_=>_
.child('div', _=>_
.id('foo')
)
);
<div><!--Root-->
<div id="foo"></div>
</div>
.class(valuesArr)
render(_=>_
.child('div', _=>_
.class([ 'foo', 'bar' ])
.class([ 'biz' ])
)
);
<div><!--Root-->
<div class="foo bar biz"></div>
</div>
.name(value)
render(_=>_
.child('div', _=>_
.name('foo')
)
);
<div><!--Root-->
<div name="foo"></div>
</div>
.value(value)
render(_=>_
.child('div', _=>_
.value('foo')
)
);
<div><!--Root-->
<div value="foo"></div>
</div>
.text(value)
render(_=>_
.child('div', _=>_
.text('Foo')
)
);
<div><!--Root-->
<div>Foo</div>
</div>
.prop(key, value)
render(_=>_
.child('div', _=>_
.prop('foo', 'bar')
)
);
<div><!--Root-->
<div foo="bar"></div>
</div>
.on(eventName, callback)
render(_=>_
.child('div', _=>_
.on('click', e => console.log(e))
)
);
<div><!--Root-->
<div><!-- The dom element has the onClick event registered --></div>
</div>
.style(styleObject)
render(_=>_
.child('div', _=>_
.style({
background: 'blue',
':hover': {
background: 'red'
}
})
)
);
<div><!--Root-->
<div class="brynja-d047bd7b6186cdc860a6348471743d9f76adfafa">Hello</div>
<style>
.brynja-d047bd7b6186cdc860a6348471743d9f76adfafa {
background: blue;
}
.brynja-d047bd7b6186cdc860a6348471743d9f76adfafa:hover {
background: red;
}
</style>
</div>
Control flow operations
Control flow operations are used for conditional rendering.
.when(booleanExpression, then_ctx, else_ctx?)
render(_=>_
.when(true, _=>_
.child('h1', _=>_)
)
.when(false, _=>_
.child('h1', _=>_)
,_=>_
.child('h2', _=>_)
)
);
<div><!--Root-->
<h1><!-- First when: true --></h1>
<h2><!-- Second when: false --></h2>
</div>
.while(predicate, ctx)
render(_=>_
.while(i => i < 3, (_, i)=>_
.child('div', _=>_
.text(i)
)
)
);
<div><!--Root-->
<div>0</div>
<div>1</div>
<div>2</div>
</div>
.do(ctx, ....)
const img = (width, height, src) => _=>_
.child('img', _=>_
.prop('width', width)
.prop('height', heigh)
.prop('src', src)
.prop('alt', src.substring(src.lastIndexOf('/'), src.lastIndexOf('.')))
);
render(_=>_
.do(
img(64, 64, '/assets/logo_small.png'),
img(192, 192, '/assets/logo_medium.png')
)
);
<div><!--Root-->
<img src="/assets/logo_small.png" height="64" width="64" alt="logo_small">
<img src="/assets/logo_medium.png" height="192" width="192" alt="logo_medium">
</div>
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.
render(_=>_
.peek(console.log)
);
> { tag: 'div', value: null, text: '', events: {}, props: {}, children: [] }
Custom operations
On top of the pre defined operations you can also extend the renderer with your own custom operations.
Extend the default render method
import { render, extend } from 'brynja';
extend('img', (width, height, src) => _=>_
.child('img', _=>_
.prop('width', width)
.prop('height', heigh)
.prop('src', src)
.prop('alt', src.substring(
src.lastIndexOf('/')+1,
src.lastIndexOf('.')
))
)
)
render(_=>_
.img(64, 64, '/assets/logo_small.png')
.img(192, 192, '/assets/logo_medium.png')
)
Extend a custom renderer instance
import { Renderer } from 'brynja';
const { render, extend } = Renderer({
rootElement: document.getElementById('root')
});
extend('img', (width, height, src) => _=>_
.child('img', _=>_
.prop('width', width)
.prop('height', heigh)
.prop('src', src)
.prop('alt', src.substring(
src.lastIndexOf('/')+1,
src.lastIndexOf('.')
))
)
)
render(_=>_
.img(64, 64, '/assets/logo_small.png')
.img(192, 192, '/assets/logo_medium.png')
)
Legal
Licensed under MIT. See LICENSE.