fix(pf4): use tree shaking for PF4 dep

rvsia · rvsia · commit 04b85e2d486e · 2020-02-03T10:57:28.000+01:00
diff --git a/packages/pf4-component-mapper/package.json b/packages/pf4-component-mapper/package.json
@@ -22,8 +22,8 @@
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
     "@data-driven-forms/react-form-renderer": "*",
-    "@patternfly/react-core": "^3.104.0",
-    "@patternfly/react-icons": "^3.14.23",
+    "@patternfly/react-core": "^3.134.2",
+    "@patternfly/react-icons": "^3.14.39",
     "@semantic-release/git": "^7.0.5",
     "@semantic-release/npm": "^5.1.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -61,6 +61,7 @@
     "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-size-snapshot": "^0.10.0",
     "rollup-plugin-terser": "^5.1.2",
+    "rollup-pluginutils": "^2.8.2",
     "sass-loader": "^7.1.0",
     "semantic-release": "15.12.0",
     "style-loader": "^0.23.1",
diff --git a/packages/pf4-component-mapper/rollup.config.js b/packages/pf4-component-mapper/rollup.config.js
@@ -5,13 +5,24 @@ import replace from 'rollup-plugin-replace';
 import nodeGlobals from 'rollup-plugin-node-globals';
 import { terser } from 'rollup-plugin-terser';
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
+import { createFilter } from 'rollup-pluginutils';
 import sass from 'rollup-plugin-sass';
 import async from 'rollup-plugin-async';
 
+const pf4Externals = createFilter([
+  'react',
+  'react-dom',
+  'prop-types',
+  '@data-driven-forms/react-form-renderer',
+  '@patternfly/react-core/**',
+  '@patternfly/react-icons/**',
+], null, { resolve: false });
+
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  '@patternfly/react-core': 'PatternflyReact',
+  '@patternfly/react-core': '@patternfly/react-core',
+  '@patternfly/react-icons': '@patternfly/react-icons',
   '@data-driven-forms/react-form-renderer': '@data-driven-forms/react-form-renderer',
 };
 
