Upgrade to TypeScript 4 (patternfly#6192)

* chore(repo): upgrade to typescript 4 * fix type errors * use dist/esm for types * import from dist/esm like modern people * replace ttypescript with ts-patch * fix cjs check * update snapshots
arnthor-agustsson · Aug 19, 2021 · 82faf38 · 82faf38
1 parent 35f2f08
commit 82faf38
Show file tree

Hide file tree

Showing 296 changed files with 1,335 additions and 1,384 deletions.
diff --git a/ADVANCED-USAGE-README.md b/ADVANCED-USAGE-README.md
@@ -7,54 +7,3 @@ This README covers advanced usage topics for PatternFly React users.
 
 ## Applying Overpass font
 If you would like to use Overpass instead of the Red Hat font, simply add the class `.pf-m-overpass-font` to an element that wraps your application (ideally `<html>` or `<body>`) to adopt the CSS changes that would allow opting in to the Overpass font.
-
-
-## Tree shaking
-
-Ensure optimization.sideEffects is set to true within your Webpack config:
-```JS
-optimization: {
-  sideEffects: true
-}
-```
-
-Use ESM module imports to enable tree shaking with no additional setup required.
-```JS
-import { TimesIcon } from '@patternfly/react-icons';
-```
-
-To enable tree shaking with named imports for CJS modules, utilize [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports) and update a babel.config.js file to utilize the plugin: 
-```JS
-require.extensions['.css'] = () => undefined;
-const components = require('@patternfly/react-core/dist/js/components');
-const beta = require('@patternfly/react-core/dist/js/beta');
-const layouts = require('@patternfly/react-core/dist/js/layouts');
-
-module.exports = {
-  presets: ["@babel/preset-react"],
-  plugins: [
-    [
-      "transform-imports",
-      {
-        "@patternfly/react-core": {
-          transform: (importName, matches) => {
-            let res = '@patternfly/react-core/dist/js/';
-            if (components[importName]) {
-              res += 'components';
-            } else if (beta[importName]) {
-              res += 'beta';
-            } else if (layouts[importName]) {
-              res += 'layouts';
-            }
-
-            res += `/${importName}/${importName}.js`;
-            return res;
-          },
-          preventFullImport: true,
-          skipDefaultConversion: true
-        }
-      }
-    ]
-  ]
-}
-```
diff --git a/package.json b/package.json
@@ -60,12 +60,13 @@
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "surge": "^0.21.3",
-    "ttypescript": "^1.5.12"
+    "ts-patch": "^1.4.2",
+    "typescript": "^4.0.0"
   },
   "scripts": {
     "build": "yarn build:generate && yarn build:esm && yarn build:cjs",
-    "build:cjs": "tsc --build packages/tsconfig.cjs.json -v",
-    "build:esm": "ttsc --build packages/tsconfig.json -v",
+    "build:cjs": "tsc --build --verbose packages/tsconfig.cjs.json",
+    "build:esm": "tsc --build --verbose packages/tsconfig.json",
     "build:integration": "lerna run build:demo-app --stream",
     "build:docs": "yarn workspace @patternfly/react-docs build:docs",
     "build:generate": "lerna run generate --parallel --stream",
@@ -78,6 +79,7 @@
     "lint:md": "yarn eslint packages --ext md --no-eslintrc --config .eslintrc-md.json --cache",
     "lint:ts": "yarn lint packages",
     "lint:versions": "node scripts/verifyPatternflyVersions.js",
+    "prepare": "ts-patch install -s",
     "serve:docs": "yarn workspace @patternfly/react-docs serve",
     "serve:integration": "lerna run serve:demo-app",
     "start": "yarn build && concurrently --kill-others \"yarn watch\" \"yarn workspace @patternfly/react-docs develop\"",

diff --git a/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js b/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js
@@ -5,11 +5,11 @@
  */
 function makeImport(specifier, moduleName) {
   if (moduleName.endsWith('createIcon') && moduleName.startsWith('@patternfly/react-icons')) {
-    return `import { ${specifier.local.name} } from '@patternfly/react-icons/dist/js/createIcon';`;
+    return `import { ${specifier.local.name} } from '@patternfly/react-icons/dist/esm/createIcon';`;
   }
   let res = `import ${specifier.local.name} from '`;
   res += moduleName.replace(/\/dist\/(js|esm)/, '');
-  res += '/dist/js';
+  res += '/dist/esm';
   if (moduleName.includes('icon')) {
     res += '/icons/';
     res += specifier.imported.name.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`).replace(/^-/, '');
@@ -46,13 +46,13 @@ module.exports = {
               specifier.type === 'ImportSpecifier' &&
               !(
                 node.source.value.startsWith('@patternfly/react-icons') &&
-                node.source.value.endsWith('/dist/js/createIcon')
+                node.source.value.endsWith('/dist/esm/createIcon')
               )
           );
           if (esmSpecifiers.length > 0) {
             context.report({
               node,
-              message: `Importing from the barrel ${node.source.value} file will blow up CJS bundle sizes. Import directly from dist/js file instead.`,
+              message: `Importing from the barrel ${node.source.value} file will blow up CJS bundle sizes. Import directly from dist/esm file instead.`,
               fix(fixer) {
                 return fixer.replaceText(
                   node,

diff --git a/packages/react-catalog-view-extension/package.json b/packages/react-catalog-view-extension/package.json
@@ -4,7 +4,7 @@
   "description": "This library provides catalog view extensions for PatternFly 4 React.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/js/index.d.ts",
+  "types": "dist/esm/index.d.ts",
   "patternfly:src": "src/",
   "sideEffects": [
     "*.css",
@@ -45,8 +45,8 @@
     "node-sass": "^4.14.1",
     "rimraf": "^2.6.2",
     "shx": "^0.3.2",
-    "tslib": "1.13.0",
-    "typescript": "^3.8.3"
+    "tslib": "^2.0.0",
+    "typescript": "^4.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",

diff --git a/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx b/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
-import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/js/icons/outlined-check-circle-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
 import { mount } from 'enzyme';
 
 import { CatalogTile } from './CatalogTile';

diff --git a/...react-catalog-view-extension/src/components/CatalogTile/examples/CatalogTile.md b/...react-catalog-view-extension/src/components/CatalogTile/examples/CatalogTile.md
@@ -5,8 +5,8 @@ propComponents: ['CatalogTile']
 ---
 
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
-import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/js/icons/outlined-check-circle-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
 import pfLogo2 from './pfLogo2.svg';
 import './catalogTile.css';
 
@@ -21,7 +21,7 @@ This package is currently an extension. Extension components do not undergo the
 ```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import pfLogo2 from './pfLogo2.svg';
 
 <CatalogTile
@@ -48,8 +48,8 @@ import pfLogo2 from './pfLogo2.svg';
 ```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
-import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/js/icons/outlined-check-circle-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
 import pfLogo2 from './pfLogo2.svg';
 
 <CatalogTile
@@ -80,7 +80,7 @@ import pfLogo2 from './pfLogo2.svg';
 ```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import pfLogo2 from './pfLogo2.svg';
 
 <CatalogTile
@@ -107,8 +107,8 @@ import pfLogo2 from './pfLogo2.svg';
 ```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
-import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/js/icons/outlined-check-circle-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
 import pfLogo2 from './pfLogo2.svg';
 
 <CatalogTile
@@ -160,7 +160,7 @@ import pfLogo2 from './pfLogo2.svg';
 ```js
 import React from 'react';
 import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
-import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import pfLogo2 from './pfLogo2.svg';
 
 <CatalogTile

diff --git a/...talog-view-extension/src/components/FilterSidePanel/examples/FilterSidePanel.md b/...talog-view-extension/src/components/FilterSidePanel/examples/FilterSidePanel.md
@@ -5,13 +5,13 @@ propComponents: ['FilterSidePanel', 'FilterSidePanelCategory', 'FilterSidePanelC
 ---
 
 import { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension';
-import StarIcon from '@patternfly/react-icons/dist/js/icons/star-icon';
-import CcPaypalIcon from '@patternfly/react-icons/dist/js/icons/cc-paypal-icon';
-import CcAmexIcon from '@patternfly/react-icons/dist/js/icons/cc-amex-icon';
-import CcDiscoverIcon from '@patternfly/react-icons/dist/js/icons/cc-discover-icon';
-import CcVisaIcon from '@patternfly/react-icons/dist/js/icons/cc-visa-icon';
-import CcMastercardIcon from '@patternfly/react-icons/dist/js/icons/cc-mastercard-icon';
-import CcDinersClubIcon from '@patternfly/react-icons/dist/js/icons/cc-diners-club-icon';
+import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
+import CcPaypalIcon from '@patternfly/react-icons/dist/esm/icons/cc-paypal-icon';
+import CcAmexIcon from '@patternfly/react-icons/dist/esm/icons/cc-amex-icon';
+import CcDiscoverIcon from '@patternfly/react-icons/dist/esm/icons/cc-discover-icon';
+import CcVisaIcon from '@patternfly/react-icons/dist/esm/icons/cc-visa-icon';
+import CcMastercardIcon from '@patternfly/react-icons/dist/esm/icons/cc-mastercard-icon';
+import CcDinersClubIcon from '@patternfly/react-icons/dist/esm/icons/cc-diners-club-icon';
 
 import './filterSidePanel.css';
 
@@ -29,13 +29,13 @@ This package is currently an extension. Extension components do not undergo the
 ```js
 import React from 'react';
 import { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension';
-import StarIcon from '@patternfly/react-icons/dist/js/icons/star-icon';
-import CcPaypalIcon from '@patternfly/react-icons/dist/js/icons/cc-paypal-icon';
-import CcAmexIcon from '@patternfly/react-icons/dist/js/icons/cc-amex-icon';
-import CcDiscoverIcon from '@patternfly/react-icons/dist/js/icons/cc-discover-icon';
-import CcVisaIcon from '@patternfly/react-icons/dist/js/icons/cc-visa-icon';
-import CcMastercardIcon from '@patternfly/react-icons/dist/js/icons/cc-mastercard-icon';
-import CcDinersClubIcon from '@patternfly/react-icons/dist/js/icons/cc-diners-club-icon';
+import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
+import CcPaypalIcon from '@patternfly/react-icons/dist/esm/icons/cc-paypal-icon';
+import CcAmexIcon from '@patternfly/react-icons/dist/esm/icons/cc-amex-icon';
+import CcDiscoverIcon from '@patternfly/react-icons/dist/esm/icons/cc-discover-icon';
+import CcVisaIcon from '@patternfly/react-icons/dist/esm/icons/cc-visa-icon';
+import CcMastercardIcon from '@patternfly/react-icons/dist/esm/icons/cc-mastercard-icon';
+import CcDinersClubIcon from '@patternfly/react-icons/dist/esm/icons/cc-diners-club-icon';
 import { TextInput } from '@patternfly/react-core';
 
 class MockFilterSidePanelExample extends React.Component {

diff --git a/...ct-catalog-view-extension/src/components/PropertiesSidePanel/PropertiesSidePanel.test.tsx b/...ct-catalog-view-extension/src/components/PropertiesSidePanel/PropertiesSidePanel.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
-import OkIcon from '@patternfly/react-icons/dist/js/icons/ok-icon';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import GlobeIcon from '@patternfly/react-icons/dist/js/icons/globe-icon';
+import OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
 
 import { PropertiesSidePanel, PropertyItem } from './';
 

diff --git a/...ew-extension/src/components/PropertiesSidePanel/examples/PropertiesSidePanel.md b/...ew-extension/src/components/PropertiesSidePanel/examples/PropertiesSidePanel.md
@@ -5,9 +5,9 @@ propComponents: ['PropertiesSidePanel', 'PropertyItem']
 ---
 
 import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';
-import OkIcon from '@patternfly/react-icons/dist/js/icons/ok-icon';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import GlobeIcon from '@patternfly/react-icons/dist/js/icons/globe-icon';
+import OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
 import './propertiesSidePanel.css';
 
 ## Introduction
@@ -22,9 +22,9 @@ This package is currently an extension. Extension components do not undergo the
 ```js
 import React from 'react';
 import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';
-import OkIcon from '@patternfly/react-icons/dist/js/icons/ok-icon';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import GlobeIcon from '@patternfly/react-icons/dist/js/icons/globe-icon';
+import OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
 
 <div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>
   <PropertiesSidePanel>

diff --git a/packages/react-catalog-view-extension/tsconfig.json b/packages/react-catalog-view-extension/tsconfig.json
@@ -3,7 +3,6 @@
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist/esm",
-    "declarationDir": "./dist/js",
     "tsBuildInfoFile": "dist/esm.tsbuildinfo"
   },
   "include": [

diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json
@@ -4,7 +4,7 @@
   "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/js/index.d.ts",
+  "types": "dist/esm/index.d.ts",
   "patternfly:src": "src/",
   "sideEffects": [
     "*.css",
@@ -33,7 +33,7 @@
     "@patternfly/react-tokens": "^4.12.10",
     "hoist-non-react-statics": "^3.3.0",
     "lodash": "^4.17.19",
-    "tslib": "1.13.0",
+    "tslib": "^2.0.0",
     "victory-area": "^35.9.0",
     "victory-axis": "^35.9.0",
     "victory-bar": "^35.9.0",
@@ -63,6 +63,6 @@
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2",
-    "typescript": "^3.8.3"
+    "typescript": "^4.0.0"
   }
 }
diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/packages/react-charts/src/components/Chart/Chart.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
 /* eslint-disable camelcase */
-import chart_legend_Margin from '@patternfly/react-tokens/dist/js/chart_legend_Margin';
+import chart_legend_Margin from '@patternfly/react-tokens/dist/esm/chart_legend_Margin';
 
 import {
   AnimatePropTypeInterface,

diff --git a/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md b/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md
@@ -27,8 +27,8 @@ import {
   getInteractiveLegendEvents,
   getInteractiveLegendItemStyles 
 } from '@patternfly/react-charts';
-import chart_area_Opacity from '@patternfly/react-tokens/dist/js/chart_area_Opacity';
-import chart_color_black_500 from '@patternfly/react-tokens/dist/js/chart_color_black_500';
+import chart_area_Opacity from '@patternfly/react-tokens/dist/esm/chart_area_Opacity';
+import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500';
 
 ## Introduction
 Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!

diff --git a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md
@@ -20,11 +20,11 @@ import {
   ChartVoronoiContainer,
   getCustomTheme
 } from '@patternfly/react-charts';
-import chart_color_blue_300 from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
-import chart_color_green_300 from '@patternfly/react-tokens/dist/js/chart_color_green_300';
-import chart_color_cyan_300 from '@patternfly/react-tokens/dist/js/chart_color_cyan_300';
-import chart_color_gold_300 from '@patternfly/react-tokens/dist/js/chart_color_gold_300';
-import chart_color_purple_300 from '@patternfly/react-tokens/dist/js/chart_color_purple_300';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
+import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';
+import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300';
+import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
+import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300';
 
 ## Introduction
 Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!
@@ -208,10 +208,10 @@ This demonstrates an alternate way of applying custom colors to individual chart
 ```js
 import React from 'react';
 import { Chart, ChartAxis, ChartBar, ChartLegend, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts';
-import chart_color_blue_300 from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
-import chart_color_green_300 from '@patternfly/react-tokens/dist/js/chart_color_green_300';
-import chart_color_gold_300 from '@patternfly/react-tokens/dist/js/chart_color_gold_300';
-import chart_color_purple_300 from '@patternfly/react-tokens/dist/js/chart_color_purple_300';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
+import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';
+import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
+import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300';
 
 <div style={{ height: '275px', width: '450px' }}>
   <Chart
@@ -310,10 +310,10 @@ This demonstrates custom theme properties, which may be applied across multiple
 ```js
 import React from 'react';
 import { Chart, ChartBar, ChartAxis, ChartGroup, ChartThemeColor, ChartThemeVariant, ChartVoronoiContainer, getCustomTheme } from '@patternfly/react-charts';
-import chart_color_blue_300 from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
-import chart_color_green_300 from '@patternfly/react-tokens/dist/js/chart_color_green_300';
-import chart_color_cyan_300 from '@patternfly/react-tokens/dist/js/chart_color_cyan_300';
-import chart_color_gold_300 from '@patternfly/react-tokens/dist/js/chart_color_gold_300';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
+import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';
+import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300';
+import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
 
 class MultiColorChart extends React.Component {
   constructor(props) {