This commit is contained in:
2022-07-18 02:50:52 +00:00
parent befd344ab0
commit 06181b34d6
8569 changed files with 818704 additions and 352705 deletions
@@ -0,0 +1,78 @@
## @vue/babel-sugar-composition-api-render-instance
> Ported from [luwanquan/babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx) by [@luwanquan](https://github.com/luwanquan)
Babel syntactic sugar for replacing `this` with `getCurrentInstance()` in Vue JSX with @vue/composition-api
### Babel Compatibility Notes
- This repo is only compatible with Babel 7.x
### Usage
Install the dependencies:
```sh
# for yarn:
yarn add @vue/babel-sugar-composition-api-render-instance
# for npm:
npm install @vue/babel-sugar-composition-api-render-instance --save
```
In your `.babelrc`:
```json
{
"plugins": ["@vue/babel-sugar-composition-api-render-instance"]
}
```
However it is recommended to use the [configurable preset](../babel-preset-jsx/README.md) instead.
### Details
This plugin automatically replaces `this` in `setup()` with `getCurrentInstance()`. This is required for JSX to work in @vue/composition-api as `this` is not available in `setup()`
Input:
```jsx
defineComponent({
setup() {
return () => <MyComponent vModel={a.b} />
}
})
```
Output (without @vue/babel-sugar-composition-api-render-instance):
```jsx
defineComponent({
setup() {
return () => <MyComponent model={{
value: a.b,
callback: $$v => {
this.$set(a, "b", $$v);
}
}} />
}
})
```
Output (with @vue/babel-sugar-composition-api-render-instance):
```jsx
import { getCurrentInstance } from "@vue/composition-api";
defineComponent({
setup() {
const __currentInstance = getCurrentInstance();
return () => <MyComponent model={{
value: a.b,
callback: $$v => {
__currentInstance.$set(a, "b", $$v);
}
}} />
}
})
```
@@ -0,0 +1 @@
"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var syntaxJsx=_interopDefault(require("@babel/plugin-syntax-jsx"));const autoImportGetCurrentInstance=(e,t,n)=>{const i=t.get("body").filter(e=>e.isImportDeclaration()).map(e=>e.node);const r=i.filter(e=>e.source.value===n);const o=r.some(t=>t.specifiers.some(t=>e.isImportSpecifier(t)&&"getCurrentInstance"===t.local.name));if(!o){const i=e.importSpecifier(e.identifier("getCurrentInstance"),e.identifier("getCurrentInstance"));r.length>0?r[0].specifiers.push(i):t.unshiftContainer("body",e.importDeclaration([i],e.stringLiteral(n)))}},injectInstanceId="__currentInstance";var index=({types:t},{importSource:importSource="@vue/composition-api"}={})=>({inherits:syntaxJsx,visitor:{Program(e){e.traverse({"ObjectMethod|ObjectProperty"(n){if("setup"===n.node.key.name){let i=!1;n.traverse({JSXAttribute(r){const o=r.get("name");["v-on","on-input","on-change","model"].includes(o.node.name)&&r.traverse({MemberExpression(r){const o=r.get("object"),s=r.get("property");t.isThisExpression(o)&&t.isIdentifier(s)&&["$","_"].includes(s.node.name[0])&&(autoImportGetCurrentInstance(t,e,importSource),i||(n.node.value.body.body.unshift(t.variableDeclaration("const",[t.variableDeclarator(t.identifier(injectInstanceId),t.callExpression(t.identifier("getCurrentInstance"),[]))])),i=!0),o.replaceWith(t.identifier(injectInstanceId)))}})}})}}})}}});module.exports=index;
@@ -0,0 +1,81 @@
{
"_args": [
[
"@vue/babel-sugar-composition-api-render-instance@1.3.0",
"/home/node/nuxt"
]
],
"_from": "@vue/babel-sugar-composition-api-render-instance@1.3.0",
"_id": "@vue/babel-sugar-composition-api-render-instance@1.3.0",
"_inBundle": false,
"_integrity": "sha512-NYNnU2r7wkJLMV5p9Zj4pswmCs037O/N2+/Fs6SyX7aRFzXJRP1/2CZh5cIwQxWQajHXuCUd5mTb7DxoBVWyTg==",
"_location": "/@vue/babel-sugar-composition-api-render-instance",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "@vue/babel-sugar-composition-api-render-instance@1.3.0",
"name": "@vue/babel-sugar-composition-api-render-instance",
"escapedName": "@vue%2fbabel-sugar-composition-api-render-instance",
"scope": "@vue",
"rawSpec": "1.3.0",
"saveSpec": null,
"fetchSpec": "1.3.0"
},
"_requiredBy": [
"/@vue/babel-preset-jsx"
],
"_resolved": "https://registry.npmjs.org/@vue/babel-sugar-composition-api-render-instance/-/babel-sugar-composition-api-render-instance-1.3.0.tgz",
"_spec": "1.3.0",
"_where": "/home/node/nuxt",
"author": {
"name": "luwanquan",
"email": "luwanquan@f-road.com.cn"
},
"dependencies": {
"@babel/plugin-syntax-jsx": "^7.2.0"
},
"description": "Babel syntactic sugar for replaceing `this` with `getCurrentInstance()` in Vue JSX with @vue/composition-api",
"devDependencies": {
"@babel/cli": "^7.2.0",
"@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-istanbul": "^2.0.1",
"rollup-plugin-uglify-es": "^0.0.1",
"vue": "^2.5.17"
},
"files": [],
"gitHead": "f82f6182d294632a2cbddaacdff0a506c09e4ddc",
"license": "MIT",
"main": "dist/plugin.js",
"name": "@vue/babel-sugar-composition-api-render-instance",
"nyc": {
"exclude": [
"dist",
"test"
]
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"private": false,
"publishConfig": {
"access": "public"
},
"repository": {
"type": "git",
"url": "https://github.com/vuejs/jsx/tree/master/packages/babel-sugar-composition-api-render-instance"
},
"scripts": {
"build": "rollup -c",
"build:test": "rollup -c rollup.config.testing.js",
"prepublish": "yarn build",
"pretest": "yarn build:test && cd ../babel-sugar-v-model && yarn build:test",
"test": "nyc --reporter=html --reporter=text-summary ava -v test/test.js"
},
"version": "1.3.0"
}