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
2. The functional component syntax of the setup() by default

   const Hello = (prop, ctx) => {
       const state = ref('hello world');
       return () => <h1>{state.value}</h1>;
   };

3. Allocating template refs with JSX on the render function returned by setup()

   const Hello = createComponent({
       setup() {
           const root = ref(null);
           watch(() => console.log(root.value)); // <h1>...</h1>
           /*
           return () => h('h1', {
               ref: root
           }, 'hello world!');
           */
           return () => <h1 ref={root}>hello world!</h1>
       }
   });

4. Fixed @vue/[email protected] calling this in setup()

Example

Before compiling

import { ref } from '@vue/composition-api';

const Hello = (prop, ctx) => {
    const state = ref('Hello World!');
    return () => (
        <h1>{state.value}</h1>
    );
};

After compilation

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

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

2. Config babel.config.js

   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

    const Test = ({ props, children, data, ... }) => {
        return <h1>Hello World!</h1>;
    };

    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

    const Test = (props, { refs, emit, ... }) => {
        return () => <h1>Hello World!</h1>;
    };

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