refactor(ThemeProvider): Functional component (#89)

MarcusNotheis · web-flow · commit 506dc1d28489 · 2019-08-15T08:50:07.000+02:00
diff --git a/README.md b/README.md
@@ -101,9 +101,16 @@ You could import all components also from `@ui5/webcomponents-react` directly, b
 
 ### Browser Support
 `@ui5/webcomponents-react` is supporting all modern major browsers. There is no support for Internet Explorer 11 built in.<br />
-If you want your application to run in IE11, you will have to polyfill some features by importing:
+If you want your application to run in IE11, you will have to polyfill some features by importing these polyfills as **first** imports in your `src/index.js`:
 ```js
+import 'react-app-polyfill/ie11';
+import '@ui5/webcomponents-base/src/features/browsersupport/IE11';
 import '@ui5/webcomponents-react-base/polyfill/IE11';
+import '@webcomponents/webcomponentsjs/webcomponents-bundle';
+```
+You can install `react-app-polyfill` and `@webcomponents/webcomponentsjs` with the following command:
+```bash
+npm install react-app-polyfill @webcomponents/webcomponentsjs --save
 ```
 
 For Browser Support and the configuration of the UI5 Web Components, please take a look at the 
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@types/react-dom": "^16.8.4",
     "@types/sinon": "^7.0.12",
     "@types/storybook__react": "^4.0.1",
+    "@webcomponents/webcomponentsjs": "^2.2.10",
     "babel-code-frame": "^6.26.0",
     "babel-loader": "^8.0.5",
     "babel-preset-react-app": "^9.0.0",
@@ -91,6 +92,7 @@
     "puppeteer": "^1.15.0",
     "qs": "^6.7.0",
     "react": "^16.8.6",
+    "react-app-polyfill": "^1.0.2",
     "react-docgen-typescript-loader": "^3.1.0",
     "react-dom": "^16.8.6",
     "react-highlight.js": "^1.0.7",
diff --git a/packages/docs/.storybook/config.js b/packages/docs/.storybook/config.js
@@ -1,3 +1,6 @@
+import 'react-app-polyfill/ie11';
+import '@ui5/webcomponents-base/src/features/browsersupport/IE11';
+import '@webcomponents/webcomponentsjs/webcomponents-bundle';
 import React from 'react';
 import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
 import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
diff --git a/packages/docs/.storybook/webpack.config.js b/packages/docs/.storybook/webpack.config.js
@@ -5,14 +5,17 @@ require('dotenv').config({
   path: path.join(PATHS.root, '.env')
 });
 
+process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = 'development';
+
 module.exports = ({ config }) => {
   const tsLoader = {
     test: /\.tsx?$/,
     use: [
       {
         loader: require.resolve('babel-loader'),
         options: {
-          presets: [require.resolve('babel-preset-react-app')]
+          presets: [[require.resolve('babel-preset-react-app'), { flow: false, typescript: true }]]
         }
       }
     ]
@@ -30,37 +33,48 @@ SKIP_DOC_GENERATION=true
     tsLoader.use.push({ loader: require.resolve('react-docgen-typescript-loader') });
   }
 
-  return {
-    ...config,
-    module: {
-      ...config.module,
-      rules: [
-        ...config.module.rules,
-        tsLoader,
-        {
-          test: [/cldr\/.*\.json$/, /i18n\/.*\.json$/],
-          loader: 'file-loader',
-          options: {
-            name: 'static/media/[name].[hash:8].[ext]'
-          },
-          type: 'javascript/auto'
-        },
-        {
-          test: /\.properties$/,
-          use: 'file-loader'
-        }
-      ]
-    },
-    resolve: {
-      ...config.resolve,
-      extensions: [...config.resolve.extensions, '.ts', '.tsx', '.jsx'],
-      alias: {
-        ...config.resolve.alias,
-        '@shared': path.join(PATHS.root, 'shared'),
-        '@ui5/webcomponents-react/lib': path.join(PATHS.root, 'packages', 'main', 'src', 'lib'),
-        '@ui5/webcomponents-react-charts/lib': path.join(PATHS.root, 'packages', 'charts', 'src', 'lib'),
-        '@ui5/webcomponents-react-base': path.join(PATHS.root, 'packages', 'base', 'src', 'index.ts')
+  config.module.rules.push(
+    tsLoader,
+    {
+      test: /\.(js|mjs)$/,
+      exclude: /@babel(?:\/|\\{1,2})runtime/,
+      loader: require.resolve('babel-loader'),
+      options: {
+        babelrc: false,
+        configFile: false,
+        compact: false,
+        presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],
+        cacheDirectory: true,
+        cacheCompression: false,
+
+        // If an error happens in a package, it's possible to be
+        // because it was compiled. Thus, we don't want the browser
+        // debugger to show the original code. Instead, the code
+        // being evaluated would be much more helpful.
+        sourceMaps: false
       }
+    },
+    {
+      test: /\.properties$/,
+      use: 'file-loader'
     }
+  );
+
+  config.module.rules = [
+    {
+      oneOf: config.module.rules
+    }
+  ];
+
+  config.resolve.extensions.push('.ts', '.tsx');
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    '@shared': path.join(PATHS.root, 'shared'),
+    '@ui5/webcomponents-react/lib': path.join(PATHS.root, 'packages', 'main', 'src', 'lib'),
+    '@ui5/webcomponents-react-charts/lib': path.join(PATHS.root, 'packages', 'charts', 'src', 'lib'),
+    '@ui5/webcomponents-react-base/lib': path.join(PATHS.root, 'packages', 'base', 'src', 'lib'),
+    '@ui5/webcomponents-react-base/polyfill': path.join(PATHS.root, 'packages', 'base', 'npm', 'polyfill')
   };
+
+  return config;
 };
diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx
@@ -1,9 +1,9 @@
 import boot from '@ui5/webcomponents-base/src/boot';
 import { getCompactSize, getTheme } from '@ui5/webcomponents-base/src/Configuration';
 import { injectThemeProperties } from '@ui5/webcomponents-base/src/theming/StyleInjection';
-import { createGenerateClassName, sap_fiori_3 } from '@ui5/webcomponents-react-base';
-import fiori3ThemeProperties from '@ui5/webcomponents/dist/themes/sap_fiori_3/parameters-bundle.css.json';
-import React, { Fragment, PureComponent, ReactNode } from 'react';
+import { createGenerateClassName, sap_fiori_3, Device } from '@ui5/webcomponents-react-base';
+import fiori3Theme from '@ui5/webcomponents/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js';
+import React, { FC, Fragment, ReactNode, useEffect, useMemo } from 'react';
 import { JssProvider, ThemeProvider as ReactJssThemeProvider } from 'react-jss';
 import { ContentDensity } from '../../lib/ContentDensity';
 import { MessageToast } from '../../lib/MessageToast';
@@ -16,47 +16,57 @@ export interface ThemeProviderProps {
 
 const generateClassName = createGenerateClassName();
 
-export class ThemeProvider extends PureComponent<ThemeProviderProps> {
-  static defaultProps = {
-    withToastContainer: false
-  };
-
-  constructor(props) {
-    super(props);
-    boot().then((_) => {
-      let existingThemingProperties = document.querySelector('head style[data-ui5-webcomponents-theme-properties]');
-      if (!existingThemingProperties || !existingThemingProperties.innerHTML) {
-        injectThemeProperties(fiori3ThemeProperties._);
+const ThemeProvider: FC<ThemeProviderProps> = (props) => {
+  const theme = getTheme();
+  useEffect(() => {
+    boot().then(async () => {
+      // TODO will rename to 'data-ui5-theme-properties' after next UI5 Web Components Release
+      const styleElement = document.head.querySelector('style[data-ui5-webcomponents-theme-properties]');
+      // only inject parameters for sap_fiori_3 and if they haven't been injected before
+      if (theme === Themes.sap_fiori_3 && !styleElement.textContent) {
+        injectThemeProperties(fiori3Theme);
+        const CSSVarsPonyfill = window['CSSVarsPonyfill'];
+        if (Device.browser.msie && CSSVarsPonyfill) {
+          setTimeout(() => {
+            CSSVarsPonyfill.resetCssVars();
+            CSSVarsPonyfill.cssVars();
+          }, 0);
+        }
       }
     });
-  }
+  }, [theme]);
+  const { withToastContainer, children } = props;
 
-  private static getTheme = (theme: Themes) => {
+  const isCompactSize = getCompactSize();
+
+  const parameters = useMemo(() => {
     if (theme === Themes.sap_fiori_3) return sap_fiori_3;
     return null;
-  };
-
-  private static getContentDensity = (compactSize: boolean) => {
-    return compactSize ? ContentDensity.Compact : ContentDensity.Cozy;
-  };
-
-  render() {
-    const { withToastContainer } = this.props;
-    return (
-      <JssProvider generateId={generateClassName}>
-        <ReactJssThemeProvider
-          theme={{
-            theme: getTheme(),
-            contentDensity: ThemeProvider.getContentDensity(getCompactSize()),
-            parameters: ThemeProvider.getTheme(getTheme())
-          }}
-        >
-          <Fragment>
-            {this.props.children}
-            {withToastContainer && <MessageToast />}
-          </Fragment>
-        </ReactJssThemeProvider>
-      </JssProvider>
-    );
-  }
-}
+  }, [theme]);
+
+  const themeContext = useMemo(() => {
+    return {
+      theme,
+      contentDensity: isCompactSize ? ContentDensity.Compact : ContentDensity.Cozy,
+      parameters
+    };
+  }, [theme, isCompactSize, parameters]);
+
+  return (
+    <JssProvider generateId={generateClassName}>
+      <ReactJssThemeProvider theme={themeContext}>
+        <Fragment>
+          {children}
+          {withToastContainer && <MessageToast />}
+        </Fragment>
+      </ReactJssThemeProvider>
+    </JssProvider>
+  );
+};
+
+ThemeProvider.displayName = 'ThemeProvider';
+ThemeProvider.defaultProps = {
+  withToastContainer: false
+};
+
+export { ThemeProvider };
diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json
@@ -4,29 +4,29 @@
       "filename": "charts.development.js",
       "bundleType": "NODE_ES_DEV",
       "packageName": "charts",
-      "size": 39708,
-      "gzip": 7661
+      "size": 39752,
+      "gzip": 7671
     },
     {
       "filename": "charts.production.min.js",
       "bundleType": "NODE_ES_PROD",
       "packageName": "charts",
-      "size": 39604,
-      "gzip": 7639
+      "size": 39648,
+      "gzip": 7649
     },
     {
       "filename": "charts.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "charts",
-      "size": 40469,
-      "gzip": 7702
+      "size": 40513,
+      "gzip": 7711
     },
     {
       "filename": "charts.production.min.js",
       "bundleType": "NODE_PROD",
       "packageName": "charts",
-      "size": 20060,
-      "gzip": 6117
+      "size": 20079,
+      "gzip": 6122
     },
     {
       "filename": "base.development.js",
@@ -60,29 +60,29 @@
       "filename": "main.development.js",
       "bundleType": "NODE_ES_DEV",
       "packageName": "main",
-      "size": 180706,
-      "gzip": 33215
+      "size": 184672,
+      "gzip": 34502
     },
     {
       "filename": "main.production.min.js",
       "bundleType": "NODE_ES_PROD",
       "packageName": "main",
-      "size": 180706,
-      "gzip": 33215
+      "size": 184672,
+      "gzip": 34502
     },
     {
       "filename": "main.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "main",
-      "size": 186313,
-      "gzip": 33339
+      "size": 190406,
+      "gzip": 34658
     },
     {
       "filename": "main.production.min.js",
       "bundleType": "NODE_PROD",
       "packageName": "main",
-      "size": 95013,
-      "gzip": 25174
+      "size": 97719,
+      "gzip": 26216
     }
   ]
 }
diff --git a/yarn.lock b/yarn.lock
