[Build] Exclude test_custom_hook; optimize assets (elastic#5549)

* rename test_custom_hook * copy assets to optimize * wiki entry * clean up * clean up * optional propType generation * Added unit test for generatePropTypes option Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
gdimitropoulos · Jan 24, 2022 · 144c432 · 144c432
1 parent 955a99a
commit 144c432
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 36 deletions.
diff --git a/.babelrc-optimize.js b/.babelrc-optimize.js
@@ -1,12 +1,14 @@
 // See `wiki/consuming.md` for rationale and consumer requirements.
 
 const baseConfig = require('./.babelrc.js');
-// Skip `propType` generation
+// Skip `propType` generation.
+// Still removes type exports for the es builds
 baseConfig.plugins.splice(
   baseConfig.plugins.indexOf(
     './scripts/babel/proptypes-from-ts-props'
   ),
-  1
+  1,
+  ['./scripts/babel/proptypes-from-ts-props', { generatePropTypes: false }]
 );
 // Transform runtimes using babel plugin.
 // Requires consuming applications to use `@babel/runtime`.

diff --git a/scripts/babel/proptypes-from-ts-props/index.js b/scripts/babel/proptypes-from-ts-props/index.js
@@ -1300,6 +1300,9 @@ const buildPropTypes = babelTemplate('COMPONENT_NAME.propTypes = PROP_TYPES');
 function processComponentDeclaration(typeDefinition, path, state) {
   const types = state.get('types');
 
+  // Do not generate propTypes 
+  if (state.opts.generatePropTypes === false) return;
+
   const propTypesAST = getPropTypesForNode(typeDefinition, false, state);
 
   // if the resulting proptype is PropTypes.any don't bother setting the proptypes

diff --git a/scripts/babel/proptypes-from-ts-props/index.test.ts b/scripts/babel/proptypes-from-ts-props/index.test.ts
@@ -2515,6 +2515,26 @@ let something: any;
         expect(result.code).toBe('let something;');
       });
     });
