Matt-Esch/virtual-dom

JSX Add Support multiple arguments as childrens other than Array

ankianan opened this issue · 2 comments

For example if you paste following Output hyperscript at http://dominictarr.github.io/hyperscript/ it will work fine, as it uses require('hyperscript') but require('virtual-dom/h') fails to render multiple children arguments.

Input

<div className="suggest">
    <div className="sWrap">
        <div className="iconWrap">
            <a className="sSearch" />
            <a className="sCross"  />
        </div>
        <div className="inpWrap">
            <input className="sugInp" type="text" placeholder="Search" value="Some Text"></input>
        </div>
    </div>
</div>

Output

 h(
     "div", { className: "suggest" },
     h(
         "div", { className: "sWrap" },
         h(
             "div", { className: "iconWrap" },
             h("a", { className: "sSearch" }),
             h("a", { className: "sCross" })
         ),
         h(
             "div", { className: "inpWrap" },
             h("input", { className: "sugInp", type: "text", placeholder: "Search", value: "Some Text" })
         )
     )
 );

A fix for the same in require('virtual-dom/h')

function h(tagName, properties, children) {
    if (arguments.length >= 3) {
        children = Array.prototype.slice.call(arguments, 2);
    }
    /** Some code */
}

Duplicate of #297. Too many function signatures (via varying numbers of arguments) and especially using Array.prototype.slice.call(arguments, 2) triggers a de-optimization and hurts performance. :-\

Thanks for your suggestions.