独立 JSX/TSX 模块

不使用 .vue 也可以直接导出 Vue 2 组件。

StandaloneJsx.jsx

import Vue from 'vue'

export default Vue.extend({
  name: 'StandaloneJsx',
  data: () => ({ message: 'Standalone .jsx' }),
  render() {
    return (
      <article class="demo-card">
        <span class="case-label">standalone JSX</span>
        <h3>{this.message}</h3>
        <global-badge text="全局字符串组件标签" />
      </article>
    )
  }
})

StandaloneTsx.tsx

import Vue from 'vue'

type State = { count: number }

export default Vue.extend({
  name: 'StandaloneTsx',
  data(): State {
    return { count: 3 }
  },
  render(this: any) {
    const values: number[] = [1, 2, 3]
    return (
      <article class="demo-card">
        <span class="case-label">standalone TSX</span>
        <h3>Standalone .tsx</h3>
        <p>{values.map(value => value * this.count).join(' / ')}</p>
        <button class="button" onClick={() => { this.count += 1 }}>倍数 + 1</button>
      </article>
    )
  }
})

Demo 使用 <global-badge /> 查找全局注册组件。插件也与官方 Babel preset 一样进行词法绑定分析：已导入或局部声明的 PascalCase 标签生成标识符，未绑定的标签保留为字符串交给 Vue 2 运行时解析。