Merge branch 'main' into feature/EMP-3792-Migrate-result-list

empathyco · Apr 24, 2024 · 5af69d7 · 5af69d7
2 parents 7fcd99e + a63eccc
commit 5af69d7
Show file tree

Hide file tree

Showing 40 changed files with 778 additions and 180 deletions.
diff --git a/.github/workflows/edocs-dynamic-sync.yml b/.github/workflows/edocs-dynamic-sync.yml
@@ -20,7 +20,7 @@ jobs:
           curl --request POST \
           -u empathyco:${GITHUB_TOKEN} \
           --header 'content-type: application/json' \
-          --url https://api.github.com/repos/empathyco/docs-empathy/actions/workflows/40134850/dispatches \
+          --url https://api.github.com/repos/empathyco/docs-framework/actions/workflows/93444504/dispatches \
           --data '{"ref": "main",  "inputs": {"branchName": "${{ env.BRANCH_NAME }}", "version": "${{ steps.package-version.outputs.current-version }}"}}'
         env:
           GITHUB_TOKEN: ${{ secrets.SUPPORT_TOKEN }}

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/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
@@ -0,0 +1,28 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.1.0-alpha.0 (2024-04-19)
+
+
+### Features
+
+* Add VUE_COMPAT_MODE env variable ([759e8ef](https://github.com/empathyco/x/commit/759e8ef221ef2159dd46faf816dc5f00b5919dc4))
+* EMP-3849 Create vue3-migration-test package ([399fe51](https://github.com/empathyco/x/commit/399fe5176b8c0a5206ed7da4edf9c54c1219f70b))
+* Improve vue3-migration-test playground ([8ebe98e](https://github.com/empathyco/x/commit/8ebe98e6e8ba57bfc471a21ef67a24aa6adc8dc0))
+
+
+### Bug Fixes
+
+* Fix @vue/compat alias for x-components imports ([d6d7e2f](https://github.com/empathyco/x/commit/d6d7e2f26e6944af7453c213b8d0a1d28ff359eb))
+
+
+### Build System
+
+* Exclude x-components from pre-bundling in vue3-migration-test ([37b9bcb](https://github.com/empathyco/x/commit/37b9bcbc83bc51132708997497493d71be40ec21))
+
+
+### Code Refactoring
+
+* Use script setup ([89ceb6f](https://github.com/empathyco/x/commit/89ceb6f12971596bc1d4c2baa6fe85e7dc2f4dc4))
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.1.0-alpha.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/CHANGELOG.md b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.1.0-alpha.46](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-04-22)
+
+
+### Features
+
+* export pageLoaderButton component (#1449) ([115f744](https://github.com/empathyco/x/commit/115f7448fc92cee5be4151191d4b1a347fd570a1))
+
+
+
+## [4.1.0-alpha.45](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-04-19)
+
+
+### Features
+
+* **bus:** make `useXBus` get bus from `XPlugin` (#1447) ([c57d1af](https://github.com/empathyco/x/commit/c57d1aff8df162e5b99b78822ba5013b617d4aba))
+
+
+
+## [4.1.0-alpha.44](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-04-19)
+
+
+### Features
+
+* EMP-3849 Create vue3-migration-test package ([399fe51](https://github.com/empathyco/x/commit/399fe5176b8c0a5206ed7da4edf9c54c1219f70b))
+
+
+### Bug Fixes
+
+* Fix @vue/compat alias for x-components imports ([d6d7e2f](https://github.com/empathyco/x/commit/d6d7e2f26e6944af7453c213b8d0a1d28ff359eb))
+* Fix Vue alias for Cypress component testing ([6a71960](https://github.com/empathyco/x/commit/6a71960ffeef4c4b964084c924feac76e25850b5))
+
+
+
 ## [4.1.0-alpha.43](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-04-08)
 
 

diff --git a/packages/x-components/package.json b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "4.1.0-alpha.43",
+  "version": "4.1.0-alpha.46",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

diff --git a/packages/x-components/src/__tests__/utils.ts b/packages/x-components/src/__tests__/utils.ts
@@ -182,21 +182,23 @@ function mergeStates<State extends Dictionary>(
 }
 
 /**
- * Makes a clean install of the {@link XPlugin} into the passed Vue object.
+ * Makes a clean installation of the {@link XPlugin} into the passed Vue object.
  * This also resets the bus, and all the hardcoded dependencies of the XPlugin.
  *
  * @param options - The options for installing the {@link XPlugin}. The
  * {@link XComponentsAdapterDummy}  is added by default.
  * @param localVue - A clone of the Vue constructor to isolate tests.
+ * @param bus - The event bus to use.
  * If not provided, one will be created.
  * @returns An array containing the `xPlugin` singleton and the `localVue` and objects.
  */
 export function installNewXPlugin(
   options: Partial<XPluginOptions> = {},
-  localVue: typeof Vue = createLocalVue()
+  localVue: typeof Vue = createLocalVue(),
+  bus = new XDummyBus()
 ): [XPlugin, typeof Vue] {
   XPlugin.resetInstance();
-  const xPlugin = new XPlugin(new XDummyBus());
+  const xPlugin = new XPlugin(bus);
   const installOptions: XPluginOptions = {
     adapter: XComponentsAdapterDummy,
     ...options

diff --git a/packages/x-components/src/components/index.ts b/packages/x-components/src/components/index.ts
@@ -27,6 +27,7 @@ export { default as LocationProvider } from './location-provider.vue';
 export { NoElement } from './no-element';
 export { default as SlidingPanel } from './sliding-panel.vue';
 export { default as SnippetCallbacks } from './snippet-callbacks.vue';
+export { default as PageLoaderButton } from './page-loader-button.vue';
 
 // Utils
 export * from './decorators/bus.decorators';
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';