From 8f6e0c57a1d4a3ac363e7f0a9411eff72eddc37d Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 10 Sep 2024 23:37:41 +0400 Subject: [PATCH] refactor devextreme-vue for TS in IDE --- packages/devextreme-vue/build.config.js | 1 - packages/devextreme-vue/gulpfile.js | 1 - .../src/core/__tests__/component.test.ts | 72 ++++++++++++------- .../src/core/__tests__/vue-helper.ts | 11 --- packages/devextreme-vue/src/core/index.ts | 11 --- .../src/core/strategy/vue3/index.ts | 16 ++--- .../devextreme-vue/src/core/vue-helper.ts | 10 --- 7 files changed, 52 insertions(+), 70 deletions(-) delete mode 100644 packages/devextreme-vue/src/core/__tests__/vue-helper.ts delete mode 100644 packages/devextreme-vue/src/core/index.ts diff --git a/packages/devextreme-vue/build.config.js b/packages/devextreme-vue/build.config.js index 05c471bf6c6b..f63a98cb38fd 100644 --- a/packages/devextreme-vue/build.config.js +++ b/packages/devextreme-vue/build.config.js @@ -12,7 +12,6 @@ module.exports = { generatedComponentsDir: './src', coreComponentsDir: './src/core', indexFileName: './src/index.ts', - baseComponent: './core/index', configComponent: './core/index', widgetsPackage: 'devextreme' }; diff --git a/packages/devextreme-vue/gulpfile.js b/packages/devextreme-vue/gulpfile.js index 71ca8aa94c9d..3e65a6ce4dd9 100644 --- a/packages/devextreme-vue/gulpfile.js +++ b/packages/devextreme-vue/gulpfile.js @@ -37,7 +37,6 @@ gulp.task(GENERATE, (done) => { generateVueComponents( JSON.parse(fs.readFileSync(config.metadataPath).toString()), - config.baseComponent, config.configComponent, { componentsDir: config.generatedComponentsDir, diff --git a/packages/devextreme-vue/src/core/__tests__/component.test.ts b/packages/devextreme-vue/src/core/__tests__/component.test.ts index e7aa102164ff..5e2c27dd8391 100644 --- a/packages/devextreme-vue/src/core/__tests__/component.test.ts +++ b/packages/devextreme-vue/src/core/__tests__/component.test.ts @@ -13,14 +13,36 @@ import globalConfig from '../config'; import Configuration from '../configuration'; import { IConfigurable, IConfigurationComponent } from '../configuration-component'; import { IExtension } from '../extension-component'; -import { createComponent, createConfigurationComponent, createExtensionComponent } from '../index'; import { getNodeOptions } from '../vue-helper'; +import { + prepareComponentConfig, + prepareExtensionComponentConfig, + prepareConfigurationComponentConfig +} from "devextreme-vue/core/strategy/vue3"; interface CustomApp extends App { test: string; } +function createComponent(config) { + prepareComponentConfig(config); + + return defineComponent(config); +} + +function createConfigurationComponent(config) { + prepareConfigurationComponentConfig(config); + + return defineComponent(config); +} + +function createExtensionComponent(config) { + prepareExtensionComponentConfig(config); + + return defineComponent(config); +} + const eventHandlers = {}; const Widget = { option: jest.fn(), @@ -330,7 +352,7 @@ describe('component rendering', () => { it('updates pendingOptions from a widget component configuration updateFunc', () => { const wrapper = mount(TestComponent); - const pendingOptions = (wrapper.vm as any as IWidgetComponent).$_pendingOptions; + const pendingOptions = (wrapper.vm as unknown as IWidgetComponent).$_pendingOptions; const name = 'abc'; const value = {}; @@ -682,14 +704,14 @@ describe('component rendering', () => { const WidgetComponent = createComponent({ beforeCreate() { - (this as IWidgetComponent).$_WidgetClass = WidgetClass; - (this as IWidgetComponent).$_expectedChildren = expected; + (this as unknown as IWidgetComponent).$_WidgetClass = WidgetClass; + (this as unknown as IWidgetComponent).$_expectedChildren = expected; }, }); const wrapper = mount(WidgetComponent); - expect((wrapper.vm as any as IWidgetComponent).$_config.expectedChildren).toBe(expected); + expect((wrapper.vm as unknown as IWidgetComponent).$_config.expectedChildren).toBe(expected); }); it('initialized for config component', () => { @@ -1390,8 +1412,8 @@ describe('component rendering', () => { template: String, }, }); - (NestedItem as IConfigurationComponent).$_optionName = 'items'; - (NestedItem as IConfigurationComponent).$_isCollectionItem = true; + (NestedItem as unknown as IConfigurationComponent).$_optionName = 'items'; + (NestedItem as unknown as IConfigurationComponent).$_isCollectionItem = true; const vm = defineComponent({ template: ` @@ -1424,8 +1446,8 @@ describe('component rendering', () => { template: String, }, }); - (NestedItem as IConfigurationComponent).$_optionName = 'items'; - (NestedItem as IConfigurationComponent).$_isCollectionItem = true; + (NestedItem as unknown as IConfigurationComponent).$_optionName = 'items'; + (NestedItem as unknown as IConfigurationComponent).$_isCollectionItem = true; const component = defineComponent({ template: ` @@ -1473,8 +1495,8 @@ describe('component rendering', () => { template: String, }, }); - (NestedItem as IConfigurationComponent).$_optionName = 'items'; - (NestedItem as IConfigurationComponent).$_isCollectionItem = true; + (NestedItem as unknown as IConfigurationComponent).$_optionName = 'items'; + (NestedItem as unknown as IConfigurationComponent).$_isCollectionItem = true; const vm = defineComponent({ template: ` @@ -1502,8 +1524,8 @@ describe('component rendering', () => { template: String, }, }); - (NestedItem as IConfigurationComponent).$_optionName = 'items'; - (NestedItem as IConfigurationComponent).$_isCollectionItem = true; + (NestedItem as unknown as IConfigurationComponent).$_optionName = 'items'; + (NestedItem as unknown as IConfigurationComponent).$_isCollectionItem = true; const vm = defineComponent({ template: ` @@ -1532,8 +1554,8 @@ describe('component rendering', () => { template: String, }, }); - (NestedItem as IConfigurationComponent).$_optionName = 'items'; - (NestedItem as IConfigurationComponent).$_isCollectionItem = true; + (NestedItem as unknown as IConfigurationComponent).$_optionName = 'items'; + (NestedItem as unknown as IConfigurationComponent).$_isCollectionItem = true; const vm = defineComponent({ template: ` @@ -1565,8 +1587,8 @@ describe('component rendering', () => { prop1: Number, }, }); - (NestedItem as IConfigurationComponent).$_optionName = 'items'; - (NestedItem as IConfigurationComponent).$_isCollectionItem = true; + (NestedItem as unknown as IConfigurationComponent).$_optionName = 'items'; + (NestedItem as unknown as IConfigurationComponent).$_isCollectionItem = true; const vm = defineComponent({ template: ` @@ -1595,7 +1617,7 @@ describe('component rendering', () => { template: String, }, }); - (NestedItem as IConfigurationComponent).$_optionName = 'item'; + (NestedItem as unknown as IConfigurationComponent).$_optionName = 'item'; const wrapper = defineComponent({ template: ` @@ -1623,8 +1645,8 @@ describe('component rendering', () => { template: String, }, }); - (NestedItem as IConfigurationComponent).$_optionName = 'items'; - (NestedItem as IConfigurationComponent).$_isCollectionItem = true; + (NestedItem as unknown as IConfigurationComponent).$_optionName = 'items'; + (NestedItem as unknown as IConfigurationComponent).$_isCollectionItem = true; const SubNested = buildTestConfigCtor(); (SubNested as IConfigurationComponent).$_optionName = 'subNestedOption'; @@ -1654,8 +1676,8 @@ describe('component rendering', () => { template: String, }, }); - (NestedItem as IConfigurationComponent).$_optionName = 'items'; - (NestedItem as IConfigurationComponent).$_isCollectionItem = true; + (NestedItem as unknown as IConfigurationComponent).$_optionName = 'items'; + (NestedItem as unknown as IConfigurationComponent).$_isCollectionItem = true; const SubNested = buildTestConfigCtor(); (SubNested as IConfigurationComponent).$_optionName = 'subNestedOption'; @@ -1684,8 +1706,8 @@ describe('component rendering', () => { template: String, }, }); - (NestedItem as IConfigurationComponent).$_optionName = 'items'; - (NestedItem as IConfigurationComponent).$_isCollectionItem = true; + (NestedItem as unknown as IConfigurationComponent).$_optionName = 'items'; + (NestedItem as unknown as IConfigurationComponent).$_isCollectionItem = true; const SubNested = buildTestConfigCtor(); (SubNested as IConfigurationComponent).$_optionName = 'subNestedOption'; @@ -1713,7 +1735,7 @@ describe('component rendering', () => { const ExtensionWidgetClass = jest.fn(createWidget); const TestExtensionComponent = createExtensionComponent({ beforeCreate() { - (this as IWidgetComponent).$_WidgetClass = ExtensionWidgetClass; + (this as unknown as IWidgetComponent).$_WidgetClass = ExtensionWidgetClass; }, props: { prop: Array, diff --git a/packages/devextreme-vue/src/core/__tests__/vue-helper.ts b/packages/devextreme-vue/src/core/__tests__/vue-helper.ts deleted file mode 100644 index d134546d402b..000000000000 --- a/packages/devextreme-vue/src/core/__tests__/vue-helper.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { setCompatOptions } from '../vue-helper'; - -describe('setCompatOptions', () => { - it('set mode', () => { - const component = { - compatConfig: {}, - }; - setCompatOptions(component); - expect(component.compatConfig).toStrictEqual({ MODE: 3 }); - }); -}); diff --git a/packages/devextreme-vue/src/core/index.ts b/packages/devextreme-vue/src/core/index.ts deleted file mode 100644 index 7e17fc8e2d37..000000000000 --- a/packages/devextreme-vue/src/core/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import * as vue2Stategy from './strategy/vue2/index'; -import * as vue3Stategy from './strategy/vue3/index'; -import { isVue3 } from './version'; - -const strategy = isVue3() ? vue3Stategy : vue2Stategy; - -export const { createComponent } = strategy; - -export const { createConfigurationComponent } = strategy; - -export const { createExtensionComponent } = strategy; diff --git a/packages/devextreme-vue/src/core/strategy/vue3/index.ts b/packages/devextreme-vue/src/core/strategy/vue3/index.ts index d893a2953403..23d4e5988625 100644 --- a/packages/devextreme-vue/src/core/strategy/vue3/index.ts +++ b/packages/devextreme-vue/src/core/strategy/vue3/index.ts @@ -1,26 +1,20 @@ -import { defineComponent, DefineComponent } from 'vue'; import { initDxComponent } from '../../component'; import { initDxConfiguration } from '../../configuration-component'; import { initDxExtensionComponent } from '../../extension-component'; -import { setCompatOptions, setVModel } from '../../vue-helper'; +import { setVModel } from '../../vue-helper'; -export function createComponent(config: any): DefineComponent { +export function prepareComponentConfig(config) { config.extends = initDxComponent(); - setCompatOptions(config); + if (config.model) { setVModel(config); } - return defineComponent(config); } -export function createConfigurationComponent(config: any): DefineComponent { +export function prepareConfigurationComponentConfig(config: any): void { config.extends = initDxConfiguration(); - setCompatOptions(config); - return defineComponent(config); } -export function createExtensionComponent(config: any): DefineComponent { +export function prepareExtensionComponentConfig(config: any): void { config.extends = initDxExtensionComponent(); - setCompatOptions(config); - return defineComponent(config); } diff --git a/packages/devextreme-vue/src/core/vue-helper.ts b/packages/devextreme-vue/src/core/vue-helper.ts index 008e1998ec2f..b8c8dea6907d 100644 --- a/packages/devextreme-vue/src/core/vue-helper.ts +++ b/packages/devextreme-vue/src/core/vue-helper.ts @@ -92,10 +92,6 @@ export function getComponentProps(component: ComponentPublicInstance): VNodeProp return getNormalizedProps(props); } -export function usedConfigurationProps(node: VNode): VNodeProps | null { - return node.props; -} - export function getNodeOptions(component: Pick) { if (component.$) { return component.$.vnode; @@ -112,12 +108,6 @@ export function getVModelValue(options: Record) { return options[VMODEL_NAME]; } -export function setCompatOptions(component: Record) { - component.compatConfig = { - MODE: 3, - }; -} - export function setVModel(config: any): void { const eventName = `update:${VMODEL_NAME}`; config.model.prop = VMODEL_NAME;