Use export type syntax

.babelrc-optimize.js

@@ -2,13 +2,11 @@
 
 const baseConfig = require('./.babelrc.js');
 // Skip `propType` generation.
-// Still removes type exports for the es builds
 baseConfig.plugins.splice(
   baseConfig.plugins.indexOf(
     './scripts/babel/proptypes-from-ts-props'
   ),
-  1,
-  ['./scripts/babel/proptypes-from-ts-props', { generatePropTypes: false }]
+  1
 );
 // Transform runtimes using babel plugin.
 // Requires consuming applications to use `@babel/runtime`.

.eslintignore

@@ -12,3 +12,4 @@ scripts
 generator-eui
 cypress
 react-datepicker
+.eslintrc.js

.eslintrc.js

@@ -11,6 +11,7 @@ const SSPL_ELASTIC_2_0_LICENSE_HEADER = `
 module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
+    project: ['./tsconfig.json', './tsconfig-cypress.json'],
     ecmaFeatures: {
       jsx: true,
     },
@@ -110,6 +111,10 @@ module.exports = {
         'ts-expect-error': 'allow-with-description',
       },
     ],
+    '@typescript-eslint/consistent-type-exports': [
+      'error',
+      { fixMixedExportsWithInlineTypeSpecifier: false },
+    ],
   },
   env: {
     jest: true,

package.json

@@ -132,8 +132,8 @@
     "@types/tabbable": "^3.1.0",
     "@types/url-parse": "^1.4.3",
     "@types/uuid": "^8.3.0",
-    "@typescript-eslint/eslint-plugin": "^4.8.1",
-    "@typescript-eslint/parser": "^4.8.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
     "argparse": "^2.0.1",
     "autoprefixer": "^9.8.6",
     "axe-core": "^4.1.1",

scripts/babel/proptypes-from-ts-props/index.js

@@ -1300,9 +1300,6 @@ 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
@@ -1430,56 +1427,6 @@ module.exports = function propTypesFromTypeScript({ types }) {
             }
           }
         },
-        exit: function exitProgram(programPath, state) {
-          // only process typescript files
-          if (
-            path.extname(state.file.opts.filename) !== '.ts' &&
-            path.extname(state.file.opts.filename) !== '.tsx'
-          )
-            return;
-
-          const types = state.get('types');
-          const typeDefinitions = state.get('typeDefinitions');
-
-          // remove any exported identifiers that are TS types or interfaces
-          // this prevents TS-only identifiers from leaking into ES code
-          programPath.traverse({
-            ExportNamedDeclaration: path => {
-              const specifiers = path.get('specifiers');
-              const source = path.get('source');
-              specifiers.forEach(specifierPath => {
-                if (types.isExportSpecifier(specifierPath)) {
-                  const {
-                    node: { local },
-                  } = specifierPath;
-                  if (types.isIdentifier(local)) {
-                    const { name } = local;
-                    if (typeDefinitions.hasOwnProperty(name)) {
-                      // this is a locally-known value
-                      const def = typeDefinitions[name];
-                      if (isTSType(def)) {
-                        specifierPath.remove();
-                      }
-                    } else if (types.isStringLiteral(source)) {
-                      const libraryName = source.get('value').node;
-                      const isRelativeSource = libraryName.startsWith('.');
-                      if (isRelativeSource === false) {
-                        // comes from a 3rd-party library
-                        // best way to reliably check if this is
-                        // a type or value is to require the
-                        // library and check its exports
-                        const library = require(libraryName);
-                        if (library.hasOwnProperty(name) === false) {
-                          specifierPath.remove();
-                        }
-                      }
-                    }
-                  }
-                }
-              });
-            },
-          });
-        },
       },
 
       /**

scripts/babel/proptypes-from-ts-props/index.test.ts

@@ -2515,162 +2515,5 @@ 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', () => {
-    it('removes sole type export from ExportNamedDeclaration', () => {
-      const result = transform(
-        `
-type Foo = string;
-export { Foo };
-`,
-        babelOptions
-      );
-
-      expect(result.code).toBe('');
-    });
-
-    it('removes multiple type export from ExportNamedDeclaration', () => {
-      const result = transform(
-        `
-type Foo = string;
-type Bar = number | Foo;
-export { Foo, Bar };
-`,
-        babelOptions
-      );
-
-      expect(result.code).toBe('');
-    });
-
-    it('removes type exports from ExportNamedDeclaration, leaving legitimate exports', () => {
-      const result = transform(
-        `
-type Foo = string;
-type Bar = Foo | boolean;
-const A = 500;
-const B = { bar: A };
-export { Foo, A, Bar, B };
-`,
-        babelOptions
-      );
-
-      expect(result.code).toBe(`const A = 500;
-const B = {
-  bar: A
-};
-export { A, B };`);
-    });
-
-    it('removes type exports from ExportNamedDeclaration with a source', () => {
-      const result = transform(
-        `
-export { Foo, A } from './foo';
-`,
-        {
-          ...babelOptions,
-          plugins: [
-            [
-              './scripts/babel/proptypes-from-ts-props',
-              {
-                fs: {
-                  existsSync: () => true,
-                  statSync: () => ({ isDirectory: () => false }),
-                  readFileSync: filepath => {
-                    if (filepath.endsWith(`${path.sep}foo`)) {
-                      return Buffer.from(`
-                        export type Foo = string;
-                      `);
-                    }
-
-                    throw new Error(`Test tried to import from ${filepath}`);
-                  },
-                },
-              },
-            ],
-          ],
-        }
-      );
-
-      expect(result.code).toBe("export { A } from './foo';");
-    });
-
-    it('removes type exports from ExportNamedDeclaration when the imported name differs from the exported one', () => {
-      const result = transform(
-        `
-export { Foo as Bar, A as B } from './foo';
-`,
-        {
-          ...babelOptions,
-          plugins: [
-            [
-              './scripts/babel/proptypes-from-ts-props',
-              {
-                fs: {
-                  existsSync: () => true,
-                  statSync: () => ({ isDirectory: () => false }),
-                  readFileSync: filepath => {
-                    if (filepath.endsWith(`${path.sep}foo`)) {
-                      return Buffer.from(`
-                        export const A = 5;
-                        export type Foo = string;
-                      `);
-                    }
-
-                    throw new Error(`Test tried to import from ${filepath}`);
-                  },
-                },
-              },
-            ],
-          ],
-        }
-      );
-
-      expect(result.code).toBe("export { A as B } from './foo';");
-    });
-
-    it('removes type export statements', () => {
-      const result = transform(
-        `
-export type Foo = string;
-`,
-        babelOptions
-      );
-
-      expect(result.code).toBe('');
-    });
-
-    it('removes 3rd-party type exports', () => {
-      const result = transform(
-        `
-export { DraggableLocation, Draggable, DragDropContextProps } from 'react-beautiful-dnd';
-`,
-        babelOptions
-      );
-
-      expect(result.code).toBe(
-        "export { Draggable } from 'react-beautiful-dnd';"
-      );
-    });
   });
 });

src/components/accessibility/index.ts

@@ -6,12 +6,9 @@
  * Side Public License, v 1.
  */
 
-export {
-  EuiScreenReaderLive,
-  EuiScreenReaderLiveProps,
-} from './screen_reader_live';
-export {
-  EuiScreenReaderOnly,
-  EuiScreenReaderOnlyProps,
-} from './screen_reader_only';
-export { EuiSkipLink, EuiSkipLinkProps } from './skip_link';
+export { EuiScreenReaderLive } from './screen_reader_live';
+export type { EuiScreenReaderLiveProps } from './screen_reader_live';
+export { EuiScreenReaderOnly } from './screen_reader_only';
+export type { EuiScreenReaderOnlyProps } from './screen_reader_only';
+export { EuiSkipLink } from './skip_link';
+export type { EuiSkipLinkProps } from './skip_link';

src/components/accessibility/screen_reader_live/index.ts

@@ -6,7 +6,5 @@
  * Side Public License, v 1.
  */
 
-export {
-  EuiScreenReaderLive,
-  EuiScreenReaderLiveProps,
-} from './screen_reader_live';
+export { EuiScreenReaderLive } from './screen_reader_live';
+export type { EuiScreenReaderLiveProps } from './screen_reader_live';

src/components/accessibility/screen_reader_only/index.ts

@@ -6,7 +6,5 @@
  * Side Public License, v 1.
  */
 
-export {
-  EuiScreenReaderOnly,
-  EuiScreenReaderOnlyProps,
-} from './screen_reader_only';
+export type { EuiScreenReaderOnlyProps } from './screen_reader_only';
+export { EuiScreenReaderOnly } from './screen_reader_only';

src/components/accessibility/skip_link/index.ts

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiSkipLink, EuiSkipLinkProps } from './skip_link';
+export type { EuiSkipLinkProps } from './skip_link';
+export { EuiSkipLink } from './skip_link';

src/components/accordion/index.ts

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiAccordion, EuiAccordionProps } from './accordion';
+export type { EuiAccordionProps } from './accordion';
+export { EuiAccordion } from './accordion';

src/components/aspect_ratio/index.ts

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiAspectRatio, EuiAspectRatioProps } from './aspect_ratio';
+export type { EuiAspectRatioProps } from './aspect_ratio';
+export { EuiAspectRatio } from './aspect_ratio';

src/components/auto_sizer/index.ts

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiAutoSizer, EuiAutoSizerProps } from './auto_sizer';
+export type { EuiAutoSizerProps } from './auto_sizer';
+export { EuiAutoSizer } from './auto_sizer';

src/components/avatar/index.ts

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiAvatar, EuiAvatarProps, checkValidColor } from './avatar';
+export type { EuiAvatarProps } from './avatar';
+export { EuiAvatar, checkValidColor } from './avatar';

src/components/badge/badge_group/index.ts

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiBadgeGroup, EuiBadgeGroupProps } from './badge_group';
+export type { EuiBadgeGroupProps } from './badge_group';
+export { EuiBadgeGroup } from './badge_group';

src/components/badge/beta_badge/index.ts

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiBetaBadge, EuiBetaBadgeProps } from './beta_badge';
+export type { EuiBetaBadgeProps } from './beta_badge';
+export { EuiBetaBadge } from './beta_badge';

src/components/badge/index.ts

@@ -6,10 +6,13 @@
  * Side Public License, v 1.
  */
 
-export { EuiBadge, EuiBadgeProps } from './badge';
+export type { EuiBadgeProps } from './badge';
+export { EuiBadge } from './badge';
 
-export { EuiBetaBadge, EuiBetaBadgeProps } from './beta_badge';
+export type { EuiBetaBadgeProps } from './beta_badge';
+export { EuiBetaBadge } from './beta_badge';
 
 export { EuiNotificationBadge } from './notification_badge';
 
-export { EuiBadgeGroup, EuiBadgeGroupProps } from './badge_group';
+export type { EuiBadgeGroupProps } from './badge_group';
+export { EuiBadgeGroup } from './badge_group';

src/components/badge/notification_badge/index.ts

@@ -6,7 +6,5 @@
  * Side Public License, v 1.
  */
 
-export {
-  EuiNotificationBadge,
-  EuiNotificationBadgeProps,
-} from './badge_notification';
+export type { EuiNotificationBadgeProps } from './badge_notification';
+export { EuiNotificationBadge } from './badge_notification';