babel-preset-vca-jsx

> Support for automatic import of createElement as h and setup functional component syntax and setup template refs

Feature

1. Automatically import createElement as h when writing JSX
1. The functional component syntax of the setup() by default
``javascript
const Hello = (prop, ctx) => {
const state = ref('hello world');
return () =>

{state.value}

;
};
`
1. Allocating template refs with JSX on the render function returned by setup()
`javascript
const Hello = createComponent({
setup() {
const root = ref(null);
watch(() => console.log(root.value)); //

...

/*
return () => h('h1', {
ref: root
}, 'hello world!');
*/
return () =>

hello world!

}
});
`
1. Fixed @vue/babel-sugar-v-model@1.1.2 calling this in setup()

Example

Before compiling
`javascript
import { ref } from '@vue/composition-api';

const Hello = (prop, ctx) => {
const state = ref('Hello World!');
return () => (


{state.value}


);
};
`

After compilation
`javascript
import { ref, createElement as h } from '@vue/composition-api';

const Hello = {
setup: (prop, ctx) => {
const state = ref('Hello World!');
return () => {
return h('h1', state.value);
};
}
};
`

Prerequisite

Project with @vue/composition-api and @vue/cli-plugin-babel installed

How to use?

1. Install

`shell
npm install babel-preset-vca-jsx --save-dev
`

1. Config babel.config.js

`javascript
module.exports = {
presets: [
"vca-jsx",
"@vue/cli-plugin-babel/preset"
]
};
`

Note

- Here we need to distinguish between the default functional component and the composition-api-based functional component.

- The default functional component is essentially the render function. The shorthand in jsx is as follows
` javascript
const Test = ({ props, children, data, ... }) => {
return

Hello World!

;
};
`
Tips：The first letter of the variable name must be capitalized. For details of the callback parameters, see Detail

- The composition-api functional component based on this plugin is essentially a setup function, and the shorthand in jsx is as follows
` javascript
const Test = (props, { refs, emit, ... }) => {
return () =>

Hello World!

;
};
`
Tips：The difference from the default functional is that a render` function is returned