Translate vue template into hand write template code

1.ts

h('div', {class: 'el-autocomplete', directive: ['clickoutside']}, [
  h('el-input', { props: {
    value: this.value,
    disabled: this.disabled,
    placeholder: this.placeholder,
    name: this.name,
    size: this.size,
  }, on: {
    change: this.handleChange.bind(this),
    focus: this.handleFocus.bind(this),
  }, nativeOn: {
    keydown(e) {
      if (e.up) { this.highlight(this.highlightedIndex - 1) }
      else if (e.down) { this.highlight(this.highlightedIndex + 1) }
      else if (e.enter) { this.highlight(this.highlightedIndex) }
    }
  }}),
  h('transition', {props: {name: 'md-fade-bottom'}}, [
    this.suggestionVisible
    ? h('ul', {class: 'el-autocomplete_suggestions'}, [
      this.loading? h('li', [h('i', 'el-icon-loading')]) : null,
      ... this.suggestions.map((item, index) => (
        this.customItem
        ? h('li', {
          class: {highlighted: this.highlightedIndex === index},
          on: {click: this.select.bind(this, index)}
        }, [
          item.value
        ])
        : h(this.customItem, {
          class: {highlighted: this.highlightedIndex === index},
          on: {click: this.select.bind(this, index)},
          props: {item, index}
        })
      ))
    ])
    : null

  ])
])

2.ts

h.div`.el-autocomplete`
  .directive('clickoutside')(
    h.elInput
      .props(s('value','disabled','placeholder','name','size'))
      .on({change: s.handleChange, focus: s.handleFocus})
      .nativeOn({
        'keydown.up': () => s.highlight(s.highlightedIndex - 1),
        'keydown.down': () => s.highlight(s.highlightedIndex + 1),
        'keydown.enter': () => s.highlight(s.highlightedIndex),
      })(),
    h.transition.props({name: 'md-fade-bottom'})(
      s.suggestionVisible ?
      h.ul`.el-autocomplete_suggestions`(
      s.loading ? h.li(h.i`.el-icon-loading`) : null,
      s.suggestions.map((item, index) => (
        s.customItem ?
        h(s.customItem).class({highlighted: s.highlightedIndex === index}).on({click: s.select})
        : h.li.class({highlighted: s.highlightedIndex === index}).on({click: s.select}).props({item, index})
      )))
      :
      h.li()
    )
  )

3.ts

h.div`.el-autocomponet`
  .elInput
    .props(s('value', 'disabled', 'placeholder', 'name', 'size'))
    .on({change: s.handleChange, focus: s.handleFocus})
    .nativeOn({
      'keydown.up': () => s.highlight(s.highlightIndex - 1),
      'keydown.down': () => s.highlight(s.highlightIndex + 1),
      'keydown.enter': () => s.highlight(s.highlightIndex),
    })()
  .transition
    .ul.if(s.suggestionVisible)
      .li.if(s.loading)
        .i`.el-icon-loading`
      .li()
      .template.for(s.suggestions, (item, index) => h
        .li.if(!s.customIndex)
          .tag(s.customIndex)
          .class({highlighted: s.highlightIndex === index})
          .on({click: s.select})
          .t(item.value)
        .li()
        .tag(s.customIndex).else
          .class({highlighted: s.highlightIndex === index})
          .on({click: s.select})
          .props({item, index})
        .tag()
      ).template()
    .ul()
  .transition()
.div()

original.vue

  <div class="el-autocomplete" v-clickoutside="handleBlur">
    <el-input
      :value="value"
      :disabled="disabled"
      :placeholder="placeholder"
      :name="name"
      :size="size"
      @change="handleChange"
      @focus="handleFocus"
      @keydown.up.native="highlight(highlightedIndex - 1)"
      @keydown.down.native="highlight(highlightedIndex + 1)"
      @keydown.enter.native="select(highlightedIndex)"
    ></el-input>
    <transition name="md-fade-bottom">
      <ul
        v-if="suggestionVisible"
        class="el-autocomplete__suggestions"
        :class="{ 'is-loading': loading }"
        ref="suggestions"
      >
        <li v-if="loading"><i class="el-icon-loading"></i></li>
        <template v-for="(item, index) in suggestions" v-else>
          <li
            v-if="!customItem"
            :class="{'highlighted': highlightedIndex === index}"
            @click="select(index)"
          >
            {{item.value}}
          </li>
          <component
            v-else
            :class="{'highlighted': highlightedIndex === index}"
            @click="select(index)"
            :is="customItem"
            :item="item"
            :index="index">
          </component>
        </template>
      </ul>
    </transition>
</div>

Original source https://github.com/ElemeFE/element/blob/dev/packages/autocomplete/src/autocomplete.vue

Element is a ui library for Vue. It is a real-world, moderately-complex, well-written, read-by-many, team-built, cooperation-backed code base in Vue. Using element is a good choice for assessing non-trivial code base.

zan