Skip to content
Permalink
Browse files

updated: start adding the initial documentation and update the expres…

…sions/bindings types ids
  • Loading branch information...
GianlucaGuarini committed Oct 3, 2018
1 parent 997d87b commit 50167e0ae77e77d0124526709f906a290a8ff561
@@ -40,4 +40,5 @@ jspm_packages
.DS_Store

# Ignored folders
coverage
coverage
.reify-cache/
@@ -13,14 +13,14 @@
## Usage

```js
import { template } from 'riot-dom-bindings'
import { template, expressionTypes } from 'riot-dom-bindings'
// Create the app template
const tmpl = template('<p><!----></p>', [{
selector: 'p',
expressions: [
{
type: 'text',
type: expressionTypes.TEXT,
childNodeIndex: 0,
evaluate(scope) { return scope.greeting },
},
@@ -66,10 +66,10 @@ const tmpl = template('<p><!----></p>', [{
selector: 'p',
expressions: [
{
type: 'text',
type: expressionTypes.TEXT,
childNodeIndex: 0,
evaluate(scope) { return scope.greeting },
},
evaluate: scope => scope.greeting
}
],
}])
```
@@ -92,10 +92,89 @@ registry.set('my-tag', function({ slots, bindings, attributes }) {
// The <my-tag> will be automatically mounted with the "hello world" text in it
const tmpl = template('<section><my-tag class="a-custom-tag"/></section>', [{
selector: '.a-custom-tag',
type: 'tag',
type: bindingTypes.TAG,
name: 'my-tag',
}])
```

### bindingTypes

Object containing all the type of bindings supported

### expressionTypes

Object containing all the expressions types supported

## Bindings

A binding is simply an object that will be used internally to map the data structure provided to a DOM tree.
To create a binding object you might use the following properties:
- `expressions`
- type: `<Array>`
- required: `true`
- description: array containing instructions to execute DOM manipulation on the node queried
- `type`
- type: `<Number>`
- default:`simple`
- optional: `true`
- description: id of the binding to use on the node queried
- `selector`
- type: `<String>`
- default: binding root **HTMLElement**
- optional: `true`
- description: property to query the node element that needs to updated

The bindings supported are only of 4 different types:

- `simple` to bind simply the expressions to a DOM structure
- `if` to handle conditional DOM structures
- `each` to render DOM lists
- `tag` to mount registered tag templates to any DOM node

Combining the bindings above we can map any javascript object to a DOM template.

### Simple Binding

These kind of bindings will be only used to connect the expressions to DOM nodes in order to manipulate them.<br/>
**Simple bindings will never modify the DOM tree structure, they will only target a single node.**<br/>
A simple binding must always contain at least one of the following expression:
- `attribute` to update the node attributes
- `event` to set the event handling
- `text` to update the node content
- `value` to update the node value

For example, let's consider the following binding:

```js
const pGreetingBinding = {
selector: 'p',
expressions: [{
type: 'text',
childNodeIndex: 0,
evaluate: scope => scope.greeting,
}]
}
template('<p><!----></p>', [pGreeting])
```

In this case we have created a binding to update only the content of a `p` tag.<br/>
*Notice that the `p` tag has an empty comment that will be replaced with the value of the binding expression whenever the template will be mounted*

### Simple Binding Expressions

The simple binding supports DOM manipulations only via expressions. An expression object must have always at least the following keys:

- `evaluate`
- type: `<Function>`
- description: function that will receive the current template scope and will return the current expression value
- `type`
- type: `<Number>`
- description: id to find the expression we need to apply to the node

#### Attribute





@@ -16,6 +16,18 @@ function cleanNode(node) {
children.forEach(n => node.removeChild(n));
}

const EACH = 0;
const IF = 1;
const SIMPLE = 2;
const TAG = 3;

var bindingTypes = {
EACH,
IF,
SIMPLE,
TAG
};

const EachBinding = Object.seal({
// dynamic binding properties
childrenMap: null,
@@ -259,6 +271,18 @@ function create$1(node, { evaluate, template }) {
}
}

const ATTRIBUTE = 0;
const EVENT = 1;
const TEXT = 2;
const VALUE = 3;

var expressionTypes = {
ATTRIBUTE,
EVENT,
TEXT,
VALUE
};

const REMOVE_ATTRIBUTE = 'removeAttribute';
const SET_ATTIBUTE = 'setAttribute';

@@ -394,10 +418,10 @@ function valueExpression(node, expression, value) {
}

var expressions = {
attribute: attributeExpression,
event: eventExpression,
text: textExpression,
value: valueExpression
[ATTRIBUTE]: attributeExpression,
[EVENT]: eventExpression,
[TEXT]: textExpression,
[VALUE]: valueExpression
};

const Expression = Object.seal({
@@ -536,7 +560,7 @@ function getTag(name, slots = [], bindings = [], attributes = []) {
// if we fallback to a normal template chunk
expressions: attributes.map(attr => {
return {
type: 'attribute',
type: ATTRIBUTE,
...attr
}
})
@@ -564,10 +588,10 @@ function create$4(node, { name, slots, bindings, attributes }) {
}

var bindings = {
if: create$1,
simple: create$3,
each: create,
tag: create$4
[IF]: create$1,
[SIMPLE]: create$3,
[EACH]: create,
[TAG]: create$4
};

/**
@@ -584,7 +608,7 @@ function create$5(root, binding) {
if (redundantAttribute) node.removeAttribute(redundantAttribute);

// init the binding
return (bindings[type] || bindings.simple)(
return (bindings[type] || bindings[SIMPLE])(
node,
{
...binding,
@@ -754,3 +778,5 @@ function create$6(html, bindings = []) {
exports.template = create$6;
exports.registry = registry;
exports.createBinding = create$5;
exports.bindingTypes = bindingTypes;
exports.expressionTypes = expressionTypes;
@@ -10,6 +10,18 @@ function cleanNode(node) {
children.forEach(n => node.removeChild(n));
}

const EACH = 0;
const IF = 1;
const SIMPLE = 2;
const TAG = 3;

var bindingTypes = {
EACH,
IF,
SIMPLE,
TAG
};

const EachBinding = Object.seal({
// dynamic binding properties
childrenMap: null,
@@ -253,6 +265,18 @@ function create$1(node, { evaluate, template }) {
}
}

const ATTRIBUTE = 0;
const EVENT = 1;
const TEXT = 2;
const VALUE = 3;

var expressionTypes = {
ATTRIBUTE,
EVENT,
TEXT,
VALUE
};

const REMOVE_ATTRIBUTE = 'removeAttribute';
const SET_ATTIBUTE = 'setAttribute';

@@ -388,10 +412,10 @@ function valueExpression(node, expression, value) {
}

var expressions = {
attribute: attributeExpression,
event: eventExpression,
text: textExpression,
value: valueExpression
[ATTRIBUTE]: attributeExpression,
[EVENT]: eventExpression,
[TEXT]: textExpression,
[VALUE]: valueExpression
};

const Expression = Object.seal({
@@ -530,7 +554,7 @@ function getTag(name, slots = [], bindings = [], attributes = []) {
// if we fallback to a normal template chunk
expressions: attributes.map(attr => {
return {
type: 'attribute',
type: ATTRIBUTE,
...attr
}
})
@@ -558,10 +582,10 @@ function create$4(node, { name, slots, bindings, attributes }) {
}

var bindings = {
if: create$1,
simple: create$3,
each: create,
tag: create$4
[IF]: create$1,
[SIMPLE]: create$3,
[EACH]: create,
[TAG]: create$4
};

/**
@@ -578,7 +602,7 @@ function create$5(root, binding) {
if (redundantAttribute) node.removeAttribute(redundantAttribute);

// init the binding
return (bindings[type] || bindings.simple)(
return (bindings[type] || bindings[SIMPLE])(
node,
{
...binding,
@@ -745,4 +769,4 @@ function create$6(html, bindings = []) {
* )
*/

export { create$6 as template, registry, create$5 as createBinding };
export { create$6 as template, registry, create$5 as createBinding, bindingTypes, expressionTypes };

0 comments on commit 50167e0

Please sign in to comment.
You can’t perform that action at this time.