wmde · itamargiv · Nov 9, 2023 · Nov 3, 2023 · Nov 3, 2023 · Nov 3, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,9 +19,11 @@
         "@types/lodash": "^4.14.199",
         "@typescript-eslint/eslint-plugin": "^6.7.5",
         "@typescript-eslint/parser": "^6.7.5",
+        "@vue/compiler-sfc": "3.2.0",
         "@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.2.0",
         "@wikimedia/codex": "^0.20.0",
         "@wikimedia/codex-design-tokens": "^0.20.0",
         "@wikimedia/codex-icons": "^0.20.0",
@@ -42,25 +44,30 @@
         "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.2.0",
         "@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.0.36",
         "ress": "^5.0.2",
-        "vue": "^2.6.14",
-        "vue-banana-i18n": "1.5.0",
-        "vuex": "^3.6.2"
+        "vue": "3.2.0",
+        "vue-banana-i18n": "2.3.0"
     },
     "overrides": {
+        "pinia": {
+            "vue": "3.2.0"
+        },
         "@wikimedia/codex": {
-            "vue": "^2.6.14"
+            "vue": "3.2.0"
+        },
+        "vue-banana-i18n": {
+            "banana-i18n": "2.2.0"
         }
     }
 }
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -8,5 +8,6 @@
     "/images/mismatch-finder-logo.svg": "/images/mismatch-finder-logo.svg",
     "/images/mismatch-finder-logo_mobile.svg": "/images/mismatch-finder-logo_mobile.svg",
     "/images/search.svg": "/images/search.svg",
-    "/images/user.svg": "/images/user.svg"
+    "/images/user.svg": "/images/user.svg",
+    "/images/wikidata-logo.svg": "/images/wikidata-logo.svg"
 }
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
@@ -108,7 +108,7 @@
 
 <script lang="ts">
     import { mapState, mapMutations } from 'vuex';
-    import { Head as InertiaHead } from '@inertiajs/inertia-vue';
+    import { Head as InertiaHead } from '@inertiajs/inertia-vue3';
     import {
         Button as WikitButton,
         Dialog as WikitDialog,

diff --git a/resources/js/Pages/Layout.vue b/resources/js/Pages/Layout.vue
@@ -68,7 +68,7 @@
 
 <script lang="ts">
 import { PropType } from 'vue';
-import { Link as InertiaLink } from '@inertiajs/inertia-vue';
+import { Link as InertiaLink } from '@inertiajs/inertia-vue3';
 import { Link as WikitLink } from '@wmde/wikit-vue-components';
 import { Button as LanguageSelectorButton, Icon } from '@wmde/wikit-vue-components';
 import AuthWidget from '../Components/AuthWidget.vue';

diff --git a/resources/js/Pages/Playground.vue b/resources/js/Pages/Playground.vue
@@ -263,8 +263,8 @@
 </template>
 
 <script lang="ts">
-    import { Head as InertiaHead } from '@inertiajs/inertia-vue'
     import defineComponent from '../types/defineComponent';
+    import { Head as InertiaHead } from '@inertiajs/inertia-vue3'
 
     import {
         Button as WikitButton,

diff --git a/resources/js/Pages/Results.vue b/resources/js/Pages/Results.vue
@@ -137,7 +137,7 @@
     import { PropType } from 'vue';
     import { mapMutations } from 'vuex';
     import isEmpty from 'lodash/isEmpty';
-    import { Head as InertiaHead } from '@inertiajs/inertia-vue';
+    import { Head as InertiaHead } from '@inertiajs/inertia-vue3';
     import {
         Link as WikitLink,
         Button as WikitButton,

diff --git a/resources/js/app.ts b/resources/js/app.ts
@@ -1,10 +1,9 @@
 import './bootstrap';
-import Vue from 'vue';
 import i18n from 'vue-banana-i18n';
 import { createStore } from './store';
-import { createInertiaApp } from '@inertiajs/inertia-vue';
-
 import i18nMessages from './lib/i18n';
+import Vue, {createApp, h} from 'vue';
+import {createInertiaApp} from '@inertiajs/inertia-vue3';
 import bubble from './lib/bubble';
 import Error from './Pages/Error.vue';
 import Layout from './Pages/Layout.vue';
@@ -33,22 +32,19 @@ async function setupI18n(locale: string): Promise<void>{
                 return page
             },
             setup({ el, app, props, plugin }) {
-                Vue.use(plugin)
-                new Vue({
-                    render: h => h(app, props),
-                    store
-                }).$mount(el);
+                createApp({
+                    render: () => h(app, props)
+                })
+                    .use(plugin)
+                    .mount(el)
             }
         });
     } catch (e) {
-        new Vue({
-            render: h => h(Error, {
-                props: {
-                    title: 'Oops!',
-                    description: 'Something unexpected happened, but we are working on it... please try to refresh, or come back later.'
-                }
+        createApp({
+            render: () => h(Error, {
+                title: 'Oops!',
+                description: 'Something unexpected happened, but we are working on it... please try to refresh, or come back later.'
             }),
-        }).$mount('#app');
+        }).mount('#app');
     }
 })();
