Commit 7b804638 authored by Adam Procter's avatar Adam Procter

Applied formatting

Updated plugins/ dependancies , added Prettier to vue project and applied ESLint and Prettier reformatting of all docs via VSCode plugins
parent eb7c28c2
Pipeline #214 failed with stages
in 1 minute and 12 seconds
This diff is collapsed.
## @vue/babel-helper-vue-jsx-merge-props
A package used internally by vue jsx transformer to merge props spread. It is required to merge some prop trees like this:
```js
import mergeProps from '@vue/babel-helper-vue-jsx-merge-props'
const MyComponent = {
render(h) {
// original: <button onClick={$event => console.log($event)} {...{ on: { click: $event => doSomething($event) } }} />
return h(
'button',
mergeProps([
{
on: {
click: $event => console.log($event),
},
},
{
on: {
click: $event => doSomething($event),
},
},
]),
)
},
}
```
This tool is used internally and there is no reason for you to ever use it.
"use strict";function _extends(){return _extends=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}var normalMerge=["attrs","props","domProps"],toArrayMerge=["class","style","directives"],functionalMerge=["on","nativeOn"],mergeJsxProps=function(a){return a.reduce(function(c,a){for(var b in a)if(!c[b])c[b]=a[b];else if(-1!==normalMerge.indexOf(b))c[b]=_extends({},c[b],a[b]);else if(-1!==toArrayMerge.indexOf(b)){var d=c[b]instanceof Array?c[b]:[c[b]],e=a[b]instanceof Array?a[b]:[a[b]];c[b]=d.concat(e)}else if(-1!==functionalMerge.indexOf(b)){for(var f in a[b])if(c[b][f]){var g=c[b][f]instanceof Array?c[b][f]:[c[b][f]],h=a[b][f]instanceof Array?a[b][f]:[a[b][f]];c[b][f]=g.concat(h)}else c[b][f]=a[b][f];}else if("hook"==b)for(var i in a[b])c[b][i]=c[b][i]?mergeFn(c[b][i],a[b][i]):a[b][i];else c[b]=a[b];return c},{})},mergeFn=function(a,b){return function(){a&&a.apply(this,arguments),b&&b.apply(this,arguments)}};module.exports=mergeJsxProps;
{
"name": "@vue/babel-helper-vue-jsx-merge-props",
"version": "1.0.0-beta.2",
"description": "Babel helper for Vue JSX spread",
"main": "dist/helper.js",
"repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-helper-vue-jsx-merge-props",
"author": "Evan You",
"license": "MIT",
"private": false,
"files": [],
"scripts": {
"build:testing": "rollup -c rollup.config.testing.js",
"build": "rollup -c",
"pretest": "yarn build:testing",
"test": "nyc --reporter=html --reporter=text-summary ava -v test/test.js",
"prepublish": "yarn build"
},
"devDependencies": {
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"ava": "^0.25.0",
"nyc": "^13.1.0",
"rollup": "^0.67.4",
"rollup-plugin-babel": "4.0.3",
"rollup-plugin-babel-minify": "^6.2.0",
"rollup-plugin-istanbul": "^2.0.1"
},
"nyc": {
"exclude": [
"dist",
"test"
]
},
"gitHead": "a6f607a53d987e9927f9560b2e29451d579b6f58"
}
## @vue/babel-plugin-transform-vue-jsx
> Babel plugin for Vue 2.0 JSX
### Babel Compatibility Notes
- This repo is only compatible with Babel 7.x, for 6.x please use [vuejs/babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)
### Requirements
- Assumes you are using Babel with a module bundler e.g. Webpack, because the spread merge helper is imported as a module to avoid duplication.
- This is mutually exclusive with `babel-plugin-transform-react-jsx`.
### Usage
```bash
npm install @vue/babel-plugin-transform-vue-jsx --save-dev
npm install @vue/babel-helper-vue-jsx-merge-props --save
```
In your `.babelrc`:
```json
{
"plugins": ["transform-vue-jsx"]
}
```
However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.
### Details
The plugin transpiles the following JSX:
```jsx
<div id="foo">{this.text}</div>
```
To the following JavaScript:
```js
h(
'div',
{
attrs: {
id: 'foo',
},
},
[this.text],
)
```
Note the `h` function, which is a shorthand for a Vue instance's `$createElement` method, must be in the scope where the JSX is. Since this method is passed to component render functions as the first argument, in most cases you'd do this:
```js
Vue.component('jsx-example', {
render(h) {
// <-- h must be in scope
return <div id="foo">bar</div>
},
})
```
### Difference from React JSX
First, Vue 2.0's vnode format is different from React's. The second argument to the `createElement` call is a "data object" that accepts nested objects. Each nested object will be then processed by corresponding modules:
```js
render (h) {
return h('div', {
// Component props
props: {
msg: 'hi'
},
// Normal HTML attributes
attrs: {
id: 'foo'
},
// DOM props
domProps: {
innerHTML: 'bar'
},
// Event handlers are nested under "on", though
// modifiers such as in v-on:keyup.enter are not
// supported. You'll have to manually check the
// keyCode in the handler instead.
on: {
click: this.clickHandler
},
// For components only. Allows you to listen to
// native events, rather than events emitted from
// the component using vm.$emit.
nativeOn: {
click: this.nativeClickHandler
},
// Class is a special module, same API as `v-bind:class`
class: {
foo: true,
bar: false
},
// Style is also same as `v-bind:style`
style: {
color: 'red',
fontSize: '14px'
},
// Other special top-level properties
key: 'key',
ref: 'ref',
// Assign the `ref` is used on elements/components with v-for
refInFor: true,
slot: 'slot'
})
}
```
The equivalent of the above in Vue 2.0 JSX is:
```jsx
render (h) {
return (
<div
// Component props
propsMsg="hi"
// Normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
```
### Component Tip
If a custom element starts with lowercase, it will be treated as a string id and used to lookup a registered component. If it starts with uppercase, it will be treated as an identifier, which allows you to do:
```js
import Todo from './Todo.js'
export default {
render(h) {
return <Todo /> // no need to register Todo via components option
},
}
```
### JSX Spread
JSX spread is supported, and this plugin will intelligently merge nested data properties. For example:
```jsx
const data = {
class: ['b', 'c'],
}
const vnode = <div class="a" {...data} />
```
The merged data will be:
```js
{ class: ['a', 'b', 'c'] }
```
### Vue directives
Vue directives are usable the same way as in template with a few key differences:
1. You can use directives camelCased instead of kebab-cased (vMyDirective is treated as `v-my-directive`)
2. You have to use underscore sign instead of dots for modifiers because of JSXIdentifier limitation.
3. Only runtime directives work (only v-show and custom directives), compile-time directives are out of this project's scope.
A full example would be: `<MyComponent vMyDirective:argument_modifier1_modifier2={someExpression} />`
"use strict";function _interopDefault(a){return a&&"object"==typeof a&&"default"in a?a["default"]:a}var syntaxJsx=_interopDefault(require("@babel/plugin-syntax-jsx")),helperModuleImports=require("@babel/helper-module-imports"),kebabcase=_interopDefault(require("lodash.kebabcase")),htmlTags=_interopDefault(require("html-tags")),svgTags=_interopDefault(require("svg-tags"));const xlinkRE=/^xlink([A-Z])/,rootAttributes=["staticClass","class","style","key","ref","refInFor","slot","scopedSlots","model"],prefixes=["props","domProps","on","nativeOn","hook","attrs"],domPropsValueElements=["input","textarea","option","select"],domPropsElements=[...domPropsValueElements,"video"],mustUseDomProps=(a,b,c)=>"value"===c&&domPropsValueElements.includes(a)&&"button"!==b||"selected"===c&&"option"===a||"checked"===c&&"input"===a||"muted"===c&&"video"===a,isDirective=a=>a.startsWith(`v-`)||a.startsWith("v")&&2<=a.length&&"A"<=a[1]&&"Z">=a[1],getTag=(a,b)=>{const c=b.get("name");if(a.isJSXIdentifier(c)){const d=c.get("name").node;return!b.scope.hasBinding(d)||htmlTags.includes(d)||svgTags.includes(d)?a.stringLiteral(d):a.identifier(d)}if(a.isJSXMemberExpression(c))return transformJSXMemberExpression(a,c);throw new Error(`getTag: ${c.type} is not supported`)},getChildren=(a,b)=>b.map(b=>{if(b.isJSXText())return transformJSXText(a,b);if(b.isJSXExpressionContainer())return transformJSXExpressionContainer(a,b);if(b.isJSXSpreadChild())return transformJSXSpreadChild(a,b);if(b.isJSXElement())return transformJSXElement(a,b);throw new Error(`getChildren: ${b.type} is not supported`)}).filter(a=>null!==a),addAttribute=(a,b,c,d)=>{if(b[c]){let e=!1;a.isObjectProperty(d)&&("on"===c||"nativeOn"===c)&&b[c].properties.forEach(b=>{a.isObjectProperty(b)&&b.key.value===d.key.value&&(a.isArrayExpression(b.value)?b.value.elements.push(d.value):b.value=a.arrayExpression([b.value,d.value]),e=!0)}),e||b[c].properties.push(d)}else b[c]=a.objectExpression([d])},parseMagicDomPropsInfo=(a,b,c)=>{const d=a.isStringLiteral(c)&&c.value,e=domPropsElements.includes(d);let f="";if(e){const c=b.find(b=>a.isJSXAttribute(b)&&a.isJSXIdentifier(b.get("name"))&&a.isStringLiteral(b.get("value"))&&"type"===b.get("name.name").node);f=c&&c.get("value.value").node}return{tagName:d,canContainDomProps:e,elementType:f}},parseAttributeJSXAttribute=(a,b,c,d,e)=>{const f=b.get("name");let g,h,i,j;if(h=a.isJSXNamespacedName(f)?`${f.get("namespace.name").node}:${f.get("name.name").node}`:f.get("name").node,prefixes.includes(h)&&a.isJSXExpressionContainer(b.get("value")))return a.JSXSpreadAttribute(a.objectExpression([a.objectProperty(a.stringLiteral(h),b.get("value").node.expression)]));[h,...i]=h.split("_"),[h,j]=h.split(":"),g=prefixes.find(a=>h.startsWith(a))||"attrs",h=h.replace(new RegExp(`^${g}\-?`),""),h=h[0].toLowerCase()+h.substr(1);const k=b.get("value");let l;if(!k.node)l=a.booleanLiteral(!0);else if(a.isStringLiteral(k))l=k.node;else if(a.isJSXExpressionContainer(k))mustUseDomProps(d,e,h)&&(g="domProps"),l=k.get("expression").node;else throw new Error(`getAttributes (attribute value): ${k.type} is not supported`);l._argument=j,l._modifiers=i,rootAttributes.includes(h)?c[h]=l:(isDirective(h)&&(h=kebabcase(h.substr(1)),g="directives"),h.match(xlinkRE)&&(h=h.replace(xlinkRE,(a,b)=>"xlink:"+b.toLowerCase())),addAttribute(a,c,g,a.objectProperty(a.stringLiteral(h),l)))},parseAttributeJSXSpreadAttribute=(a,b,c,d)=>{const e=b.get("argument");return a.isObjectExpression(e)&&!e.get("properties").find(b=>!a.isObjectProperty(b)||!prefixes.includes(b.get("key.name").node))?e.get("properties").forEach(b=>{addAttribute(a,c,b.get("key.name").node,a.spreadElement(b.get("value").node))}):(d.push(c),d.push({type:"vueSpread",argument:e.node}),c={}),c},getAttributes=(a,b,c,d)=>{const e=[];let f={};const{tagName:g,canContainDomProps:h,elementType:i}=parseMagicDomPropsInfo(a,b,c);return b.forEach(b=>{if(a.isJSXAttribute(b)){const c=parseAttributeJSXAttribute(a,b,f,g,i);if(c){d.node.attributes.push(c);const b=d.get("attributes"),g=b[b.length-1];f=parseAttributeJSXSpreadAttribute(a,g,f,e),g.remove()}return}if(a.isJSXSpreadAttribute(b))return void(f=parseAttributeJSXSpreadAttribute(a,b,f,e));throw new Error(`getAttributes (attribute): ${b.type} is not supported`)}),0<e.length?(0<Object.keys(f).length&&e.push(f),a.arrayExpression(e.map(b=>"vueSpread"===b.type?b.argument:transformAttributes(a,b)))):Object.entries(f).length&&transformAttributes(a,f)},transformDirectives=(a,b)=>a.arrayExpression(b.properties.map(b=>a.objectExpression([a.objectProperty(a.identifier("name"),b.key),a.objectProperty(a.identifier("value"),b.value),...(b.value._argument?[a.objectProperty(a.identifier("arg"),a.stringLiteral(b.value._argument))]:[]),...(b.value._modifiers&&0<b.value._modifiers.length?[a.objectProperty(a.identifier("modifiers"),a.objectExpression(b.value._modifiers.map(b=>a.objectProperty(a.stringLiteral(b),a.booleanLiteral(!0)))))]:[])]))),transformAttributes=(a,b)=>a.objectExpression(Object.entries(b).map(([b,c])=>"directives"===b?a.objectProperty(a.stringLiteral(b),transformDirectives(a,c)):a.objectProperty(a.stringLiteral(b),c))),transformJSXElement=(a,b)=>{const c=getTag(a,b.get("openingElement")),d=getChildren(a,b.get("children")),e=b.get("openingElement"),f=getAttributes(a,e.get("attributes"),c,e),g=[c];if(f)if(a.isArrayExpression(f)){const c=helperModuleImports.addDefault(b,"@vue/babel-helper-vue-jsx-merge-props",{nameHint:"_mergeJSXProps"});g.push(a.callExpression(c,[f]))}else g.push(f);return d.length&&g.push(a.arrayExpression(d)),a.callExpression(a.identifier("h"),g)},transformJSXMemberExpression=(a,b)=>{const c=b.get("object"),d=b.get("property"),e=c.isJSXMemberExpression()?transformJSXMemberExpression(a,c):a.identifier(c.get("name").node),f=a.identifier(d.get("name").node);return a.memberExpression(e,f)},transformJSXText=(a,b)=>{const c=b.node,d=c.value.split(/\r\n|\n|\r/);let e=0;for(let c=0;c<d.length;c++)d[c].match(/[^ \t]/)&&(e=c);let f="";for(let c=0;c<d.length;c++){const a=d[c],b=0==c,g=c==d.length-1,h=c==e;let i=a.replace(/\t/g," ");b||(i=i.replace(/^[ ]+/,"")),g||(i=i.replace(/[ ]+$/,"")),i&&(!h&&(i+=" "),f+=i)}return""===f?null:a.stringLiteral(f)},transformJSXExpressionContainer=(a,b)=>b.get("expression").node,transformJSXSpreadChild=(a,b)=>a.spreadElement(b.get("expression").node);var index=a=>{const b=a.types;return{name:"babel-plugin-transform-vue-jsx",inherits:syntaxJsx,visitor:{JSXElement(a){a.replaceWith(transformJSXElement(b,a))}}}};module.exports=index;
{
"name": "@vue/babel-plugin-transform-vue-jsx",
"version": "1.0.0-beta.2",
"description": "Babel plugin for Vue 2.0 JSX",
"main": "dist/plugin.js",
"repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-plugin-transform-vue-jsx",
"author": "Evan You",
"license": "MIT",
"private": false,
"files": [],
"scripts": {
"pretest:snapshot": "yarn build:test",
"test:snapshot": "nyc --reporter=html --reporter=text-summary ava -v test/snapshot.js",
"pretest:functional": "yarn build:test && nyc --reporter=html --reporter=text-summary babel test/functional.js --plugins ./dist/plugin.testing.js --out-file test/functional-compiled.js",
"test:functional": "ava -v test/functional-compiled.js",
"build": "rollup -c",
"build:test": "rollup -c rollup.config.testing.js",
"test": "rm -rf coverage* && yarn test:snapshot && mv coverage coverage-snapshot && yarn test:functional && mv coverage coverage-functional",
"prepublish": "yarn build"
},
"devDependencies": {
"@babel/cli": "^7.2.0",
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"@vue/test-utils": "^1.0.0-beta.26",
"ava": "^0.25.0",
"jsdom": "^13.0.0",
"jsdom-global": "^3.0.2",
"nyc": "^12.0.2",
"rollup": "^0.67.4",
"rollup-plugin-babel": "4.0.3",
"rollup-plugin-babel-minify": "^6.2.0",
"rollup-plugin-istanbul": "^2.0.1",
"vue": "^2.5.17",
"vue-template-compiler": "^2.5.17"
},
"dependencies": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/plugin-syntax-jsx": "^7.2.0",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.2",
"html-tags": "^2.0.0",
"lodash.kebabcase": "^4.1.1",
"svg-tags": "^1.0.0"
},
"nyc": {
"exclude": [
"dist",
"test"
]
},
"gitHead": "a6f607a53d987e9927f9560b2e29451d579b6f58"
}
The MIT License (MIT)
Copyright (c) 2017-present, Yuxi (Evan) You
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
......@@ -30,12 +30,7 @@ module.exports = (context, options = {}) => {
// JSX
if (options.jsx !== false) {
plugins.push(
require('@babel/plugin-syntax-jsx'),
require('babel-plugin-transform-vue-jsx')
// require('babel-plugin-jsx-event-modifiers'),
// require('babel-plugin-jsx-v-model')
)
presets.push([require('@vue/babel-preset-jsx'), typeof options.jsx === 'object' ? options.jsx : {}])
}
const {
......@@ -125,7 +120,7 @@ module.exports = (context, options = {}) => {
}
// pass options along to babel-preset-env
presets.push([require('@babel/preset-env'), envOptions])
presets.unshift([require('@babel/preset-env'), envOptions])
// additional <= stage-3 plugins
// Babel 7 is removing stage presets altogether because people are using
......
{
"name": "@vue/babel-preset-app",
"version": "3.2.2",
"version": "3.3.0",
"description": "babel-preset-app for vue-cli",
"main": "index.js",
"publishConfig": {
......@@ -29,9 +29,11 @@
"@babel/preset-env": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@babel/runtime-corejs2": "^7.2.0",
"@vue/babel-preset-jsx": "^1.0.0-beta.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-transform-vue-jsx": "^4.0.1",
"core-js": "^2.6.1"
}
},
"gitHead": "5937a67a48af1ff4c0053be787e8cd64440466df"
}
## @vue/babel-preset-jsx
Configurable preset for Vue JSX plugins.
### Babel Compatibility Notes
- This repo is only compatible with Babel 7.x, for 6.x please use [vuejs/babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)
### Usage
Install the dependencies:
```sh
# for yarn:
yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
# for npm:
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save
```
In your `.babelrc`:
```json
{
"presets": ["@vue/babel-preset-jsx"]
}
```
You can toggle specific features, by default all features are enabled, e.g.:
```json
{
"presets": [
[
"@vue/babel-preset-jsx",
{
"vModel": false
}
]
]
}
```
Options are:
- `functional` [@vue/babel-sugar-functional-vue](../babel-sugar-functional-vue/README.md) - Functional components syntactic sugar
- `injectH` [@vue/babel-sugar-inject-h](../babel-sugar-inject-h/README.md) - Automatic `h` injection syntactic sugar
- `vModel` [@vue/babel-sugar-v-model](../babel-sugar-v-model/README.md) - `vModel` syntactic sugar
- `vOn` [@vue/babel-sugar-v-on](../babel-sugar-v-on/README.md) - `vOn` syntactic sugar
"use strict";function _interopDefault(a){return a&&"object"==typeof a&&"default"in a?a["default"]:a}var babelPluginTransformVueJsx=_interopDefault(require("@vue/babel-plugin-transform-vue-jsx")),babelSugarFunctionalVue=_interopDefault(require("@vue/babel-sugar-functional-vue")),babelSugarInjectH=_interopDefault(require("@vue/babel-sugar-inject-h")),babelSugarVModel=_interopDefault(require("@vue/babel-sugar-v-model")),babelSugarVOn=_interopDefault(require("@vue/babel-sugar-v-on")),index=(a,{functional:b=!0,injectH:c=!0,vModel:d=!0,vOn:e=!0}={})=>({plugins:[b&&babelSugarFunctionalVue,c&&babelSugarInjectH,d&&babelSugarVModel,e&&babelSugarVOn,babelPluginTransformVueJsx].filter(Boolean)});module.exports=index;
{
"name": "@vue/babel-preset-jsx",
"version": "1.0.0-beta.2",
"description": "Babel preset for Vue JSX",
"main": "dist/plugin.cjs.js",
"repository": "https://github.com/vuejs/jsx/tree/master/packages/babel-sugar-event-modifiers",
"author": "Nick Messing <dot.nick.dot.messing@gmail.com>",
"license": "MIT",
"private": false,
"files": [],
"scripts": {
"build": "rollup -c",
"prerelease": "yarn build"
},
"dependencies": {
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.2",
"@vue/babel-plugin-transform-vue-jsx": "^1.0.0-beta.2",
"@vue/babel-sugar-functional-vue": "^1.0.0-beta.2",
"@vue/babel-sugar-inject-h": "^1.0.0-beta.2",
"@vue/babel-sugar-v-model": "^1.0.0-beta.2",
"@vue/babel-sugar-v-on": "^1.0.0-beta.2"
},
"devDependencies": {
"rollup": "^0.67.4",
"rollup-plugin-babel-minify": "^6.2.0"
},
"gitHead": "a6f607a53d987e9927f9560b2e29451d579b6f58"
}
## @vue/babel-sugar-functional-vue
Syntactic sugar for functional components.
### Babel Compatibility Notes
- This repo is only compatible with Babel 7.x, for 6.x please use [vuejs/babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)
### Usage
Install the dependencies:
```sh
# for yarn:
yarn add @vue/babel-sugar-functional-vue
# for npm:
npm install @vue/babel-sugar-functional-vue --save
```
In your `.babelrc`:
```json
{
"plugins": ["@vue/babel-sugar-functional-vue"]
}
```
However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) 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:
```js
// 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>
}
```
"use strict";function _interopDefault(a){return a&&"object"==typeof a&&"default"in a?a["default"]:a}var syntaxJsx=_interopDefault(require("@babel/plugin-syntax-jsx"));/**
* Check if expression is in method
* @param t