Resolve potential name conflicts of type names and generated component names (#824)

Author: const314

packages/devextreme-react-generator/package.json

@@ -1,7 +1,7 @@
 {
   "author": "Developer Express Inc.",
   "name": "devextreme-react-generator",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "DevExtreme React UI and Visualization Components",
   "repository": {
     "type": "git",

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

@@ -773,6 +773,18 @@ describe('mapWidget', () => {
         }],
         props: [],
         firedEvents: [],
+      },
+      {
+        name: 'optionThatConflictsWithComponent',
+        isSubscribable: true,
+        isDeprecated: false,
+        types: [{
+          type: 'ComplexOption1',
+          acceptableValues: [],
+          isCustomType: true,
+        }],
+        props: [],
+        firedEvents: [],
       }],
     };
 
@@ -817,6 +829,13 @@ describe('mapWidget', () => {
       templates: [],
       types: [],
       module: '',
+    },
+    {
+      name: 'ComplexOption1',
+      props: [],
+      templates: [],
+      types: [],
+      module: 'complex/option/module',
     }];
 
     it('should process subscribable options', () => {
@@ -881,6 +900,47 @@ describe('mapWidget', () => {
       expect(component.nestedComponents?.[1].className).toBe('ComplexOption2');
       expect(component.nestedComponents?.[1].optionName).toBe('widgetComplexOption2');
     });
+    it('should resolve name conflicts in complex options', () => {
+      const { component, customTypeImports } = mapWidget(
+        { ...widgetWithCustomTypes, complexOptions },
+        '',
+        '',
+        '',
+        customTypesWithModules,
+        '',
+        {
+          generateCustomTypes: true,
+        },
+      );
+      expect(component.nestedComponents?.length).toBe(2);
+      expect(component.nestedComponents?.[0].className).toBe('ComplexOption1');
+      expect(customTypeImports!['devextreme/complex/option/module']).toEqual(['ComplexOption1 as ComplexOption1Aliased']);
+    });
+
+    it('should resolve name conflicts in complex options with overrides if present', () => {
+      const importOverridesMetadata: ImportOverridesMetadata = {
+        nameConflictsResolutionNamespaces: {
+          ComplexOption1: 'NamespaceForNestedComponentNamesConflict',
+        },
+      };
+
+      const { component, customTypeImports, wildcardTypeImports } = mapWidget(
+        { ...widgetWithCustomTypes, complexOptions },
+        '',
+        '',
+        '',
+        customTypesWithModules,
+        '',
+        {
+          generateCustomTypes: true,
+          importOverridesMetadata,
+        },
+      );
+      expect(component.nestedComponents?.length).toBe(2);
+      expect(component.nestedComponents?.[0].className).toBe('ComplexOption1');
+      expect(customTypeImports!['devextreme/complex/option/module']).toBeUndefined();
+      expect(wildcardTypeImports).toEqual({ 'devextreme/complex/option/module': 'NamespaceForNestedComponentNamesConflict' });
+    });
 
     it('should process custom types', () => {
       const { component } = mapWidget(
@@ -945,7 +1005,6 @@ describe('mapWidget', () => {
       expect(resultOptions.option4.type).toEqual('NoConflictNamespace.CustomTypeWithNameConflict');
       expect(resultOptions.option5.type).toEqual('CustomTypeWithDefaultImport');
       expect(resultOptions.option6.type).toEqual('CustomGenericType<any>');
-
       expect(customTypeImports!['devextreme/custom/type/module']).toEqual(['CustomTypeWithModule']);
       expect(customTypeImports!['overridden/module']).toEqual(['CustomTypeWithoutModule']);
       expect(defaultTypeImports).toEqual({ CustomTypeWithDefaultImport: 'module/with/default/import' });

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

@@ -89,14 +89,18 @@ export function convertToBaseType(type: string): BaseTypes {
 }
 
 export function createCustomTypeResolver(
-  importOverridesMetadata: ImportOverridesMetadata, widgetCustomTypesCollector: Set<string>,
+  importOverridesMetadata: ImportOverridesMetadata,
+  widgetCustomTypesCollector: Set<string>,
+  resolveNameConflicts: (string) => string = (typeName) => typeName,
 ): TypeResolver {
   return (typeDescriptor: ITypeDescr) => {
     const resolvedType = importOverridesMetadata.typeResolutions?.[typeDescriptor.type]
       || typeDescriptor.type;
     widgetCustomTypesCollector.add(resolvedType);
-    const resultingType = importOverridesMetadata.nameConflictsResolutionNamespaces?.[resolvedType]
-      ? `${importOverridesMetadata.nameConflictsResolutionNamespaces[resolvedType]}.${resolvedType}` : resolvedType;
+    const resultingType = resolveNameConflicts(
+      importOverridesMetadata.nameConflictsResolutionNamespaces?.[resolvedType]
+        ? `${importOverridesMetadata.nameConflictsResolutionNamespaces[resolvedType]}.${resolvedType}` : resolvedType,
+    );
     return importOverridesMetadata.genericTypes?.[resultingType] ? `${resultingType}<any>` : resultingType;
   };
 }
@@ -191,18 +195,22 @@ export function mapOption(prop: IProp, typeResolver?: TypeResolver): IOption {
     };
 }
 
-export function extractNestedComponents(
-  props: IComplexProp[],
-  rawWidgetName: string,
-  widgetName: string,
-  typeResolver?: TypeResolver,
-): INestedComponent[] {
+function getWidgetComponentNames(rawWidgetName: string, widgetName: string, props: IComplexProp[]) {
   const nameClassMap: Record<string, string> = {};
   nameClassMap[rawWidgetName] = widgetName;
   props.forEach((p) => {
     nameClassMap[p.name] = uppercaseFirst(p.name);
   });
+  return nameClassMap;
+}
 
+export function extractNestedComponents(
+  props: IComplexProp[],
+  rawWidgetName: string,
+  widgetName: string,
+  typeResolver?: TypeResolver,
+): INestedComponent[] {
+  const nameClassMap = getWidgetComponentNames(rawWidgetName, widgetName, props);
   return props.map((p) => ({
     className: nameClassMap[p.name],
     owners: p.owners.map((o) => nameClassMap[o]),
@@ -305,8 +313,29 @@ export function mapWidget(
   const widgetCustomTypes = new Set<string>();
   const { importOverridesMetadata, generateCustomTypes } = typeGenerationOptions || {};
 
+  const generatedComponentNames = Object.values(
+    getWidgetComponentNames(raw.name, name, raw.complexOptions || []),
+  );
+
+  const typeAliases: Record<string, string> = {};
+  const resolveGeneratedComponentNamesConflict = (typeName: string) => {
+    if (generatedComponentNames.includes(typeName)) {
+      const aliasedTypeName = `${typeName}Aliased`;
+      typeAliases[typeName] = aliasedTypeName;
+      return aliasedTypeName;
+    }
+    return typeName;
+  };
+  const getTypeImportStatement = (typeName: string) => (
+    typeAliases[typeName] ? `${typeName} as ${typeAliases[typeName]}` : typeName
+  );
+
   const typeResolver = generateCustomTypes
-    ? createCustomTypeResolver(importOverridesMetadata || {}, widgetCustomTypes) : undefined;
+    ? createCustomTypeResolver(
+      importOverridesMetadata || {},
+      widgetCustomTypes,
+      resolveGeneratedComponentNamesConflict,
+    ) : undefined;
 
   const subscribableOptions: ISubscribableOption[] = collectSubscribableRecursively(raw.options)
     .map((option) => mapSubscribableOption(option, typeResolver));
@@ -342,7 +371,10 @@ export function mapWidget(
       if (moduleImportNamespace) {
         wildcardTypeImports[module] = moduleImportNamespace;
       } else {
-        customTypeImports[module] = [...(customTypeImports[module] || []), t];
+        customTypeImports[module] = [
+          ...(customTypeImports[module] || []),
+          getTypeImportStatement(t),
+        ];
       }
     }
   });

packages/devextreme-react/package.json

@@ -35,7 +35,7 @@
     "@types/react-dom": "^16.9.16",
     "del": "^3.0.0",
     "devextreme": "23.1-next",
-    "devextreme-react-generator": "^4.0.1",
+    "devextreme-react-generator": "^4.0.2",
     "gulp": "^4.0.2",
     "jest": "^25.0.0",
     "react": "~18.0.0",