feat(vue3): wip avoid register x store modules dynamically

packages/x-components/src/main.ts

@@ -1,52 +1,13 @@
-import Vue from 'vue';
-import App from './App.vue';
-import { setupDevtools } from './plugins/devtools/devtools.plugin';
-import router from './router';
+import { platformAdapter } from '@empathyco/x-adapter-platform';
 import { baseInstallXOptions, baseSnippetConfig } from './views/base-config';
+import Vue3 from './vue3.vue';
 import { XInstaller } from './x-installer/x-installer/x-installer';
-import { FilterEntityFactory } from './x-modules/facets/entities/filter-entity.factory';
-import { SingleSelectModifier } from './x-modules/facets/entities/single-select.modifier';
-import { StickyModifier } from './x-modules/facets/entities/sticky.modifier';
-import './tailwind/index.css';
 
-// Vue.config.productionTip = false;
-FilterEntityFactory.instance.registerModifierByFacetId('age_facet', SingleSelectModifier);
-FilterEntityFactory.instance.registerModifierByFacetId(
-  'brand_facet',
-  StickyModifier,
-  SingleSelectModifier
-);
-FilterEntityFactory.instance.registerModifierByFacetId('price', SingleSelectModifier);
-FilterEntityFactory.instance.registerModifierByFilterModelName(
-  'HierarchicalFilter',
-  SingleSelectModifier
-);
+window.initX = baseSnippetConfig;
 
-const installer = new XInstaller({
+new XInstaller({
   ...baseInstallXOptions,
-  app: App,
-  vueOptions: {
-    router
-  },
-  domElement: '#app',
-  onCreateApp: initDevtools
-});
-
-if (window.initX) {
-  installer.init();
-} else {
-  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: any): void {
-  if (process.env.NODE_ENV !== 'production') {
-    setupDevtools(app);
-  }
-}
+  adapter: platformAdapter,
+  app: Vue3,
+  domElement: '#app'
+}).init();

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

@@ -1,20 +1,36 @@
 import { deepMerge } from '@empathyco/x-deep-merge';
 import { forEach, Dictionary } from '@empathyco/x-utils';
 import { App, PluginObject, VueConstructor } from 'vue';
-import Vuex, { createStore, Module, Store } from 'vuex';
+import { createStore, Module, Store } from 'vuex';
 import { XComponentsAdapter } from '@empathyco/x-types';
 import { EventPayload, SubjectPayload, XBus } from '@empathyco/x-bus';
 import { Observable } from 'rxjs';
 import { AnyXStoreModule, RootXStoreState } from '../store/store.types';
-import { cleanGettersProxyCache } from '../store/utils/getters-proxy.utils';
-import { RootXStoreModule } from '../store/x.module';
 import { XEvent, XEventsTypes } from '../wiring/events.types';
 import { AnyWire, WireMetadata } from '../wiring/wiring.types';
+import { deviceXStoreModule } from '../x-modules/device/store/module';
+import { empathizeXStoreModule } from '../x-modules/empathize/store/module';
+import { experienceControlsXStoreModule } from '../x-modules/experience-controls/store/module';
+import { extraParamsXStoreModule } from '../x-modules/extra-params/store/module';
+import { facetsXStoreModule } from '../x-modules/facets/store/module';
+import { historyQueriesXStoreModule } from '../x-modules/history-queries/store/module';
+import { identifierResultsXStoreModule } from '../x-modules/identifier-results/store/module';
+import { nextQueriesXStoreModule } from '../x-modules/next-queries/store/module';
+import { popularSearchesXStoreModule } from '../x-modules/popular-searches/store/module';
+import { queriesPreviewXStoreModule } from '../x-modules/queries-preview/store/module';
+import { querySuggestionsXStoreModule } from '../x-modules/query-suggestions/store/module';
+import { recommendationsXStoreModule } from '../x-modules/recommendations/store/module';
+import { relatedTagsXStoreModule } from '../x-modules/related-tags/store/module';
+import { scrollXStoreModule } from '../x-modules/scroll/store/module';
+import { searchBoxXStoreModule } from '../x-modules/search-box/store/module';
+import { searchXStoreModule } from '../x-modules/search/store/module';
+import { semanticQueriesXStoreModule } from '../x-modules/semantic-queries/store/module';
+import { taggingXStoreModule } from '../x-modules/tagging/store/module';
+import { urlXStoreModule } from '../x-modules/url/store/module';
 import { AnyXModule, XModuleName } from '../x-modules/x-modules.types';
 import { sendWiringToDevtools } from './devtools/wiring.devtools';
 import { bus } from './x-bus';
 import { registerStoreEmitters } from './x-emitters';
-import { createXComponentAPIMixin } from './x-plugin.mixin';
 import { AnyXStoreModuleOption, XModuleOptions, XPluginOptions } from './x-plugin.types';
 import { assertXPluginOptionsAreValid } from './x-plugin.utils';
 
