Refactor devextreme-vue for support TS in IDE

package.json

@@ -44,7 +44,7 @@
     "axe-core": "4.10.0",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "6.0.2",
-    "devextreme-internal-tools": "16.0.0-beta.3",
+    "devextreme-internal-tools": "16.0.0-beta.4",
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest": "29.7.0",

packages/devextreme-vue/build.config.js

@@ -12,7 +12,23 @@ module.exports = {
   generatedComponentsDir: './src',
   coreComponentsDir: './src/core',
   indexFileName: './src/index.ts',
-  baseComponent: './core/index',
-  configComponent: './core/index',
+  componentGeneratorTplConfig: {
+    createComponentFn: {
+      name: 'defineComponent',
+      path: 'vue',
+    },
+    prepareComponentConfigFn: {
+      name: 'prepareComponentConfig',
+      path: './core/index',
+    },
+    prepareExtensionComponentConfigFn: {
+      name: 'prepareExtensionComponentConfig',
+      path: './core/index',
+    },
+    prepareConfigurationComponentConfigFn: {
+      name: 'prepareConfigurationComponentConfig',
+      path: './core/index',
+    },
+  },
   widgetsPackage: 'devextreme'
 };

packages/devextreme-vue/gulpfile.js

@@ -37,8 +37,7 @@ gulp.task(GENERATE,
     (done) => {
         generateVueComponents(
             JSON.parse(fs.readFileSync(config.metadataPath).toString()),
-            config.baseComponent,
-            config.configComponent,
+            config.componentGeneratorTplConfig,
             {
                 componentsDir: config.generatedComponentsDir,
                 indexFileName: config.indexFileName

packages/devextreme-vue/src/accordion.ts

@@ -1,7 +1,8 @@
 export { ExplicitTypes } from "devextreme/ui/accordion";
 import Accordion, { Properties } from "devextreme/ui/accordion";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig } from "./core/index";
+import { prepareConfigurationComponentConfig } from "./core/index";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -47,7 +48,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxAccordion extends AccessibleOptions {
   readonly instance?: Accordion;
 }
-const DxAccordion = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -142,9 +144,14 @@ const DxAccordion = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxAccordion = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -167,7 +174,12 @@ const DxItem = createConfigurationComponent({
     titleTemplate: {},
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 

packages/devextreme-vue/src/action-sheet.ts

@@ -1,7 +1,8 @@
 export { ExplicitTypes } from "devextreme/ui/action_sheet";
 import ActionSheet, { Properties } from "devextreme/ui/action_sheet";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig } from "./core/index";
+import { prepareConfigurationComponentConfig } from "./core/index";
 
 type AccessibleOptions = Pick<Properties,
   "cancelText" |
@@ -36,7 +37,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxActionSheet extends AccessibleOptions {
   readonly instance?: ActionSheet;
 }
-const DxActionSheet = createComponent({
+
+const componentConfig = {
   props: {
     cancelText: String,
     dataSource: {},
@@ -109,9 +111,14 @@ const DxActionSheet = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxActionSheet = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -132,7 +139,12 @@ const DxItem = createConfigurationComponent({
     text: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;