+
+    it('can be disabled', () => {
+      const configuredBabelOptions = JSON.parse(JSON.stringify(babelOptions));
+      configuredBabelOptions.plugins[0] = ['./scripts/babel/proptypes-from-ts-props', { generatePropTypes: false }];
+
+      const result = transform(
+        `
+import React from 'react';
+interface IFooProps {bar: string}
+const FooComponent: React.SFC<IFooProps> = () => {
+  return (<div>Hello World</div>);
+}`,
+        configuredBabelOptions
+      );
+
+      expect(result.code).toBe(`import React from 'react';
+const FooComponent = () => {
+  return <div>Hello World</div>;
+};`);
+    });
   });
 
   describe('remove types from exports', () => {

diff --git a/scripts/compile-eui.js b/scripts/compile-eui.js
@@ -7,7 +7,7 @@ const fs = require('fs');
 const dtsGenerator = require('dts-generator').default;
 
 const IGNORE_BUILD = ['**/webpack.config.js','**/*.d.ts'];
-const IGNORE_TESTS = ['**/*.test.js','**/*.test.ts','**/*.test.tsx','**/*.spec.tsx'];
+const IGNORE_TESTS = ['**/*.test.js','**/*.test.ts','**/*.test.tsx','**/*.spec.tsx','**/*.test_helper.ts','**/*.test_helper.tsx','**/__mocks__/**'];
 const IGNORE_TESTENV = ['**/*.testenv.js','**/*.testenv.tsx','**/*.testenv.ts'];
 const IGNORE_PACKAGES = ['**/react-datepicker/test/**/*.js']
 
@@ -93,12 +93,14 @@ function compileLib() {
   // Also copy over SVGs. Babel has a --copy-files option but that brings over
   // all kinds of things we don't want into the lib folder.
   shell.mkdir('-p', 'lib/components/icon/svgs', 'lib/components/icon/svgs/tokens');
+  shell.mkdir('-p', 'optimize/lib/components/icon/svgs', 'optimize/lib/components/icon/svgs/tokens');
 
   glob('./src/components/**/*.svg', undefined, (error, files) => {
     files.forEach(file => {
       const splitPath = file.split('/');
       const basePath = splitPath.slice(2, splitPath.length).join('/');
       shell.cp('-f', `${file}`, `lib/${basePath}`);
+      shell.cp('-f', `${file}`, `optimize/lib/${basePath}`);
     });
 
     console.log(chalk.green('✔ Finished copying SVGs'));
@@ -127,36 +129,23 @@ function compileBundle() {
   });
 
   console.log('Building test utils .d.ts files...');
-  dtsGenerator({
-    prefix: '',
-    out: 'lib/test/index.d.ts',
-    baseDir: path.resolve(__dirname, '..', 'src/test/'),
-    files: ['index.ts'],
-    resolveModuleId({ currentModuleId }) {
-      return `@elastic/eui/lib/test${currentModuleId !== 'index' ? `/${currentModuleId}` : ''}`;
-    },
-    resolveModuleImport({ currentModuleId, importedModuleId }) {
-   		if (currentModuleId === 'index') {
-  			return `@elastic/eui/lib/test/${importedModuleId.replace('./', '')}`;
-  		}
-			return null;
-	  }
-  });
-  dtsGenerator({
-    prefix: '',
-    out: 'es/test/index.d.ts',
-    baseDir: path.resolve(__dirname, '..', 'src/test/'),
-    files: ['index.ts'],
-    resolveModuleId({ currentModuleId }) {
-      return `@elastic/eui/es/test${currentModuleId !== 'index' ? `/${currentModuleId}` : ''}`;
-    },
-    resolveModuleImport({ currentModuleId, importedModuleId }) {
-   		if (currentModuleId === 'index') {
-          return `@elastic/eui/es/test/${importedModuleId.replace('./', '')}`;
-  		}
-			return null;
-	  }
-  });
+  ['lib/test', 'optimize/lib/test', 'es/test', 'optimize/es/test'].forEach((dir) => {
+    dtsGenerator({
+      prefix: '',
+      out: `${dir}/index.d.ts`,
+      baseDir: path.resolve(__dirname, '..', 'src/test/'),
+      files: ['index.ts'],
+      resolveModuleId({ currentModuleId }) {
+        return `@elastic/eui/${dir}${currentModuleId !== 'index' ? `/${currentModuleId}` : ''}`;
+      },
+      resolveModuleImport({ currentModuleId, importedModuleId }) {
+        if (currentModuleId === 'index') {
+          return `@elastic/eui/${dir}/${importedModuleId.replace('./', '')}`;
+        }
+        return null;
+      }
+    });
+  })
   console.log(chalk.green('✔ Finished test utils files'));
 
   console.log('Building chart theme module...');

diff --git a/src/components/datagrid/controls/display_selector.test.tsx b/src/components/datagrid/controls/display_selector.test.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { shallow, mount, ShallowWrapper, ReactWrapper } from 'enzyme';
-import { testCustomHook } from '../../../test';
+import { testCustomHook } from '../../../test/test_custom_hook.test_helper';
 
 import {
   EuiDataGridToolBarVisibilityOptions,

diff --git a/src/components/datagrid/utils/scrolling.test.ts b/src/components/datagrid/utils/scrolling.test.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../../test';
+import { testCustomHook } from '../../../test/test_custom_hook.test_helper';
 import { useScrollCellIntoView } from './scrolling';
 
 // see scrolling.spec.tsx for E2E useScroll tests

diff --git a/src/test/index.ts b/src/test/index.ts
@@ -9,7 +9,6 @@
 export { requiredProps } from './required_props';
 export { takeMountedSnapshot } from './take_mounted_snapshot';
 export { findTestSubject } from './find_test_subject';
-export { testCustomHook } from './test_custom_hook';
 export {
   startThrowingReactWarnings,
   stopThrowingReactWarnings,

diff --git a/src/test/test_custom_hook.tsx → src/test/test_custom_hook.test_helper.tsx b/src/test/test_custom_hook.tsx → src/test/test_custom_hook.test_helper.tsx
diff --git a/wiki/testing.md b/wiki/testing.md
@@ -19,6 +19,10 @@ The [`src/test`](../src/test) module exports some functions and constants to hel
 * `requiredProps` is a list of all props almost all components should support.
 * `takeMountedSnapshot` generates a snapshot of a mounted component.
 
+### Test helper naming pattern
+
+If the test helper includes `enzyme` or other libraries included only in `devDependencies`, use the `*.test_helper.[ts, tsx]` naming pattern to exclude the component from production builds.
+
 ## Test design
 
 ### Do's and don'ts