something about template

[stephenkingsley]

I think is not convenient just use object to create elements! this is your example:

var el = {
  $cell: true,
  style: "font-family: Helvetica; font-size: 14px;",
  $components: [
    {
      $type: "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 = "";
        }
      }
    },
    {
      $type: "ol",
      id: "list",
      _items: [],
      $components: [],
      _add: function(val) { this._items.push(val) },
      $update: function() {
        this.$components = this._items.map(function(item) {
          return { $type: "li", $text: item }
        })
      }
    }
  ]
}

In your example, I think that is very confused. you can use JSX loader to modify it. just like:

<div>
  <input />
  <div>
     ...some html
  </div>
</div>

[guscost]

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>

[stephenkingsley]

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.

[gliechtenstein]

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