babel-preset-vca-jsx

    0.3.6 • Public • Published

    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/babel-sugar-v-model@1.1.2 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 therender 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 arender function is returned

    Install

    npm i babel-preset-vca-jsx

    DownloadsWeekly Downloads

    1,428

    Version

    0.3.6

    License

    ISC

    Unpacked Size

    21.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • lululuffy