vuejs / jsx-vue2

monorepo for Babel / Vue JSX related packages
https://jsx-vue2-playground.netlify.app/
1.47k stars 96 forks source link

babel-sugar-inject-h has a bug when compile code with ts (target es5) before babel process #192

Open simplefeel opened 3 years ago

simplefeel commented 3 years ago

I have a .tsx file

import Vue, { VNode } from 'vue'

export default Vue.extend({
    data() {
        return {}
    },
    methods: {
        handleClick() {
            alert('hello,world')
        }
    },
    render(): VNode {
        return (
            <button onClick={this.handleClick} className="button_bg">
                Click
            </button>
        )
    }
})

it will compile first by typescript , tsconfig.json is

"compilerOptions": {
    "target": "es5"
  }

after ts compile with es5

exports.default = vue_1.default.extend({
    data: function () {
        return {};
    },
    methods: {
        handleClick: function () {
            alert('hello,world');
        }
    },
    render: function () {
        return (<button onClick={this.handleClick} className="button_bg">
                Click
            </button>);
    }
});

when target is es5 , it will have problem , after bable will compile is ObjectProperty

image

but , the plugin code traverse ObjectMethod|ClassMethod

image

howover, if target is esnext it will work ,because this node ast is ObjectMethod

after ts compile with exnext

exports.default = vue_1.default.extend({
    data() {
        return {};
    },
    methods: {
        handleClick() {
            alert('hello,world');
        }
    },
    render() {
        return (<button onClick={this.handleClick} className="button_bg">
                Click
            </button>);
    }
});

image

"compilerOptions": {
    "target": "esnext"
  }

above is work

I think maybe is babel/parser transform ast result not some with different stage code