This repository has been archived on 2024-07-27. You can view files and clone it, but cannot push or open issues or pull requests.
keksAccountGUI/node_modulesOLD/@vue/babel-sugar-functional-vue
Kekskurse 8e5ce9e324 Update Framework 2019-08-11 20:48:02 +02:00
..
dist Update Framework 2019-08-11 20:48:02 +02:00
README.md Update Framework 2019-08-11 20:48:02 +02:00
package.json Update Framework 2019-08-11 20:48:02 +02:00

README.md

@vue/babel-sugar-functional-vue

Syntactic sugar for functional components.

Babel Compatibility Notes

Usage

Install the dependencies:

# for yarn:
yarn add @vue/babel-sugar-functional-vue
# for npm:
npm install @vue/babel-sugar-functional-vue --save

In your .babelrc:

{
  "plugins": ["@vue/babel-sugar-functional-vue"]
}

However it is recommended to use the configurable preset instead.

Details

This plugin transpiles arrow functions that return JSX into functional components but only if it's an uppercase variable declaration or default export:

// Original:
export const A = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}</div>
export const b = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}</div>
export default ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}</div>

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