chore(deps): update all non-major dependencies (#611)

* chore(deps): update all non-major dependencies

* chore: remove the lockfile and reinstall to update trnasitive deps

The outdated `@types/babel__traverse` package is causing type errors

* fix: fix htmlTags type error

* fix: pin @types/node to 18.8.0 to work around https://github.com/johnsoncodehk/volar/issues/1985

* fix: pin @vue/test-utils temporarily to avoid snapshot differences

* test: update snapshot

As far as I see, all the snapshot differences are merely the newlines
after `import` statements

* test: add `attachTo: document.body` to make click event take effect

See https://github.com/vuejs/test-utils/issues/1470#issuecomment-1114752388

* fix: fix mjs processing for webpack 4

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Haoqun Jiang <haoqunjiang@gmail.com>

.github/workflows/issue-reply.yml

@@ -10,7 +10,7 @@ jobs:
     steps:
       - name: help wanted
         if: github.event.label.name == 'help wanted'
-        uses: actions-cool/issues-helper@v2.1.1
+        uses: actions-cool/issues-helper@v2.5.0
         with:
           actions: 'create-comment'
           issue-number: ${{ github.event.issue.number }}
@@ -19,7 +19,7 @@ jobs:
 
       - name: need reproduction
         if: github.event.label.name == 'need reproduction'
-        uses: actions-cool/issues-helper@v2.1.1
+        uses: actions-cool/issues-helper@v2.5.0
         with:
           actions: 'create-comment'
           issue-number: ${{ github.event.issue.number }}

package.json

@@ -16,10 +16,13 @@
     "jsx"
   ],
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-import": "^2.26.0",
-    "lerna": "^3.19.0"
+    "lerna": "^3.22.1"
+  },
+  "resolutions": {
+    "@types/node": "18.8.0"
   }
 }

packages/babel-plugin-jsx/package.json

@@ -24,29 +24,29 @@
     "dist"
   ],
   "dependencies": {
-    "@babel/helper-module-imports": "^7.0.0",
+    "@babel/helper-module-imports": "^7.18.6",
-    "@babel/plugin-syntax-jsx": "^7.0.0",
+    "@babel/plugin-syntax-jsx": "^7.18.6",
-    "@babel/template": "^7.0.0",
+    "@babel/template": "^7.18.10",
-    "@babel/traverse": "^7.0.0",
+    "@babel/traverse": "^7.19.4",
-    "@babel/types": "^7.0.0",
+    "@babel/types": "^7.19.4",
     "@vue/babel-helper-vue-transform-on": "^1.0.2",
-    "camelcase": "^6.0.0",
+    "camelcase": "^6.3.0",
-    "html-tags": "^3.1.0",
+    "html-tags": "^3.2.0",
     "svg-tags": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.15.4",
+    "@babel/preset-env": "^7.19.4",
     "@types/jest": "^26.0.24",
     "@types/svg-tags": "^1.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.30.0",
+    "@typescript-eslint/parser": "^4.33.0",
-    "@vue/compiler-dom": "3.2.8",
+    "@vue/compiler-dom": "3.2.41",
     "@vue/test-utils": "2.0.0-beta.2",
-    "jest": "^26.0.1",
+    "jest": "^26.6.3",
-    "regenerator-runtime": "^0.13.9",
+    "regenerator-runtime": "^0.13.10",
-    "ts-jest": "^26.1.3",
+    "ts-jest": "^26.5.6",
-    "typescript": "^4.4.2",
+    "typescript": "^4.8.4",
-    "vue": "3.2.26"
+    "vue": "3.2.41"
   }
 }

packages/babel-plugin-jsx/src/utils.ts

