dna

Evolution-based components.

Table of Contents

DNA

BaseComponent

Simple Custom Component with some behaviors.

Examples

```js
// my-component.js
import { BaseComponent } from '@dnajs/core';
export class MyComponent extends BaseComponent {
  static get observedAttributes() {
    return ['...', '...'];
  }
  get css() {
    return '...';
  }
  get events() {
    return {
      '...': '...'
    };
  }
  get template() {
    return '...';
  }
  get properties() {
    return { ... };
  }
}
```

DOM

A set of DOM helpers for callbacks trigger when Custom Elements are not supported by the browser.

Node

The base Node constructor.

Type: Function

getComponentNode

Retrieve a HTMLElement instance from a component instance.

Parameters

Returns HTMLElement The node for the component instance.

getNodeComponent

Retrieve a component instance from a HTMLElement instance.

Parameters

Returns Object The component for the node instance.

connect

An helper for dynamically trigger the connectedCallback reaction on components.

Parameters

Returns Boolean The callback has been triggered.

disconnect

An helper for dynamically trigger the disconnectedCallback reaction on components.

Parameters

Returns Boolean The callback has been triggered.

update

An helper for dynamically trigger the attributeChangedCallback reaction on components.

Parameters
Properties

Returns Boolean The callback has been triggered.

createElement

Create a node instance.

Parameters

Returns Node The node instance.

appendChild

Dynamically append a node and call the connectedCallback.

Parameters

Returns Boolean The node has been appended.

removeChild

Dynamically remove a node and call the disconnectedCallback.

Parameters

Returns Boolean The node has been removed.

insertBefore

Dynamically insert a node before another and call all the reactions.

Parameters

Returns Boolean The node has been appended.

replaceChild

Dynamically replace a node with another and call all the reactions.

Parameters

Returns Boolean The node has been appended.

setAttribute

Dynamically update a node attribute and call all the reactions.

Parameters

Returns Boolean The node has been updated.

removeAttribute

Dynamically remove a node attribute and call all the reactions.

Parameters

Returns Boolean The node has been updated.

Property

Power to the component's properties. Type checking, validation, callbacks, events and attribute syncing.

Parameters

observe

Add a callback when the property changes.

Parameters

Returns Property The property instance for chaining.

unobserve

Remove a callback on property changes.

Parameters

Returns Property The property instance for chaining.

accepts

Check if a property accepts a given type as value.

Parameters

Returns Boolean

named

Set the property name. It also set the attrName if .attribute method as been previously invoked without arguments.

Parameters

Returns Property The property instance for chaining.

default

Set the property initial value.

Parameters

Returns Property The property instance for chaining.

attribute

Set the attribute name to sync. Invoked without arguments, it retrieve the name of the property.

Parameters

Returns Property The property instance for chaining.

dispatch

Add a DOM event name to dispatch on changes.

Parameters

Returns Property The property instance for chaining.

getter

Set a getter function for the property. By default, the property value will be return.

Parameters

Returns Property The property instance for chaining.

setter

Set a setter function for the property. By default, the property value will be updated with given value without any modification.

Parameters

Returns Property The property instance for chaining.

validate

Set the property validator. A validator should return true if the value is acceptable or false if unaccaptable.

Parameters

Returns Property The property instance for chaining.

init

Attach the property to a scope (a component instance). Set the default value if provided.

Parameters

prop

Helper method for Property creation.

Parameters

Properties

Returns Property The new property.

MIXINS

A set of core mixins.

ComponentMixin

The base custom component mixins. Just add life cycles callback and is getter.

Parameters

Returns Function The extended class.

node

Type: HTMLElement

Properties
isConnected

Check if an instance was inserted into the document.

Type: Boolean

Properties
connectedCallback

Fires when an instance was inserted into the document.

disconnectedCallback

Fires when an instance was detached from the document.

attributeChangedCallback

Fires when an attribute was added, removed, or updated.

Parameters

PropertiesMixin

Simple Custom Component for properties initialization via attributes.

