Generate types for config-components props: custom types (#818)

Author: const314

.eslintrc

@@ -28,7 +28,15 @@
                "unschedule",
                "subscribable",
                "renderer",
-               "rerender"
+               "rerender",
+               "dx",
+               "descr",
+               "params",
+               "typings",
+               "wildcard",
+               "metadata",
+               "namespace",
+               "namespaces"
             ]
         }
     ]

package.json

@@ -13,7 +13,7 @@
     "@typescript-eslint/parser": "^4.33.0",
     "cpy-cli": "^3.1.1",
     "del-cli": "^3.0.1",
-    "devextreme-internal-tools": "10.0.0-beta.2",
+    "devextreme-internal-tools": "10.0.0-beta.4",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-airbnb-typescript": "^12.3.1",

packages/devextreme-react-generator/package.json

@@ -1,7 +1,7 @@
 {
   "author": "Developer Express Inc.",
   "name": "devextreme-react-generator",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "DevExtreme React UI and Visualization Components",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
   "license": "MIT",
   "dependencies": {
     "dasherize": "^2.0.0",
-    "devextreme-internal-tools": "10.0.0-beta.2",
+    "devextreme-internal-tools": "10.0.0-beta.4",
     "dot": "^1.1.3"
   },
   "devDependencies": {

packages/devextreme-react-generator/src/common-reexports-generator.ts

@@ -1,6 +1,6 @@
-import { createTempate } from './template';
+import { createTemplate } from './template';
 
-const render: (model: { module: string, reexports: string[] }) => string = createTempate(`
+const render: (model: { module: string, reexports: string[] }) => string = createTemplate(`
 export {<#~ it.reexports :reExport #>
     <#= reExport #>,<#~#>
 } from "devextreme/<#= it.module #>";

packages/devextreme-react-generator/src/component-generator.ts

@@ -1,5 +1,5 @@
 import {
-  createTempate, L1, L2, L3,
+  createTemplate, L1, L2, L3,
 } from './template';
 
 import {
@@ -106,7 +106,7 @@ function getIndent(indent: number) {
 const renderObjectEntry: (model: {
   key: string;
   value: string;
-}) => string = createTempate(`
+}) => string = createTemplate(`
     <#= it.key #>: "<#= it.value #>"
 `.trimRight());
 
@@ -136,7 +136,7 @@ const renderTemplateOption: (model: {
   actualOptionName: string;
   render: string;
   component: string;
-}) => string = createTempate(`
+}) => string = createTemplate(`
   {
     tmplOption: "<#= it.actualOptionName #>",
     render: "<#= it.render #>",
@@ -145,9 +145,9 @@ const renderTemplateOption: (model: {
   }
 `.trim());
 
-const renderStringEntry: (value: string) => string = createTempate('"<#= it #>"');
+const renderStringEntry: (value: string) => string = createTemplate('"<#= it #>"');
 
-const renderPropTyping: (model: IRenderedPropTyping) => string = createTempate(
+const renderPropTyping: (model: IRenderedPropTyping) => string = createTemplate(
   '  <#= it.propName #>: '
 
 + '<#? it.renderedTypes.length === 1 #>'
@@ -169,7 +169,7 @@ const renderModule: (model: {
   defaultExport: string;
   renderedExports: string;
   renderedReExports?: string;
-}) => string = createTempate(
+}) => string = createTemplate(
   '<#= it.renderedImports #>\n'
 
 + '<#? it.renderedOptionsInterface #>'
@@ -204,7 +204,10 @@ const renderImports: (model: {
   hasPropTypings: boolean;
   hasExplicitTypes: boolean;
   configComponentPath?: string;
-}) => string = createTempate(
+  customTypeImports?: Record<string, Array<string>>;
+  defaultTypeImports?: Record<string, string>;
+  wildcardTypeImports?: Record<string, string>;
+}) => string = createTemplate(
   '<#? it.hasExplicitTypes #>'
     + 'export { ExplicitTypes } from "<#= it.dxExportPath #>";\n'
 + '<#?#>'
@@ -225,6 +228,26 @@ const renderImports: (model: {
 
 + '<#? it.configComponentPath #>'
     + 'import NestedOption from "<#= it.configComponentPath #>";\n'
++ '<#?#>'
+
++ '<#? it.customTypeImports && Object.keys(it.customTypeImports).length #>\n'
+  + '<#~ Object.keys(it.customTypeImports) : module #>'
+  + 'import type { <#= it.customTypeImports[module].join(", ")#> } from "<#= module #>";\n'
+  + '<#~#>'
++ '<#?#>'
+
++ '<#? it.defaultTypeImports && Object.keys(it.defaultTypeImports).length #>\n'
+  + '<#~ Object.keys(it.defaultTypeImports) : defaultImport #>'
+    + '<#? defaultImport !== it.widgetName #>'
+      + 'import type <#= defaultImport #> from "<#= it.defaultTypeImports[defaultImport] #>";\n'
+    + '<#?#>'
+  + '<#~#>'
++ '<#?#>'
+
++ '<#? it.wildcardTypeImports && Object.keys(it.wildcardTypeImports).length #>\n'
+  + '<#~ Object.keys(it.wildcardTypeImports) : wildcardImportModule #>'
+    + 'import type * as <#= it.wildcardTypeImports[wildcardImportModule] #> from "<#= wildcardImportModule #>";\n'
+  + '<#~#>'
 + '<#?#>',
 );
 
@@ -242,7 +265,7 @@ const renderNestedComponent: (model: {
   renderedSubscribableOptions?: string[];
   renderedTemplateProps?: string[];
   owners: string[];
-}) => string = createTempate(
+}) => string = createTemplate(
   `${'// owners:\n'
 + '<#~ it.owners : owner #>'
     + '// <#= owner #>\n'
@@ -312,7 +335,7 @@ const renderOptionsInterface: (model: {
     name: string;
     type: string;
   }>;
-}) => string = createTempate(
+}) => string = createTemplate(
   `type <#= it.optionsName #>${TYPE_PARAMS_WITH_DEFAULTS} = React.PropsWithChildren<Properties${TYPE_PARAMS} & IHtmlOptions & {\n`
 
 + '<#? it.typeParams #>'
@@ -349,7 +372,7 @@ const renderComponent: (model: {
   isPortalComponent?: boolean;
   useRequestAnimationFrameFlag?: boolean;
   typeParams: string[] | undefined;
-}) => string = createTempate(
+}) => string = createTemplate(
   `class <#= it.className #>${TYPE_PARAMS_WITH_DEFAULTS} extends BaseComponent<React.PropsWithChildren<<#= it.optionsName #>${TYPE_PARAMS}>> {
 
   public get instance(): <#= it.widgetName #>${TYPE_PARAMS} {
@@ -451,7 +474,13 @@ function createPropTypingModel(typing: IPropTyping): IRenderedPropTyping {
   };
 }
 
-function generate(component: IComponent, generateReexports = false): string {
+function generate(
+  component: IComponent,
+  generateReexports = false,
+  customTypeImports?: Record<string, Array<string>>,
+  defaultTypeImports?: Record<string, string>,
+  wildcardTypeImports?: Record<string, string>,
+): string {
   const nestedComponents = component.nestedComponents
     ? component.nestedComponents
       .sort(createKeyComparator<INestedComponent>((o) => o.className))
@@ -577,6 +606,9 @@ function generate(component: IComponent, generateReexports = false): string {
       configComponentPath: isNotEmptyArray(nestedComponents)
         ? component.configComponentPath
         : undefined,
+      customTypeImports,
+      defaultTypeImports,
+      wildcardTypeImports,
     }),
 
     renderedOptionsInterface: !hasExtraOptions ? undefined : renderOptionsInterface({

packages/devextreme-react-generator/src/converter.test.ts

@@ -67,6 +67,7 @@ it('expands custom types', () => {
         ],
         props: [],
         templates: [],
+        module: '',
       },
     },
   )).toEqual(['object', 'string', 'number']);