JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

HTML

<div id="panels" class="enyo-fit" data-kind="enyo.Panels" arranger-kind="enyo.CarouselArranger" wrap>
    <div>
        <label data-kind="onyx.InputDecorator">
            <input name="username" placeholder="Email Address" data-kind="onyx.Input" />
        </label>
    </div>
    <div>
        <label name="second" data-kind="onyx.InputDecorator">
            <input name="noKind" type="checkbox"/>
            Here's the content
        </label>
        <button data-kind="onyx.Button" ontap="buttonTapped">I'm a button</button>
    </div>
    <div>
        I'm the third panel
    </div>
</div>

CSS

.enyo-panels > * {
    background: #f8f8f8;
}

JavaScript

enyo.kind({
    name: "enyo.TextNode",
    kind: "enyo.Control",
    tag: null,
    setAttribute: enyo.nop,
    getAttribute: enyo.nop,
    renderContent: function() {
        this.log(this.node);
        
        if(this.node) {
            this.node.nodeValue = this.content || "";
        }
    }
});

var attributeImportMap = {
    "class": "classes",
    "name": false,
    "id": false
};

function parseKinds(root) {
    var kinds = root.childNodes;
    var k;
    
    var children = [];
    enyo.forEach(kinds, function(k) {
        var config;
        
        // ignore whitespace text nodes
        if(k.nodeType === 3) {
           if(/\S/.test(k.nodeValue)) {
               config = {
                   kind: "enyo.TextNode",
                   content: k.nodeValue,
                   node: k,
                   generated: true
               };
           }
        } else if(k.nodeType === 1) {
            var comps = parseKinds(k);
            var content;
            if(comps.length === 1 && comps[0].kind == "enyo.TextNode") {
                content = comps[0].content;
                comps = null;
            }
            
            config = {
                id: k.id,
                name: k.getAttribute("name"),
                kind: determineKind(k),
                node: k,
                generated: true,
                components: comps,
                content: content,
            };
            
            importAttributes(k, config)
        }
        
        config && children.push(config);
    });
    
    return children;
}

function importAttributes(node, config) {
    var attr = node.attributes;
    enyo.forEach(attr, function(a) {
        var isData = a.name.substring(0, 5) == "data-";
        
        var map = attributeImportMap[a.name];
        if(isData || map === false) {
            return;
        } else {
            // if the attr is not in the map or is true,
            // use the attr name as the property
            var...