initial commit

packages/x-components/package.json

@@ -82,19 +82,15 @@
     "js-md5": "^0.8.3",
     "rxjs": "~7.8.0",
     "tslib": "~2.6.0",
-    "vue-class-component": "~7.2.6",
-    "vue-global-events": "~1.2.1",
-    "vue-property-decorator": "~8.5.0",
-    "vue-runtime-helpers": "~1.1.2"
+    "vue-global-events": "~3.0.1"
   },
   "peerDependencies": {
-    "vue": "~2.7.0",
-    "vuex": "^3.0.0"
+    "vue": "~3.4.31",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@badeball/cypress-cucumber-preprocessor": "~20.0.0",
     "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
-    "@cypress/vue2": "~2.0.1",
     "@empathyco/x-tailwindcss": "^1.2.0-alpha.2",
     "@microsoft/api-documenter": "~7.23.0",
     "@microsoft/api-extractor": "~7.39.0",
@@ -105,9 +101,7 @@
     "@types/jest": "~27.5.0",
     "@types/node": "~18.19.0",
     "@types/testing-library__jest-dom": "~5.14.5",
-    "@vitejs/plugin-vue2": "^2.2.0",
-    "@vue/test-utils": "~1.0.3",
-    "@vue/vue2-jest": "~27.0.0-alpha.3",
+    "@vue/test-utils": "~2.4.6",
     "autoprefixer": "~10.4.4",
     "convert-source-map": "~2.0.0",
     "cypress": "~13.6.0",
@@ -132,12 +126,11 @@
     "ts-node": "~10.9.1",
     "typescript": "~4.9.4",
     "vite": "^4.5.0",
-    "vite-plugin-vue-inspector": "^4.0.0",
-    "vue": "~2.7.14",
-    "vue-docgen-cli": "~4.67.0",
-    "vue-router": "~3.6.5",
-    "vue-template-compiler": "~2.7.14",
-    "vuex": "~3.6.2"
+    "vite-plugin-vue-inspector": "^5.1.2",
+    "vue": "~3.4.31",
+    "vue-docgen-cli": "~4.79.0",
+    "vue-router": "~4.4.0",
+    "vuex": "~4.1.0"
   },
   "publishConfig": {
     "access": "public",

packages/x-components/src/App.vue

@@ -2,16 +2,18 @@
   <div class="app">
     <nav>
       <!-- Intentionally using an `a` element instead of `router-link` to perform a full refresh -->
-      <a v-for="route in $router.options.routes" :key="route.name" class="link" :href="route.path">
+      <a v-for="route in $router?.options.routes" :key="route.name" class="link" :href="route.path">
         {{ route.name }}
       </a>
     </nav>
-    <router-view />
+    <RouterView />
   </div>
 </template>
 
-<script>
-  export default {};
+<script setup>
+  import { useRouter } from 'vue-router';
+  const $router = useRouter();
+  console.log($router);
 </script>
 
 <style lang="scss">

packages/x-components/src/components/column-picker/base-column-picker-list.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="x-column-picker-list x-button-group" data-test="column-picker-list" role="list">
-    <template v-for="({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses">
+    <template v-for="({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses" :key="column">
       <BaseEventButton
-        :key="column"
         class="x-column-picker-list__button x-button"
         :class="[buttonClass, cssClasses]"
         data-test="column-picker-button"

packages/x-components/src/components/global-x-bus.vue

@@ -13,14 +13,16 @@
    */
   export default defineComponent({
     name: 'GlobalXBus',
-    setup(_, { listeners, slots }) {
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
       const xBus = useXBus();
 
       /**
        * Handles a subscription to all the events provided in the listeners with the function that
        * will execute the callback.
        */
-      Object.entries(listeners as XEventListeners).forEach(([eventName, callback]) => {
+      console.log(attrs);
+      Object.entries(attrs.listeners as XEventListeners).forEach(([eventName, callback]) => {
         xBus.on(eventName as XEvent, true).subscribe(({ eventPayload, metadata }) => {
           callback(eventPayload as never, metadata);
         });

packages/x-components/src/components/index.ts

@@ -30,10 +30,10 @@ export { default as SnippetCallbacks } from './snippet-callbacks.vue';
 export { default as PageLoaderButton } from './page-loader-button.vue';
 
 // Utils
-export * from './decorators/bus.decorators';
-export * from './decorators/debounce.decorators';
-export * from './decorators/injection.consts';
-export * from './decorators/injection.decorators';
-export * from './decorators/store.decorators';
+// export * from './decorators/bus.decorators';
+// export * from './decorators/debounce.decorators';
+// export * from './decorators/injection.consts';
+// export * from './decorators/injection.decorators';
+// export * from './decorators/store.decorators';
 export * from './x-component.mixin';
 export * from './x-component.utils';

packages/x-components/src/components/snippet-callbacks.vue

@@ -1,5 +1,5 @@
 <template>
-  <GlobalXBus v-on="eventListeners" />
+  <GlobalXBus v-on="eventListeners" class="x-w-full"/>
 </template>
 
 <script lang="ts">

packages/x-components/src/composables/use-store.ts

@@ -1,5 +1,4 @@
-import { getCurrentInstance } from 'vue';
-import { Store } from 'vuex';
+import { useStore as useStoreVuex, Store } from 'vuex';
 
 /**
  * Function which returns the `$store` object from the current component instance.
@@ -9,5 +8,5 @@ import { Store } from 'vuex';
  * @public
  */
 export function useStore(): Store<any> {
-  return (getCurrentInstance()?.proxy as { $store: Store<any> }).$store;
+  return useStoreVuex();
 }

packages/x-components/src/main.ts

@@ -9,7 +9,7 @@ import { SingleSelectModifier } from './x-modules/facets/entities/single-select.
 import { StickyModifier } from './x-modules/facets/entities/sticky.modifier';
 import './tailwind/index.css';
 
-Vue.config.productionTip = false;
+// Vue.config.productionTip = false;
 FilterEntityFactory.instance.registerModifierByFacetId('age_facet', SingleSelectModifier);
 FilterEntityFactory.instance.registerModifierByFacetId(
   'brand_facet',
@@ -35,15 +35,17 @@ const installer = new XInstaller({
 if (window.initX) {
   installer.init();
 } else {
-  installer.init(baseSnippetConfig);
+  installer.init(baseSnippetConfig).then(({ app }) => {
+    app.use(router);
+  });
 }
 
 /**
  * If an app is provided, initialise the devtools.
  *
  * @param app - The root Vue instance of the application.
  */
-function initDevtools(app: Vue): void {
+function initDevtools(app: any): void {
   if (process.env.NODE_ENV !== 'production') {
     setupDevtools(app);
   }

packages/x-components/src/plugins/x-plugin.ts

@@ -1,7 +1,7 @@
 import { deepMerge } from '@empathyco/x-deep-merge';
 import { forEach, Dictionary } from '@empathyco/x-utils';
 import { PluginObject, VueConstructor } from 'vue';
-import Vuex, { Module, Store } from 'vuex';
+import Vuex, { createStore, Module, Store } from 'vuex';
 import { XComponentsAdapter } from '@empathyco/x-types';
 import { EventPayload, SubjectPayload, XBus } from '@empathyco/x-bus';
 import { Observable } from 'rxjs';
@@ -360,12 +360,12 @@ export class XPlugin implements PluginObject<XPluginOptions> {
     // will simply ignore it
     this.store =
       this.options.store ??
-      new Store({
+      createStore({
         strict: process.env.NODE_ENV !== 'production'
       });
-    if (!this.options.store) {
-      this.vue.prototype.$store = this.store;
-    }
+    // if (!this.options.store) {
+    //   this.vue.prototype.$store = this.store;
+    // }
     this.store.registerModule('x', RootXStoreModule);
   }
 

packages/x-components/src/router.ts

@@ -1,9 +1,7 @@
-import Vue from 'vue';
-import VueRouter, { RouteConfig } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 
-Vue.use(VueRouter);
 
-const routes: RouteConfig[] = [
+const routes = [
   {
     path: '/',
     name: 'Home',
@@ -18,11 +16,11 @@ const routes: RouteConfig[] = [
 
 if (process.env.NODE_ENV !== 'production') {
   routes.push(
-    {
-      path: '/xds',
-      name: 'XDS',
-      component: () => import('@empathyco/x-tailwindcss/showcase').then(m => m.XdsShowcase)
-    },
+  //   {
+  //     path: '/xds',
+  //     name: 'XDS',
+  //     component: () => import('@empathyco/x-tailwindcss/showcase').then(m => m.XdsShowcase)
+  //   },
     {
       path: '/result-app',
       name: 'result-app',
@@ -53,8 +51,8 @@ if (process.env.NODE_ENV !== 'production') {
   );
 }
 
-const router = new VueRouter({
-  mode: 'history',
+const router = createRouter({
+  history: createWebHistory(),
   routes
 });
 

packages/x-components/src/store/utils/config-store.utils.ts

@@ -1,5 +1,3 @@
-import Vue from 'vue';
-
 /**
  * Config mutations, containing a method to change the current config and other to merge
  * a new one.
@@ -30,7 +28,7 @@ export interface ConfigMutations<T extends { config: T['config'] }> {
  * @public
  */
 export function setConfig<T extends { config: T['config'] }>(state: T, config: T['config']): void {
-  Vue.set(state, 'config', config);
+  state['config'] = config;
 }
 
 /**

packages/x-components/src/x-installer/x-installer/types.ts

@@ -1,9 +1,10 @@
-import { ComponentOptions, PluginObject, VueConstructor } from 'vue';
+import { ComponentOptions, Plugin, VueConstructor } from 'vue';
 import { XBus } from '@empathyco/x-bus';
 import { XPluginOptions } from '../../plugins/x-plugin.types';
 import { NormalisedSnippetConfig, XAPI } from '../api/api.types';
 import { WireMetadata, XEventsTypes } from '../../wiring/index';
 
+
 /**
  * Interface for the parameter of the constructor of {@link XInstaller} function. It is an extended
  * version of {@link XPluginOptions}.
@@ -35,7 +36,7 @@ export interface InstallXOptions<API extends XAPI = XAPI> extends XPluginOptions
    * The XPlugin which will be installed. If not passed, an instance of {@link XPlugin} will be
    * installed.
    */
-  plugin?: PluginObject<XPluginOptions>;
+  plugin?: Plugin<XPluginOptions>;
   /**
    * The Vue instance used to install the plugin and to create the Application. If not
    * passed the default Vue instance is used. This can be useful to use the `localVue`
@@ -114,5 +115,5 @@ export interface InitWrapper {
   /** The {@link @empathyco/x-bus#XBus} used in the {@link XPlugin}. */
   bus: XBus<XEventsTypes, WireMetadata>;
   /** The installed {@link XPlugin} instance. */
-  plugin: PluginObject<XPluginOptions>;
+  plugin: Plugin<XPluginOptions>;
 }