1.2.5 • Published 3 months ago

@vue/babel-plugin-jsx v1.2.5

Weekly downloads
416,127
License
MIT
Repository
github
Last release
3 months ago

Babel Plugin JSX for Vue 3

npm package issues-helper

To add Vue JSX support.

English | 简体中文

Installation

Install the plugin with:

npm install @vue/babel-plugin-jsx -D

Then add the plugin to your babel config:

{
  "plugins": ["@vue/babel-plugin-jsx"]
}

Usage

options

transformOn

Type: boolean

Default: false

transform on: { click: xx } to onClick: xxx

optimize

Type: boolean

Default: false

enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.

isCustomElement

Type: (tag: string) => boolean

Default: undefined

configuring custom elements

mergeProps

Type: boolean

Default: true

merge static and dynamic class / style attributes / onXXX handlers

enableObjectSlots

Type: boolean

Default: true

Whether to enable object slots (mentioned below the document) syntax". It might be useful in JSX, but it will add a lot of _isSlot condition expressions which increase your bundle size. And v-slots is still available even if enableObjectSlots is turned off.

pragma

Type: string

Default: createVNode

Replace the function used when compiling JSX expressions.

resolveType

Type: boolean

Default: false

(Experimental) Infer component metadata from types (e.g. props, emits, name). This is an experimental feature and may not work in all cases.

Syntax

Content

functional component

const App = () => <div>Vue 3.0</div>;

with render

const App = {
  render() {
    return <div>Vue 3.0</div>;
  },
};
import { withModifiers, defineComponent } from 'vue';

const App = defineComponent({
  setup() {
    const count = ref(0);

    const inc = () => {
      count.value++;
    };

    return () => (
      <div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
    );
  },
});

Fragment

const App = () => (
  <>
    <span>I'm</span>
    <span>Fragment</span>
  </>
);

Attributes / Props

const App = () => <input type="email" />;

with a dynamic binding:

const placeholderText = 'email';
const App = () => <input type="email" placeholder={placeholderText} />;

Directives

v-show

const App = {
  data() {
    return { visible: true };
  },
  render() {
    return <input v-show={this.visible} />;
  },
};

v-model

Note: You should pass the second param as string for using arg.

<input v-model={val} />
<input v-model:argument={val} />
<input v-model={[val, ['modifier']]} />
// Or
<input v-model_modifier={val} />
<A v-model={[val, 'argument', ['modifier']]} />
// Or
<input v-model:argument_modifier={val} />

Will compile to:

h(A, {
  argument: val,
  argumentModifiers: {
    modifier: true,
  },
  'onUpdate:argument': ($event) => (val = $event),
});

v-models (Not recommended since v1.1.0)

Note: You should pass a Two-dimensional Arrays to v-models.

<A v-models={[[foo], [bar, 'bar']]} />
<A
  v-models={[
    [foo, 'foo'],
    [bar, 'bar'],
  ]}
/>
<A
  v-models={[
    [foo, ['modifier']],
    [bar, 'bar', ['modifier']],
  ]}
/>

Will compile to:

h(A, {
  modelValue: foo,
  modelModifiers: {
    modifier: true,
  },
  'onUpdate:modelValue': ($event) => (foo = $event),
  bar: bar,
  barModifiers: {
    modifier: true,
  },
  'onUpdate:bar': ($event) => (bar = $event),
});

custom directive

Recommended when using string arguments

const App = {
  directives: { custom: customDirective },
  setup() {
    return () => <a v-custom:arg={val} />;
  },
};
const App = {
  directives: { custom: customDirective },
  setup() {
    return () => <a v-custom={[val, 'arg', ['a', 'b']]} />;
  },
};

Slot

Note: In jsx, v-slot should be replaced with v-slots

const A = (props, { slots }) => (
  <>
    <h1>{slots.default ? slots.default() : 'foo'}</h1>
    <h2>{slots.bar?.()}</h2>
  </>
);

const App = {
  setup() {
    const slots = {
      bar: () => <span>B</span>,
    };
    return () => (
      <A v-slots={slots}>
        <div>A</div>
      </A>
    );
  },
};

// or

const App = {
  setup() {
    const slots = {
      default: () => <div>A</div>,
      bar: () => <span>B</span>,
    };
    return () => <A v-slots={slots} />;
  },
};

// or you can use object slots when `enableObjectSlots` is not false.
const App = {
  setup() {
    return () => (
      <>
        <A>
          {{
            default: () => <div>A</div>,
            bar: () => <span>B</span>,
          }}
        </A>
        <B>{() => 'foo'}</B>
      </>
    );
  },
};

In TypeScript

tsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

Who is using

Compatibility

This repo is only compatible with:

  • Babel 7+
  • Vue 3+
xunmeng-tech@cc-design/cestc-vue-scripts@cc-design/web-vue@obstinate/vue-script@saasxx/vue@mbvue/babel-configvite-styled-jsx@jkyu/emp-vue3@startdt/next-preset-appbamboosssstestesdfasdfsadfsdaf@startdt/babel-preset-apphzero-webpack-scripts@iphixer/cli@fect-ui/fect-clisguoyi-clivizier-service@infinitebrahmanuniverse/nolb-_vue_@kova/ssr-plugin-vue3aorb@cestc-design/cestc-vue-scripts@cestc-design/web-vuenubomed-cliui_component_jixiaoqitesting-ci-ortsa-vue@everything-registry/sub-chunk-994tal-fragment-element-uitest-for-xyjweb-webpack-configwebpack5-configxj-babel-preset-appremote-vue3-comps-tsrsbuild-plugin-vue-inspectorvtmp-clivue-component-explorervite-plugin-vue-open-idevite-plugin-vue-inspectvite-plugin-vue-inspectorvite-svelte-jsxvite-plugin-tsvitepress-plugin-juevite-plugin-dev-inspectorvite-plugin-click-to-vue-componentvant-react-clivue-awesome-webpackvite-plugin-test1@shuji-component/sjv-cli@zhangmo8/clipaulpn-ui-kit@kbeaver/esbuild-plugin-vue3tsxnebulonmeixioacomponent-nextmeixioacomponent-next-mobilemf_vantclimini-elementmini-element1haomaiarco-uiinl-app-manager-v2iron-servicemixup-vc-toolskuaiduizuoyekuan-packhoahoney-clihexo-renderer-vue3-jsxht-vue-webpack-pluginhooks-uiharbabel-preset-tarojust-vue-clikeylion-cligmi-plugin-jestmy-vite-plugin-vue-inspectormybutton1234my-components-shdly-uilibsmarker-formlt-draw-vue3luckly-clipagoda-mobile-doc-cliobit-wuinl-compsmy-element-shdphenix-babel-preset-apppeer-babel-preset-bkpg-vue-scriptsnew-vue3yeweiobj-table-plusstudy-iarcossr-plugin-vue3smarty-admin-uitesla-scriptstounotsrv@antd-relx/cli@antd-relx/ui@ant-design-vue/tools@atom-pd/taro-template@archybool/ink-cli@arco-design/arco-vue-scripts@avid-ui/builder
1.2.5

3 months ago

1.2.4

4 months ago

1.2.3

4 months ago

1.2.2

9 months ago

1.2.0

11 months ago

1.2.1

11 months ago

1.1.6

12 months ago

1.2.0-alpha.0

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.7

3 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

1.0.0-rc.5

4 years ago

1.0.0-rc.4

4 years ago

1.0.0-rc.3

4 years ago

1.0.0-rc.2

4 years ago