/ piacw.com / dev / final / node_modules / @vue / babel-sugar-functional-vue /

[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[DIR]dist/2 years ago -  
[TXT]README.md2 years ago1.4K0fb859dc fixed mobile overflwo options [كارل مبارك]
[   ]package.json2 years ago2.2K0fb859dc fixed mobile overflwo options [كارل مبارك]
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>
}
Apache/2.4.38 (Debian) Server at www.karls.computer Port 80