diff --git a/.eslintrc.js b/.eslintrc.js index b927e2f1..c2e3591b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -32,6 +32,7 @@ module.exports = { '@typescript-eslint/explicit-module-boundary-types': [0], '@typescript-eslint/no-explicit-any': [0], '@typescript-eslint/no-non-null-assertion': [0], + 'max-len': [0], }, settings: { 'import/resolver': { diff --git a/packages/babel-plugin-jsx/src/index.ts b/packages/babel-plugin-jsx/src/index.ts index 3a20696a..9b026337 100644 --- a/packages/babel-plugin-jsx/src/index.ts +++ b/packages/babel-plugin-jsx/src/index.ts @@ -28,7 +28,7 @@ export interface VueJSXPluginOptions { export type ExcludesBoolean = (x: T | false | true) => x is T; -const hasJSX = (parentPath: NodePath) => { +const hasJSX = (parentPath: NodePath) => { let fileHasJSX = false; parentPath.traverse({ JSXElement(path) { // skip ts error @@ -51,7 +51,7 @@ export default ({ types }: typeof BabelCore) => ({ ...tranformVueJSX, ...sugarFragment, Program: { - enter(path: NodePath, state: State) { + enter(path: NodePath, state: State) { if (hasJSX(path)) { const importNames = [ 'createVNode', @@ -131,6 +131,33 @@ export default ({ types }: typeof BabelCore) => ({ } } }, + exit(path: NodePath) { + const body = path.get('body') as NodePath[]; + const specifiersMap = new Map(); + + body.filter((nodePath) => t.isImportDeclaration(nodePath.node) + && nodePath.node.source.value === 'vue') + .forEach((nodePath) => { + const { specifiers } = nodePath.node as t.ImportDeclaration; + let shouldRemove = false; + specifiers.forEach((specifier) => { + if (!specifier.loc && t.isImportSpecifier(specifier) && t.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', t.importDeclaration(specifiers, t.stringLiteral('vue'))); + } + }, }, }, }); diff --git a/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap b/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap index 6c566a2e..f7085665 100644 --- a/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap +++ b/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MereProps Order: MereProps Order 1`] = ` -"import { createVNode as _createVNode } from \\"vue\\"; -import { mergeProps as _mergeProps } from \\"vue\\"; -import { createTextVNode as _createTextVNode } from \\"vue\\"; +"import { createVNode as _createVNode, mergeProps as _mergeProps, createTextVNode as _createTextVNode } from \\"vue\\"; _createVNode(\\"button\\", _mergeProps({ \\"loading\\": true @@ -27,24 +25,19 @@ createVNode('div', null, ['Without JSX should work']);" `; exports[`Without props: Without props 1`] = ` -"import { createVNode as _createVNode } from \\"vue\\"; -import { createTextVNode as _createTextVNode } from \\"vue\\"; +"import { createVNode as _createVNode, createTextVNode as _createTextVNode } from \\"vue\\"; _createVNode(\\"a\\", null, [_createTextVNode(\\"a\\")]);" `; exports[`custom directive: custom directive 1`] = ` -"import { withDirectives as _withDirectives } from \\"vue\\"; -import { createVNode as _createVNode } from \\"vue\\"; -import { resolveDirective as _resolveDirective } from \\"vue\\"; -import { resolveComponent as _resolveComponent } from \\"vue\\"; +"import { withDirectives as _withDirectives, createVNode as _createVNode, resolveDirective as _resolveDirective, resolveComponent as _resolveComponent } from \\"vue\\"; _withDirectives(_createVNode(_resolveComponent(\\"A\\"), null, null, 512), [[_resolveDirective(\\"cus\\"), x]]);" `; exports[`disable object slot syntax with defaultSlot: defaultSlot 1`] = ` -"import { createVNode as _createVNode } from \\"vue\\"; -import { resolveComponent as _resolveComponent } from \\"vue\\"; +"import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\"; _createVNode(_resolveComponent(\\"Badge\\"), null, { default: () => [slots.default()], @@ -53,9 +46,7 @@ _createVNode(_resolveComponent(\\"Badge\\"), null, { `; exports[`dynamic type in input: dynamic type in input 1`] = ` -"import { withDirectives as _withDirectives } from \\"vue\\"; -import { createVNode as _createVNode } from \\"vue\\"; -import { vModelDynamic as _vModelDynamic } from \\"vue\\"; +"import { withDirectives as _withDirectives, createVNode as _createVNode, vModelDynamic as _vModelDynamic } from \\"vue\\"; _withDirectives(_createVNode(\\"input\\", { \\"type\\": type, @@ -64,9 +55,7 @@ _withDirectives(_createVNode(\\"input\\", { `; exports[`input[type="checkbox"]: input[type="checkbox"] 1`] = ` -"import { withDirectives as _withDirectives } from \\"vue\\"; -import { createVNode as _createVNode } from \\"vue\\"; -import { vModelCheckbox as _vModelCheckbox } from \\"vue\\"; +"import { withDirectives as _withDirectives, createVNode as _createVNode, vModelCheckbox as _vModelCheckbox } from \\"vue\\"; _withDirectives(_createVNode(\\"input\\", { \\"type\\": \\"checkbox\\", @@ -75,10 +64,7 @@ _withDirectives(_createVNode(\\"input\\", { `; exports[`input[type="radio"]: input[type="radio"] 1`] = ` -"import { withDirectives as _withDirectives } from \\"vue\\"; -import { createVNode as _createVNode } from \\"vue\\"; -import { vModelRadio as _vModelRadio } from \\"vue\\"; -import { Fragment as _Fragment } from \\"vue\\"; +"import { withDirectives as _withDirectives, createVNode as _createVNode, vModelRadio as _vModelRadio, Fragment as _Fragment } from \\"vue\\"; _createVNode(_Fragment, null, [_withDirectives(_createVNode(\\"input\\", { \\"type\\": \\"radio\\", @@ -94,9 +80,7 @@ _createVNode(_Fragment, null, [_withDirectives(_createVNode(\\"input\\", { `; exports[`input[type="text"] .lazy modifier: input[type="text"] .lazy modifier 1`] = ` -"import { withDirectives as _withDirectives } from \\"vue\\"; -import { createVNode as _createVNode } from \\"vue\\"; -import { vModelText as _vModelText } from \\"vue\\"; +"import { withDirectives as _withDirectives, createVNode as _createVNode, vModelText as _vModelText } from \\"vue\\"; _withDirectives(_createVNode(\\"input\\", { \\"onUpdate:modelValue\\": $event => test = $event @@ -106,9 +90,7 @@ _withDirectives(_createVNode(\\"input\\", { `; exports[`input[type="text"]: input[type="text"] 1`] = ` -"import { withDirectives as _withDirectives } from \\"vue\\"; -import { createVNode as _createVNode } from \\"vue\\"; -import { vModelText as _vModelText } from \\"vue\\"; +"import { withDirectives as _withDirectives, createVNode as _createVNode, vModelText as _vModelText } from \\"vue\\"; _withDirectives(_createVNode(\\"input\\", { \\"onUpdate:modelValue\\": $event => test = $event @@ -116,8 +98,7 @@ _withDirectives(_createVNode(\\"input\\", { `; exports[`override props multiple: multiple 1`] = ` -"import { createVNode as _createVNode } from \\"vue\\"; -import { resolveComponent as _resolveComponent } from \\"vue\\"; +"import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\"; _createVNode(_resolveComponent(\\"A\\"), { \\"loading\\": true, @@ -138,8 +119,7 @@ _createVNode(\\"div\\", a, null);" `; exports[`passing object slots via JSX children multiple expressions: multiple expressions 1`] = ` -"import { createVNode as _createVNode } from \\"vue\\"; -import { resolveComponent as _resolveComponent } from \\"vue\\"; +"import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\"; _createVNode(_resolveComponent(\\"A\\"), null, { default: () => [foo, bar], @@ -148,8 +128,7 @@ _createVNode(_resolveComponent(\\"A\\"), null, { `; exports[`passing object slots via JSX children single expression, function expression: single expression, function expression 1`] = ` -"import { createVNode as _createVNode } from \\"vue\\"; -import { resolveComponent as _resolveComponent } from \\"vue\\"; +"import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\"; _createVNode(_resolveComponent(\\"A\\"), null, { default: () => \\"foo\\" @@ -157,11 +136,9 @@ _createVNode(_resolveComponent(\\"A\\"), null, { `; exports[`passing object slots via JSX children single expression, non-literal value: runtime check: single expression, non-literal value: runtime check 1`] = ` -"import { createVNode as _createVNode } from \\"vue\\"; -import { isVNode as _isVNode } from \\"vue\\"; -import { resolveComponent as _resolveComponent } from \\"vue\\"; +"let _slot; -let _slot; +import { createVNode as _createVNode, isVNode as _isVNode, resolveComponent as _resolveComponent } from \\"vue\\"; function _isSlot(s) { return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s); @@ -176,8 +153,7 @@ _createVNode(_resolveComponent(\\"A\\"), null, _isSlot(_slot = foo()) ? _slot : `; exports[`reassign variable as component: reassign variable as component 1`] = ` -"import { isVNode as _isVNode } from \\"vue\\"; -import { createVNode as _createVNode } from \\"vue\\"; +"import { isVNode as _isVNode, createVNode as _createVNode } from \\"vue\\"; import { defineComponent } from 'vue'; function _isSlot(s) { @@ -207,10 +183,7 @@ a = _createVNode(A, null, _isSlot(a) ? a : { `; exports[`select: select 1`] = ` -"import { withDirectives as _withDirectives } from \\"vue\\"; -import { vModelSelect as _vModelSelect } from \\"vue\\"; -import { createVNode as _createVNode } from \\"vue\\"; -import { createTextVNode as _createTextVNode } from \\"vue\\"; +"import { withDirectives as _withDirectives, vModelSelect as _vModelSelect, createVNode as _createVNode, createTextVNode as _createTextVNode } from \\"vue\\"; _withDirectives(_createVNode(\\"select\\", { \\"onUpdate:modelValue\\": $event => test = $event @@ -224,16 +197,14 @@ _withDirectives(_createVNode(\\"select\\", { `; exports[`should keep \`import * as Vue from "vue"\`: should keep \`import * as Vue from "vue"\` 1`] = ` -"import { createVNode as _createVNode } from \\"vue\\"; -import { createTextVNode as _createTextVNode } from \\"vue\\"; +"import { createVNode as _createVNode, createTextVNode as _createTextVNode } from \\"vue\\"; import * as Vue from 'vue'; _createVNode(\\"div\\", null, [_createTextVNode(\\"Vue\\")]);" `; exports[`single no need for a mergeProps call: single no need for a mergeProps call 1`] = ` -"import { createVNode as _createVNode } from \\"vue\\"; -import { createTextVNode as _createTextVNode } from \\"vue\\"; +"import { createVNode as _createVNode, createTextVNode as _createTextVNode } from \\"vue\\"; _createVNode(\\"div\\", x, [_createTextVNode(\\"single\\")], 16);" `; @@ -247,9 +218,7 @@ _createVNode(_Fragment, null, null);" `; exports[`textarea: textarea 1`] = ` -"import { withDirectives as _withDirectives } from \\"vue\\"; -import { createVNode as _createVNode } from \\"vue\\"; -import { vModelText as _vModelText } from \\"vue\\"; +"import { withDirectives as _withDirectives, createVNode as _createVNode, vModelText as _vModelText } from \\"vue\\"; _withDirectives(_createVNode(\\"textarea\\", { \\"onUpdate:modelValue\\": $event => test = $event @@ -257,8 +226,7 @@ _withDirectives(_createVNode(\\"textarea\\", { `; exports[`use "model" as the prop name: use "model" as the prop name 1`] = ` -"import { createVNode as _createVNode } from \\"vue\\"; -import { resolveComponent as _resolveComponent } from \\"vue\\"; +"import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\"; _createVNode(_resolveComponent(\\"C\\"), { \\"model\\": foo, @@ -267,10 +235,7 @@ _createVNode(_resolveComponent(\\"C\\"), { `; exports[`v-show: v-show 1`] = ` -"import { withDirectives as _withDirectives } from \\"vue\\"; -import { createVNode as _createVNode } from \\"vue\\"; -import { vShow as _vShow } from \\"vue\\"; -import { createTextVNode as _createTextVNode } from \\"vue\\"; +"import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow, createTextVNode as _createTextVNode } from \\"vue\\"; _withDirectives(_createVNode(\\"div\\", null, [_createTextVNode(\\"vShow\\")], 512), [[_vShow, x]]);" `; @@ -284,8 +249,7 @@ _createVNode(\\"h1\\", { `; exports[`vModels: vModels 1`] = ` -"import { createVNode as _createVNode } from \\"vue\\"; -import { resolveComponent as _resolveComponent } from \\"vue\\"; +"import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\"; _createVNode(_resolveComponent(\\"C\\"), { \\"modelValue\\": foo,