diff --git a/README.md b/README.md index 7e5977bfd80..52273a190fb 100644 --- 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.
-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 index ec67bf4c188..2f3ae4b7433 100644 --- 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 index 23d5684ce3b..cf73339eb5a 100644 --- 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 index 89a6557cd5b..08ba1620a17 100644 --- a/packages/docs/.storybook/webpack.config.js +++ b/packages/docs/.storybook/webpack.config.js @@ -5,6 +5,9 @@ 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?$/, @@ -12,7 +15,7 @@ module.exports = ({ config }) => { { 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 index 8362b7c2642..d093b53cb00 100644 --- 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 { - 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 = (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 ( - - - - {this.props.children} - {withToastContainer && } - - - - ); - } -} + }, [theme]); + + const themeContext = useMemo(() => { + return { + theme, + contentDensity: isCompactSize ? ContentDensity.Compact : ContentDensity.Cozy, + parameters + }; + }, [theme, isCompactSize, parameters]); + + return ( + + + + {children} + {withToastContainer && } + + + + ); +}; + +ThemeProvider.displayName = 'ThemeProvider'; +ThemeProvider.defaultProps = { + withToastContainer: false +}; + +export { ThemeProvider }; diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json index 7cc087189f4..51a8891a2fd 100644 --- 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 } ] } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index aa38f079671..7bb70f3ec2d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3000,6 +3000,11 @@ "@webassemblyjs/wast-parser" "1.8.5" "@xtuc/long" "4.2.2" +"@webcomponents/webcomponentsjs@^2.2.10": + version "2.2.10" + resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.2.10.tgz#6f6bee0277833ae98d7e5b46f1e0fdb48cd5ff44" + integrity sha512-5dzhUhP+h0qMiK0IWb7VNb0OGBoXO3AuI6Qi8t9PoKT50s5L1jv0xnwnLq+cFgPuTB8FLTNP8xIDmyoOsKBy9Q== + "@webpack-contrib/schema-utils@^1.0.0-beta.0": version "1.0.0-beta.0" resolved "https://registry.yarnpkg.com/@webpack-contrib/schema-utils/-/schema-utils-1.0.0-beta.0.tgz#bf9638c9464d177b48209e84209e23bee2eb4f65" @@ -3460,7 +3465,7 @@ arrify@^1.0.1: resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0= -asap@^2.0.0, asap@~2.0.3: +asap@^2.0.0, asap@~2.0.3, asap@~2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= @@ -5251,6 +5256,11 @@ core-js-pure@3.1.4, core-js-pure@^3.0.1: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.1.4.tgz#5fa17dc77002a169a3566cc48dc774d2e13e3769" integrity sha512-uJ4Z7iPNwiu1foygbcZYJsJs1jiXrTTCvxfLDXNhI/I+NHbSIEyr548y4fcsCEyWY0XgfAG/qqaunJ1SThHenA== +core-js@3.1.4, core-js@^3.0.1, core-js@^3.0.4, core-js@^3.1.3, core-js@^3.1.4: + version "3.1.4" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07" + integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ== + core-js@^1.0.0: version "1.2.7" resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" @@ -5261,11 +5271,6 @@ core-js@^2.4.0: resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2" integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A== -core-js@^3.0.1, core-js@^3.0.4, core-js@^3.1.3, core-js@^3.1.4: - version "3.1.4" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07" - integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ== - core-util-is@1.0.2, core-util-is@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" @@ -11488,7 +11493,7 @@ oauth-sign@~0.9.0: resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455" integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ== -object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: +object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= @@ -12827,6 +12832,13 @@ promise.series@^0.2.0: resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd" integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70= +promise@8.0.3: + version "8.0.3" + resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.3.tgz#f592e099c6cddc000d538ee7283bb190452b0bf6" + integrity sha512-HeRDUL1RJiLhyA0/grn+PTShlBAcLuh/1BJGtrvjwbvRDCTLLMEz9rOGCV+R3vHY4MixIuoMEd9Yq/XvsTPcjw== + dependencies: + asap "~2.0.6" + promise@^7.1.1: version "7.3.1" resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" @@ -13055,7 +13067,7 @@ raf-schd@^4.0.0: resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0" integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ== -raf@^3.4.0: +raf@3.4.1, raf@^3.4.0: version "3.4.1" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== @@ -13146,6 +13158,18 @@ react-addons-create-fragment@^15.6.2: loose-envify "^1.3.1" object-assign "^4.1.0" +react-app-polyfill@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.2.tgz#2a51175885c88245a2a356dc46df29f38ec9f060" + integrity sha512-yZcpLnIr0FOIzrOOz9JC37NWAWEuCaQWmYn9EWjEzlCW4cOmA5MkT5L3iP8QuUeFnoqVCTJgjIWYbXEJgNXhGA== + dependencies: + core-js "3.1.4" + object-assign "4.1.1" + promise "8.0.3" + raf "3.4.1" + regenerator-runtime "0.13.3" + whatwg-fetch "3.0.0" + react-chartjs-2@^2.7.6: version "2.7.6" resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-2.7.6.tgz#b8cd29bed00bf55b9e8172b06466b4ecf2b86bfb" @@ -13716,16 +13740,16 @@ regenerator-runtime@0.12.1, regenerator-runtime@^0.12.0, regenerator-runtime@^0. resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg== +regenerator-runtime@0.13.3, regenerator-runtime@^0.13.2: + version "0.13.3" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5" + integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw== + regenerator-runtime@^0.11.0: version "0.11.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== -regenerator-runtime@^0.13.2: - version "0.13.3" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5" - integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw== - regenerator-transform@^0.14.0: version "0.14.1" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb" @@ -16306,7 +16330,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5: dependencies: iconv-lite "0.4.24" -whatwg-fetch@>=0.10.0: +whatwg-fetch@3.0.0, whatwg-fetch@>=0.10.0: version "3.0.0" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb" integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==