-
diff --git a/resources/js/shims-vue.d.ts b/resources/js/shims-vue.d.ts
@@ -1,13 +1,21 @@
 declare module "*.vue" {
-    import Vue from 'vue'
-
     module 'vue/types/vue' {
         interface Vue {
             $i18n: ( msg: string, ...args: unknown[] ) => string
         }
     }
+    import { defineComponent } from "vue";
+    const component: ReturnType<typeof defineComponent>;
+    export default component;
+}
 
+declare module 'vue' {
+    import { CompatVue } from '@vue/runtime-dom'
+    const Vue: CompatVue
     export default Vue
+    export * from '@vue/runtime-dom'
+    const { configureCompat } = Vue
+    export { configureCompat }
 }
 
 declare module 'vue-banana-i18n';
@@ -17,4 +25,4 @@ declare module '@wikimedia/language-data';
 declare module '*.svg' {
     const content: any;
     export default content;
-  }
+}
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -1,7 +1,8 @@
 @import url('https://tools-static.wmflabs.org/fontcdn/css2?family=Lato&family=Source+Serif+Pro&display=swap');
 
 @import '~ress';
-@import '~@wmde/wikit-vue-components/dist/wikit-vue-components.css';
+@import '~wikit-dist/wikit-vue-components-vue3compat.css';
+@import "@wikimedia/codex/dist/codex.style.css";
 @import '~@wmde/wikit-tokens/dist/_variables.scss';
 @import './_typography.scss';
 

diff --git a/tests/Vue/Pages/Home.spec.js b/tests/Vue/Pages/Home.spec.js
@@ -4,7 +4,7 @@ import Home, { MAX_NUM_IDS } from '@/Pages/Home.vue'
 
 // Stub the inertia vue components module entirely so that we don't run into
 // issues with the Head component.
-jest.mock('@inertiajs/inertia-vue', () => ({}));
+jest.mock('@inertiajs/inertia-vue3', () => ({}));
 
 describe('Home.vue', () => {
 

diff --git a/tests/Vue/Pages/Results.spec.js b/tests/Vue/Pages/Results.spec.js
@@ -8,7 +8,7 @@ import axios from 'axios';
 
 // Stub the inertia vue components module entirely so that we don't run into
 // issues with the Head component.
-jest.mock('@inertiajs/inertia-vue', () => ({}));
+jest.mock('@inertiajs/inertia-vue3', () => ({}));
 
 jest.mock("axios", () => ({
     put: jest.fn()

diff --git a/tsconfig.json b/tsconfig.json
@@ -5,7 +5,9 @@
         "allowJs": true,
         "strict": true,
         "esModuleInterop": true,
-        "moduleResolution": "node"
+        "moduleResolution": "node",
+        "noImplicitAny": false,
+        "strictNullChecks": false
     },
     "include": [
         "resources/js"

diff --git a/webpack.mix.js b/webpack.mix.js
@@ -1,5 +1,5 @@
 const mix = require('laravel-mix');
-
+const path = require('path');
 /*
  |--------------------------------------------------------------------------
  | Mix Asset Management
@@ -12,7 +12,35 @@ const mix = require('laravel-mix');
  */
 
 mix.ts('resources/js/app.ts', 'public/js')
-    .vue({ version: 2 })
+    .webpackConfig({
+        resolve: {
+            alias: {
+                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': path.resolve(__dirname, './node_modules/@wmde/wikit-vue-components/dist'),
+            }
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.vue$/,
+                    loader: 'vue-loader',
+                    options: {
+                        compilerOptions: {
+                            compatConfig: {
+                                MODE: 2,
+                                COMPILER_V_ON_NATIVE: true,
+                                COMPILER_V_BIND_SYNC: false
+                            }
+                        }
+                    }
+                }
+            ]
+        }
+    })
+    .vue({ version: 3})
     .sass('resources/sass/app.scss', 'public/css')
     .sass('resources/sass/noscript.scss', 'public/css')
     .copyDirectory('resources/img', 'public/images')