Merge pull request #1445 from empathyco/feat/EMP-3849-create-vue3-mig…

…ration-test-package build: Create Vue 3 migration test package
empathyco · Apr 19, 2024 · a8475dd · a8475dd
2 parents a7967fe + 89ceb6f
commit a8475dd
Show file tree

Hide file tree

Showing 22 changed files with 667 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -38,5 +38,14 @@
       "cross-env NODE_ENV=production eslint --fix"
     ],
     "*.{md,js,json}": "prettier --write"
+  },
+  "pnpm": {
+    "packageExtensions": {
+      "vue-template-compiler": {
+        "peerDependencies": {
+          "vue": "~2.7.14"
+        }
+      }
+    }
   }
 }
diff --git a/packages/_vue3-migration-test/.env b/packages/_vue3-migration-test/.env
@@ -0,0 +1 @@
+VITE_VUE_COMPAT_MODE = 2
diff --git a/packages/_vue3-migration-test/.eslintrc.js b/packages/_vue3-migration-test/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['plugin:@empathyco/x/all'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: 'tsconfig.eslint.json'
+  }
+};
diff --git a/packages/_vue3-migration-test/README.md b/packages/_vue3-migration-test/README.md
@@ -0,0 +1,15 @@
+# vue3-migration-test
+
+[Vue 3 Migration Guide](https://v3-migration.vuejs.org/migration-build.html)
+
+To check compile-time errors & warnings:
+
+```
+pnpm --filter vue3-migration-test run build
+```
+
+To check command-line / browser console warnings:
+
+```
+pnpm --filter vue3-migration-test run dev
+```
diff --git a/packages/_vue3-migration-test/index.html b/packages/_vue3-migration-test/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vue3-migration-test</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "vue3-migration-test",
+  "private": "true",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .ts,.vue",
+    "build": "vue-tsc && vite build"
+  },
+  "dependencies": {
+    "@vue/compat": "^3.4.22",
+    "vue": "^3.4.22",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/runtime-dom": "^3.4.22",
+    "typescript": "~4.9.4",
+    "vite": "^4.5.0",
+    "vue-tsc": "^2.0.13"
+  }
+}
diff --git a/packages/_vue3-migration-test/public/favicon.ico b/packages/_vue3-migration-test/public/favicon.ico
diff --git a/packages/_vue3-migration-test/src/App.vue b/packages/_vue3-migration-test/src/App.vue
@@ -0,0 +1,26 @@
+<template>
+  <div id="app">
+    <h1>vue3-migration-test</h1>
+    <nav>
+      <RouterLink v-for="route in $router.options.routes" :key="route.path" :to="route.path">
+        {{ route.name }}
+      </RouterLink>
+    </nav>
+    <main>
+      <RouterView />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+  #app {
+    nav {
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+      margin: 1rem 0;
+    }
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -0,0 +1,2 @@
+export { default as TestAnimateWidth } from './test-animate-width.vue';
+export { default as TestFade } from './test-fade.vue';
diff --git a/packages/_vue3-migration-test/src/components/animations/test-animate-width.vue b/packages/_vue3-migration-test/src/components/animations/test-animate-width.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <button @click="visible = !visible">Toggle</button>
+    <AnimateWidth>
+      <div v-if="visible" style="width: 300px">Element to animate</div>
+    </AnimateWidth>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import AnimateWidth from '../../../../x-components/src/components/animations/animate-width.vue';
+
+  const visible = ref(true);
+</script>
diff --git a/packages/_vue3-migration-test/src/components/animations/test-fade.vue b/packages/_vue3-migration-test/src/components/animations/test-fade.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <button @click="shouldRender = !shouldRender">Toggle</button>
+    <Fade>
+      <p v-if="shouldRender">León is southern Spain</p>
+    </Fade>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import Fade from '../../../../x-components/src/components/animations/fade.vue';
+
+  const shouldRender = ref(false);
+</script>
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
@@ -0,0 +1 @@
+export * from './animations';
diff --git a/packages/_vue3-migration-test/src/index.ts b/packages/_vue3-migration-test/src/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
@@ -0,0 +1,15 @@
+import { Component, configureCompat, createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+// Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
+const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
+if (VUE_COMPAT_MODE === 2) {
+  configureCompat({
+    INSTANCE_LISTENERS: 'suppress-warning'
+  });
+}
+
+createApp(App as Component)
+  .use(router)
+  .mount('#app');
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
@@ -0,0 +1,22 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import { TestAnimateWidth, TestFade } from './';
+
+const routes = [
+  {
+    path: '/animate-width',
+    name: 'AnimateWidth',
+    component: TestAnimateWidth
+  },
+  {
+    path: '/fade',
+    name: 'Fade',
+    component: TestFade
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+});
+
+export default router;
diff --git a/packages/_vue3-migration-test/src/shims-vue.d.ts b/packages/_vue3-migration-test/src/shims-vue.d.ts
@@ -0,0 +1,8 @@
+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 };
+}
diff --git a/packages/_vue3-migration-test/src/vite-env.d.ts b/packages/_vue3-migration-test/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+interface ImportMetaEnv {
+  readonly VITE_VUE_COMPAT_MODE: '2' | '3';
+}
diff --git a/packages/_vue3-migration-test/tsconfig.eslint.json b/packages/_vue3-migration-test/tsconfig.eslint.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/_vue3-migration-test/tsconfig.json b/packages/_vue3-migration-test/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2019",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "rootDir": "src",
+    "baseUrl": ".",
+    "types": ["node"],
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/_vue3-migration-test/vite.config.ts b/packages/_vue3-migration-test/vite.config.ts
@@ -0,0 +1,37 @@
+import { resolve } from 'path';
+import vue from '@vitejs/plugin-vue';
+import { defineConfig, loadEnv } from 'vite';
+import { vueDocsPlugin } from '../x-components/vite.config';
+
+export default defineConfig(({ mode }) => {
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
+  const { VITE_VUE_COMPAT_MODE } = process.env;
+  const VUE_COMPAT_MODE = Number(VITE_VUE_COMPAT_MODE);
+  if (VUE_COMPAT_MODE !== 2 && VUE_COMPAT_MODE !== 3) {
+    throw new Error(
+      `Invalid VITE_VUE_COMPAT_MODE value ('${VITE_VUE_COMPAT_MODE ?? ''}'), expected '2' | '3'`
+    );
+  }
+  return {
+    plugins: [
+      vue({
+        template: {
+          compilerOptions: {
+            compatConfig: {
+              MODE: VUE_COMPAT_MODE
+            }
+          }
+        }
+      }),
+      vueDocsPlugin
+    ],
+    resolve: {
+      alias: {
+        vue: resolve(__dirname, 'node_modules/@vue/compat')
+      }
+    },
+    optimizeDeps: {
+      exclude: ['@empathyco/x-components']
+    }
+  };
+});
diff --git a/packages/x-components/vite.config.ts b/packages/x-components/vite.config.ts
@@ -1,8 +1,9 @@
-import { defineConfig } from 'vite';
+import { resolve } from 'path';
 import vue from '@vitejs/plugin-vue2';
+import { defineConfig } from 'vite';
 import Inspector from 'vite-plugin-vue-inspector';
 
-const vueDocsPlugin = {
+export const vueDocsPlugin = {
   name: 'vue-docs',
   transform(code: string, id: string) {
     return !/vue&type=docs/.test(id) ? undefined : `export default ''`;
@@ -19,6 +20,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
+      vue: resolve(__dirname, 'node_modules/vue'),
       'vue-runtime-helpers': 'node_modules/vue-runtime-helpers'
     }
   },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as TestAnimateWidth } from './test-animate-width.vue';
		export { default as TestFade } from './test-fade.vue';