Parameters
Examples
```js
// my-component.js
import { BaseComponent } from '@dnajs/core';
export class MyComponent extends BaseComponent {
  get properties() {
    return { name: String };
  }
}
```
```js
// app.js
import { define } from '@dnajs/core';
import { MyComponent } from './my-component.js';
define('my-component', MyComponent);
var temp = document.createElement('div');
temp.innerHTML = '<my-component name="Albert"></my-component>';
var element = temp.firstChild;
console.log(element.name); // logs "Albert"
```

Returns Function The extended class.

constructor

Attach properties on component creation.

connectedCallback

Sync initial attributes with properties.

attributeChangedCallback

Sync attributes with properties.

Parameters
propertyChangedCallback

Callback for property changes.

Parameters
observeProperty

Create a listener for node's property changes.

Parameters

Returns Object An object with cancel method.

unobserveProperty

Remove a listener for node's property changes.

Parameters

EventsMixin

Simple Custom Component with events delegation, It also implement a dispatchEvent wrapper named trigger.

Parameters
Examples
```js
// my-component.js
import { BaseComponent } from '@dnajs/core';
export class MyComponent extends BaseComponent {
  get events() {
    return {
      'click button': 'onButtonClick'
    }
  }
  onButtonClick() {
    console.log('button clicked');
  }
}
```
```js
// app.js
import { define } from '@dnajs/core';
import { MyComponent } from './my-component.js';
define('my-component', MyComponent);
var element = new MyComponent();
var button = document.createElement('button');
button.innerText = 'Click me';
element.appendChild(button);
button.click(); // logs "button clicked"
```

Returns Function The extended class.

constructor

Iterate events properties.

connectedCallback

Attach and delegate events to the component.

disconnectedCallback

Detach and undelegate events from the component.

delegate

Delegate events to the component descendents.

Parameters
trigger

Node.prototype.dispatchEvent wrapper.

Parameters

Returns Boolean True if event propagation has not be stopped.

StyleMixin

Simple Custom Component with css style handling using the css property.

Parameters
Examples
```js
// my-component.js
import { BaseComponent } from '@dnajs/core';
export class MyComponent extends BaseComponent {
  get css() {
    return 'p { color: red; }'
  }
}
```
```js
// app.js
import { define } from '@dnajs/core';
import { MyComponent } from './my-component.js';
define('my-component', MyComponent);
var element = new MyComponent();
var p = document.createElement('p');
p.innerText = 'Paragraph';
element.appendChild(p); // text inside `p` gets the red color
```

Returns Function The extended class.

constructor

Inherit all css properties.

connectedCallback

Create or update a style element for a component.

TemplateMixin

Simple Custom Component with template handling using the template property.

Parameters
Examples
```js
// my-component.js
import { BaseComponent } from '@dnajs/core';
export class MyComponent extends BaseComponent {
  get template() {
    return `<h1>${this.name}</h1>`;
  }
  get name() {
    return 'Newton';
  }
}
```
```js
// app.js
import { define } from '@dnajs/core';
import { MyComponent } from './my-component.js';
define('my-component', MyComponent);
var element = new MyComponent();
console.log(element.innerHTML); // logs "<h1>Newton</h1>"
```

Returns Function The extended class.

connectedCallback

Render the component when connected.

propertyChangedCallback

Trigger rerender on property changes.

render

Update Component child nodes.

Parameters

registry

A custom components registry. It replicates the CustomElementRegistry interface.

define

Register a new component.

Parameters

get

Retrieve a component constructor by id.

Parameters

Returns (Function | Object) The component constructor or a component descriptor.

proxy

Add HTMLElement properties and methods proxies to a prototype.

Parameters

Returns Function The updated class.

bootstrap

Instantiate all defined components in a DOM tree.

Parameters

Returns void

define

Register a new component.

Parameters

render

Create and append a new component instance.

Parameters

Returns HTMLElement The new component instance.

scopeStyle

Add a scope to sheet selectors.

Parameters

##

DNA (c) 2015-2017 Chialab (http://www.chialab.it) dev@chialab.io http://dna.chialab.io

Evolution-based components.

lifeCycle

Enable or disable Component's programmatic life cycle.

Parameters