$dom.component — Examples

This section shows some Javascripts basic, which are in fact used internally in this library.

The last example shows very basic usage of this library.

Creating element with only Vanilla JavaScript:

View with highliting (link to source of this file)

Creating element with only Vanilla JavaScript and $dom.assign:

View with highliting (link to source of this file)

Now, we use $dom.component:

View with highliting (link to source of this file)

This section shows some simple components created by this library.

The real benefit of $dom.component is to creating reusable components. It can be created by function scope, for expose internal API use .share namespace.

View with highliting (link to source of this file)

$dom.component returns/provide methods such as .add for adding child element:

View with highliting (link to source of this file)

Default behaviour is, that all .add(…) are childs the previusly created element:

View with highliting (link to source of this file)

For changin this nesting behaviour, you can use last argument:

View with highliting (link to source of this file)

All togeder:

View with highliting (link to source of this file)

This section shows some ways how to write components.

You can use JavaScript desctruturing syntax:

View with highliting (link to source of this file)

You can change mount destination (see .mount):

View with highliting (link to source of this file)

This section shows some ways how to write reacive components.

You can define reactive behaviour:

View with highliting (link to source of this file)

The same example with using JavaScript desctructuring syntax:

View with highliting (link to source of this file)

Counter:

View with highliting (link to source of this file)

Method .update also accepts function returning object (it will be combinet with internal data with Object.assign):

View with highliting (link to source of this file)

Method .update is also avilable outside function scope (is included in .share namespace):

View with highliting (link to source of this file)

This section shows some new ways how to write (reacive) components.

You can define listener outside function scope (see $dom.componentListener):

View with highliting (link to source of this file)

You can use another component inside current one (see .component):

View with highliting (link to source of this file)

As previou with different usuage of setShift:

View with highliting (link to source of this file)

As previou with different usuage of setShift:

View with highliting (link to source of this file)

As previou with different usuage of setShift:

View with highliting (link to source of this file)

It is also possible to use this library for generating `svg` elements.

Some function helpers and examples can be found on repository $dom_svg.