[Vue] Upgrade 3rd party dependencies

packages/create-sitecore-jss/src/templates/vue/.eslintrc.js

@@ -8,8 +8,11 @@ module.exports = {
   rules: {
     'no-console': 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'vue/multi-word-component-names': 'off',
   },
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
+    ecmaVersion: 8,
+    requireConfigFile: false,
   },
 };

packages/create-sitecore-jss/src/templates/vue/package.json

@@ -46,46 +46,46 @@
     "lint": "vue-cli-service lint ./src/**/*.vue ./src/**/*.js ./sitecore/definitions/**/*.js ./scripts/**/*.js ./server/**/*.js ./data/**/*.yml"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.6",
-    "@panter/vue-i18next": "~0.15.1",
+    "@apollo/client": "^3.7.4",
+    "@panter/vue-i18next": "~0.15.2",
     "@sitecore-jss/sitecore-jss-vue": "^21.1.0-canary",
-    "@vue/apollo-composable": "^4.0.0-alpha.12",
-    "@vue/apollo-option": "^4.0.0-alpha.11",
-    "@vue/apollo-ssr": "^4.0.0-alpha.11",
-    "@vue/server-renderer": "^3.0.11",
-    "axios": "^0.21.1",
-    "bootstrap": "^4.3.1",
-    "cross-fetch": "~2.2.3",
-    "graphql": "^15.5.0",
+    "@vue/apollo-composable": "^4.0.0-beta.1",
+    "@vue/apollo-option": "^4.0.0-alpha.20",
+    "@vue/apollo-ssr": "^4.0.0-alpha.18",
+    "@vue/server-renderer": "^3.2.45",
+    "axios": "^1.2.3",
+    "bootstrap": "^5.2.3",
+    "cross-fetch": "~3.1.5",
+    "graphql": "^16.6.0",
     "js-sha256": "^0.9.0",
     "register-service-worker": "~1.7.2",
-    "serialize-javascript": "^6.0.0",
-    "vue": "^v3.1.0-beta.6",
-    "vue-i18n": "^9.1.6",
-    "vue-meta": "3.0.0-alpha.6",
-    "vue-router": "^4.0.8"
+    "serialize-javascript": "^6.0.1",
+    "vue": "^3.2.45",
+    "vue-i18n": "^9.2.2",
+    "vue-meta": "3.0.0-alpha.10",
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@babel/register": "7.6.2",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/register": "7.18.9",
     "@sitecore-jss/sitecore-jss-cli": "^21.1.0-canary",
     "@sitecore-jss/sitecore-jss-dev-tools": "^21.1.0-canary",
-    "@vue/cli-plugin-babel": "~4.5.13",
-    "@vue/cli-plugin-eslint": "~4.5.13",
-    "@vue/cli-service": "~4.5.13",
-    "@vue/compiler-sfc": "^3.0.11",
-    "@vue/eslint-config-prettier": "~5.0.0",
-    "babel-eslint": "~10.0.3",
-    "chokidar": "~3.1.1",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.2.45",
+    "@vue/eslint-config-prettier": "~7.0.0",
+    "chokidar": "~3.5.3",
     "constant-case": "^3.0.4",
-    "cross-env": "~6.0.0",
-    "dotenv": "^16.0.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "~7.9.0",
-    "eslint-plugin-yaml": "^0.2.0",
-    "graphql-tag": "^2.12.4",
-    "html-loader": "~0.5.5",
+    "cross-env": "~7.0.3",
+    "dotenv": "^16.0.3",
+    "eslint": "^8.32.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "~9.9.0",
+    "eslint-plugin-yaml": "^0.5.0",
+    "graphql-tag": "^2.12.6",
+    "html-loader": "~4.2.0",
     "npm-run-all": "~4.1.5",
-    "null-loader": "~3.0.0"
+    "null-loader": "~4.0.1"
   }
 }

packages/create-sitecore-jss/src/templates/vue/src/components/GraphQL/GraphQL-SSRDemo.vue

@@ -6,29 +6,32 @@
 
     <p>
       Server Side GraphQL executes GraphQL queries directly against the Sitecore GraphQL endpoint,
-      prior to rendering the app to a string. This sample app uses the <code>vue-apollo</code> library to
-      manage GraphQL queries.
+      prior to rendering the app to a string. This sample app uses the
+      <code>vue-apollo</code> library to manage GraphQL queries.
     </p>
     <p>
-      <strong>NOTE:</strong> when using the <code>useQuery</code> prefetch option,
-      GraphQL queries are executed <em>prior</em> to app rendering.
+      <strong>NOTE:</strong> when using the <code>useQuery</code> prefetch option, GraphQL queries
+      are executed <em>prior</em> to app rendering.
     </p>
-    <p>
+    <div>
       Expected behavior for this component:
       <ul>
         <li>
-          <strong>Connected Mode:</strong> the GraphQL query will execute in the browser after component load.
-          The <code>prefetch</code> option will not execute.
+          <strong>Connected Mode:</strong> the GraphQL query will execute in the browser after
+          component load. The <code>prefetch</code> option will not execute.
+        </li>
+        <li>
+          <strong>Integrated Mode:</strong> the <code>prefetch</code> option of the GraphQL query
+          will execute on the server and output will be rendered in the markup generated by the app
+          on the server. After the initial load / render from the server, you can manage the query
+          like a client-side query.
         </li>
         <li>