@@ -51,7 +51,7 @@ export const checkIsComponent = (path: NodePath<t.JSXOpeningElement>, state: Sta
 
   const tag = (namePath as NodePath<t.JSXIdentifier>).node.name;
 
-  return !state.opts.isCustomElement?.(tag) && shouldTransformedToSlots(tag) && !htmlTags.includes(tag) && !svgTags.includes(tag);
+  return !state.opts.isCustomElement?.(tag) && shouldTransformedToSlots(tag) && !htmlTags.includes(tag as htmlTags.htmlTags) && !svgTags.includes(tag);
 };
 
 /**
@@ -86,7 +86,7 @@ export const getTag = (
   const namePath = path.get('openingElement').get('name');
   if (namePath.isJSXIdentifier()) {
     const { name } = namePath.node;
-    if (!htmlTags.includes(name) && !svgTags.includes(name)) {
+    if (!htmlTags.includes(name as htmlTags.htmlTags) && !svgTags.includes(name)) {
       return (name === FRAGMENT
         ? createIdentifier(state, FRAGMENT)
         : path.scope.hasBinding(name)

packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap

@@ -3,15 +3,12 @@
 exports[`_Fragment already imported: _Fragment already imported 1`] = `
 "import { createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment2 } from \\"vue\\";
 import { Fragment as _Fragment } from 'vue';
-
 const Root1 = () => _createVNode(_Fragment2, null, [_createTextVNode(\\"root1\\")]);
-
 const Root2 = () => _createVNode(_Fragment, null, [_createTextVNode(\\"root2\\")]);"
 `;
 
 exports[`MereProps Order: MereProps Order 1`] = `
 "import { createVNode as _createVNode, mergeProps as _mergeProps, createTextVNode as _createTextVNode } from \\"vue\\";
-
 _createVNode(\\"button\\", _mergeProps({
   \\"loading\\": true
 }, x, {
@@ -21,7 +18,6 @@ _createVNode(\\"button\\", _mergeProps({
 
 exports[`Merge class/ style attributes into array: Merge class/ style attributes into array 1`] = `
 "import { createVNode as _createVNode } from \\"vue\\";
-
 _createVNode(\\"div\\", {
   \\"class\\": [\\"a\\", b],
   \\"style\\": [\\"color: red\\", s]
@@ -35,19 +31,16 @@ createVNode('div', null, ['Without JSX should work']);"
 
 exports[`Without props: Without props 1`] = `
 "import { createVNode as _createVNode, createTextVNode as _createTextVNode } from \\"vue\\";
-
 _createVNode(\\"a\\", null, [_createTextVNode(\\"a\\")]);"
 `;
 
 exports[`custom directive: custom directive 1`] = `
 "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[`custom directive: custom directive 2`] = `
 "import { withDirectives as _withDirectives, createVNode as _createVNode, resolveDirective as _resolveDirective, resolveComponent as _resolveComponent, Fragment as _Fragment } from \\"vue\\";
-
 _createVNode(_Fragment, null, [_withDirectives(_createVNode(_resolveComponent(\\"A\\"), null, null, 512), [[_resolveDirective(\\"xxx\\"), x]]), _withDirectives(_createVNode(_resolveComponent(\\"A\\"), null, null, 512), [[_resolveDirective(\\"xxx\\"), x]]), _withDirectives(_createVNode(_resolveComponent(\\"A\\"), null, null, 512), [[_resolveDirective(\\"xxx\\"), x, 'y']]), _withDirectives(_createVNode(_resolveComponent(\\"A\\"), null, null, 512), [[_resolveDirective(\\"xxx\\"), x, 'y', {
   a: true,
   b: true
@@ -65,7 +58,6 @@ _createVNode(_Fragment, null, [_withDirectives(_createVNode(_resolveComponent(\\
 
 exports[`disable object slot syntax with defaultSlot: defaultSlot 1`] = `
 "import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\";
-
 _createVNode(_resolveComponent(\\"Badge\\"), null, {
   default: () => [slots.default()],
   _: 1
@@ -74,7 +66,6 @@ _createVNode(_resolveComponent(\\"Badge\\"), null, {
 
 exports[`dynamic type in input: dynamic type in input 1`] = `
 "import { withDirectives as _withDirectives, createVNode as _createVNode, vModelDynamic as _vModelDynamic } from \\"vue\\";
-
 _withDirectives(_createVNode(\\"input\\", {
   \\"type\\": type,
   \\"onUpdate:modelValue\\": $event => test = $event
@@ -83,7 +74,6 @@ _withDirectives(_createVNode(\\"input\\", {
 
 exports[`input[type="checkbox"]: input[type="checkbox"] 1`] = `
 "import { withDirectives as _withDirectives, createVNode as _createVNode, vModelCheckbox as _vModelCheckbox } from \\"vue\\";
-
 _withDirectives(_createVNode(\\"input\\", {
   \\"type\\": \\"checkbox\\",
   \\"onUpdate:modelValue\\": $event => test = $event
@@ -92,7 +82,6 @@ _withDirectives(_createVNode(\\"input\\", {
 
 exports[`input[type="radio"]: input[type="radio"] 1`] = `
 "import { withDirectives as _withDirectives, createVNode as _createVNode, vModelRadio as _vModelRadio, Fragment as _Fragment } from \\"vue\\";
-
 _createVNode(_Fragment, null, [_withDirectives(_createVNode(\\"input\\", {
   \\"type\\": \\"radio\\",
   \\"value\\": \\"1\\",
@@ -108,7 +97,6 @@ _createVNode(_Fragment, null, [_withDirectives(_createVNode(\\"input\\", {
 
 exports[`input[type="text"] .lazy modifier: input[type="text"] .lazy modifier 1`] = `
 "import { withDirectives as _withDirectives, createVNode as _createVNode, vModelText as _vModelText } from \\"vue\\";
-
 _withDirectives(_createVNode(\\"input\\", {
   \\"onUpdate:modelValue\\": $event => test = $event
 }, null, 8, [\\"onUpdate:modelValue\\"]), [[_vModelText, test, void 0, {
@@ -118,7 +106,6 @@ _withDirectives(_createVNode(\\"input\\", {
 
 exports[`input[type="text"]: input[type="text"] 1`] = `
 "import { withDirectives as _withDirectives, createVNode as _createVNode, vModelText as _vModelText } from \\"vue\\";
-
 _withDirectives(_createVNode(\\"input\\", {
   \\"onUpdate:modelValue\\": $event => test = $event
 }, null, 8, [\\"onUpdate:modelValue\\"]), [[_vModelText, test]]);"
@@ -126,27 +113,23 @@ _withDirectives(_createVNode(\\"input\\", {
 
 exports[`isCustomElement: isCustomElement 1`] = `
 "import { createVNode as _createVNode, createTextVNode as _createTextVNode } from \\"vue\\";
-
 _createVNode(\\"foo\\", null, [_createVNode(\\"span\\", null, [_createTextVNode(\\"foo\\")])]);"
 `;
 
 exports[`named import specifier \`Keep Alive\`: named import specifier \`Keep Alive\` 1`] = `
 "import { createVNode as _createVNode, createTextVNode as _createTextVNode } from \\"vue\\";
 import { KeepAlive } from 'vue';
-
 _createVNode(KeepAlive, null, [_createTextVNode(\\"123\\")]);"
 `;
 
 exports[`namespace specifier \`Keep Alive\`: namespace specifier \`Keep Alive\` 1`] = `
 "import { createVNode as _createVNode, createTextVNode as _createTextVNode } from \\"vue\\";
 import * as Vue from 'vue';
-
 _createVNode(Vue.KeepAlive, null, [_createTextVNode(\\"123\\")]);"
 `;
 
 exports[`override props multiple: multiple 1`] = `
 "import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\";
-
 _createVNode(_resolveComponent(\\"A\\"), {
   \\"loading\\": true,
   ...a,
@@ -161,13 +144,11 @@ _createVNode(_resolveComponent(\\"A\\"), {
 
 exports[`override props single: single 1`] = `
 "import { createVNode as _createVNode } from \\"vue\\";
-
 _createVNode(\\"div\\", a, null);"
 `;
 
 exports[`passing object slots via JSX children multiple expressions: multiple expressions 1`] = `
 "import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\";
-
 _createVNode(_resolveComponent(\\"A\\"), null, {
   default: () => [foo, bar],
   _: 1
@@ -176,7 +157,6 @@ _createVNode(_resolveComponent(\\"A\\"), null, {
 
 exports[`passing object slots via JSX children single expression, function expression: single expression, function expression 1`] = `
 "import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\";
-
 _createVNode(_resolveComponent(\\"A\\"), null, {
   default: () => \\"foo\\"
 });"
@@ -184,15 +164,11 @@ _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`] = `
 "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);
 }
-
 const foo = () => 1;
-
 _createVNode(_resolveComponent(\\"A\\"), null, _isSlot(_slot = foo()) ? _slot : {
   default: () => [_slot],
   _: 1
@@ -202,11 +178,9 @@ _createVNode(_resolveComponent(\\"A\\"), null, _isSlot(_slot = foo()) ? _slot :
 exports[`reassign variable as component: reassign variable as component 1`] = `
 "import { isVNode as _isVNode, createVNode as _createVNode } from \\"vue\\";
 import { defineComponent } from 'vue';
-
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
-
 let a = 1;
 const A = defineComponent({
   setup(_, {
@@ -214,15 +188,12 @@ const A = defineComponent({
   }) {
     return () => _createVNode(\\"span\\", null, [slots.default()]);
   }
-
 });
 const _a2 = 2;
 a = _a2;
-
 const _a = function () {
   return a;
 }();
-
 a = _createVNode(A, null, _isSlot(a) ? a : {
   default: () => [_a],
   _: 2
@@ -231,7 +202,6 @@ a = _createVNode(A, null, _isSlot(a) ? a : {
 
 exports[`select: select 1`] = `
 "import { withDirectives as _withDirectives, vModelSelect as _vModelSelect, createVNode as _createVNode, createTextVNode as _createTextVNode } from \\"vue\\";
-
 _withDirectives(_createVNode(\\"select\\", {
   \\"onUpdate:modelValue\\": $event => test = $event
 }, [_createVNode(\\"option\\", {
@@ -251,13 +221,11 @@ custom(\\"div\\", null, [_createTextVNode(\\"pragma\\")]);"
 exports[`should keep \`import * as Vue from "vue"\`: should keep \`import * as Vue from "vue"\` 1`] = `
 "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, createTextVNode as _createTextVNode } from \\"vue\\";
-
 _createVNode(\\"div\\", x, [_createTextVNode(\\"single\\")], 16);"
 `;
 
@@ -265,13 +233,11 @@ exports[`specifiers should be merged into a single importDeclaration: specifiers
 "import { createVNode as _createVNode } from \\"vue\\";
 import { createVNode, Fragment as _Fragment } from 'vue';
 import { vShow } from 'vue';
-
 _createVNode(_Fragment, null, null);"
 `;
 
 exports[`textarea: textarea 1`] = `
 "import { withDirectives as _withDirectives, createVNode as _createVNode, vModelText as _vModelText } from \\"vue\\";
-
 _withDirectives(_createVNode(\\"textarea\\", {
   \\"onUpdate:modelValue\\": $event => test = $event
 }, null, 8, [\\"onUpdate:modelValue\\"]), [[_vModelText, test]]);"
@@ -279,7 +245,6 @@ _withDirectives(_createVNode(\\"textarea\\", {
 
 exports[`use "@jsx" comment specify pragma: use "@jsx" comment specify pragma 1`] = `
 "import { createTextVNode as _createTextVNode } from \\"vue\\";
-
 /* @jsx custom */
 custom(\\"div\\", {
   \\"id\\": \\"custom\\"
@@ -288,7 +253,6 @@ custom(\\"div\\", {
 
 exports[`use "model" as the prop name: use "model" as the prop name 1`] = `
 "import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\";
-
 _createVNode(_resolveComponent(\\"C\\"), {
   \\"model\\": foo,
   \\"onUpdate:model\\": $event => foo = $event
@@ -297,20 +261,16 @@ _createVNode(_resolveComponent(\\"C\\"), {
 
 exports[`using v-slots without children should not be spread: using v-slots without children should not be spread 1`] = `
 "import { createVNode as _createVNode, resolveDirective as _resolveDirective, resolveComponent as _resolveComponent } from \\"vue\\";
-
 _createVNode(_resolveComponent(\\"A\\"), null, slots);"
 `;
 
 exports[`v-model target value support variable: v-model target value support variable 1`] = `
 "import { createVNode as _createVNode, resolveComponent as _resolveComponent, Fragment as _Fragment } from \\"vue\\";
 const foo = 'foo';
-
 const a = () => 'a';
-
 const b = {
   c: 'c'
 };
-
 _createVNode(_Fragment, null, [_createVNode(_resolveComponent(\\"A\\"), {
   [foo]: xx,
   [\\"onUpdate\\" + foo]: $event => xx = $event
@@ -349,13 +309,11 @@ _createVNode(_Fragment, null, [_createVNode(_resolveComponent(\\"A\\"), {
 
 exports[`v-show: v-show 1`] = `
 "import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow, createTextVNode as _createTextVNode } from \\"vue\\";
-
 _withDirectives(_createVNode(\\"div\\", null, [_createTextVNode(\\"vShow\\")], 512), [[_vShow, x]]);"
 `;
 
 exports[`vHtml: vHtml 1`] = `
 "import { createVNode as _createVNode } from \\"vue\\";
-
 _createVNode(\\"h1\\", {
   \\"innerHTML\\": \\"<div>foo</div>\\"
 }, null, 8, [\\"innerHTML\\"]);"
@@ -363,7 +321,6 @@ _createVNode(\\"h1\\", {
 
 exports[`vModels: vModels 1`] = `
 "import { createVNode as _createVNode, resolveComponent as _resolveComponent } from \\"vue\\";
-
 _createVNode(_resolveComponent(\\"C\\"), {
   \\"modelValue\\": foo,
   \\"modelModifiers\\": {
@@ -381,7 +338,6 @@ _createVNode(_resolveComponent(\\"C\\"), {
 
 exports[`vText: vText 1`] = `
 "import { createVNode as _createVNode } from \\"vue\\";
-
 _createVNode(\\"div\\", {
   \\"textContent\\": text
 }, null, 8, [\\"textContent\\"]);"

packages/babel-plugin-jsx/test/v-model.test.tsx

@@ -10,8 +10,8 @@ test('input[type="checkbox"] should work', async () => {
     },
     render() {
       return <input type="checkbox" v-model={this.test} />;
-    },
+    }
-  });
+  }, { attachTo: document.body });
 
   expect(wrapper.vm.$el.checked).toBe(true);
   wrapper.vm.test = false;
@@ -36,7 +36,7 @@ test('input[type="radio"] should work', async () => {
         </>
       );
     },
-  });
+  }, { attachTo: document.body });
 
   const [a, b] = wrapper.vm.$.subTree.children as VNode[];
 

packages/jsx-explorer/package.json

@@ -3,17 +3,17 @@
   "version": "1.1.0",
   "private": true,
   "dependencies": {
-    "monaco-editor": "^0.27.0"
+    "monaco-editor": "^0.34.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.19.3",
-    "css-loader": "^3.5.3",
+    "css-loader": "^3.6.0",
     "html-webpack-plugin": "^4.5.2",
-    "style-loader": "^1.2.1",
+    "style-loader": "^1.3.0",
-    "ts-loader": "^8.3.0",
+    "ts-loader": "^8.4.0",
-    "typescript": "^4.4.2",
+    "typescript": "^4.8.4",
-    "vue": "3.2.26",
+    "vue": "3.2.41",
     "webpack": "^4.46.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^3.11.3"
   }
 }

renovate.json

@@ -7,5 +7,6 @@
     ":semanticCommitTypeAll(chore)"
   ],
   "rangeStrategy": "bump",
-  "labels": ["dependencies"]
+  "labels": ["dependencies"],
+  "ignoreDeps": ["@types/node", "@vue/test-utils"]
 }

scripts/webpack.base.conf.js

@@ -26,6 +26,11 @@ module.exports = {
           'style-loader', 'css-loader',
         ],
       },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto'
+      }
     ],
   },
   plugins: [
@@ -35,7 +40,7 @@ module.exports = {
     }),
   ],
   resolve: {
-    extensions: ['.ts', '.js'],
+    extensions: ['.ts', '.js', '.mjs'],
   },
   node: {
     fs: 'empty',