feat: add @vue/composition-api support

[antfu]

Thanks to @luwanquan who made the jsx plugin https://github.com/luwanquan/babel-preset-vca-jsx which is the base of these changes.

#76, This PR provides minimal support for @vue/composition-api.

• auto inject global h from @vue/composition-api
• convert this in v-model/v-on usage to getCurrentInstance()

It is disabled by default. To use it, users need to set the config by:

{
  "presets": [
    [
      "@vue/babel-preset-jsx",
      {
        "compositionAPI": true
      }
    ]
  ]
}

[antfu]

Sorry for the delay. Updated.

[sodatea]

The example in the README of render-instance is still wrong.

[noor-tg]

is this pull request need any changes to be merged ? @antfu @sodatea

[antfu]

The example in the README of render-instance is still wrong.

Updated.

[sodatea]

Thanks!

[sodatea]

Released as v1.2.1

https://github.com/vuejs/jsx/releases/tag/v1.2.1

[jvbianchi]

With this PR, I'm getting this error on the browser console:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property '$set' of undefined"

TypeError: Cannot read property '$set' of undefined

[sodatea]

Any reproductions?
It's expected to break some code if the project hasn't turned on the @vue/composition-api plugin. That's the reason why the flag is off by default.

[jvbianchi]

Reproduction: https://github.com/jvbianchi/error-jsx
You just need to run yarn serve and change the text in the input

[sodatea]

Got it. The render-instance plugin has only tested for custom component v-model, forgetting <input vModel>

[jvbianchi]

Great. Can I delete the test repo?

[sodatea]

Yeah. Feel free to. Thanks for the report!

[sodatea]

@antfu The issue here is that in the render-instance plugin, we can't simply replace this with getCurrentInstance() in a callback, because when the callback is invoked, there may not be an actual "currentInstance".

Here we need an approach that works like the classic arrow-functions transformation:

---

With arrow-functions transformation:

export default {
  render() {
    return h("div", [h("input", {
      "on": {
        "input": ($event) => {
          if ($event.target.composing) return;
          this.$set(a, "value", $event.target.value);
        }
      },
    }])
  }
}

turns into

export default {
  render() {
    var _this = this
    return h("div", [h("input", {
      "on": {
        "input": function input($event) {
          if ($event.target.composing) return;
          _this.$set(a, "value", $event.target.value);
        }
      },
    }])
  }
}

Similarly, with render-instance transformation, the code should be transformed into

export default {
  render() {
    var _this = getCurrentInstance()
    return h("div", [h("input", {
      "on": {
        "input": function input($event) {
          if ($event.target.composing) return;
          _this.$set(a, "value", $event.target.value);
        }
      },
    }])
  }
}

(Implementation of the arrow-functions transform: https://github.com/babel/babel/blob/d51aa6d76177b544590cdfe3868f9f4d33d8813d/packages/babel-traverse/src/path/conversion.js#L101-L155)