Skip to content

Latest commit

 

History

History
103 lines (82 loc) · 2.84 KB

README.md

File metadata and controls

103 lines (82 loc) · 2.84 KB

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()

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