JSFiddle - React, Tailwind, and code Playground

by nuysoft

HTML

<script src="http://g.tbcdn.cn/thx/brix-release/0.0.23/require-config.js"></script>
<div>
    <button onclick="console.log(eval(this.innerText))">Loader.query('demo/impl')</button>
    <button onclick="console.log(eval(this.innerText))">Loader.query('demo/impl')[0]</button>
    <button onclick="console.log(eval(this.innerText))">Loader.query('demo/impl')[0].options</button>
</div>
<div>
    <button onclick="console.log(eval(this.innerText))">Loader.query('demo/0')</button>
    <button onclick="console.log(eval(this.innerText))">Loader.query('demo/0')[0]</button>
    <button onclick="console.log(eval(this.innerText))">Loader.query('demo/0')[0].options</button>
</div>
<div>
    <button onclick="console.log(eval(this.innerText))">Loader.query('demo/0/0')</button>
    <button onclick="console.log(eval(this.innerText))">Loader.query('demo/0/0')[0]</button>
    <button onclick="console.log(eval(this.innerText))">Loader.query('demo/0/0')[0].options</button>
</div>
<div>
    <button onclick="console.log(eval(this.innerText))">Loader.query('li')</button>
</div>

<div bx-name="demo/impl">
    <div bx-name="demo/0">
        <ul>
            <li bx-name="demo/0/0">demo/0/0</li>
            <li bx-name="demo/0/1">demo/0/1</li>
            <li bx-name="demo/0/2">demo/0/2</li>
        </ul>
    </div>
    <div bx-name="demo/1">
        <ul>
            <li bx-name="demo/1/0">demo/1/0</li>
            <li bx-name="demo/1/1">demo/1/1</li>
            <li bx-name="demo/1/2">demo/1/2</li>
        </ul>
    </div>
    <div bx-name="demo/2">
        <ul>
            <li bx-name="demo/2/0">demo/2/0</li>
            <li bx-name="demo/2/1">demo/2/1</li>
            <li bx-name="demo/2/2">demo/2/2</li>
        </ul>
    </div>
</div>

CSS

div[bx-name] {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #E6E6E6;
}

JavaScript

require(['brix/loader'], function(Loader) {
    window.Loader = Loader
    Loader.boot()
});

require(['brix/loader', 'jquery'], function(Loader, $) {
    var _query = Loader.query
    Loader.query = function(instance, context) {
        var result = _query(instance, context)
        if ((result.length === 0) && (typeof instance === "string")) {
            result = _query($(instance), context)
        }
        return result
    }
});

[
    'demo/impl',
    'demo/0', 'demo/0/0', 'demo/0/1', 'demo/0/2',
    'demo/1', 'demo/1/0', 'demo/1/1', 'demo/1/2',
    'demo/2', 'demo/2/0', 'demo/2/1', 'demo/2/2',
].forEach(function(item, index) {
    define(item, genBrixImpl)
})

function genBrixImpl() {
    function BrixImpl() {}
    BrixImpl.prototype.render = function() {}
    return BrixImpl
}

window.evalThisText = function() {
    alert(this.innerText)
    console.log(eval(this.innerText))
}

/*
    Loader.query('demo/impl')
    Loader.query('demo/impl')[0].options
    Loader.query('demo/0')
    Loader.query('demo/0/0')
 */