diff --git a/packages/x-components/src/main.ts b/packages/x-components/src/main.ts index a6768cfe79..14677833ce 100644 --- a/packages/x-components/src/main.ts +++ b/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(); diff --git a/packages/x-components/src/plugins/x-plugin.ts b/packages/x-components/src/plugins/x-plugin.ts index 867795cfa2..df4fc1cb07 100644 --- a/packages/x-components/src/plugins/x-plugin.ts +++ b/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 { * @internal */ static resetInstance(): void { - cleanGettersProxyCache(); this.instance = undefined; } @@ -232,10 +247,10 @@ export class XPlugin implements PluginObject { */ 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 { 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); } /** diff --git a/packages/x-components/src/store/x.module.ts b/packages/x-components/src/store/x.module.ts index f8e5aab97e..bcdc10fd57 100644 --- a/packages/x-components/src/store/x.module.ts +++ b/packages/x-components/src/store/x.module.ts @@ -36,7 +36,19 @@ export const RootXStoreModule: Module = { 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 }; diff --git a/packages/x-components/src/vue3.vue b/packages/x-components/src/vue3.vue new file mode 100644 index 0000000000..970d8ba772 --- /dev/null +++ b/packages/x-components/src/vue3.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/packages/x-components/src/x-modules/device/components/device-detector.vue b/packages/x-components/src/x-modules/device/components/device-detector.vue index 5428c671c1..6a6bceb930 100644 --- a/packages/x-components/src/x-modules/device/components/device-detector.vue +++ b/packages/x-components/src/x-modules/device/components/device-detector.vue @@ -4,7 +4,7 @@