genericComponent

the genericComponent shipped with fastn can be used to create DOM nodes.

var fastn = require('fastn')({
    _genericComponent: require('fastn/genericComponent')
});

var divComponent = fastn('div', {

    // Every property in settings will be set on the rendered DOM element.

    anything: 10, // decides between passing `anything` as a property or using setAttribute to set 10.

    // Some properties have helpers around them to make them more convenient:

    class: ['a', 'b', 'c'] // Accepts a string or array of strings.

    // Accepts an object map of propery:value to be set as an inline style.
    style: {
        color: 'red',
        width: '20px'
    }

    // toggles 'display: none;' on the element if the value is truthy.
    display: true/false

    /*
        A shorthand for `.on('eventName', handler)` that automatically sets
        component.fastnPropertyName(element.elementPropertyName)
        on domevent.

        For example:
        onchange: 'value:value' would listen for the `change` event on the DOM element,
        and set element.value to component.value.

        If you need anything more complicated, you should use `component.on('domevent', handler)`
    */
    domevent: 'fastnPropertyName:elementPropertyName'

    /*
        Alternatively you can set a dom event property as a function, which
        is the same as calling `.on('eventName', handler)`
    */
    onclick: function (event) {
        console.log(scope.get('something'))
    }
})
// For more complex event handling:
.on('domevent (click, change, mousemove etc...)', function(event){
    this; // the component

    this.someProperty(this.element.someProperty);
});

NOTE:

events added via component.on('eventname' ... will only be attached if they were added before .render()