first
This commit is contained in:
21
node_modules/@vue/babel-plugin-jsx/LICENSE
generated
vendored
Normal file
21
node_modules/@vue/babel-plugin-jsx/LICENSE
generated
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020-present vuejs
|
||||
|
||||
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.
|
376
node_modules/@vue/babel-plugin-jsx/README.md
generated
vendored
Normal file
376
node_modules/@vue/babel-plugin-jsx/README.md
generated
vendored
Normal file
@ -0,0 +1,376 @@
|
||||
# Babel Plugin JSX for Vue 3
|
||||
|
||||
[](https://www.npmjs.com/package/@vue/babel-plugin-jsx)
|
||||
[](https://github.com/actions-cool/issues-helper)
|
||||
|
||||
To add Vue JSX support.
|
||||
|
||||
English | [简体中文](/packages/babel-plugin-jsx/README-zh_CN.md)
|
||||
|
||||
## Installation
|
||||
|
||||
Install the plugin with:
|
||||
|
||||
```bash
|
||||
npm install @vue/babel-plugin-jsx -D
|
||||
```
|
||||
|
||||
Then add the plugin to your babel config:
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": ["@vue/babel-plugin-jsx"]
|
||||
}
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### options
|
||||
|
||||
#### transformOn
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Default: `false`
|
||||
|
||||
transform `on: { click: xx }` to `onClick: xxx`
|
||||
|
||||
#### optimize
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Default: `false`
|
||||
|
||||
enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.
|
||||
|
||||
#### isCustomElement
|
||||
|
||||
Type: `(tag: string) => boolean`
|
||||
|
||||
Default: `undefined`
|
||||
|
||||
configuring custom elements
|
||||
|
||||
#### mergeProps
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Default: `true`
|
||||
|
||||
merge static and dynamic class / style attributes / onXXX handlers
|
||||
|
||||
#### enableObjectSlots
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Default: `true`
|
||||
|
||||
Whether to enable `object slots` (mentioned below the document) syntax". It might be useful in JSX, but it will add a lot of `_isSlot` condition expressions which increase your bundle size. And `v-slots` is still available even if `enableObjectSlots` is turned off.
|
||||
|
||||
#### pragma
|
||||
|
||||
Type: `string`
|
||||
|
||||
Default: `createVNode`
|
||||
|
||||
Replace the function used when compiling JSX expressions.
|
||||
|
||||
## Syntax
|
||||
|
||||
### Content
|
||||
|
||||
functional component
|
||||
|
||||
```jsx
|
||||
const App = () => <div>Vue 3.0</div>;
|
||||
```
|
||||
|
||||
with render
|
||||
|
||||
```jsx
|
||||
const App = {
|
||||
render() {
|
||||
return <div>Vue 3.0</div>;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```jsx
|
||||
import { withModifiers, defineComponent } from 'vue';
|
||||
|
||||
const App = defineComponent({
|
||||
setup() {
|
||||
const count = ref(0);
|
||||
|
||||
const inc = () => {
|
||||
count.value++;
|
||||
};
|
||||
|
||||
return () => (
|
||||
<div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Fragment
|
||||
|
||||
```jsx
|
||||
const App = () => (
|
||||
<>
|
||||
<span>I'm</span>
|
||||
<span>Fragment</span>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Attributes / Props
|
||||
|
||||
```jsx
|
||||
const App = () => <input type="email" />;
|
||||
```
|
||||
|
||||
with a dynamic binding:
|
||||
|
||||
```jsx
|
||||
const placeholderText = 'email';
|
||||
const App = () => <input type="email" placeholder={placeholderText} />;
|
||||
```
|
||||
|
||||
### Directives
|
||||
|
||||
#### v-show
|
||||
|
||||
```jsx
|
||||
const App = {
|
||||
data() {
|
||||
return { visible: true };
|
||||
},
|
||||
render() {
|
||||
return <input v-show={this.visible} />;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### v-model
|
||||
|
||||
> Note: You should pass the second param as string for using `arg`.
|
||||
|
||||
```jsx
|
||||
<input v-model={val} />
|
||||
```
|
||||
|
||||
```jsx
|
||||
<input v-model:argument={val} />
|
||||
```
|
||||
|
||||
```jsx
|
||||
<input v-model={[val, ['modifier']]} />
|
||||
```
|
||||
|
||||
```jsx
|
||||
<A v-model={[val, 'argument', ['modifier']]} />
|
||||
```
|
||||
|
||||
Will compile to:
|
||||
|
||||
```js
|
||||
h(A, {
|
||||
argument: val,
|
||||
argumentModifiers: {
|
||||
modifier: true,
|
||||
},
|
||||
'onUpdate:argument': ($event) => (val = $event),
|
||||
});
|
||||
```
|
||||
|
||||
#### v-models (Not recommended since v1.1.0)
|
||||
|
||||
> Note: You should pass a Two-dimensional Arrays to v-models.
|
||||
|
||||
```jsx
|
||||
<A v-models={[[foo], [bar, 'bar']]} />
|
||||
```
|
||||
|
||||
```jsx
|
||||
<A
|
||||
v-models={[
|
||||
[foo, 'foo'],
|
||||
[bar, 'bar'],
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
```jsx
|
||||
<A
|
||||
v-models={[
|
||||
[foo, ['modifier']],
|
||||
[bar, 'bar', ['modifier']],
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
Will compile to:
|
||||
|
||||
```js
|
||||
h(A, {
|
||||
modelValue: foo,
|
||||
modelModifiers: {
|
||||
modifier: true,
|
||||
},
|
||||
'onUpdate:modelValue': ($event) => (foo = $event),
|
||||
bar: bar,
|
||||
barModifiers: {
|
||||
modifier: true,
|
||||
},
|
||||
'onUpdate:bar': ($event) => (bar = $event),
|
||||
});
|
||||
```
|
||||
|
||||
#### custom directive
|
||||
|
||||
Recommended when using string arguments
|
||||
|
||||
```jsx
|
||||
const App = {
|
||||
directives: { custom: customDirective },
|
||||
setup() {
|
||||
return () => <a v-custom:arg={val} />;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```jsx
|
||||
const App = {
|
||||
directives: { custom: customDirective },
|
||||
setup() {
|
||||
return () => <a v-custom={[val, 'arg', ['a', 'b']]} />;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Slot
|
||||
|
||||
> Note: In `jsx`, _`v-slot`_ should be replaced with **`v-slots`**
|
||||
|
||||
```jsx
|
||||
const A = (props, { slots }) => (
|
||||
<>
|
||||
<h1>{slots.default ? slots.default() : 'foo'}</h1>
|
||||
<h2>{slots.bar?.()}</h2>
|
||||
</>
|
||||
);
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const slots = {
|
||||
bar: () => <span>B</span>,
|
||||
};
|
||||
return () => (
|
||||
<A v-slots={slots}>
|
||||
<div>A</div>
|
||||
</A>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// or
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const slots = {
|
||||
default: () => <div>A</div>,
|
||||
bar: () => <span>B</span>,
|
||||
};
|
||||
return () => <A v-slots={slots} />;
|
||||
},
|
||||
};
|
||||
|
||||
// or you can use object slots when `enableObjectSlots` is not false.
|
||||
const App = {
|
||||
setup() {
|
||||
return () => (
|
||||
<>
|
||||
<A>
|
||||
{{
|
||||
default: () => <div>A</div>,
|
||||
bar: () => <span>B</span>,
|
||||
}}
|
||||
</A>
|
||||
<B>{() => 'foo'}</B>
|
||||
</>
|
||||
);
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### In TypeScript
|
||||
|
||||
`tsconfig.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "preserve"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Who is using
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a target="_blank" href="https://www.antdv.com/">
|
||||
<img
|
||||
width="32"
|
||||
src="https://qn.antdv.com/logo.png"
|
||||
/>
|
||||
<br>
|
||||
<strong>Ant Design Vue</strong>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a target="_blank" href="https://youzan.github.io/vant/#/zh-CN/">
|
||||
<img
|
||||
width="32"
|
||||
style="vertical-align: -0.32em; margin-right: 8px;"
|
||||
src="https://img.yzcdn.cn/vant/logo.png"
|
||||
/>
|
||||
<br>
|
||||
<strong>Vant</strong>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a target="_blank" href="https://github.com/element-plus/element-plus">
|
||||
<img
|
||||
height="32"
|
||||
style="vertical-align: -0.32em; margin-right: 8px;"
|
||||
src="https://user-images.githubusercontent.com/10731096/91267529-259f3680-e7a6-11ea-9a60-3286f750de01.png"
|
||||
/>
|
||||
<br>
|
||||
<strong>Element Plus</strong>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a target="_blank" href="https://github.com/leezng/vue-json-pretty">
|
||||
<img
|
||||
height="32"
|
||||
style="vertical-align: -0.32em; margin-right: 8px;"
|
||||
src="https://raw.githubusercontent.com/leezng/vue-json-pretty/master/static/logo.svg"
|
||||
/>
|
||||
<br>
|
||||
<strong>Vue Json Pretty</strong>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Compatibility
|
||||
|
||||
This repo is only compatible with:
|
||||
|
||||
- **Babel 7+**
|
||||
- **Vue 3+**
|
43
node_modules/@vue/babel-plugin-jsx/dist/index.d.mts
generated
vendored
Normal file
43
node_modules/@vue/babel-plugin-jsx/dist/index.d.mts
generated
vendored
Normal file
@ -0,0 +1,43 @@
|
||||
import * as t from '@babel/types';
|
||||
import * as BabelCore from '@babel/core';
|
||||
import { NodePath } from '@babel/traverse';
|
||||
|
||||
type State = {
|
||||
get: (name: string) => any;
|
||||
set: (name: string, value: any) => any;
|
||||
opts: VueJSXPluginOptions;
|
||||
file: BabelCore.BabelFile;
|
||||
};
|
||||
interface VueJSXPluginOptions {
|
||||
/** transform `on: { click: xx }` to `onClick: xxx` */
|
||||
transformOn?: boolean;
|
||||
/** enable optimization or not. */
|
||||
optimize?: boolean;
|
||||
/** merge static and dynamic class / style attributes / onXXX handlers */
|
||||
mergeProps?: boolean;
|
||||
/** configuring custom elements */
|
||||
isCustomElement?: (tag: string) => boolean;
|
||||
/** enable object slots syntax */
|
||||
enableObjectSlots?: boolean;
|
||||
/** Replace the function used when compiling JSX expressions */
|
||||
pragma?: string;
|
||||
}
|
||||
|
||||
declare const _default: ({ types }: typeof BabelCore) => {
|
||||
name: string;
|
||||
inherits: any;
|
||||
visitor: {
|
||||
Program: {
|
||||
enter(path: NodePath<t.Program>, state: State): void;
|
||||
exit(path: NodePath<t.Program>): void;
|
||||
};
|
||||
JSXFragment: {
|
||||
enter(path: BabelCore.NodePath<t.JSXElement>, state: State): void;
|
||||
};
|
||||
JSXElement: {
|
||||
exit(path: BabelCore.NodePath<t.JSXElement>, state: State): void;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
export { VueJSXPluginOptions, _default as default };
|
43
node_modules/@vue/babel-plugin-jsx/dist/index.d.ts
generated
vendored
Normal file
43
node_modules/@vue/babel-plugin-jsx/dist/index.d.ts
generated
vendored
Normal file
@ -0,0 +1,43 @@
|
||||
import * as t from '@babel/types';
|
||||
import * as BabelCore from '@babel/core';
|
||||
import { NodePath } from '@babel/traverse';
|
||||
|
||||
type State = {
|
||||
get: (name: string) => any;
|
||||
set: (name: string, value: any) => any;
|
||||
opts: VueJSXPluginOptions;
|
||||
file: BabelCore.BabelFile;
|
||||
};
|
||||
interface VueJSXPluginOptions {
|
||||
/** transform `on: { click: xx }` to `onClick: xxx` */
|
||||
transformOn?: boolean;
|
||||
/** enable optimization or not. */
|
||||
optimize?: boolean;
|
||||
/** merge static and dynamic class / style attributes / onXXX handlers */
|
||||
mergeProps?: boolean;
|
||||
/** configuring custom elements */
|
||||
isCustomElement?: (tag: string) => boolean;
|
||||
/** enable object slots syntax */
|
||||
enableObjectSlots?: boolean;
|
||||
/** Replace the function used when compiling JSX expressions */
|
||||
pragma?: string;
|
||||
}
|
||||
|
||||
declare const _default: ({ types }: typeof BabelCore) => {
|
||||
name: string;
|
||||
inherits: any;
|
||||
visitor: {
|
||||
Program: {
|
||||
enter(path: NodePath<t.Program>, state: State): void;
|
||||
exit(path: NodePath<t.Program>): void;
|
||||
};
|
||||
JSXFragment: {
|
||||
enter(path: BabelCore.NodePath<t.JSXElement>, state: State): void;
|
||||
};
|
||||
JSXElement: {
|
||||
exit(path: BabelCore.NodePath<t.JSXElement>, state: State): void;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
export { VueJSXPluginOptions, _default as default };
|
1020
node_modules/@vue/babel-plugin-jsx/dist/index.js
generated
vendored
Normal file
1020
node_modules/@vue/babel-plugin-jsx/dist/index.js
generated
vendored
Normal file
File diff suppressed because it is too large
Load Diff
992
node_modules/@vue/babel-plugin-jsx/dist/index.mjs
generated
vendored
Normal file
992
node_modules/@vue/babel-plugin-jsx/dist/index.mjs
generated
vendored
Normal file
@ -0,0 +1,992 @@
|
||||
var __defProp = Object.defineProperty;
|
||||
var __defProps = Object.defineProperties;
|
||||
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
||||
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
||||
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
||||
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
||||
var __spreadValues = (a, b) => {
|
||||
for (var prop in b || (b = {}))
|
||||
if (__hasOwnProp.call(b, prop))
|
||||
__defNormalProp(a, prop, b[prop]);
|
||||
if (__getOwnPropSymbols)
|
||||
for (var prop of __getOwnPropSymbols(b)) {
|
||||
if (__propIsEnum.call(b, prop))
|
||||
__defNormalProp(a, prop, b[prop]);
|
||||
}
|
||||
return a;
|
||||
};
|
||||
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
||||
|
||||
// src/index.ts
|
||||
import * as t5 from "@babel/types";
|
||||
import template from "@babel/template";
|
||||
import syntaxJsx from "@babel/plugin-syntax-jsx";
|
||||
import { addNamed, addNamespace, isModule } from "@babel/helper-module-imports";
|
||||
|
||||
// src/transform-vue-jsx.ts
|
||||
import * as t3 from "@babel/types";
|
||||
import { addDefault } from "@babel/helper-module-imports";
|
||||
|
||||
// src/utils.ts
|
||||
import * as t from "@babel/types";
|
||||
import htmlTags from "html-tags";
|
||||
import svgTags from "svg-tags";
|
||||
|
||||
// src/slotFlags.ts
|
||||
var SlotFlags = /* @__PURE__ */ ((SlotFlags2) => {
|
||||
SlotFlags2[SlotFlags2["STABLE"] = 1] = "STABLE";
|
||||
SlotFlags2[SlotFlags2["DYNAMIC"] = 2] = "DYNAMIC";
|
||||
SlotFlags2[SlotFlags2["FORWARDED"] = 3] = "FORWARDED";
|
||||
return SlotFlags2;
|
||||
})(SlotFlags || {});
|
||||
var slotFlags_default = SlotFlags;
|
||||
|
||||
// src/utils.ts
|
||||
var FRAGMENT = "Fragment";
|
||||
var KEEP_ALIVE = "KeepAlive";
|
||||
var createIdentifier = (state, name) => state.get(name)();
|
||||
var isDirective = (src) => src.startsWith("v-") || src.startsWith("v") && src.length >= 2 && src[1] >= "A" && src[1] <= "Z";
|
||||
var shouldTransformedToSlots = (tag) => !(tag.match(RegExp(`^_?${FRAGMENT}\\d*$`)) || tag === KEEP_ALIVE);
|
||||
var checkIsComponent = (path, state) => {
|
||||
var _a, _b;
|
||||
const namePath = path.get("name");
|
||||
if (namePath.isJSXMemberExpression()) {
|
||||
return shouldTransformedToSlots(namePath.node.property.name);
|
||||
}
|
||||
const tag = namePath.node.name;
|
||||
return !((_b = (_a = state.opts).isCustomElement) == null ? void 0 : _b.call(_a, tag)) && shouldTransformedToSlots(tag) && !htmlTags.includes(tag) && !svgTags.includes(tag);
|
||||
};
|
||||
var transformJSXMemberExpression = (path) => {
|
||||
const objectPath = path.node.object;
|
||||
const propertyPath = path.node.property;
|
||||
const transformedObject = t.isJSXMemberExpression(objectPath) ? transformJSXMemberExpression(
|
||||
path.get("object")
|
||||
) : t.isJSXIdentifier(objectPath) ? t.identifier(objectPath.name) : t.nullLiteral();
|
||||
const transformedProperty = t.identifier(propertyPath.name);
|
||||
return t.memberExpression(transformedObject, transformedProperty);
|
||||
};
|
||||
var getTag = (path, state) => {
|
||||
var _a, _b;
|
||||
const namePath = path.get("openingElement").get("name");
|
||||
if (namePath.isJSXIdentifier()) {
|
||||
const { name } = namePath.node;
|
||||
if (!htmlTags.includes(name) && !svgTags.includes(name)) {
|
||||
return name === FRAGMENT ? createIdentifier(state, FRAGMENT) : path.scope.hasBinding(name) ? t.identifier(name) : ((_b = (_a = state.opts).isCustomElement) == null ? void 0 : _b.call(_a, name)) ? t.stringLiteral(name) : t.callExpression(createIdentifier(state, "resolveComponent"), [
|
||||
t.stringLiteral(name)
|
||||
]);
|
||||
}
|
||||
return t.stringLiteral(name);
|
||||
}
|
||||
if (namePath.isJSXMemberExpression()) {
|
||||
return transformJSXMemberExpression(namePath);
|
||||
}
|
||||
throw new Error(`getTag: ${namePath.type} is not supported`);
|
||||
};
|
||||
var getJSXAttributeName = (path) => {
|
||||
const nameNode = path.node.name;
|
||||
if (t.isJSXIdentifier(nameNode)) {
|
||||
return nameNode.name;
|
||||
}
|
||||
return `${nameNode.namespace.name}:${nameNode.name.name}`;
|
||||
};
|
||||
var transformJSXText = (path) => {
|
||||
const str = transformText(path.node.value);
|
||||
return str !== "" ? t.stringLiteral(str) : null;
|
||||
};
|
||||
var transformText = (text) => {
|
||||
const lines = text.split(/\r\n|\n|\r/);
|
||||
let lastNonEmptyLine = 0;
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
if (lines[i].match(/[^ \t]/)) {
|
||||
lastNonEmptyLine = i;
|
||||
}
|
||||
}
|
||||
let str = "";
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
const isFirstLine = i === 0;
|
||||
const isLastLine = i === lines.length - 1;
|
||||
const isLastNonEmptyLine = i === lastNonEmptyLine;
|
||||
let trimmedLine = line.replace(/\t/g, " ");
|
||||
if (!isFirstLine) {
|
||||
trimmedLine = trimmedLine.replace(/^[ ]+/, "");
|
||||
}
|
||||
if (!isLastLine) {
|
||||
trimmedLine = trimmedLine.replace(/[ ]+$/, "");
|
||||
}
|
||||
if (trimmedLine) {
|
||||
if (!isLastNonEmptyLine) {
|
||||
trimmedLine += " ";
|
||||
}
|
||||
str += trimmedLine;
|
||||
}
|
||||
}
|
||||
return str;
|
||||
};
|
||||
var transformJSXExpressionContainer = (path) => path.get("expression").node;
|
||||
var transformJSXSpreadChild = (path) => t.spreadElement(path.get("expression").node);
|
||||
var walksScope = (path, name, slotFlag) => {
|
||||
if (path.scope.hasBinding(name) && path.parentPath) {
|
||||
if (t.isJSXElement(path.parentPath.node)) {
|
||||
path.parentPath.setData("slotFlag", slotFlag);
|
||||
}
|
||||
walksScope(path.parentPath, name, slotFlag);
|
||||
}
|
||||
};
|
||||
var buildIIFE = (path, children) => {
|
||||
const { parentPath } = path;
|
||||
if (parentPath.isAssignmentExpression()) {
|
||||
const { left } = parentPath.node;
|
||||
if (t.isIdentifier(left)) {
|
||||
return children.map((child) => {
|
||||
if (t.isIdentifier(child) && child.name === left.name) {
|
||||
const insertName = path.scope.generateUidIdentifier(child.name);
|
||||
parentPath.insertBefore(
|
||||
t.variableDeclaration("const", [
|
||||
t.variableDeclarator(
|
||||
insertName,
|
||||
t.callExpression(
|
||||
t.functionExpression(
|
||||
null,
|
||||
[],
|
||||
t.blockStatement([t.returnStatement(child)])
|
||||
),
|
||||
[]
|
||||
)
|
||||
)
|
||||
])
|
||||
);
|
||||
return insertName;
|
||||
}
|
||||
return child;
|
||||
});
|
||||
}
|
||||
}
|
||||
return children;
|
||||
};
|
||||
var onRE = /^on[^a-z]/;
|
||||
var isOn = (key) => onRE.test(key);
|
||||
var mergeAsArray = (existing, incoming) => {
|
||||
if (t.isArrayExpression(existing.value)) {
|
||||
existing.value.elements.push(incoming.value);
|
||||
} else {
|
||||
existing.value = t.arrayExpression([
|
||||
existing.value,
|
||||
incoming.value
|
||||
]);
|
||||
}
|
||||
};
|
||||
var dedupeProperties = (properties = [], mergeProps) => {
|
||||
if (!mergeProps) {
|
||||
return properties;
|
||||
}
|
||||
const knownProps = /* @__PURE__ */ new Map();
|
||||
const deduped = [];
|
||||
properties.forEach((prop) => {
|
||||
if (t.isStringLiteral(prop.key)) {
|
||||
const { value: name } = prop.key;
|
||||
const existing = knownProps.get(name);
|
||||
if (existing) {
|
||||
if (name === "style" || name === "class" || name.startsWith("on")) {
|
||||
mergeAsArray(existing, prop);
|
||||
}
|
||||
} else {
|
||||
knownProps.set(name, prop);
|
||||
deduped.push(prop);
|
||||
}
|
||||
} else {
|
||||
deduped.push(prop);
|
||||
}
|
||||
});
|
||||
return deduped;
|
||||
};
|
||||
var isConstant = (node) => {
|
||||
if (t.isIdentifier(node)) {
|
||||
return node.name === "undefined";
|
||||
}
|
||||
if (t.isArrayExpression(node)) {
|
||||
const { elements } = node;
|
||||
return elements.every((element) => element && isConstant(element));
|
||||
}
|
||||
if (t.isObjectExpression(node)) {
|
||||
return node.properties.every(
|
||||
(property) => isConstant(property.value)
|
||||
);
|
||||
}
|
||||
if (t.isLiteral(node)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
var transformJSXSpreadAttribute = (nodePath, path, mergeProps, args) => {
|
||||
const argument = path.get("argument");
|
||||
const properties = t.isObjectExpression(argument.node) ? argument.node.properties : void 0;
|
||||
if (!properties) {
|
||||
if (argument.isIdentifier()) {
|
||||
walksScope(
|
||||
nodePath,
|
||||
argument.node.name,
|
||||
slotFlags_default.DYNAMIC
|
||||
);
|
||||
}
|
||||
args.push(mergeProps ? argument.node : t.spreadElement(argument.node));
|
||||
} else if (mergeProps) {
|
||||
args.push(t.objectExpression(properties));
|
||||
} else {
|
||||
args.push(...properties);
|
||||
}
|
||||
};
|
||||
|
||||
// src/parseDirectives.ts
|
||||
import * as t2 from "@babel/types";
|
||||
var getType = (path) => {
|
||||
const typePath = path.get("attributes").find((attribute) => {
|
||||
if (!attribute.isJSXAttribute()) {
|
||||
return false;
|
||||
}
|
||||
return attribute.get("name").isJSXIdentifier() && attribute.get("name").node.name === "type";
|
||||
});
|
||||
return typePath ? typePath.get("value").node : null;
|
||||
};
|
||||
var parseModifiers = (value) => t2.isArrayExpression(value) ? value.elements.map((el) => t2.isStringLiteral(el) ? el.value : "").filter(Boolean) : [];
|
||||
var parseDirectives = (params) => {
|
||||
var _a, _b;
|
||||
const { path, value, state, tag, isComponent } = params;
|
||||
const args = [];
|
||||
const vals = [];
|
||||
const modifiersSet = [];
|
||||
let directiveName;
|
||||
let directiveArgument;
|
||||
let directiveModifiers;
|
||||
if ("namespace" in path.node.name) {
|
||||
[directiveName, directiveArgument] = params.name.split(":");
|
||||
directiveName = path.node.name.namespace.name;
|
||||
directiveArgument = path.node.name.name.name;
|
||||
directiveModifiers = directiveArgument.split("_").slice(1);
|
||||
} else {
|
||||
const underscoreModifiers = params.name.split("_");
|
||||
directiveName = underscoreModifiers.shift() || "";
|
||||
directiveModifiers = underscoreModifiers;
|
||||
}
|
||||
directiveName = directiveName.replace(/^v/, "").replace(/^-/, "").replace(/^\S/, (s) => s.toLowerCase());
|
||||
if (directiveArgument) {
|
||||
args.push(t2.stringLiteral(directiveArgument));
|
||||
}
|
||||
const isVModels = directiveName === "models";
|
||||
const isVModel = directiveName === "model";
|
||||
if (isVModel && !path.get("value").isJSXExpressionContainer()) {
|
||||
throw new Error("You have to use JSX Expression inside your v-model");
|
||||
}
|
||||
if (isVModels && !isComponent) {
|
||||
throw new Error("v-models can only use in custom components");
|
||||
}
|
||||
const shouldResolve = !["html", "text", "model", "models"].includes(directiveName) || isVModel && !isComponent;
|
||||
let modifiers = directiveModifiers;
|
||||
if (t2.isArrayExpression(value)) {
|
||||
const elementsList = isVModels ? value.elements : [value];
|
||||
elementsList.forEach((element) => {
|
||||
if (isVModels && !t2.isArrayExpression(element)) {
|
||||
throw new Error("You should pass a Two-dimensional Arrays to v-models");
|
||||
}
|
||||
const { elements } = element;
|
||||
const [first, second, third] = elements;
|
||||
if (second && !t2.isArrayExpression(second) && !t2.isSpreadElement(second)) {
|
||||
args.push(second);
|
||||
modifiers = parseModifiers(third);
|
||||
} else if (t2.isArrayExpression(second)) {
|
||||
if (!shouldResolve) {
|
||||
args.push(t2.nullLiteral());
|
||||
}
|
||||
modifiers = parseModifiers(second);
|
||||
} else if (!shouldResolve) {
|
||||
args.push(t2.nullLiteral());
|
||||
}
|
||||
modifiersSet.push(new Set(modifiers));
|
||||
vals.push(first);
|
||||
});
|
||||
} else if (isVModel && !shouldResolve) {
|
||||
args.push(t2.nullLiteral());
|
||||
modifiersSet.push(new Set(directiveModifiers));
|
||||
} else {
|
||||
modifiersSet.push(new Set(directiveModifiers));
|
||||
}
|
||||
return {
|
||||
directiveName,
|
||||
modifiers: modifiersSet,
|
||||
values: vals.length ? vals : [value],
|
||||
args,
|
||||
directive: shouldResolve ? [
|
||||
resolveDirective(path, state, tag, directiveName),
|
||||
vals[0] || value,
|
||||
((_a = modifiersSet[0]) == null ? void 0 : _a.size) ? args[0] || t2.unaryExpression("void", t2.numericLiteral(0), true) : args[0],
|
||||
!!((_b = modifiersSet[0]) == null ? void 0 : _b.size) && t2.objectExpression(
|
||||
[...modifiersSet[0]].map(
|
||||
(modifier) => t2.objectProperty(t2.identifier(modifier), t2.booleanLiteral(true))
|
||||
)
|
||||
)
|
||||
].filter(Boolean) : void 0
|
||||
};
|
||||
};
|
||||
var resolveDirective = (path, state, tag, directiveName) => {
|
||||
if (directiveName === "show") {
|
||||
return createIdentifier(state, "vShow");
|
||||
}
|
||||
if (directiveName === "model") {
|
||||
let modelToUse;
|
||||
const type = getType(path.parentPath);
|
||||
switch (tag.value) {
|
||||
case "select":
|
||||
modelToUse = createIdentifier(state, "vModelSelect");
|
||||
break;
|
||||
case "textarea":
|
||||
modelToUse = createIdentifier(state, "vModelText");
|
||||
break;
|
||||
default:
|
||||
if (t2.isStringLiteral(type) || !type) {
|
||||
switch (type == null ? void 0 : type.value) {
|
||||
case "checkbox":
|
||||
modelToUse = createIdentifier(state, "vModelCheckbox");
|
||||
break;
|
||||
case "radio":
|
||||
modelToUse = createIdentifier(state, "vModelRadio");
|
||||
break;
|
||||
default:
|
||||
modelToUse = createIdentifier(state, "vModelText");
|
||||
}
|
||||
} else {
|
||||
modelToUse = createIdentifier(state, "vModelDynamic");
|
||||
}
|
||||
}
|
||||
return modelToUse;
|
||||
}
|
||||
return t2.callExpression(createIdentifier(state, "resolveDirective"), [
|
||||
t2.stringLiteral(directiveName)
|
||||
]);
|
||||
};
|
||||
var parseDirectives_default = parseDirectives;
|
||||
|
||||
// src/transform-vue-jsx.ts
|
||||
var xlinkRE = /^xlink([A-Z])/;
|
||||
var getJSXAttributeValue = (path, state) => {
|
||||
const valuePath = path.get("value");
|
||||
if (valuePath.isJSXElement()) {
|
||||
return transformJSXElement(valuePath, state);
|
||||
}
|
||||
if (valuePath.isStringLiteral()) {
|
||||
return t3.stringLiteral(transformText(valuePath.node.value));
|
||||
}
|
||||
if (valuePath.isJSXExpressionContainer()) {
|
||||
return transformJSXExpressionContainer(valuePath);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
var buildProps = (path, state) => {
|
||||
const tag = getTag(path, state);
|
||||
const isComponent = checkIsComponent(path.get("openingElement"), state);
|
||||
const props = path.get("openingElement").get("attributes");
|
||||
const directives = [];
|
||||
const dynamicPropNames = /* @__PURE__ */ new Set();
|
||||
let slots = null;
|
||||
let patchFlag = 0;
|
||||
if (props.length === 0) {
|
||||
return {
|
||||
tag,
|
||||
isComponent,
|
||||
slots,
|
||||
props: t3.nullLiteral(),
|
||||
directives,
|
||||
patchFlag,
|
||||
dynamicPropNames
|
||||
};
|
||||
}
|
||||
let properties = [];
|
||||
let hasRef = false;
|
||||
let hasClassBinding = false;
|
||||
let hasStyleBinding = false;
|
||||
let hasHydrationEventBinding = false;
|
||||
let hasDynamicKeys = false;
|
||||
const mergeArgs = [];
|
||||
const { mergeProps = true } = state.opts;
|
||||
props.forEach((prop) => {
|
||||
if (prop.isJSXAttribute()) {
|
||||
let name = getJSXAttributeName(prop);
|
||||
const attributeValue = getJSXAttributeValue(prop, state);
|
||||
if (!isConstant(attributeValue) || name === "ref") {
|
||||
if (!isComponent && isOn(name) && // omit the flag for click handlers becaues hydration gives click
|
||||
// dedicated fast path.
|
||||
name.toLowerCase() !== "onclick" && // omit v-model handlers
|
||||
name !== "onUpdate:modelValue") {
|
||||
hasHydrationEventBinding = true;
|
||||
}
|
||||
if (name === "ref") {
|
||||
hasRef = true;
|
||||
} else if (name === "class" && !isComponent) {
|
||||
hasClassBinding = true;
|
||||
} else if (name === "style" && !isComponent) {
|
||||
hasStyleBinding = true;
|
||||
} else if (name !== "key" && !isDirective(name) && name !== "on") {
|
||||
dynamicPropNames.add(name);
|
||||
}
|
||||
}
|
||||
if (state.opts.transformOn && (name === "on" || name === "nativeOn")) {
|
||||
if (!state.get("transformOn")) {
|
||||
state.set(
|
||||
"transformOn",
|
||||
addDefault(path, "@vue/babel-helper-vue-transform-on", {
|
||||
nameHint: "_transformOn"
|
||||
})
|
||||
);
|
||||
}
|
||||
mergeArgs.push(
|
||||
t3.callExpression(state.get("transformOn"), [
|
||||
attributeValue || t3.booleanLiteral(true)
|
||||
])
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (isDirective(name)) {
|
||||
const { directive, modifiers, values, args, directiveName } = parseDirectives_default({
|
||||
tag,
|
||||
isComponent,
|
||||
name,
|
||||
path: prop,
|
||||
state,
|
||||
value: attributeValue
|
||||
});
|
||||
if (directiveName === "slots") {
|
||||
slots = attributeValue;
|
||||
return;
|
||||
}
|
||||
if (directive) {
|
||||
directives.push(t3.arrayExpression(directive));
|
||||
} else if (directiveName === "html") {
|
||||
properties.push(
|
||||
t3.objectProperty(t3.stringLiteral("innerHTML"), values[0])
|
||||
);
|
||||
dynamicPropNames.add("innerHTML");
|
||||
} else if (directiveName === "text") {
|
||||
properties.push(
|
||||
t3.objectProperty(t3.stringLiteral("textContent"), values[0])
|
||||
);
|
||||
dynamicPropNames.add("textContent");
|
||||
}
|
||||
if (["models", "model"].includes(directiveName)) {
|
||||
values.forEach((value, index) => {
|
||||
var _a;
|
||||
const propName = args[index];
|
||||
const isDynamic = propName && !t3.isStringLiteral(propName) && !t3.isNullLiteral(propName);
|
||||
if (!directive) {
|
||||
properties.push(
|
||||
t3.objectProperty(
|
||||
t3.isNullLiteral(propName) ? t3.stringLiteral("modelValue") : propName,
|
||||
value,
|
||||
isDynamic
|
||||
)
|
||||
);
|
||||
if (!isDynamic) {
|
||||
dynamicPropNames.add(
|
||||
(propName == null ? void 0 : propName.value) || "modelValue"
|
||||
);
|
||||
}
|
||||
if ((_a = modifiers[index]) == null ? void 0 : _a.size) {
|
||||
properties.push(
|
||||
t3.objectProperty(
|
||||
isDynamic ? t3.binaryExpression(
|
||||
"+",
|
||||
propName,
|
||||
t3.stringLiteral("Modifiers")
|
||||
) : t3.stringLiteral(
|
||||
`${(propName == null ? void 0 : propName.value) || "model"}Modifiers`
|
||||
),
|
||||
t3.objectExpression(
|
||||
[...modifiers[index]].map(
|
||||
(modifier) => t3.objectProperty(
|
||||
t3.stringLiteral(modifier),
|
||||
t3.booleanLiteral(true)
|
||||
)
|
||||
)
|
||||
),
|
||||
isDynamic
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
const updateName = isDynamic ? t3.binaryExpression("+", t3.stringLiteral("onUpdate"), propName) : t3.stringLiteral(
|
||||
`onUpdate:${(propName == null ? void 0 : propName.value) || "modelValue"}`
|
||||
);
|
||||
properties.push(
|
||||
t3.objectProperty(
|
||||
updateName,
|
||||
t3.arrowFunctionExpression(
|
||||
[t3.identifier("$event")],
|
||||
t3.assignmentExpression(
|
||||
"=",
|
||||
value,
|
||||
t3.identifier("$event")
|
||||
)
|
||||
),
|
||||
isDynamic
|
||||
)
|
||||
);
|
||||
if (!isDynamic) {
|
||||
dynamicPropNames.add(updateName.value);
|
||||
} else {
|
||||
hasDynamicKeys = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (name.match(xlinkRE)) {
|
||||
name = name.replace(
|
||||
xlinkRE,
|
||||
(_, firstCharacter) => `xlink:${firstCharacter.toLowerCase()}`
|
||||
);
|
||||
}
|
||||
properties.push(
|
||||
t3.objectProperty(
|
||||
t3.stringLiteral(name),
|
||||
attributeValue || t3.booleanLiteral(true)
|
||||
)
|
||||
);
|
||||
}
|
||||
} else {
|
||||
if (properties.length && mergeProps) {
|
||||
mergeArgs.push(
|
||||
t3.objectExpression(dedupeProperties(properties, mergeProps))
|
||||
);
|
||||
properties = [];
|
||||
}
|
||||
hasDynamicKeys = true;
|
||||
transformJSXSpreadAttribute(
|
||||
path,
|
||||
prop,
|
||||
mergeProps,
|
||||
mergeProps ? mergeArgs : properties
|
||||
);
|
||||
}
|
||||
});
|
||||
if (hasDynamicKeys) {
|
||||
patchFlag |= 16 /* FULL_PROPS */;
|
||||
} else {
|
||||
if (hasClassBinding) {
|
||||
patchFlag |= 2 /* CLASS */;
|
||||
}
|
||||
if (hasStyleBinding) {
|
||||
patchFlag |= 4 /* STYLE */;
|
||||
}
|
||||
if (dynamicPropNames.size) {
|
||||
patchFlag |= 8 /* PROPS */;
|
||||
}
|
||||
if (hasHydrationEventBinding) {
|
||||
patchFlag |= 32 /* HYDRATE_EVENTS */;
|
||||
}
|
||||
}
|
||||
if ((patchFlag === 0 || patchFlag === 32 /* HYDRATE_EVENTS */) && (hasRef || directives.length > 0)) {
|
||||
patchFlag |= 512 /* NEED_PATCH */;
|
||||
}
|
||||
let propsExpression = t3.nullLiteral();
|
||||
if (mergeArgs.length) {
|
||||
if (properties.length) {
|
||||
mergeArgs.push(
|
||||
t3.objectExpression(dedupeProperties(properties, mergeProps))
|
||||
);
|
||||
}
|
||||
if (mergeArgs.length > 1) {
|
||||
propsExpression = t3.callExpression(
|
||||
createIdentifier(state, "mergeProps"),
|
||||
mergeArgs
|
||||
);
|
||||
} else {
|
||||
propsExpression = mergeArgs[0];
|
||||
}
|
||||
} else if (properties.length) {
|
||||
if (properties.length === 1 && t3.isSpreadElement(properties[0])) {
|
||||
propsExpression = properties[0].argument;
|
||||
} else {
|
||||
propsExpression = t3.objectExpression(
|
||||
dedupeProperties(properties, mergeProps)
|
||||
);
|
||||
}
|
||||
}
|
||||
return {
|
||||
tag,
|
||||
props: propsExpression,
|
||||
isComponent,
|
||||
slots,
|
||||
directives,
|
||||
patchFlag,
|
||||
dynamicPropNames
|
||||
};
|
||||
};
|
||||
var getChildren = (paths, state) => paths.map((path) => {
|
||||
if (path.isJSXText()) {
|
||||
const transformedText = transformJSXText(path);
|
||||
if (transformedText) {
|
||||
return t3.callExpression(createIdentifier(state, "createTextVNode"), [
|
||||
transformedText
|
||||
]);
|
||||
}
|
||||
return transformedText;
|
||||
}
|
||||
if (path.isJSXExpressionContainer()) {
|
||||
const expression = transformJSXExpressionContainer(path);
|
||||
if (t3.isIdentifier(expression)) {
|
||||
const { name } = expression;
|
||||
const { referencePaths = [] } = path.scope.getBinding(name) || {};
|
||||
referencePaths.forEach((referencePath) => {
|
||||
walksScope(referencePath, name, slotFlags_default.DYNAMIC);
|
||||
});
|
||||
}
|
||||
return expression;
|
||||
}
|
||||
if (path.isJSXSpreadChild()) {
|
||||
return transformJSXSpreadChild(path);
|
||||
}
|
||||
if (path.isCallExpression()) {
|
||||
return path.node;
|
||||
}
|
||||
if (path.isJSXElement()) {
|
||||
return transformJSXElement(path, state);
|
||||
}
|
||||
throw new Error(`getChildren: ${path.type} is not supported`);
|
||||
}).filter(
|
||||
(value) => value != null && !t3.isJSXEmptyExpression(value)
|
||||
);
|
||||
var transformJSXElement = (path, state) => {
|
||||
const children = getChildren(path.get("children"), state);
|
||||
const {
|
||||
tag,
|
||||
props,
|
||||
isComponent,
|
||||
directives,
|
||||
patchFlag,
|
||||
dynamicPropNames,
|
||||
slots
|
||||
} = buildProps(path, state);
|
||||
const { optimize = false } = state.opts;
|
||||
const slotFlag = path.getData("slotFlag") || slotFlags_default.STABLE;
|
||||
let VNodeChild;
|
||||
if (children.length > 1 || slots) {
|
||||
VNodeChild = isComponent ? children.length ? t3.objectExpression(
|
||||
[
|
||||
!!children.length && t3.objectProperty(
|
||||
t3.identifier("default"),
|
||||
t3.arrowFunctionExpression(
|
||||
[],
|
||||
t3.arrayExpression(buildIIFE(path, children))
|
||||
)
|
||||
),
|
||||
...slots ? t3.isObjectExpression(slots) ? slots.properties : [t3.spreadElement(slots)] : [],
|
||||
optimize && t3.objectProperty(t3.identifier("_"), t3.numericLiteral(slotFlag))
|
||||
].filter(Boolean)
|
||||
) : slots : t3.arrayExpression(children);
|
||||
} else if (children.length === 1) {
|
||||
const { enableObjectSlots = true } = state.opts;
|
||||
const child = children[0];
|
||||
const objectExpression4 = t3.objectExpression(
|
||||
[
|
||||
t3.objectProperty(
|
||||
t3.identifier("default"),
|
||||
t3.arrowFunctionExpression(
|
||||
[],
|
||||
t3.arrayExpression(buildIIFE(path, [child]))
|
||||
)
|
||||
),
|
||||
optimize && t3.objectProperty(
|
||||
t3.identifier("_"),
|
||||
t3.numericLiteral(slotFlag)
|
||||
)
|
||||
].filter(Boolean)
|
||||
);
|
||||
if (t3.isIdentifier(child) && isComponent) {
|
||||
VNodeChild = enableObjectSlots ? t3.conditionalExpression(
|
||||
t3.callExpression(
|
||||
state.get("@vue/babel-plugin-jsx/runtimeIsSlot")(),
|
||||
[child]
|
||||
),
|
||||
child,
|
||||
objectExpression4
|
||||
) : objectExpression4;
|
||||
} else if (t3.isCallExpression(child) && child.loc && isComponent) {
|
||||
if (enableObjectSlots) {
|
||||
const { scope } = path;
|
||||
const slotId = scope.generateUidIdentifier("slot");
|
||||
if (scope) {
|
||||
scope.push({
|
||||
id: slotId,
|
||||
kind: "let"
|
||||
});
|
||||
}
|
||||
const alternate = t3.objectExpression(
|
||||
[
|
||||
t3.objectProperty(
|
||||
t3.identifier("default"),
|
||||
t3.arrowFunctionExpression(
|
||||
[],
|
||||
t3.arrayExpression(buildIIFE(path, [slotId]))
|
||||
)
|
||||
),
|
||||
optimize && t3.objectProperty(
|
||||
t3.identifier("_"),
|
||||
t3.numericLiteral(slotFlag)
|
||||
)
|
||||
].filter(Boolean)
|
||||
);
|
||||
const assignment = t3.assignmentExpression("=", slotId, child);
|
||||
const condition = t3.callExpression(
|
||||
state.get("@vue/babel-plugin-jsx/runtimeIsSlot")(),
|
||||
[assignment]
|
||||
);
|
||||
VNodeChild = t3.conditionalExpression(condition, slotId, alternate);
|
||||
} else {
|
||||
VNodeChild = objectExpression4;
|
||||
}
|
||||
} else if (t3.isFunctionExpression(child) || t3.isArrowFunctionExpression(child)) {
|
||||
VNodeChild = t3.objectExpression([
|
||||
t3.objectProperty(t3.identifier("default"), child)
|
||||
]);
|
||||
} else if (t3.isObjectExpression(child)) {
|
||||
VNodeChild = t3.objectExpression(
|
||||
[
|
||||
...child.properties,
|
||||
optimize && t3.objectProperty(t3.identifier("_"), t3.numericLiteral(slotFlag))
|
||||
].filter(Boolean)
|
||||
);
|
||||
} else {
|
||||
VNodeChild = isComponent ? t3.objectExpression([
|
||||
t3.objectProperty(
|
||||
t3.identifier("default"),
|
||||
t3.arrowFunctionExpression([], t3.arrayExpression([child]))
|
||||
)
|
||||
]) : t3.arrayExpression([child]);
|
||||
}
|
||||
}
|
||||
const createVNode = t3.callExpression(
|
||||
createIdentifier(state, "createVNode"),
|
||||
[
|
||||
tag,
|
||||
props,
|
||||
VNodeChild || t3.nullLiteral(),
|
||||
!!patchFlag && optimize && t3.numericLiteral(patchFlag),
|
||||
!!dynamicPropNames.size && optimize && t3.arrayExpression(
|
||||
[...dynamicPropNames.keys()].map((name) => t3.stringLiteral(name))
|
||||
)
|
||||
].filter(Boolean)
|
||||
);
|
||||
if (!directives.length) {
|
||||
return createVNode;
|
||||
}
|
||||
return t3.callExpression(createIdentifier(state, "withDirectives"), [
|
||||
createVNode,
|
||||
t3.arrayExpression(directives)
|
||||
]);
|
||||
};
|
||||
var transform_vue_jsx_default = {
|
||||
JSXElement: {
|
||||
exit(path, state) {
|
||||
path.replaceWith(transformJSXElement(path, state));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// src/sugar-fragment.ts
|
||||
import * as t4 from "@babel/types";
|
||||
var transformFragment = (path, Fragment) => {
|
||||
const children = path.get("children") || [];
|
||||
return t4.jsxElement(
|
||||
t4.jsxOpeningElement(Fragment, []),
|
||||
t4.jsxClosingElement(Fragment),
|
||||
children.map(({ node }) => node),
|
||||
false
|
||||
);
|
||||
};
|
||||
var sugar_fragment_default = {
|
||||
JSXFragment: {
|
||||
enter(path, state) {
|
||||
const fragmentCallee = createIdentifier(state, FRAGMENT);
|
||||
path.replaceWith(
|
||||
transformFragment(
|
||||
path,
|
||||
t4.isIdentifier(fragmentCallee) ? t4.jsxIdentifier(fragmentCallee.name) : t4.jsxMemberExpression(
|
||||
t4.jsxIdentifier(fragmentCallee.object.name),
|
||||
t4.jsxIdentifier(fragmentCallee.property.name)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// src/index.ts
|
||||
var hasJSX = (parentPath) => {
|
||||
let fileHasJSX = false;
|
||||
parentPath.traverse({
|
||||
JSXElement(path) {
|
||||
fileHasJSX = true;
|
||||
path.stop();
|
||||
},
|
||||
JSXFragment(path) {
|
||||
fileHasJSX = true;
|
||||
path.stop();
|
||||
}
|
||||
});
|
||||
return fileHasJSX;
|
||||
};
|
||||
var JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
|
||||
var src_default = ({ types }) => ({
|
||||
name: "babel-plugin-jsx",
|
||||
inherits: syntaxJsx,
|
||||
visitor: __spreadProps(__spreadValues(__spreadValues({}, transform_vue_jsx_default), sugar_fragment_default), {
|
||||
Program: {
|
||||
enter(path, state) {
|
||||
if (hasJSX(path)) {
|
||||
const importNames = [
|
||||
"createVNode",
|
||||
"Fragment",
|
||||
"resolveComponent",
|
||||
"withDirectives",
|
||||
"vShow",
|
||||
"vModelSelect",
|
||||
"vModelText",
|
||||
"vModelCheckbox",
|
||||
"vModelRadio",
|
||||
"vModelText",
|
||||
"vModelDynamic",
|
||||
"resolveDirective",
|
||||
"mergeProps",
|
||||
"createTextVNode",
|
||||
"isVNode"
|
||||
];
|
||||
if (isModule(path)) {
|
||||
const importMap = {};
|
||||
importNames.forEach((name) => {
|
||||
state.set(name, () => {
|
||||
if (importMap[name]) {
|
||||
return types.cloneNode(importMap[name]);
|
||||
}
|
||||
const identifier5 = addNamed(path, name, "vue", {
|
||||
ensureLiveReference: true
|
||||
});
|
||||
importMap[name] = identifier5;
|
||||
return identifier5;
|
||||
});
|
||||
});
|
||||
const { enableObjectSlots = true } = state.opts;
|
||||
if (enableObjectSlots) {
|
||||
state.set("@vue/babel-plugin-jsx/runtimeIsSlot", () => {
|
||||
if (importMap.runtimeIsSlot) {
|
||||
return importMap.runtimeIsSlot;
|
||||
}
|
||||
const { name: isVNodeName } = state.get(
|
||||
"isVNode"
|
||||
)();
|
||||
const isSlot = path.scope.generateUidIdentifier("isSlot");
|
||||
const ast = template.ast`
|
||||
function ${isSlot.name}(s) {
|
||||
return typeof s === 'function' || (Object.prototype.toString.call(s) === '[object Object]' && !${isVNodeName}(s));
|
||||
}
|
||||
`;
|
||||
const lastImport = path.get("body").filter((p) => p.isImportDeclaration()).pop();
|
||||
if (lastImport) {
|
||||
lastImport.insertAfter(ast);
|
||||
}
|
||||
importMap.runtimeIsSlot = isSlot;
|
||||
return isSlot;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
let sourceName;
|
||||
importNames.forEach((name) => {
|
||||
state.set(name, () => {
|
||||
if (!sourceName) {
|
||||
sourceName = addNamespace(path, "vue", {
|
||||
ensureLiveReference: true
|
||||
});
|
||||
}
|
||||
return t5.memberExpression(sourceName, t5.identifier(name));
|
||||
});
|
||||
});
|
||||
const helpers = {};
|
||||
const { enableObjectSlots = true } = state.opts;
|
||||
if (enableObjectSlots) {
|
||||
state.set("@vue/babel-plugin-jsx/runtimeIsSlot", () => {
|
||||
if (helpers.runtimeIsSlot) {
|
||||
return helpers.runtimeIsSlot;
|
||||
}
|
||||
const isSlot = path.scope.generateUidIdentifier("isSlot");
|
||||
const { object: objectName } = state.get(
|
||||
"isVNode"
|
||||
)();
|
||||
const ast = template.ast`
|
||||
function ${isSlot.name}(s) {
|
||||
return typeof s === 'function' || (Object.prototype.toString.call(s) === '[object Object]' && !${objectName.name}.isVNode(s));
|
||||
}
|
||||
`;
|
||||
const nodePaths = path.get("body");
|
||||
const lastImport = nodePaths.filter(
|
||||
(p) => p.isVariableDeclaration() && p.node.declarations.some(
|
||||
(d) => {
|
||||
var _a;
|
||||
return ((_a = d.id) == null ? void 0 : _a.name) === sourceName.name;
|
||||
}
|
||||
)
|
||||
).pop();
|
||||
if (lastImport) {
|
||||
lastImport.insertAfter(ast);
|
||||
}
|
||||
return isSlot;
|
||||
});
|
||||
}
|
||||
}
|
||||
const {
|
||||
opts: { pragma = "" },
|
||||
file
|
||||
} = state;
|
||||
if (pragma) {
|
||||
state.set("createVNode", () => t5.identifier(pragma));
|
||||
}
|
||||
if (file.ast.comments) {
|
||||
for (const comment of file.ast.comments) {
|
||||
const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value);
|
||||
if (jsxMatches) {
|
||||
state.set("createVNode", () => t5.identifier(jsxMatches[1]));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
exit(path) {
|
||||
const body = path.get("body");
|
||||
const specifiersMap = /* @__PURE__ */ new Map();
|
||||
body.filter(
|
||||
(nodePath) => t5.isImportDeclaration(nodePath.node) && nodePath.node.source.value === "vue"
|
||||
).forEach((nodePath) => {
|
||||
const { specifiers: specifiers2 } = nodePath.node;
|
||||
let shouldRemove = false;
|
||||
specifiers2.forEach((specifier) => {
|
||||
if (!specifier.loc && t5.isImportSpecifier(specifier) && t5.isIdentifier(specifier.imported)) {
|
||||
specifiersMap.set(specifier.imported.name, specifier);
|
||||
shouldRemove = true;
|
||||
}
|
||||
});
|
||||
if (shouldRemove) {
|
||||
nodePath.remove();
|
||||
}
|
||||
});
|
||||
const specifiers = [...specifiersMap.keys()].map(
|
||||
(imported) => specifiersMap.get(imported)
|
||||
);
|
||||
if (specifiers.length) {
|
||||
path.unshiftContainer(
|
||||
"body",
|
||||
t5.importDeclaration(specifiers, t5.stringLiteral("vue"))
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
export {
|
||||
src_default as default
|
||||
};
|
79
node_modules/@vue/babel-plugin-jsx/package.json
generated
vendored
Normal file
79
node_modules/@vue/babel-plugin-jsx/package.json
generated
vendored
Normal file
@ -0,0 +1,79 @@
|
||||
{
|
||||
"_from": "@vue/babel-plugin-jsx@^1.0.3",
|
||||
"_id": "@vue/babel-plugin-jsx@1.1.5",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==",
|
||||
"_location": "/@vue/babel-plugin-jsx",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "range",
|
||||
"registry": true,
|
||||
"raw": "@vue/babel-plugin-jsx@^1.0.3",
|
||||
"name": "@vue/babel-plugin-jsx",
|
||||
"escapedName": "@vue%2fbabel-plugin-jsx",
|
||||
"scope": "@vue",
|
||||
"rawSpec": "^1.0.3",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "^1.0.3"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/@vue/babel-preset-app"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.5.tgz",
|
||||
"_shasum": "5088bae7dbb83531d94df3742ff650c12fd54973",
|
||||
"_spec": "@vue/babel-plugin-jsx@^1.0.3",
|
||||
"_where": "C:\\Users\\zhouxueli\\Desktop\\scheduling-app\\node_modules\\@vue\\babel-preset-app",
|
||||
"author": {
|
||||
"name": "Amour1688",
|
||||
"email": "lcz_1996@foxmail.com"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/vuejs/babel-plugin-jsx/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {
|
||||
"@babel/helper-module-imports": "^7.22.5",
|
||||
"@babel/plugin-syntax-jsx": "^7.22.5",
|
||||
"@babel/template": "^7.22.5",
|
||||
"@babel/traverse": "^7.22.5",
|
||||
"@babel/types": "^7.22.5",
|
||||
"@vue/babel-helper-vue-transform-on": "^1.1.5",
|
||||
"camelcase": "^6.3.0",
|
||||
"html-tags": "^3.3.1",
|
||||
"svg-tags": "^1.0.0"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "Babel plugin for Vue 3 JSX",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.22.5",
|
||||
"@babel/preset-env": "^7.22.5",
|
||||
"@types/babel__template": "^7.4.1",
|
||||
"@types/babel__traverse": "^7.20.1",
|
||||
"@types/svg-tags": "^1.0.0",
|
||||
"@vue/runtime-dom": "^3.3.4",
|
||||
"@vue/test-utils": "^2.4.0",
|
||||
"regenerator-runtime": "^0.13.11",
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"homepage": "https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-jsx#readme",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"name": "@vue/babel-plugin-jsx",
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0-0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vuejs/babel-plugin-jsx.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup",
|
||||
"watch": "tsup --watch"
|
||||
},
|
||||
"types": "dist/index.d.ts",
|
||||
"version": "1.1.5"
|
||||
}
|
Reference in New Issue
Block a user