Generate reexports in components (#809)

Author: const314

package-lock.json

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

package.json

@@ -1,7 +1,7 @@
 {
   "author": "Developer Express Inc.",
   "name": "devextreme-react-generator",
-  "version": "3.0.0",
+  "version": "3.1.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": "^9.4.0",
+    "devextreme-internal-tools": "10.0.0-beta.2",
     "dot": "^1.1.3"
   },
   "devDependencies": {

packages/devextreme-react-generator/package-lock.json

@@ -24,6 +24,7 @@ type IComponent = {
 } & {
   nestedComponents?: INestedComponent[];
   configComponentPath?: string;
+  containsReexports?: boolean
 };
 
 interface INestedComponent {
@@ -167,6 +168,7 @@ const renderModule: (model: {
   renderedNestedComponents?: string[];
   defaultExport: string;
   renderedExports: string;
+  renderedReExports?: string;
 }) => string = createTempate(
   '<#= it.renderedImports #>\n'
 
@@ -186,7 +188,10 @@ const renderModule: (model: {
 + `export {
 <#= it.renderedExports #>
 };
-`,
+`
++ '<#? it.renderedReExports #>'
+    + '<#= it.renderedReExports #>\n\n'
++ '<#?#>',
 );
 
 const renderImports: (model: {
@@ -402,6 +407,11 @@ function renderExports(exportsNames: string[]) {
     .join(',\n');
 }
 
+function renderReExports(componentName: string, exportPath: string) {
+  return `import type * as ${componentName}Types from '${exportPath}_types';\n`
+  + `export { ${componentName}Types };`;
+}
+
 function formatTemplatePropName(name: string, suffix: string): string {
   return lowercaseFirst(name.replace(/template$/i, suffix));
 }
@@ -441,7 +451,7 @@ function createPropTypingModel(typing: IPropTyping): IRenderedPropTyping {
   };
 }
 
-function generate(component: IComponent): string {
+function generate(component: IComponent, generateReexports = false): string {
   const nestedComponents = component.nestedComponents
     ? component.nestedComponents
       .sort(createKeyComparator<INestedComponent>((o) => o.className))
@@ -549,6 +559,8 @@ function generate(component: IComponent): string {
       .map((t) => renderPropTyping(createPropTypingModel(t)))
     : undefined;
 
+  const hasExplicitTypes = !!component.optionsTypeParams?.length;
+
   return renderModule({
 
     renderedImports: renderImports({
@@ -561,7 +573,7 @@ function generate(component: IComponent): string {
       optionsAliasName: hasExtraOptions ? undefined : optionsName,
       hasExtraOptions,
       hasPropTypings: isNotEmptyArray(renderedPropTypings),
-      hasExplicitTypes: !!component.optionsTypeParams?.length,
+      hasExplicitTypes,
       configComponentPath: isNotEmptyArray(nestedComponents)
         ? component.configComponentPath
         : undefined,
@@ -598,6 +610,9 @@ function generate(component: IComponent): string {
 
     defaultExport: component.name,
     renderedExports: renderExports(exportNames),
+    renderedReExports: generateReexports && component.containsReexports
+      ? renderReExports(component.name, component.dxExportPath)
+      : undefined,
   });
 }
 

packages/devextreme-react-generator/package.json

@@ -273,14 +273,15 @@ export function mapWidget(
   const propTypings = extractPropTypings(raw.options, customTypeHash)
     .filter((propType) => propType !== null) as IPropTyping[];
 
+  const dxExportPath = `${widgetPackage}/${raw.exportPath}`;
   return {
     fileName: `${toKebabCase(name)}.ts`,
     component: {
       name,
       baseComponentPath: baseComponent,
       extensionComponentPath: extensionComponent,
       configComponentPath: configComponent,
-      dxExportPath: `${widgetPackage}/${raw.exportPath}`,
+      dxExportPath,
       isExtension: raw.isExtension,
       templates: raw.templates,
       subscribableOptions: subscribableOptions.length > 0 ? subscribableOptions : undefined,
@@ -289,6 +290,7 @@ export function mapWidget(
       expectedChildren: raw.nesteds,
       propTypings: propTypings.length > 0 ? propTypings : undefined,
       optionsTypeParams: raw.optionsTypeParams,
+      containsReexports: !!raw.reexports.filter((r) => r !== 'default').length,
     },
   };
 }
@@ -325,8 +327,7 @@ function generate({
     );
     const widgetFilePath = joinPaths(out.componentsDir, widgetFile.fileName);
     const indexFileDir = getDirName(out.indexFileName);
-
-    writeFile(widgetFilePath, generateComponent(widgetFile.component), { encoding: 'utf8' });
+    writeFile(widgetFilePath, generateComponent(widgetFile.component, generateReexports), { encoding: 'utf8' });
     modulePaths.push({
       name: widgetFile.component.name,
       path: `./${removeExtension(getRelativePath(indexFileDir, widgetFilePath)).replace(pathSeparator, '/')}`,

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

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