JSFiddle - React, Tailwind, and code Playground

by Jason Green

HTML

<div ml-bind="DropDown:stateDropdown"></div>
<div ml-bind="[dom, events, data]:facetedObj"></div>

JavaScript

var bindAttrRegex = /^([^\:\[\]]*)(?:\[([^\:\[\]]*)\])?\:?([^:]*)$/;

function binder(callback) {
    var scope = {};
    
    var els = document.querySelectorAll('[ml-bind]');
    Array.prototype.forEach.call(els, function(el) {
        var attrText = el.getAttribute('ml-bind');
        var result = attrText.match(bindAttrRegex);
        
        var className = result[1] || 'Component';
        var facets = result[2].split(',');
        var compName = results[3];
        
        var comp = new classRegistry[className](el);
        comp.addFacets(facets);
        comp.name = compName;
        scope[compName] = comp;
        el.___milo_component = comp;
    });
    
    callback(scope);
}

binder();