JSPM – babel-plugin-jsx-vue-functional@2.1.0

Package Exports

babel-plugin-jsx-vue-functional

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-jsx-vue-functional) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

JSX Functional Components for Vue JSX

This babel plugin adds some syntactic sugar to JSX.

Usage:

npm i babel-plugin-jsx-vue-functional -D

yarn add babel-plugin-jsx-vue-functional -D

Then add jsx-vue-functional to your .babelrc file under plugins

example .babelrc:

{
  "presets": ["es2015"],
  "plugins": ["jsx-vue-functional", "transform-vue-jsx"]
}

Example:

const A = () => <h1>Hello World</h1>
export const B = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}<A /></div>

will be transpiled into:

const A = {
  functional: true,
  render: (h) => <h1>Hello World</h1>
}

export const B = {
  functional: true,
  render: (h, { props, listeners }) => <div onClick={listeners.click}>{props.msg}<A /></div>
}

Warning

This plugin will transform all named arrow functions that contain JSX and starting with version 2.0.0 so this code will not work:

const A = () => <h1>Hello World</h1>
export const B = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}{A()}</div>