Repository: DevExpress/devextreme-vue
Pull request #126 (2018-07-17 13:00:47)

Refactor component generator


Patch:
diff --git a/tools/src/component-generator.ts b/tools/src/component-generator.ts
index cd11900..c586968 100644
--- a/tools/src/component-generator.ts
+++ b/tools/src/component-generator.ts
@@ -1,14 +1,15 @@
 import { compareStrings } from "./helpers";
 import createTempate from "./template";
 
+interface INamedImport {
+    name: string;
+    path: string;
+}
+
 interface IComponent {
     name: string;
-    widgetName: string;
-    base: {
-        name: string;
-        path: string;
-    };
-    dxExportPath: string;
+    widget: INamedImport;
+    base: INamedImport;
     props?: IProp[];
     hasModel?: boolean;
     nestedComponents?: INestedComponent[];
@@ -20,14 +21,12 @@ interface IFileImport {
 }
 
 interface IComponentModel {
-    componentName: string;
+    component: string;
+    baseComponent: string;
     baseImport: IFileImport;
-    baseComponentPath: string;
-    baseComponentName: string;
-    dxExportPath: string;
+    widgetImport: INamedImport;
     renderedProps?: string;
     hasModel?: boolean;
-    widgetName: string;
     nestedComponents?: INestedComponentModel[];
     namedExports: string[];
 }
@@ -62,7 +61,7 @@ function generate(component: IComponent): string {
     const namedExports: string[] = [ component.name ];
     const baseImport: IFileImport = {
         path: component.base.path,
-        namedImports: [ `${component.base.name} as BaseComponent` ]
+        namedImports: [ component.base.name ]
     };
 
     if (nestedComponents && nestedComponents.length) {
@@ -73,11 +72,10 @@ function generate(component: IComponent): string {
 
     const componentModel = {
         ...component,
+        widgetImport: component.widget,
         baseImport,
-        componentName: component.name,
-        widgetName: component.widgetName,
-        baseComponentName: component.base.name,
-        baseComponentPath: component.base.path,
+        component: component.name,
+        baseComponent: component.base.name,
 
         renderedProps: component.props
             ? renderProps(component.props)
@@ -111,7 +109,7 @@ const L4: string = `\n` + tab(4);
 const renderComponent: (model: IComponentModel) => string = createTempate(
 `import * as VueType from "vue";
 const Vue = VueType.default || VueType;
-import <#= it.widgetName #> from "devextreme/<#= it.dxExportPath #>";
+import <#= it.widgetImport.name #> from "devextreme/<#= it.widgetImport.path #>";
 import { VueConstructor } from "vue";
 import { ` +
 
@@ -119,10 +117,10 @@ import { ` +
     `<#= namedImport #>` + `, ` +
 `<#~#>` + `\b\b` +
 
-` } from "<#= it.baseComponentPath #>";` + `\n` + `\n` +
+` } from "<#= it.baseImport.path #>";` + `\n` + `\n` +
 
-`const <#= it.componentName #>: VueConstructor = Vue.extend({` +
-L1 + `extends: BaseComponent,` +
+`const <#= it.component #>: VueConstructor = Vue.extend({` +
+L1 + `extends: <#= it.baseComponent #>,` +
 
 `<#? it.props #>` +
     L1 + `props: {` + `\n` +
@@ -135,13 +133,13 @@ L1 + `extends: BaseComponent,` +
 `<#?#>` +
 
   L1 + `computed: {
-    instance(): <#= it.widgetName #> {
+    instance(): <#= it.widgetImport.name #> {
       return (this as any).$_instance;
     }
   },` +
 
   L1 + `beforeCreate() {
-    (this as any).$_WidgetClass = <#= it.widgetName #>;
+    (this as any).$_WidgetClass = <#= it.widgetImport.name #>;
   }
 });` + `\n` +
 
diff --git a/tools/src/generator.ts b/tools/src/generator.ts
index 5bd76c5..11519d2 100644
--- a/tools/src/generator.ts
+++ b/tools/src/generator.ts
@@ -47,12 +47,14 @@ function mapWidget(raw: IWidget, baseComponentPath: string, customTypes: ICustom
     fileName: `${toKebabCase(name)}.ts`,
     component: {
       name: `Dx${name}`,
-      widgetName: name,
+      widget: {
+        name,
+        path: raw.exportPath
+      },
       base: {
         name: raw.isExtension ? "DxExtensionComponent" : "DxComponent",
         path: baseComponentPath
       },
-      dxExportPath: raw.exportPath,
       props: raw.options.map((o) => mapProp(o, customTypeHash)),
       hasModel: !!raw.isEditor,
       nestedComponents: raw.complexOptions


Test patch:
diff --git a/tools/src/component-generator.test.ts b/tools/src/component-generator.test.ts
index 768b9dd..11bee35 100644
--- a/tools/src/component-generator.test.ts
+++ b/tools/src/component-generator.test.ts
@@ -7,10 +7,10 @@ import * as VueType from "vue";
 const Vue = VueType.default || VueType;
 import WIDGET from "devextreme/DX/WIDGET/PATH";
 import { VueConstructor } from "vue";
-import { BASE_COMPONENT as BaseComponent } from "BASE_COMPONENT_PATH";
+import { BASE_COMPONENT } from "BASE_COMPONENT_PATH";
 
 const COMPONENT: VueConstructor = Vue.extend({
-  extends: BaseComponent,
+  extends: BASE_COMPONENT,
   computed: {
     instance(): WIDGET {
       return (this as any).$_instance;
@@ -30,12 +30,14 @@ export {
     expect(
         generate({
             name: "COMPONENT",
-            widgetName: "WIDGET",
+            widget: {
+              name: "WIDGET",
+              path: "DX/WIDGET/PATH"
+            },
             base: {
                 name: "BASE_COMPONENT",
                 path: "BASE_COMPONENT_PATH"
-            },
-            dxExportPath: "DX/WIDGET/PATH"
+            }
         })
     ).toBe(EXPECTED);
 });
@@ -47,10 +49,10 @@ import * as VueType from "vue";
 const Vue = VueType.default || VueType;
 import WIDGET from "devextreme/DX/WIDGET/PATH";
 import { VueConstructor } from "vue";
-import { BASE_COMPONENT as BaseComponent } from "BASE_COMPONENT_PATH";
+import { BASE_COMPONENT } from "BASE_COMPONENT_PATH";
 
 const COMPONENT: VueConstructor = Vue.extend({
-  extends: BaseComponent,
+  extends: BASE_COMPONENT,
   model: { prop: "value", event: "update:value" },
   computed: {
     instance(): WIDGET {
@@ -71,12 +73,14 @@ export {
     expect(
         generate({
             name: "COMPONENT",
-            widgetName: "WIDGET",
+            widget: {
+              name: "WIDGET",
+              path: "DX/WIDGET/PATH"
+            },
             base: {
                 name: "BASE_COMPONENT",
                 path: "BASE_COMPONENT_PATH"
             },
-            dxExportPath: "DX/WIDGET/PATH",
             hasModel: true
         })
     ).toBe(EXPECTED);
@@ -89,10 +93,10 @@ import * as VueType from "vue";
 const Vue = VueType.default || VueType;
 import WIDGET from "devextreme/DX/WIDGET/PATH";
 import { VueConstructor } from "vue";
-import { BASE_COMPONENT as BaseComponent } from "BASE_COMPONENT_PATH";
+import { BASE_COMPONENT } from "BASE_COMPONENT_PATH";
 
 const COMPONENT: VueConstructor = Vue.extend({
-  extends: BaseComponent,
+  extends: BASE_COMPONENT,
   props: {
     PROP: {}
   },
@@ -115,12 +119,14 @@ export {
     expect(
         generate({
             name: "COMPONENT",
-            widgetName: "WIDGET",
+            widget: {
+              name: "WIDGET",
+              path: "DX/WIDGET/PATH"
+            },
             base: {
                 name: "BASE_COMPONENT",
                 path: "BASE_COMPONENT_PATH"
             },
-            dxExportPath: "DX/WIDGET/PATH",
             props: [{ name: "PROP" }]
         })
     ).toBe(EXPECTED);
@@ -133,10 +139,10 @@ import * as VueType from "vue";
 const Vue = VueType.default || VueType;
 import WIDGET from "devextreme/DX/WIDGET/PATH";
 import { VueConstructor } from "vue";
-import { BASE_COMPONENT as BaseComponent, DxConfiguration } from "BASE_COMPONENT_PATH";
+import { BASE_COMPONENT, DxConfiguration } from "BASE_COMPONENT_PATH";
 
 const COMPONENT: VueConstructor = Vue.extend({
-  extends: BaseComponent,
+  extends: BASE_COMPONENT,
   computed: {
     instance(): WIDGET {
       return (this as any).$_instance;
@@ -167,12 +173,14 @@ export {
     expect(
         generate({
             name: "COMPONENT",
-            widgetName: "WIDGET",
+            widget: {
+              name: "WIDGET",
+              path: "DX/WIDGET/PATH"
+            },
             base: {
                 name: "BASE_COMPONENT",
                 path: "BASE_COMPONENT_PATH"
             },
-            dxExportPath: "DX/WIDGET/PATH",
             nestedComponents: [
               {
                 name: "NESTED_COMPONENT",
@@ -194,10 +202,10 @@ import * as VueType from "vue";
 const Vue = VueType.default || VueType;
 import WIDGET from "devextreme/DX/WIDGET/PATH";
 import { VueConstructor } from "vue";
-import { BASE_COMPONENT as BaseComponent, DxConfiguration } from "BASE_COMPONENT_PATH";
+import { BASE_COMPONENT, DxConfiguration } from "BASE_COMPONENT_PATH";
 
 const COMPONENT: VueConstructor = Vue.extend({
-  extends: BaseComponent,
+  extends: BASE_COMPONENT,
   computed: {
     instance(): WIDGET {
       return (this as any).$_instance;
@@ -228,12 +236,14 @@ export {
     expect(
         generate({
             name: "COMPONENT",
-            widgetName: "WIDGET",
+            widget: {
+              name: "WIDGET",
+              path: "DX/WIDGET/PATH"
+            },
             base: {
                 name: "BASE_COMPONENT",
                 path: "BASE_COMPONENT_PATH"
             },
-            dxExportPath: "DX/WIDGET/PATH",
             nestedComponents: [
               {
                 name: "NESTED_COMPONENT",
diff --git a/tools/src/converter.test.ts b/tools/src/converter.test.ts
index b08ee77..fce998c 100644
--- a/tools/src/converter.test.ts
+++ b/tools/src/converter.test.ts
@@ -45,7 +45,8 @@ it("expands custom types", () => {
                 { type: "String", isCustomType: false, acceptableValues: []},
                 { type: "Number", isCustomType: false, acceptableValues: []}
             ],
-            props: []
+            props: [],
+            templates: []
         }
 })).toEqual(["Object", "String", "Number"]);
 });