Closed stephenkingsley closed 7 years ago
Let's be clear, this is what some approximately "JSX-equivalent" code looks like:
var el = <div style="font-family: Helvetica; font-size: 14px;">
<input
type="text"
placeholder="Type something and press enter"
style="width: 100%; outline:none; padding: 5px;"
$init={function(e) { this.focus() }}
onkeyup={function(e) {
if (e.keyCode === 13) {
document.querySelector("#list")._add(this.value);
this.value = "";
}
}}
/>
<ol
id="list"
_items={[]}
_add={function (val) { this._items.push(val) }}
$update={function() {
this.$components = this._items.map(function(item) {
return { $type: "li", $text: item }
})
}}
/>
{[]}
</ol>
</div>
Yes, I knew it. But if use "JSX-equivalent", there are very event or messy attributes in the html template. such as:
<ol
id="list"
_items={[]}
_add={function (val) { this._items.push(val) }}
$update={function() {
this.$components = this._items.map(function(item) {
return { $type: "li", $text: item }
})
}}
/>
{[]}
</ol>
In my options, some lifecycle function should not in html template, I would like:
const element = {
$update: function() {
this.$components = this._items.map(function(item) {
return { $type: "li", $text: item }
})
},
items: [],
_add: function (val) { this._items.push(val) },
render: <ol id="list">{[]}</ol>
};
finally, use some loader to parser this object. I think there is more convenient than JSX-equivalent, and this can be improve the develop experience.
Resolved with this thread https://github.com/intercellular/cell/issues/115
Be sure to check out the final solution suggested at the end https://github.com/devsnek/to_cell
I think is not convenient just use object to create elements! this is your example:
In your example, I think that is very confused. you can use JSX loader to modify it. just like: