From 74c03205650c2cf1ae77f1949ee78adb708037d3 Mon Sep 17 00:00:00 2001 From: tongsonbarbs Date: Wed, 5 Mar 2025 11:09:37 +0800 Subject: [PATCH] reverts --- .../core/__mocks__/templates-discovering.ts | 1 - .../src/core/children-processing.ts | 75 ++++---- packages/devextreme-vue/src/core/component.ts | 4 - packages/devextreme-vue/src/core/config.ts | 6 +- .../src/core/configuration-component.ts | 131 +++++++------ .../devextreme-vue/src/core/configuration.ts | 3 - packages/devextreme-vue/src/core/constants.ts | 4 +- .../src/core/extension-component.ts | 39 ++-- packages/devextreme-vue/src/core/helpers.ts | 108 ++++++----- packages/devextreme-vue/src/core/index.ts | 12 +- .../src/core/templates-discovering.ts | 177 +++++++++--------- .../src/core/templates-manager.ts | 177 +++++++++--------- packages/devextreme-vue/src/core/version.ts | 6 +- .../devextreme-vue/src/core/vue-helper.ts | 2 - 14 files changed, 362 insertions(+), 383 deletions(-) diff --git a/packages/devextreme-vue/src/core/__mocks__/templates-discovering.ts b/packages/devextreme-vue/src/core/__mocks__/templates-discovering.ts index 0d7b814b3548..052d6fe70e6a 100644 --- a/packages/devextreme-vue/src/core/__mocks__/templates-discovering.ts +++ b/packages/devextreme-vue/src/core/__mocks__/templates-discovering.ts @@ -1,2 +1 @@ -/* eslint-disable no-undef */ export const discover = jest.fn(() => ({})); diff --git a/packages/devextreme-vue/src/core/children-processing.ts b/packages/devextreme-vue/src/core/children-processing.ts index 495335f6b577..8b0d04fc122c 100644 --- a/packages/devextreme-vue/src/core/children-processing.ts +++ b/packages/devextreme-vue/src/core/children-processing.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/named */ import { PatchFlags } from '@vue/shared'; import { VNode } from 'vue'; import Configuration from './configuration'; @@ -6,54 +5,54 @@ import { IConfigurable, IConfigurationComponent } from './configuration-componen import { configurationChildren, getComponentInfo, getNormalizedProps } from './vue-helper'; function pullAllChildren(directChildren: VNode[], allChildren: VNode[], config: Configuration): void { - if(!directChildren || directChildren.length === 0) { return; } + if (!directChildren || directChildren.length === 0) { return; } - pullConfigComponents(directChildren, allChildren, config); + pullConfigComponents(directChildren, allChildren, config); } export function isFragment(node: any): boolean { - const { patchFlag } = node; - return patchFlag === PatchFlags.KEYED_FRAGMENT + const { patchFlag } = node; + return patchFlag === PatchFlags.KEYED_FRAGMENT || patchFlag === PatchFlags.UNKEYED_FRAGMENT || patchFlag === PatchFlags.STABLE_FRAGMENT || patchFlag === PatchFlags.BAIL; } export function pullConfigComponents(children: VNode[], nodes: VNode[], ownerConfig: Configuration): void { - children.forEach((node) => { - if(isFragment(node) && Array.isArray(node.children)) { - pullConfigComponents(node.children as any as VNode[], nodes, ownerConfig); - } - if(!isFragment(node)) { - nodes.push(node); - } - if(!node) { return; } - - const componentInfo = getComponentInfo(node) as any as IConfigurationComponent; - if(!componentInfo || !componentInfo.$_optionName) { return; } - - const componentChildren = configurationChildren(node); - const initialValues = { - ...componentInfo.$_predefinedProps, - ...getNormalizedProps(node.props || {}), - }; - - const config = ownerConfig.createNested( - componentInfo.$_optionName, - initialValues, - componentInfo.$_isCollectionItem, - componentInfo.$_expectedChildren, - ); - - (node as any as IConfigurable).$_config = config; - (node as any as IConfigurable).$_innerChanges = {}; - - if(componentChildren) { - pullConfigComponents(componentChildren, nodes, config); - } - }); + children.forEach((node) => { + if (isFragment(node) && Array.isArray(node.children)) { + pullConfigComponents(node.children as any as VNode[], nodes, ownerConfig); + } + if (!isFragment(node)) { + nodes.push(node); + } + if (!node) { return; } + + const componentInfo = getComponentInfo(node) as any as IConfigurationComponent; + if (!componentInfo || !componentInfo.$_optionName) { return; } + + const componentChildren = configurationChildren(node); + const initialValues = { + ...componentInfo.$_predefinedProps, + ...getNormalizedProps(node.props || {}), + }; + + const config = ownerConfig.createNested( + componentInfo.$_optionName, + initialValues, + componentInfo.$_isCollectionItem, + componentInfo.$_expectedChildren, + ); + + (node as any as IConfigurable).$_config = config; + (node as any as IConfigurable).$_innerChanges = {}; + + if (componentChildren) { + pullConfigComponents(componentChildren, nodes, config); + } + }); } export { - pullAllChildren, + pullAllChildren, }; diff --git a/packages/devextreme-vue/src/core/component.ts b/packages/devextreme-vue/src/core/component.ts index c32d0c6e186d..a4d13fe2cfce 100644 --- a/packages/devextreme-vue/src/core/component.ts +++ b/packages/devextreme-vue/src/core/component.ts @@ -1,7 +1,3 @@ -/* eslint-disable no-prototype-builtins */ -/* eslint-disable spellcheck/spell-checker */ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable import/named */ import { ComponentPublicInstance, defineComponent, h, VNode, } from 'vue'; diff --git a/packages/devextreme-vue/src/core/config.ts b/packages/devextreme-vue/src/core/config.ts index 9c9026baf9f6..d255fb807db0 100644 --- a/packages/devextreme-vue/src/core/config.ts +++ b/packages/devextreme-vue/src/core/config.ts @@ -3,15 +3,15 @@ interface IOptions { } let config: IOptions = { - deepWatch: false, + deepWatch: false, }; function setOptions(options: Partial): void { - config = { ...config, ...options }; + config = { ...config, ...options }; } function getOption(optionName: TName): IOptions[TName] { - return config[optionName]; + return config[optionName]; } export default setOptions; diff --git a/packages/devextreme-vue/src/core/configuration-component.ts b/packages/devextreme-vue/src/core/configuration-component.ts index 4e949c4c6d14..e97853923a81 100644 --- a/packages/devextreme-vue/src/core/configuration-component.ts +++ b/packages/devextreme-vue/src/core/configuration-component.ts @@ -1,4 +1,3 @@ -// eslint-disable-next-line import/named import { ComponentPublicInstance, defineComponent } from 'vue'; import { getNodeOptions, getNodeTypeOfComponent } from './vue-helper'; @@ -26,87 +25,87 @@ interface IComponentInfo { } function getConfig(vueInstance: Pick): Configuration | undefined { - const componentOptions = getNodeOptions(vueInstance) as any as IConfigurable; - if(!componentOptions) { - return; - } + const componentOptions = getNodeOptions(vueInstance) as any as IConfigurable; + if (!componentOptions) { + return; + } - return componentOptions.$_config || (vueInstance as any as IConfigurable).$_config; + return componentOptions.$_config || (vueInstance as any as IConfigurable).$_config; } function getInnerChanges(vueInstance: Pick): any { - const componentOptions = getNodeOptions(vueInstance) as any as IConfigurable; - if(!componentOptions) { - return; - } + const componentOptions = getNodeOptions(vueInstance) as any as IConfigurable; + if (!componentOptions) { + return; + } - return componentOptions.$_innerChanges || (vueInstance as any as IConfigurable).$_innerChanges; + return componentOptions.$_innerChanges || (vueInstance as any as IConfigurable).$_innerChanges; } function initOptionChangedFunc( - config, - props: any, - vueInstance: Pick, - innerChanges: any, + config, + props: any, + vueInstance: Pick, + innerChanges: any, ) { - if(!config) { - return; - } - - config.init(Object.keys(props)); - if(vueInstance) { - setEmitOptionChangedFunc(config, vueInstance, innerChanges); - } + if (!config) { + return; + } + + config.init(Object.keys(props)); + if (vueInstance) { + setEmitOptionChangedFunc(config, vueInstance, innerChanges); + } } function getComponentInfo({ name, isCollectionItem, ownerConfig }: Configuration, removed?: boolean): IComponentInfo { - const parentPath = ownerConfig && ownerConfig.fullPath; - const optionPath = name && parentPath ? `${parentPath}.${name}` : name || ''; - - return { - optionPath, - isCollection: isCollectionItem, - removed, - }; + const parentPath = ownerConfig && ownerConfig.fullPath; + const optionPath = name && parentPath ? `${parentPath}.${name}` : name || ''; + + return { + optionPath, + isCollection: isCollectionItem, + removed, + }; } function initDxConfiguration() { - return defineComponent({ - beforeMount() { - const thisComponent = this as any as IConfigurationComponent; - const config = getConfig(thisComponent) as Configuration; - const innerChanges = getInnerChanges(thisComponent); - initOptionChangedFunc(config, getNodeTypeOfComponent(thisComponent).props, thisComponent, innerChanges); - bindOptionWatchers(config, this, innerChanges); - }, - - mounted() { - if((this.$parent as any).$_instance) { - (this.$parent as any).$_config.componentsCountChanged - .push(getComponentInfo(getConfig(this as any as IConfigurationComponent) as Configuration)); - } - }, - - beforeUnmount() { - const config = getConfig(this as any as IConfigurationComponent) as Configuration; - if(config) { - (this.$parent as any).$_config.componentsCountChanged - .push(getComponentInfo(config, true)); - } - }, - - render(): null { - return null; - }, - }); + return defineComponent({ + beforeMount() { + const thisComponent = this as any as IConfigurationComponent; + const config = getConfig(thisComponent) as Configuration; + const innerChanges = getInnerChanges(thisComponent); + initOptionChangedFunc(config, getNodeTypeOfComponent(thisComponent).props, thisComponent, innerChanges); + bindOptionWatchers(config, this, innerChanges); + }, + + mounted() { + if ((this.$parent as any).$_instance) { + (this.$parent as any).$_config.componentsCountChanged + .push(getComponentInfo(getConfig(this as any as IConfigurationComponent) as Configuration)); + } + }, + + beforeUnmount() { + const config = getConfig(this as any as IConfigurationComponent) as Configuration; + if (config) { + (this.$parent as any).$_config.componentsCountChanged + .push(getComponentInfo(config, true)); + } + }, + + render(): null { + return null; + }, + }); } export { - initDxConfiguration, - IComponentInfo, - IConfigurable, - IConfigurationComponent, - initOptionChangedFunc, - getConfig, - getInnerChanges, + initDxConfiguration, + IComponentInfo, + IConfigurable, + IConfigurationComponent, + initOptionChangedFunc, + getConfig, + getInnerChanges, }; diff --git a/packages/devextreme-vue/src/core/configuration.ts b/packages/devextreme-vue/src/core/configuration.ts index bdcf2b380811..fbbaec1d6559 100644 --- a/packages/devextreme-vue/src/core/configuration.ts +++ b/packages/devextreme-vue/src/core/configuration.ts @@ -1,6 +1,3 @@ -/* eslint-disable spellcheck/spell-checker */ -/* eslint-disable no-prototype-builtins */ -/* eslint-disable no-restricted-syntax */ /* eslint-disable import/named */ import { ComponentPublicInstance as IVue, toRaw, VNode, VNodeProps, diff --git a/packages/devextreme-vue/src/core/constants.ts b/packages/devextreme-vue/src/core/constants.ts index d14ecc91c068..ce677ff26889 100644 --- a/packages/devextreme-vue/src/core/constants.ts +++ b/packages/devextreme-vue/src/core/constants.ts @@ -2,6 +2,6 @@ const DX_TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper'; const DX_REMOVE_EVENT = 'dxremove'; export { - DX_TEMPLATE_WRAPPER_CLASS, - DX_REMOVE_EVENT, + DX_TEMPLATE_WRAPPER_CLASS, + DX_REMOVE_EVENT, }; diff --git a/packages/devextreme-vue/src/core/extension-component.ts b/packages/devextreme-vue/src/core/extension-component.ts index 1d30b69f25be..a975509c502e 100644 --- a/packages/devextreme-vue/src/core/extension-component.ts +++ b/packages/devextreme-vue/src/core/extension-component.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/named */ import { defineComponent } from 'vue'; import { IBaseComponent, initBaseComponent } from './component'; import { getNodeOptions } from './vue-helper'; @@ -13,28 +12,28 @@ interface IExtensionComponentNode { } function initDxExtensionComponent() { - return defineComponent({ - extends: initBaseComponent(), - mounted() { - this.$el.setAttribute('isExtension', 'true'); - const nodeOptions = getNodeOptions(this); - (nodeOptions as any as IExtension).$_isExtension = true; - (nodeOptions as any as IExtension).$_attachTo = this.attachTo.bind(this); - if(nodeOptions && (nodeOptions as any as IExtensionComponentNode).$_hasOwner) { return; } + return defineComponent({ + extends: initBaseComponent(), + mounted() { + this.$el.setAttribute('isExtension', 'true'); + const nodeOptions = getNodeOptions(this); + (nodeOptions as any as IExtension).$_isExtension = true; + (nodeOptions as any as IExtension).$_attachTo = this.attachTo.bind(this); + if (nodeOptions && (nodeOptions as any as IExtensionComponentNode).$_hasOwner) { return; } - this.attachTo(this.$el); - }, + this.attachTo(this.$el); + }, - methods: { - attachTo(element: any) { - (this as any as IBaseComponent).$_createWidget(element); - }, - }, - }); + methods: { + attachTo(element: any) { + (this as any as IBaseComponent).$_createWidget(element); + }, + }, + }); } export { - initDxExtensionComponent, - IExtension, - IExtensionComponentNode, + initDxExtensionComponent, + IExtension, + IExtensionComponentNode, }; diff --git a/packages/devextreme-vue/src/core/helpers.ts b/packages/devextreme-vue/src/core/helpers.ts index f18c86069cb3..edb3d1968024 100644 --- a/packages/devextreme-vue/src/core/helpers.ts +++ b/packages/devextreme-vue/src/core/helpers.ts @@ -1,98 +1,96 @@ -/* eslint-disable no-prototype-builtins */ -/* eslint-disable no-restricted-syntax */ export function getTemplatePropName(props: Record | null, templateName: string): string { - for(const propName in props) { - if(props[propName] === templateName) { - return propName; - } + for (const propName in props) { + if (props[propName] === templateName) { + return propName; } + } - return templateName; + return templateName; } export function uppercaseFirst(value: string): string { - return value[0].toUpperCase() + value.substr(1); + return value[0].toUpperCase() + value.substr(1); } export function lowercaseFirst(value: string): string { - return value[0].toLowerCase() + value.substr(1); + return value[0].toLowerCase() + value.substr(1); } export function camelize(value: string): string { - return lowercaseFirst(value.split('-').map((v) => uppercaseFirst(v)).join('')); + return lowercaseFirst(value.split('-').map((v) => uppercaseFirst(v)).join('')); } export function toComparable(value: any): any { - return value instanceof Date ? value.getTime() : value; + return value instanceof Date ? value.getTime() : value; } export function isEqual(value1, value2) { - if(toComparable(value1) === toComparable(value2)) { - return true; - } + if (toComparable(value1) === toComparable(value2)) { + return true; + } - if(Array.isArray(value1) && Array.isArray(value2)) { - return value1.length === 0 && value2.length === 0; - } + if (Array.isArray(value1) && Array.isArray(value2)) { + return value1.length === 0 && value2.length === 0; + } - return false; + return false; } export function forEachChildNode( - el: Node, - callback: (child: ReturnType) => void, + el: Node, + callback: (child: ReturnType) => void, ) { - Array.prototype.slice.call(el.childNodes).forEach(callback); + Array.prototype.slice.call(el.childNodes).forEach(callback); } export function allKeysAreEqual(obj1: object, obj2: object) { - const obj1Keys = Object.keys(obj1); + const obj1Keys = Object.keys(obj1); - if(obj1Keys.length !== Object.keys(obj2).length) { - return false; - } + if (obj1Keys.length !== Object.keys(obj2).length) { + return false; + } - for(const key of obj1Keys) { - if(!obj2.hasOwnProperty(key)) { - return false; - } + for (const key of obj1Keys) { + if (!obj2.hasOwnProperty(key)) { + return false; } + } - return true; + return true; } export function getOptionValue(options, optionPath) { - let value = options; - - optionPath.split('.').forEach((p) => { - const optionInfo = getOptionInfo(p); - if(value) { - value = optionInfo.isCollection - ? value[optionInfo.name] && value[optionInfo.name][optionInfo.index] - : value[optionInfo.name]; - } - }); - - return value; + let value = options; + + optionPath.split('.').forEach((p) => { + const optionInfo = getOptionInfo(p); + if (value) { + value = optionInfo.isCollection + ? value[optionInfo.name] && value[optionInfo.name][optionInfo.index] + : value[optionInfo.name]; + } + }); + + return value; } export function getOptionInfo(name: string): IOptionInfo | ICollectionOptionInfo { - const parts = name.split('['); - - if(parts.length === 1) { - return { - isCollection: false, - name, - fullName: name, - }; - } + const parts = name.split('['); + if (parts.length === 1) { return { - isCollection: true, - name: parts[0], - fullName: name, - index: Number(parts[1].slice(0, -1)), + isCollection: false, + name, + fullName: name, }; + } + + return { + isCollection: true, + name: parts[0], + fullName: name, + index: Number(parts[1].slice(0, -1)), + }; } interface IOptionInfo { diff --git a/packages/devextreme-vue/src/core/index.ts b/packages/devextreme-vue/src/core/index.ts index c4658d121208..b9d5bcf7a4cd 100644 --- a/packages/devextreme-vue/src/core/index.ts +++ b/packages/devextreme-vue/src/core/index.ts @@ -4,17 +4,17 @@ import { initDxExtensionComponent } from './extension-component'; import { setVModel } from './vue-helper'; export function prepareComponentConfig(config) { - config.extends = initDxComponent(); + config.extends = initDxComponent(); - if(config.model) { - setVModel(config); - } + if (config.model) { + setVModel(config); + } } export function prepareConfigurationComponentConfig(config: any): void { - config.extends = initDxConfiguration(); + config.extends = initDxConfiguration(); } export function prepareExtensionComponentConfig(config: any): void { - config.extends = initDxExtensionComponent(); + config.extends = initDxExtensionComponent(); } diff --git a/packages/devextreme-vue/src/core/templates-discovering.ts b/packages/devextreme-vue/src/core/templates-discovering.ts index 028aef04bdbc..145671def02b 100644 --- a/packages/devextreme-vue/src/core/templates-discovering.ts +++ b/packages/devextreme-vue/src/core/templates-discovering.ts @@ -1,17 +1,14 @@ -/* eslint-disable import/named */ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable spellcheck/spell-checker */ import { - ComponentPublicInstance, h, Slot, VNode, + ComponentPublicInstance, h, Slot, VNode, } from 'vue'; import { IConfigurable } from './configuration-component'; import { - configurationDefaultTemplate, - configurationTemplate, - declaredTemplates, - getChildren, - getConfigurationOptions, - mount, + configurationDefaultTemplate, + configurationTemplate, + declaredTemplates, + getChildren, + getConfigurationOptions, + mount, } from './vue-helper'; import { IBaseComponent } from './component'; @@ -27,103 +24,103 @@ interface IEventBusHolder { } function asConfigurable(component: VNode): IConfigurable | undefined { - const componentOptions = component as any as IConfigurable; - if(!componentOptions) { - return; - } - if(!componentOptions.$_config || !componentOptions.$_config.name) { - return undefined; - } - - return componentOptions; + const componentOptions = component as any as IConfigurable; + if (!componentOptions) { + return; + } + if (!componentOptions.$_config || !componentOptions.$_config.name) { + return undefined; + } + + return componentOptions; } function hasTemplate(component: VNode) { - return TEMPLATE_PROP in (component.type as any).props && configurationTemplate(component); + return TEMPLATE_PROP in (component.type as any).props && configurationTemplate(component); } function discover(component: ComponentPublicInstance): Record { - const templates: Record = {}; - const namedTeplates = declaredTemplates(component); - for(const slotName in namedTeplates) { - if(slotName === 'default' && component.$slots.default) { - continue; - } - - const slot = namedTeplates[slotName]; - if(!slot) { - continue; - } - - templates[slotName] = slot; + const templates: Record = {}; + const namedTeplates = declaredTemplates(component); + for (const slotName in namedTeplates) { + if (slotName === 'default' && component.$slots.default) { + continue; + } + + const slot = namedTeplates[slotName]; + if (!slot) { + continue; } - const componentChildren = getChildren(component as IBaseComponent); - for(const childComponent of componentChildren) { - const configurable = asConfigurable(childComponent); - if(!configurable) { - continue; - } - - const defaultSlot = configurationDefaultTemplate(childComponent); - if(!defaultSlot || !hasTemplate(childComponent)) { - continue; - } - - const templateName = `${configurable.$_config.fullPath}.${TEMPLATE_PROP}`; - templates[templateName] = defaultSlot; + + templates[slotName] = slot; + } + const componentChildren = getChildren(component as IBaseComponent); + for (const childComponent of componentChildren) { + const configurable = asConfigurable(childComponent); + if (!configurable) { + continue; + } + + const defaultSlot = configurationDefaultTemplate(childComponent); + if (!defaultSlot || !hasTemplate(childComponent)) { + continue; } - return templates; + const templateName = `${configurable.$_config.fullPath}.${TEMPLATE_PROP}`; + templates[templateName] = defaultSlot; + } + + return templates; } function clearConfiguration(content: VNode[]) { - const newContent: VNode[] = []; - content.forEach((item) => { - const configurable = getConfigurationOptions(item); - if(!configurable || !configurable.$_optionName) { - newContent.push(item); - } - }); - return newContent; + const newContent: VNode[] = []; + content.forEach((item) => { + const configurable = getConfigurationOptions(item); + if (!configurable || !configurable.$_optionName) { + newContent.push(item); + } + }); + return newContent; } function mountTemplate( - getSlot: () => Slot, - parent: ComponentPublicInstance, - data: any, - name: string, - placeholder: Element, + getSlot: () => Slot, + parent: ComponentPublicInstance, + data: any, + name: string, + placeholder: Element, ): ComponentPublicInstance { - return mount({ - name, - inject: ['eventBus'], - created(this: any & IEventBusHolder) { - this.eventBus.add(this.$_updatedHandler); - }, - mounted() { - data.onRendered(); - }, - unmounted() { - this.eventBus.remove(this.$_updatedHandler); - }, - methods: { - $_updatedHandler() { - (this as any as ComponentPublicInstance).$forceUpdate(); - }, - }, - render: (): VNode | VNode[] => { - const content = clearConfiguration(getSlot()(data)); - if(!content) { - return h('div'); - } - - return content.length > 1 ? content : content[0]; - }, - }, parent, placeholder); + return mount({ + name, + inject: ['eventBus'], + created(this: any & IEventBusHolder) { + this.eventBus.add(this.$_updatedHandler); + }, + mounted() { + data.onRendered(); + }, + unmounted() { + this.eventBus.remove(this.$_updatedHandler); + }, + methods: { + $_updatedHandler() { + (this as any as ComponentPublicInstance).$forceUpdate(); + }, + }, + render: (): VNode | VNode[] => { + const content = clearConfiguration(getSlot()(data)); + if (!content) { + return h('div'); + } + + return content.length > 1 ? content : content[0]; + }, + }, parent, placeholder); } export { - mountTemplate, - discover, - IEventBusHolder, + mountTemplate, + discover, + IEventBusHolder, }; diff --git a/packages/devextreme-vue/src/core/templates-manager.ts b/packages/devextreme-vue/src/core/templates-manager.ts index 4e6c62f4fd65..3dab2c968113 100644 --- a/packages/devextreme-vue/src/core/templates-manager.ts +++ b/packages/devextreme-vue/src/core/templates-manager.ts @@ -1,119 +1,116 @@ -/* eslint-disable no-undef */ -/* eslint-disable no-restricted-syntax */ -/* eslint-disable import/named */ import { ComponentPublicInstance, Slot } from 'vue'; import domAdapter from 'devextreme/core/dom_adapter'; import { one } from 'devextreme/events'; import { - discover as discoverSlots, - mountTemplate, + discover as discoverSlots, + mountTemplate, } from './templates-discovering'; import { DX_REMOVE_EVENT, DX_TEMPLATE_WRAPPER_CLASS } from './constants'; import { allKeysAreEqual } from './helpers'; class TemplatesManager { - private readonly _component: ComponentPublicInstance; + private readonly _component: ComponentPublicInstance; - private _slots: Record = {}; + private _slots: Record = {}; - private _templates: Record = {}; + private _templates: Record = {}; - private _isDirty = false; + private _isDirty = false; - constructor(component: ComponentPublicInstance) { - this._component = component; - this.discover(); - } + constructor(component: ComponentPublicInstance) { + this._component = component; + this.discover(); + } - public discover() { - this._slots = { - ...discoverSlots(this._component), - }; + public discover() { + this._slots = { + ...discoverSlots(this._component), + }; - if(!allKeysAreEqual(this._templates, this._slots)) { - this._prepareTemplates(); - } + if (!allKeysAreEqual(this._templates, this._slots)) { + this._prepareTemplates(); } + } - public get templates() { - return this._templates; - } + public get templates() { + return this._templates; + } - public get isDirty() { - return this._isDirty; - } + public get isDirty() { + return this._isDirty; + } - public resetDirtyFlag() { - this._isDirty = false; - } + public resetDirtyFlag() { + this._isDirty = false; + } - private _prepareTemplates() { - this._templates = {}; + private _prepareTemplates() { + this._templates = {}; - for(const name of Object.keys(this._slots)) { - this._templates[name] = this.createDxTemplate(name); + for (const name of Object.keys(this._slots)) { + this._templates[name] = this.createDxTemplate(name); + } + + this._isDirty = true; + } + + private createDxTemplate(name: string) { + return { + render: (data: any) => { + const rendered = ((onRendered, counter = 0) => () => { + if (counter === 1 && onRendered) { + onRendered(); + } + counter++; + })(data.onRendered); + const scopeData = { data: data.model, index: data.index, onRendered: rendered }; + + const placeholder = document.createElement('div'); + const container = data.container.get ? data.container.get(0) : data.container; + container.appendChild(placeholder); + const mountedTemplate = mountTemplate( + () => this._slots[name], + this._component, + scopeData, + name, + placeholder, + ); + + const element = mountedTemplate.$el as HTMLElement; + container.removeChild(placeholder); + + while (placeholder.firstChild) { + container.appendChild(placeholder.firstChild); } - this._isDirty = true; - } + domAdapter.setClass(element, DX_TEMPLATE_WRAPPER_CLASS, true); + + if (element.nodeType === Node.TEXT_NODE) { + const removalListener = document.createElement(container.nodeName === 'TABLE' ? 'tbody' : 'span'); + removalListener.style.display = 'none'; + container.insertBefore(removalListener, container.firstChild); - private createDxTemplate(name: string) { - return { - render: (data: any) => { - const rendered = ((onRendered, counter = 0) => () => { - if(counter === 1 && onRendered) { - onRendered(); - } - counter++; - })(data.onRendered); - const scopeData = { data: data.model, index: data.index, onRendered: rendered }; - - const placeholder = document.createElement('div'); - const container = data.container.get ? data.container.get(0) : data.container; - container.appendChild(placeholder); - const mountedTemplate = mountTemplate( - () => this._slots[name], - this._component, - scopeData, - name, - placeholder, - ); - - const element = mountedTemplate.$el as HTMLElement; - container.removeChild(placeholder); - - while(placeholder.firstChild) { - container.appendChild(placeholder.firstChild); - } - - domAdapter.setClass(element, DX_TEMPLATE_WRAPPER_CLASS, true); - - if(element.nodeType === Node.TEXT_NODE) { - const removalListener = document.createElement(container.nodeName === 'TABLE' ? 'tbody' : 'span'); - removalListener.style.display = 'none'; - container.insertBefore(removalListener, container.firstChild); - - one( - removalListener, - DX_REMOVE_EVENT, - () => { - mountedTemplate.$.appContext.app.unmount.bind(mountedTemplate)(); - removalListener.remove(); - }, - ); - } else { - one( - element, - DX_REMOVE_EVENT, - mountedTemplate.$.appContext.app.unmount.bind(mountedTemplate), - ); - } - rendered(); - return element; + one( + removalListener, + DX_REMOVE_EVENT, + () => { + mountedTemplate.$.appContext.app.unmount.bind(mountedTemplate)(); + removalListener.remove(); }, - }; - } + ); + } else { + one( + element, + DX_REMOVE_EVENT, + mountedTemplate.$.appContext.app.unmount.bind(mountedTemplate), + ); + } + rendered(); + return element; + }, + }; + } } export { TemplatesManager }; diff --git a/packages/devextreme-vue/src/core/version.ts b/packages/devextreme-vue/src/core/version.ts index 334b7c9dd66a..652b7eaab26f 100644 --- a/packages/devextreme-vue/src/core/version.ts +++ b/packages/devextreme-vue/src/core/version.ts @@ -1,10 +1,10 @@ import * as VueType from 'vue'; export function getVueVersion() { - const currentVersion = VueType.version; - return currentVersion ? Number(currentVersion.split('.')[0]) : 2; + const currentVersion = VueType.version; + return currentVersion ? Number(currentVersion.split('.')[0]) : 2; } export function isVue3() { - return getVueVersion() === 3; + return getVueVersion() === 3; } diff --git a/packages/devextreme-vue/src/core/vue-helper.ts b/packages/devextreme-vue/src/core/vue-helper.ts index 8641aa1c2123..8e373056dc35 100644 --- a/packages/devextreme-vue/src/core/vue-helper.ts +++ b/packages/devextreme-vue/src/core/vue-helper.ts @@ -1,5 +1,3 @@ -/* eslint-disable no-prototype-builtins */ -/* eslint-disable spellcheck/spell-checker */ /* eslint-disable import/named */ import { App,