@@ -38,7 +49,7 @@ export default [{
     exports: 'named',
     globals,
   },
-  external: Object.keys(globals),
+  external: pf4Externals,
   plugins: [
     async(),
     nodeResolve(),
diff --git a/packages/pf4-component-mapper/src/form-fields/fieldArray/index.js b/packages/pf4-component-mapper/src/form-fields/fieldArray/index.js
@@ -1,6 +1,9 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Grid, GridItem, Bullseye, FormHelperText } from '@patternfly/react-core';
+
+import { Grid, GridItem } from '@patternfly/react-core/dist/js/layouts/Grid/index';
+import { Bullseye } from '@patternfly/react-core/dist/js/layouts/Bullseye/index';
+import { FormHelperText } from '@patternfly/react-core/dist/js/components/Form/FormHelperText';
 
 import CloseIcon from '@patternfly/react-icons/dist/js/icons/close-icon';
 import AddCircleOIcon from '@patternfly/react-icons/dist/js/icons/add-circle-o-icon';
diff --git a/packages/pf4-component-mapper/src/form-fields/form-fields.js b/packages/pf4-component-mapper/src/form-fields/form-fields.js
@@ -1,16 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import MultipleChoiceList from './multiple-choice-list';
-import {
-  TextInput,
-  Checkbox,
-  TextArea,
-  FormGroup,
-  TextContent,
-  Text,
-  TextVariants,
-  Switch,
-} from '@patternfly/react-core';
+
+import { Text, TextVariants } from '@patternfly/react-core/dist/js/components/Text/Text';
+import { TextContent } from '@patternfly/react-core/dist/js/components/Text/TextContent';
+import { FormGroup } from '@patternfly/react-core/dist/js/components/Form/FormGroup';
+import { Switch } from '@patternfly/react-core/dist/js/components/Switch/Switch';
+import { TextArea } from '@patternfly/react-core/dist/js/components/TextArea/TextArea';
+import { Checkbox } from '@patternfly/react-core/dist/js/components/Checkbox/Checkbox';
+import { TextInput } from '@patternfly/react-core/dist/js/components/TextInput/TextInput';
+
 import { componentTypes } from '@data-driven-forms/react-form-renderer';
 import Select from './select/select';
 import RadioGroup from './radio';
diff --git a/packages/pf4-component-mapper/src/form-fields/layout-components.js b/packages/pf4-component-mapper/src/form-fields/layout-components.js
@@ -1,7 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { layoutComponents } from '@data-driven-forms/react-form-renderer';
-import { Form, Button, ActionGroup, TextContent, Text, TextVariants } from '@patternfly/react-core';
+
+import { Text, TextVariants } from '@patternfly/react-core/dist/js/components/Text/Text';
+import { TextContent } from '@patternfly/react-core/dist/js/components/Text/TextContent';
+import { Form } from '@patternfly/react-core/dist/js/components/Form/Form';
+import { ActionGroup } from '@patternfly/react-core/dist/js/components/Form/ActionGroup';
+import { Button } from '@patternfly/react-core/dist/js/components/Button/Button';
+
 import './layout-components-styles.scss';
 
 const ButtonLayout = ({ label, bsStyle, children, disabled, ...props }) =>
diff --git a/packages/pf4-component-mapper/src/form-fields/multiple-choice-list.js b/packages/pf4-component-mapper/src/form-fields/multiple-choice-list.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Checkbox, FormGroup } from '@patternfly/react-core';
+
+import { FormGroup } from '@patternfly/react-core/dist/js/components/Form/FormGroup';
+import { Checkbox } from '@patternfly/react-core/dist/js/components/Checkbox/Checkbox';
+
 import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
 
 const FinalCheckbox = (props) => (
diff --git a/packages/pf4-component-mapper/src/form-fields/plain-text.js b/packages/pf4-component-mapper/src/form-fields/plain-text.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, TextContent, TextVariants } from '@patternfly/react-core';
+
+import { Text, TextVariants } from '@patternfly/react-core/dist/js/components/Text/Text';
+import { TextContent } from '@patternfly/react-core/dist/js/components/Text/TextContent';
 
 const PlainText = ({ label, name }) => (
   <TextContent>
diff --git a/packages/pf4-component-mapper/src/form-fields/radio.js b/packages/pf4-component-mapper/src/form-fields/radio.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Radio } from '@patternfly/react-core';
+
+import { Radio } from '@patternfly/react-core/dist/js/components/Radio/Radio';
 
 const RadioGroup = ({ FieldProvider, options, isDisabled, isReadOnly, input, ...props }) => options.map(option => (
   <FieldProvider
diff --git a/packages/pf4-component-mapper/src/form-fields/select/clear-indicator.js b/packages/pf4-component-mapper/src/form-fields/select/clear-indicator.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, ButtonVariant } from '@patternfly/react-core';
+
+import { Button, ButtonVariant } from '@patternfly/react-core/dist/js/components/Button/Button';
 
 import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
 
diff --git a/packages/pf4-component-mapper/src/form-fields/select/option.js b/packages/pf4-component-mapper/src/form-fields/select/option.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { components } from 'react-select';
 import PropTypes from 'prop-types';
-import { Checkbox } from '@patternfly/react-core';
+import { Checkbox } from '@patternfly/react-core/dist/js/components/Checkbox/Checkbox';
 
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 
diff --git a/packages/pf4-component-mapper/src/form-fields/select/value-container.js b/packages/pf4-component-mapper/src/form-fields/select/value-container.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@patternfly/react-core';
+
+import { Button } from '@patternfly/react-core/dist/js/components/Button/Button';
 
 class ValueContainer extends Component {
     state = {
diff --git a/packages/pf4-component-mapper/src/form-fields/sub-form.js b/packages/pf4-component-mapper/src/form-fields/sub-form.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Title } from '@patternfly/react-core';
-import { TextContent, Text, TextVariants, Grid, GridItem } from '@patternfly/react-core';
+
+import { Text, TextVariants } from '@patternfly/react-core/dist/js/components/Text/Text';
+import { TextContent } from '@patternfly/react-core/dist/js/components/Text/TextContent';
+import { Grid, GridItem } from '@patternfly/react-core/dist/js/layouts/Grid/index';
+import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
 
 const SubForm = ({
   fields,
diff --git a/packages/pf4-component-mapper/src/form-fields/tabs.js b/packages/pf4-component-mapper/src/form-fields/tabs.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Tabs, Tab } from '@patternfly/react-core';
+
+import { Tab } from '@patternfly/react-core/dist/js/components/Tabs/Tab';
+import { Tabs } from '@patternfly/react-core/dist/js/components/Tabs/Tabs';
 
 class FormTabs extends React.Component {
   state = {
diff --git a/packages/pf4-component-mapper/src/form-fields/wizard/step-buttons.js b/packages/pf4-component-mapper/src/form-fields/wizard/step-buttons.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core/dist/js/components/Button/Button';
 import selectNext from '@data-driven-forms/common/src/wizard/select-next';
 
 const SimpleNext = ({
diff --git a/packages/pf4-component-mapper/src/form-fields/wizard/wizard-nav.js b/packages/pf4-component-mapper/src/form-fields/wizard/wizard-nav.js
@@ -1,5 +1,8 @@
 import React from 'react';
-import { WizardNavItem, WizardNav } from '@patternfly/react-core';
+
+import { WizardNavItem } from '@patternfly/react-core/dist/js/components/Wizard/WizardNavItem';
+import { WizardNav } from '@patternfly/react-core/dist/js/components/Wizard/WizardNav';
+
 import isEqual from 'lodash/isEqual';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
diff --git a/packages/pf4-component-mapper/src/form-fields/wizard/wizard-step.js b/packages/pf4-component-mapper/src/form-fields/wizard/wizard-step.js
@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
-import { WizardBody, Title } from '@patternfly/react-core';
+import { WizardBody } from '@patternfly/react-core/dist/js/components/Wizard/WizardBody';
+import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
 import PropTypes from 'prop-types';
 import WizardStepButtons from './step-buttons';
 
diff --git a/packages/pf4-component-mapper/src/form-fields/wizard/wizard.js b/packages/pf4-component-mapper/src/form-fields/wizard/wizard.js
@@ -1,7 +1,12 @@
 import React, { cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
-import { WizardHeader, Backdrop, Bullseye, WizardNav } from '@patternfly/react-core';
+
+import { WizardHeader } from '@patternfly/react-core/dist/js/components/Wizard/WizardHeader';
+import { WizardNav } from '@patternfly/react-core/dist/js/components/Wizard/WizardNav';
+import { Backdrop } from '@patternfly/react-core/dist/js/components/Backdrop/Backdrop';
+import { Bullseye } from '@patternfly/react-core/dist/js/layouts/Bullseye/index';
+
 import WizardStep from './wizard-step';
 import './wizard-styles.scss';
 import get from 'lodash/get';
diff --git a/packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap b/packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap
diff --git a/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap b/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap
diff --git a/packages/react-renderer-demo/src/app/package.json b/packages/react-renderer-demo/src/app/package.json
diff --git a/yarn.lock b/yarn.lock
