Update vue and peers (#758)

* Install vue3 and dependencies * Mock correct version of inertia * Update error message fallback render function * Fix missing Vue import * Setup i18n * Setup pinia * Update defineComponent * Replace wikit-dialog with codex-dialog in Home.vue * Replace wikit-dialog with codex-dialog in Results.vue * Update bubble * Update lifecycle methods * Fix TS errors * Remove vuex from tests * Replace wikit dialog and select * Empty playground.vue * Add migration eslint rules * Update propsData to props * Update tests * Add lost package-lock.json * Setup i18n (#753) * Setup i18n * Remove unnecessary function --------- Co-authored-by: Itamar Givon <itamar.givon.dev@gmail.com> * Setup pinia * Resolve package-lock conflicts * Remove console.log * Restore Playground.vue * Fix linting issues * Update package-lock * Fix i18n (#760) * Enable parsing of wikitext style links in i18n messages * Update links in i18n messagesto wikitext style * Update browser tests (#759) * Fix browser tests * Disable assertVue assertions * Oops, missed two! --------- Co-authored-by: Itamar Givon <itamar.givon.dev@gmail.com> * Fix mix manifest --------- Co-authored-by: Hasan Akgün <hasanakg@outlook.com>
wmde · Nov 10, 2023 · 292f0f5 · 292f0f5
1 parent 0422da1
commit 292f0f5
Show file tree

Hide file tree

Showing 41 changed files with 2,217 additions and 2,188 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -12,6 +12,15 @@ module.exports = {
 	rules: {
 		'max-len': [ 'error', 120 ],
 		'no-multiple-empty-lines' : ['error', { 'max': 1 }],
-		'vue/multi-word-component-names' : [ 'off' ]
-		},	
+		'vue/multi-word-component-names' : [ 'off' ],
+		// Migration changes
+		'vue/no-deprecated-v-bind-sync': 'off',
+		'vue/no-deprecated-slot-attribute': 'off',
+		'vue/require-explicit-emits': 'off',
+		'vue/no-deprecated-v-on-native-modifier': 'off',
+		'vue/no-deprecated-slot-scope-attribute': 'off',
+		'vue/no-v-for-template-key-on-child': 'off',
+		'vue/no-deprecated-destroyed-lifecycle': 'off',
+		'vue/no-v-model-argument': 'off'
+		},
 };
diff --git a/jest.config.js b/jest.config.js
@@ -1,3 +1,4 @@
+const path = require("path");
 module.exports = {
     // Where are your vue tests located?
     "roots": [
@@ -9,7 +10,7 @@ module.exports = {
     // js: transform js files with babel, we can now use import statements in tests
     // ts: transform ts files with babel, to import ts files into js specs
     "transform": {
-        ".*\\.(vue)$": "<rootDir>/node_modules/@vue/vue2-jest",
+        ".*\\.(vue)$": "<rootDir>/node_modules/@vue/vue3-jest",
         "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
         "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest"
     },
@@ -21,6 +22,29 @@ module.exports = {
     // "import Counter from '@/Counter.vue'"
     // (no need for a full path)
     "moduleNameMapper": {
-        "^@/(.*)$": "<rootDir>/resources/js/$1"
+        "^vue$": "@vue/compat",
+        '^@vue/composition-api$': '@vue/compat',
+        '^@wmde/wikit-vue-components$':
+            '@wmde/wikit-vue-components/dist/wikit-vue-components-vue3compat.common.js',
+        '^wikit-dist(.*)$': "<rootDir>/node_modules/@wmde/wikit-vue-components/dist$1",
+        "^@/(.*)$": "<rootDir>/resources/js/$1",
     },
+    // For Vue migration build
+    // Further info: https://test-utils.vuejs.org/migration/#-vue-vue3-jest-jest-28
+    "testEnvironmentOptions": {
+        "customExportConditions": ["node", "node-addons"],
+    },
+    // For Vue migration build
+    // Add compat config to test as well
+    "globals": {
+        "vue-jest": {
+            "compilerOptions": {
+                compatConfig: {
+                    MODE: 3,
+                    COMPILER_V_ON_NATIVE: true,
+                    COMPILER_V_BIND_SYNC: true
+                }
+            }
+        }
+    }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,13 +15,16 @@
         "production": "mix --production"
     },
     "devDependencies": {
+        "@pinia/testing": "^0.1.3",
         "@types/jest": "^29.5.5",
         "@types/lodash": "^4.14.199",
         "@typescript-eslint/eslint-plugin": "^6.7.5",
         "@typescript-eslint/parser": "^6.7.5",
+        "@vue/compiler-sfc": "^3.3.8",
         "@vue/eslint-config-typescript": "^12.0.0",
-        "@vue/test-utils": "^1.3.6",
-        "@vue/vue2-jest": "^29.2.6",
+        "@vue/test-utils": "^2.0.0",
+        "@vue/vue3-jest": "^29.2.4",
+        "@vue/runtime-dom": "^3.3.8",
         "@wikimedia/codex": "^0.20.0",
         "@wikimedia/codex-design-tokens": "^0.20.0",
         "@wikimedia/codex-icons": "^0.20.0",
@@ -42,25 +45,19 @@
         "ts-jest": "^29.1.0",
         "ts-loader": "^9.5.0",
         "typescript": "^5.2.2",
-        "vue-loader": "^15.10.2",
-        "vue-template-compiler": "^2.6.14"
+        "vue-loader": "^16.0.0"
     },
     "dependencies": {
         "@inertiajs/inertia": "^0.11.0",
-        "@inertiajs/inertia-vue": "^0.8.0",
-        "@vue/composition-api": "^1.7.2",
+        "@inertiajs/inertia-vue3": "^0.6.0",
+        "@vue/compat": "^3.3.8",
         "@wmde/wikit-tokens": "^2.1.0-alpha.15",
         "@wmde/wikit-vue-components": "^2.1.0-alpha.16",
         "date-fns": "^2.30.0",
         "lodash": "^4.17.21",
+        "pinia": "^2.1.7",
         "ress": "^5.0.2",
-        "vue": "^2.6.14",
-        "vue-banana-i18n": "1.5.0",
-        "vuex": "^3.6.2"
-    },
-    "overrides": {
-        "@wikimedia/codex": {
-            "vue": "^2.6.14"
-        }
+        "vue": "^3.3.8",
+        "vue-banana-i18n": "2.3.0"
     }
 }
diff --git a/public/i18n/en.json b/public/i18n/en.json
@@ -47,7 +47,7 @@
     "review-status-none": "None of the above",
     "result-form-submit": "Save reviews",
     "changes-submitted-message": "Review successfully saved for:",
-    "log-in-message": "Please <a href=\"$1\">log in</a> to make any changes.",
+    "log-in-message": "Please [$1 log in] to make any changes.",
     "results-page-description": "You can fix them! The table below presents you with links to the statements on Wikidata and to the entries on the external source. You can compare the values and manually fix the mismatches by editing Wikidata or the external source. After investigating and fixing the mismatches, you can indicate their status using the options from the drop-down. This tool will not automatically make these edits for you upon submission.",
     "results-page-title": "What should I do with the mismatches?",
     "results-instructions-button": "Instructions",
@@ -80,17 +80,17 @@
     "faq-dialog-question-relevance": "How up-to-date are the mismatches?",
     "faq-dialog-answer-relevance": "It depends! Inspecting external databases, catalogs and websites takes a lot of time and resources. The checks are performed periodically in batches. We try hard to remove outdated mismatches, but you might still find some.",
     "faq-dialog-question-contributing": "How can I contribute new mismatches?",
-    "faq-dialog-answer-contributing": "If you've compared Wikidata's data against an external source and have found mismatches, you can open a task in <a href=\"$1\">Phabricator</a> to request an upload of your mismatches.",
+    "faq-dialog-answer-contributing": "If you've compared Wikidata's data against an external source and have found mismatches, you can open a task in [$1 Phabricator] to request an upload of your mismatches.",
     "faq-dialog-question-more-info": "Where can I find more information?",
-    "faq-dialog-answer-more-info": "This tool’s documentation and the source code are available on <a href=\"$1\">GitHub</a>. You can read more about the Mismatch Finder on <a href=\"$2\">Wikidata</a> or you can <a href=\"$3\">give us feedback</a>.",
+    "faq-dialog-answer-more-info": "This tool’s documentation and the source code are available on [$1 GitHub]. You can read more about the Mismatch Finder on [$2 Wikidata] or you can [$3 give us feedback].",
     "wikidata-tool-footer-about-tool": "About the $1",
-    "wikidata-tool-footer-license": "Licensed under <a href=\"$1\">$2</a>",
+    "wikidata-tool-footer-license": "Licensed under [$1 $2]",
     "wikidata-tool-footer-source": "Get source code",
     "wikidata-tool-footer-issues": "Report an issue",
     "wikidata-tool-footer-about-us": "About us",
     "wikidata-tool-footer-privacy": "Privacy policy",
     "wikidata-tool-footer-wmde": "Wikimedia Deutschland",
-    "wikidata-tool-footer-team": "Made with ♥ by the <a href=\"$1\">Wikidata Team</a>",
+    "wikidata-tool-footer-team": "Made with ♥ by the [$1 Wikidata Team]",
     "mismatch-finder-license": "BSD 3-Clause License",
     "mismatch-finder-footer-more-tools": "More data quality tools",
     "tool-query-builder": "Query Builder",

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,7 +1,7 @@
 {
     "/js/app.js": "/js/app.js",
-    "/css/noscript.css": "/css/noscript.css",
     "/css/app.css": "/css/app.css",
+    "/css/noscript.css": "/css/noscript.css",
     "/images/clear.svg": "/images/clear.svg",
     "/images/close.svg": "/images/close.svg",
     "/images/download-stats.svg": "/images/download-stats.svg",

diff --git a/resources/js/Components/AuthWidget.vue b/resources/js/Components/AuthWidget.vue
@@ -10,11 +10,12 @@
 
 <script lang="ts">
 
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import User from '../types/User';
 import { Link as WikitLink } from '@wmde/wikit-vue-components';
 
-export default Vue.extend({
+export default defineComponent({
     props: {
         user: Object as PropType<User>
     },

diff --git a/resources/js/Components/LanguageSelector.vue b/resources/js/Components/LanguageSelector.vue
@@ -35,11 +35,11 @@
 import LanguageSelectorInput from '../Components/LanguageSelectorInput.vue';
 import LanguageSelectorOptionsMenu from '../Components/LanguageSelectorOptionsMenu.vue';
 import Language from '../types/Language';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import languagedata from '@wikimedia/language-data';
 import closeUrl from '../../img/close.svg';
 
-export default Vue.extend( {
+export default defineComponent( {
 	name: 'LanguageSelector',
 	components: {
 		LanguageSelectorInput,

diff --git a/resources/js/Components/LanguageSelectorInput.vue b/resources/js/Components/LanguageSelectorInput.vue
@@ -29,11 +29,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import searchUrl from '../../img/search.svg';
 import clearUrl from '../../img/clear.svg';
 
-export default Vue.extend( {
+export default defineComponent( {
 	name: 'LanguageSelectorInput',
 	props: {
 		value: {

diff --git a/resources/js/Components/LanguageSelectorOptionsMenu.vue b/resources/js/Components/LanguageSelectorOptionsMenu.vue
@@ -35,9 +35,10 @@
 
 <script lang="ts">
 import Language from '../types/Language';
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend( {
+export default defineComponent( {
 	name: 'LanguageSelectorOptionsMenu',
 	props: {
 		languages: {

diff --git a/resources/js/Components/LoadingOverlay.vue b/resources/js/Components/LoadingOverlay.vue
@@ -6,9 +6,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
     name: 'LoadingOverlay',
     props: {
         delay: {

diff --git a/resources/js/Components/MismatchRow.vue b/resources/js/Components/MismatchRow.vue
@@ -46,14 +46,14 @@
             </span>
         </td>
         <td :data-header="$i18n('column-review-status')">
-            <dropdown
-                :menuItems="Object.values(statusOptions)"
+            <cdx-select
+                :menu-items="Object.values(statusOptions)"
                 :disabled="disabled"
-                v-model="decision"
-                @input="$bubble('decision', {
+                v-model:selected="reviewStatus"
+                @update:selected="$bubble('decision', {
                     id: mismatch.id,
                     item_id: mismatch.item_id,
-                    review_status: $event.value
+                    review_status: $event
                 })"
             />
         </td>
@@ -79,15 +79,16 @@
                   </wikit-button>
                 </div>
             </div>
-            <wikit-dialog class="full-description-dialog"
+            <cdx-dialog class="full-description-dialog"
               :title="$i18n('column-upload-info')"
-              ref="fullDescriptionDialog"
-              :actions="[{
+              :open="fullDescriptionDialog"
+              :primary-action="{
                   label: $i18n('confirm-dialog-button'),
-                  namespace: 'next-steps-confirm'
-              }]"
-              @action="(_, dialog) => dialog.hide()"
-              dismiss-button
+                  namespace: 'next-steps-confirm',
+                  actionType: 'progressive'
+              }"
+              @primary="() => fullDescriptionDialog = false"
+              close-button-label="X"
             >
             <wikit-link class="uploader"
                     :href="`https://www.wikidata.org/wiki/User:${mismatch.import_meta.user.username}`"
@@ -99,21 +100,21 @@
             <div class="description">
               {{this.mismatch.import_meta.description}}
             </div>
-          </wikit-dialog>
+          </cdx-dialog>
         </td>
     </tr>
 </template>
 
 <script lang="ts">
 import { formatISO } from 'date-fns';
 
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import {
     Button as WikitButton,
-    Dialog as WikitDialog,
-    Dropdown,
     Link as WikitLink
 } from '@wmde/wikit-vue-components';
+import { CdxDialog, CdxSelect } from "@wikimedia/codex";
 import { MenuItem } from '@wmde/wikit-vue-components/dist/components/MenuItem';
 
 import { LabelledMismatch, ReviewDecision } from "../types/Mismatch";
@@ -131,14 +132,16 @@ type ReviewOptionMap = {
 interface MismatchRowState {
   statusOptions: ReviewOptionMap;
   decision: ReviewMenuItem;
+  reviewStatus: string;
+  fullDescriptionDialog: boolean;
 }
 
-export default Vue.extend({
+export default defineComponent({
     components: {
     WikitButton,
     WikitLink,
-    WikitDialog,
-    Dropdown,
+    CdxDialog,
+    CdxSelect
     },
     props: {
         mismatch: Object as PropType<LabelledMismatch>,
@@ -182,14 +185,14 @@ export default Vue.extend({
     return {
       statusOptions,
       decision: statusOptions[this.mismatch.review_status],
+      reviewStatus: String(this.mismatch.review_status),
+      fullDescriptionDialog: false
     };
   },
   methods: {
     showDialog(e: Event) {
       e.preventDefault();
-      /* eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
-      const descriptionDialog = this.$refs.fullDescriptionDialog! as any;
-      descriptionDialog.show();
+      this.fullDescriptionDialog = true;
     }
   }
 });

diff --git a/resources/js/Components/MismatchesTable.vue b/resources/js/Components/MismatchesTable.vue
@@ -23,14 +23,15 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import { Table as WikitTable } from '@wmde/wikit-vue-components';
 
 import MismatchRow from './MismatchRow.vue';
 
 import { LabelledMismatch } from '../types/Mismatch';
 
-export default Vue.extend({
+export default defineComponent({
     components: {
         MismatchRow,
         WikitTable,

diff --git a/resources/js/Components/WikidataToolFooter.vue b/resources/js/Components/WikidataToolFooter.vue
@@ -31,7 +31,8 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import { Link as WikitLink } from '@wmde/wikit-vue-components';
 
 interface FooterLabels {
@@ -45,7 +46,7 @@ interface FooterUrls {
     issues: string;
 }
 
-export default Vue.extend({
+export default defineComponent({
     name: 'WikidataToolFooter',
     components: {
         WikitLink,

diff --git a/resources/js/Pages/Error.vue b/resources/js/Pages/Error.vue
@@ -6,9 +6,9 @@
 </template>
 
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     title: String,
     description: String