Skip to content

Commit

Permalink
refactor devextreme-vue for TS in IDE
Browse files Browse the repository at this point in the history
  • Loading branch information
@GoodDayForSurf
GoodDayForSurf committed Sep 10, 2024
1 parent bcdcdbb commit 8f6e0c5
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 70 deletions.
1 change: 0 additions & 1 deletion packages/devextreme-vue/build.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ module.exports = {
generatedComponentsDir: './src',
coreComponentsDir: './src/core',
indexFileName: './src/index.ts',
baseComponent: './core/index',
configComponent: './core/index',
widgetsPackage: 'devextreme'
};
1 change: 0 additions & 1 deletion packages/devextreme-vue/gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ gulp.task(GENERATE,
(done) => {
generateVueComponents(
JSON.parse(fs.readFileSync(config.metadataPath).toString()),
config.baseComponent,
config.configComponent,
{
componentsDir: config.generatedComponentsDir,
Expand Down
72 changes: 47 additions & 25 deletions packages/devextreme-vue/src/core/__tests__/component.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -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 = {};
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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: `<test-component>
Expand Down Expand Up @@ -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: `<test-component :prop1='prop1Value'>
Expand Down Expand Up @@ -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: `<test-component>
Expand Down Expand Up @@ -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: `<test-component>
Expand Down Expand Up @@ -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: `<test-component>
Expand Down Expand Up @@ -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: `<test-component>
Expand Down Expand Up @@ -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: `<test-component>
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down
11 changes: 0 additions & 11 deletions packages/devextreme-vue/src/core/__tests__/vue-helper.ts
View file

This file was deleted.

11 changes: 0 additions & 11 deletions packages/devextreme-vue/src/core/index.ts
View file

This file was deleted.

16 changes: 5 additions & 11 deletions packages/devextreme-vue/src/core/strategy/vue3/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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);
}
10 changes: 0 additions & 10 deletions packages/devextreme-vue/src/core/vue-helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<ComponentPublicInstance, '$'>) {
if (component.$) {
return component.$.vnode;
Expand All @@ -112,12 +108,6 @@ export function getVModelValue(options: Record<string, any>) {
return options[VMODEL_NAME];
}

export function setCompatOptions(component: Record<string, unknown>) {
component.compatConfig = {
MODE: 3,
};
}

export function setVModel(config: any): void {
const eventName = `update:${VMODEL_NAME}`;
config.model.prop = VMODEL_NAME;
Expand Down

0 comments on commit 8f6e0c5

Please sign in to comment.