dt-selector

Δt selector engine - async & dynamic templating engine

Usage no npm install needed!

<script type="module">
  import dtSelector from 'https://cdn.skypack.dev/dt-selector';
</script>

README

Δt Selector Engine

This is a selector engine for Δt.

Installation

$ npm install dt-selector

Usage

var $ = require('dt-selector');

var example = new Template({schema:5}, function() {
    this.$html(function() {
        this.$head(function() {
            this.$title("beep");
        });
        this.$body(function() {
            this.$div({class:'a'}, "¡¡¡");
            this.$div({class:'b'}, function() {
                this.$span("tacos");
                this.$span("y");
                this.$span("burritos");
            });
            this.$div({class:'a'}, "!!!");
        });
    });
});

$(example).on('.b span', function (el) {
    el.once('end', function () {
        console.log(this.toString());
    });
});
/* → stdout:
<span>tacos</span>
<span>y</span>
<span>burritos</span>
*/

api

Same like nodejs' EventEmitter, instead that the given event name gets processed by a CSS selector parser. Every time a new tag is created in the xml tree, the matching event will be emitted with the tag as argument.

Since Templates, Builder and Tags have all the same event api for new tags, it doesn't matter if you let the selector listen on the template or on a tag.

Build Status