-          <strong>Integrated Mode:</strong> the <code>prefetch</code> option of the GraphQL query will execute on the server
-          and output will be rendered in the markup generated by the app on the server. After the initial load / render from
-          the server, you can manage the query like a client-side query.
+          <strong>Disconnected Mode:</strong> GraphQL requires connected mode, headless connected
+          mode, or integrated mode to work.
         </li>
-        <li><strong>Disconnected Mode:</strong> GraphQL requires connected mode, headless
-        connected mode, or integrated mode to work.</li>
       </ul>
-    </p>
+    </div>
 
     <p v-if="loading" class="alert alert-info">GraphQL query is executing...</p>
     <p v-if="error" class="alert alert-danger">GraphQL query error: {{ error.toString() }}</p>
@@ -40,8 +43,9 @@
       <br />
       children:
       <ul>
-        <li v-for="(child) in result.contextItem.children.results" :key="child.id">
-          <router-link :to="child.url.path">{{child.pageTitle.value}}</router-link>&nbsp; (editable title too! <sc-text :field="child.pageTitle.jsonValue" />)
+        <li v-for="child in result.contextItem.children.results" :key="child.id">
+          <router-link :to="child.url.path">{{ child.pageTitle.value }}</router-link
+          >&nbsp; (editable title too! <sc-text :field="child.pageTitle.jsonValue" />)
         </li>
       </ul>
     </div>
@@ -51,7 +55,7 @@
 <script>
 import { getCurrentInstance, defineComponent, watch } from 'vue';
 import { ConnectedDemoQuery } from './GraphQL-ConnectedDemo.query.graphql';
-import { useQuery } from "@vue/apollo-composable";
+import { useQuery } from '@vue/apollo-composable';
 import config from '../../temp/config';
 
 import { Text } from '@sitecore-jss/sitecore-jss-vue';
@@ -78,21 +82,21 @@ export default defineComponent({
       const variables = {
         contextItem: properties ? properties.sitecoreContext().itemId : defaultValue,
         datasource: defaultValue,
-        language: properties ? properties.sitecoreContext().language : config.defaultLanguage
+        language: properties ? properties.sitecoreContext().language : config.defaultLanguage,
       };
 
       if (!variables.contextItem) variables.contextItem = defaultValue;
 
       return variables;
-    }
+    };
 
     const { result, loading, error } = useQuery(ConnectedDemoQuery, variables());
 
     return {
       result,
       loading,
       error,
-    }
+    };
   },
   // Workaround for issue https://github.com/vuejs/vue-apollo/issues/1100
   // Prefetch is not working using Composition API
@@ -101,11 +105,11 @@ export default defineComponent({
     return new Promise((resolve, reject) => {
       watch(
         () => this.loading,
-        () => resolve({}),
+        () => resolve({})
       );
       watch(
         () => this.error,
-        () => reject(),
+        () => reject()
       );
     });
   },

packages/sitecore-jss-vue/.eslintrc

@@ -1,7 +1,6 @@
 {
-  "extends": [
-    "plugin:vue/recommended",
-    "../../.eslintrc",
-    "../../eslint-configs/typescript"
-  ]
+  "extends": ["plugin:vue/recommended", "../../.eslintrc", "../../eslint-configs/typescript"],
+  "rules": {
+    "vue/multi-word-component-names": "off"
+  }
 }

packages/sitecore-jss-vue/jest.config.js

@@ -1,4 +1,8 @@
 module.exports = {
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    customExportConditions: ['node', 'node-addons'],
+  },
   testMatch: ['**/*.test.ts'],
   moduleFileExtensions: [
     'js',
@@ -9,8 +13,9 @@ module.exports = {
   ],
   transform: {
     '^.+\\.ts$': 'ts-jest',
-    // process `*.vue` files with `vue-jest`
-    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
+    '^.+\\js$': 'babel-jest',
+    // process `*.vue` files with `@vue/vue3-jest`
+    '.*\\.(vue)$': '@vue/vue3-jest',
   },
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-html'],
 };

packages/sitecore-jss-vue/package.json

@@ -28,25 +28,27 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@types/jest": "^26.0.23",
-    "@vue/compiler-dom": "^3.2.21",
-    "@vue/test-utils": "2.0.0-rc.6",
+    "@babel/core": "^7.20.12",
+    "@types/jest": "^29.2.6",
+    "@types/node": "^18.11.18",
+    "@vue/compiler-dom": "^3.2.45",
+    "@vue/test-utils": "2.2.7",
+    "@vue/vue3-jest": "^29.2.2",
     "babel-core": "^6.26.3",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^29.3.1",
     "del-cli": "^5.0.0",
-    "eslint": "^7.15.0",
-    "eslint-plugin-vue": "^7.9.0",
-    "jest": "^26.6.3",
-    "jest-serializer-html": "^7.0.0",
-    "ts-jest": "26.5.6",
-    "typescript": "~4.3.5",
-    "vue": "^v3.1.0-beta.6",
-    "vue-class-component": "^7.2.6",
-    "vue-jest": "^5.0.0-alpha.9"
+    "eslint": "^8.32.0",
+    "eslint-plugin-vue": "^9.9.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-serializer-html": "^7.1.0",
+    "ts-jest": "29.0.5",
+    "typescript": "~4.9.4",
+    "vue": "^3.2.45",
+    "vue-class-component": "^7.2.6"
   },
   "peerDependencies": {
-    "vue": "^v3.1.0-beta.6"
+    "vue": "^3.2.45"
   },
   "dependencies": {
     "@sitecore-jss/sitecore-jss": "^21.1.0-canary.73",