@@ -182,7 +198,6 @@ export class XPlugin implements PluginObject<XPluginOptions> {
    * @internal
    */
   static resetInstance(): void {
-    cleanGettersProxyCache();
     this.instance = undefined;
   }
 
@@ -232,10 +247,10 @@ export class XPlugin implements PluginObject<XPluginOptions> {
    */
   protected registerXModule(xModule: AnyXModule): void {
     if (!this.installedXModules.has(xModule.name)) {
-      const customizedXModule = this.customizeXModule(xModule);
-      this.registerStoreModule(customizedXModule);
-      this.registerStoreEmitters(customizedXModule);
-      this.registerWiring(customizedXModule);
+      // const customizedXModule = this.customizeXModule(xModule);
+      // this.registerStoreModule(customizedXModule);
+      this.registerStoreEmitters(xModule);
+      this.registerWiring(xModule);
       // The wiring must be registered after the store emitters
       // to allow lazy loaded modules work properly.
       this.installedXModules.add(xModule.name);
@@ -361,13 +376,51 @@ export class XPlugin implements PluginObject<XPluginOptions> {
     this.store =
       this.options.store ??
       createStore({
-        strict: process.env.NODE_ENV !== 'production'
+        strict: process.env.NODE_ENV !== 'production',
+        modules: {
+          x: {
+            namespaced: true,
+            state: () => ({ test: {} }),
+            mutations: {
+              increment(state: any) {
+                const t0 = performance.now();
+                Array.from(Array(210).keys()).forEach(key => {
+                  console.log(key);
+                  state.test[key] = { a: key };
+                });
+                const t1 = performance.now();
+                console.log(`Loop of 210 with assignation took ${(t1 - t0) / 1000} seconds.`);
+              }
+            },
+            modules: {
+              device: { namespaced: true, ...deviceXStoreModule },
+              empathize: { namespaced: true, ...empathizeXStoreModule },
+              extraParams: { namespaced: true, ...extraParamsXStoreModule },
+              facets: { namespaced: true, ...facetsXStoreModule },
+              historyQueries: { namespaced: true, ...historyQueriesXStoreModule },
+              identifierResults: { namespaced: true, ...identifierResultsXStoreModule },
+              nextQueries: { namespaced: true, ...nextQueriesXStoreModule },
+              popularSearches: { namespaced: true, ...popularSearchesXStoreModule },
+              queriesPreview: { namespaced: true, ...queriesPreviewXStoreModule },
+              querySuggestions: { namespaced: true, ...querySuggestionsXStoreModule },
+              recommendations: { namespaced: true, ...recommendationsXStoreModule },
+              relatedTags: { namespaced: true, ...relatedTagsXStoreModule },
+              scroll: { namespaced: true, ...scrollXStoreModule },
+              search: { namespaced: true, ...searchXStoreModule },
+              searchBox: { namespaced: true, ...searchBoxXStoreModule },
+              semanticQueries: { namespaced: true, ...semanticQueriesXStoreModule },
+              tagging: { namespaced: true, ...taggingXStoreModule },
+              url: { namespaced: true, ...urlXStoreModule },
+              experienceControls: { namespaced: true, ...experienceControlsXStoreModule }
+            }
+          }
+        } as any
       });
     // if (!this.options.store) {
     //   this.vue.prototype.$store = this.store;
     // }
     this.vue.use(this.store);
-    this.store.registerModule('x', RootXStoreModule);
+    // this.store.registerModule('x', RootXStoreModule);
   }
 
   /**

packages/x-components/src/store/x.module.ts

@@ -36,7 +36,19 @@ export const RootXStoreModule: Module<XModuleState, any> = {
     semanticQueries: null,
     tagging: null,
     url: null,
-    experienceControls: null
+    experienceControls: null,
+    test: {}
   }),
+  mutations: {
+    increment(state) {
+      const t0 = performance.now();
+      Array.from(Array(210).keys()).forEach(key => {
+        console.log(key);
+        (state as any).test[key] = { a: key };
+      });
+      const t1 = performance.now();
+      console.log(`Loop of 210 with assignation took ${(t1 - t0) / 1000} seconds.`);
+    }
+  },
   namespaced: true
 };

packages/x-components/src/vue3.vue

@@ -0,0 +1,54 @@
+<template>
+  <SnippetConfigExtraParams :values="initialExtraParams" />
+  <UrlHandler query="q" store="store" />
+  <OpenMainModal>Start</OpenMainModal>
+  <MainModal>
+    <SearchInput />
+    <ClearSearchInput />
+    <SortPickerList :items="sortValues" #default="{ item }">
+      {{ item || 'default' }}
+    </SortPickerList>
+
+    <Facets #default="{ facet }">
+      <strong>{{ facet.label }}</strong>
+      <span v-for="filter in facet.filters" style="font-size: 8px">{{ filter.label }}//</span>
+    </Facets>
+
+    <ResultsList>
+      <BaseVariableColumnGrid :columns="12">
+        <template #result="{ item: result }">
+          <BaseResultImage :result="result" />
+          <span>{{ result.name }}</span>
+          <span>{{ result.price.value }}€</span>
+        </template>
+      </BaseVariableColumnGrid>
+    </ResultsList>
+  </MainModal>
+</template>
+
+<script setup lang="ts">
+  import { useStore } from 'vuex';
+  import BaseVariableColumnGrid from './components/base-variable-column-grid.vue';
+  import MainModal from './components/modals/main-modal.vue';
+  import OpenMainModal from './components/modals/open-main-modal.vue';
+  import SnippetConfigExtraParams from './x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import Facets from './x-modules/facets/components/facets/facets.vue';
+  import ClearSearchInput from './x-modules/search-box/components/clear-search-input.vue';
+  import SearchInput from './x-modules/search-box/components/search-input.vue';
+  import ResultsList from './x-modules/search/components/results-list.vue';
+  import BaseResultImage from './components/result/base-result-image.vue';
+  import SortPickerList from './x-modules/search/components/sort-picker-list.vue';
+  import UrlHandler from './x-modules/url/components/url-handler.vue';
+
+  const initialExtraParams = { store: 'Portugal' };
+  const sortValues = ['', 'price asc', 'price desc'];
+
+  const store = useStore();
+  store.commit('x/increment');
+</script>
+
+<style>
+  ul {
+    padding: 0;
+  }
+</style>

packages/x-components/src/x-modules/device/components/device-detector.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts">
   import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';
-  import GlobalEvents from 'vue-global-events';
+  import { GlobalEvents } from 'vue-global-events';
   import { throttle } from '../../../utils/throttle';
   import { deviceXModule } from '../x-module';
   import { useXBus } from '../../../composables/use-x-bus';

packages/x-components/src/x-modules/facets/store/module.ts

@@ -1,5 +1,4 @@
 import { Facet } from '@empathyco/x-types';
-import Vue from 'vue';
 import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
 import { setQuery } from '../../../store/utils/query.utils';
 import { facets } from './getters/facets.getter';
@@ -37,7 +36,19 @@ export const facetsXStoreModule: FacetsXStoreModule = {
       state.filters[newFilter.id] = newFilter;
     },
     setFilters(state, filters) {
-      filters.forEach(filter => (state.filters[filter.id] = filter));
+      console.log('filters.length', filters.length);
+      const t0 = performance.now();
+      const a = filters.reduce((acc, current) => {
+        acc[current.id] = current;
+        return acc;
+      }, {} as Record<string, any>);
+      state.filters = {
+        ...state.filters,
+        ...a
+      };
+      // filters.forEach(filter => (state.filters[filter.id] = filter));
+      const t1 = performance.now();
+      console.log(`Loop of FILTERS with assignation took ${(t1 - t0) / 1000} seconds.`);
     },
     setPreselectedFilters(state, filters) {
       state.preselectedFilters = filters;
@@ -46,7 +57,11 @@ export const facetsXStoreModule: FacetsXStoreModule = {
       delete state.filters[id];
     },
     removeFilters(state, filters) {
-      filters.forEach(({ id }) => delete state.filters[id]);
+      const copy = { ...state.filters };
+      filters.forEach(({ id }) => delete copy[id]);
+
+      state.filters = copy;
+      // filters.forEach(({ id }) => delete state.filters[id]);
     },
     setFacetGroup(state, { facetId, groupId }: FacetGroupEntry) {
       state.groups[facetId] = groupId;

packages/x-components/src/x-modules/search/store/module.ts

@@ -33,7 +33,8 @@ export const searchXStoreModule: SearchXStoreModule = {
     },
     status: 'initial',
     isNoResults: false,
-    fromNoResultsWithFilters: false
+    fromNoResultsWithFilters: false,
+    test: {}
   }),
   getters: {
     request,
@@ -53,6 +54,13 @@ export const searchXStoreModule: SearchXStoreModule = {
     setQuery,
     setResults(state, results) {
       state.results = results;
+      const t0 = performance.now();
+      Array.from(Array(210).keys()).forEach(key => {
+        console.log(key);
+        state.test[key] = { a: key };
+      });
+      const t1 = performance.now();
+      console.log(`Loop of 210 with assignation took ${(t1 - t0) / 1000} seconds.`);
     },
     setPartialResults(state, partialResults) {
       state.partialResults = partialResults;

packages/x-components/vite.config.ts

@@ -1,7 +1,6 @@
 import { resolve } from 'path';
 import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
-import Inspector from 'vite-plugin-vue-inspector';
 
 export const vueDocsPlugin = {
   name: 'vue-docs',
@@ -11,7 +10,7 @@ export const vueDocsPlugin = {
 };
 
 export default defineConfig({
-  plugins: [vue(), vueDocsPlugin, Inspector()],
+  plugins: [vue(), vueDocsPlugin],
   resolve: {
     alias: {
       vue: resolve(__dirname, 'node_modules/vue')