feat(Charts): Added per chart lib export

config/paths.js

@@ -4,6 +4,7 @@ const root = path.resolve(__dirname, '..');
 const PATHS = {
   root,
   src: path.join(root, 'src'),
+  build: path.join(root, 'build'),
   test: path.join(root, 'test'),
   shared: path.join(root, 'shared'),
   coverage: path.join(root, 'coverage'),

package.json

@@ -54,6 +54,7 @@
     "coveralls": "^3.0.3",
     "cross-env": "^5.2.0",
     "dedent": "^0.7.0",
+    "deepmerge": "^4.0.0",
     "dotenv": "^8.0.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",

packages/base/package.json

@@ -11,10 +11,12 @@
     "directory": "packages/base"
   },
   "author": "SAP SE (https://www.sap.com)",
+  "scripts": {
+    "postbuild": "tsc ./src/polyfill/*.ts --outDir ../../build/node_modules/base/polyfill --skipLibCheck"
+  },
   "license": "Apache-2.0",
   "dependencies": {
     "core-js": "^3.1.4",
-    "deepmerge": "^3.2.0",
     "hoist-non-react-statics": "^3.3.0",
     "react-jss": "10.0.0-alpha.21",
     "tslib": "^1.9.3"

packages/charts/package.json

@@ -13,15 +13,18 @@
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "private": false,
+  "scripts": {
+    "postbuild": "rollup -c"
+  },
   "devDependencies": {
     "@types/chart.js": "^2.7.53"
   },
   "dependencies": {
     "@ui5/webcomponents-react-base": "0.4.2-rc.1",
     "chart.js": "^2.8.0",
     "chartjs-plugin-datalabels": "^0.6.0",
+    "deepmerge": "^4.0.0",
     "get-best-contrast-color": "^0.3.1",
-    "is-mergeable-object": "^1.1.0",
     "react-chartjs-2": "^2.7.6",
     "react-content-loader": "^4.2.1"
   }

packages/charts/rollup.config.js

@@ -0,0 +1,4 @@
+const rollupConfigFactory = require('../../shared/rollup/configFactory');
+
+const config = rollupConfigFactory('charts');
+module.exports = config;

packages/charts/src/components/MicroBarChart/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, FC, forwardRef, Ref } from 'react';
+import React, { CSSProperties, forwardRef, Ref } from 'react';
 // @ts-ignore
 import { createUseStyles, useTheme } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';

packages/charts/src/components/RadarChart/index.tsx

@@ -1,5 +1,5 @@
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base';
-import React, { FC, forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
+import React, { forwardRef, Ref, RefObject, useCallback, useEffect, useRef, useMemo } from 'react';
 import { Radar } from 'react-chartjs-2';
 import { useTheme } from 'react-jss';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';

packages/charts/src/index.ts

@@ -1,11 +1,11 @@
 // Library Export
-import { ColumnChart } from './components/ColumnChart';
-import { DonutChart } from './components/DonutChart';
-import { BarChart } from './components/BarChart';
-import { LineChart } from './components/LineChart';
-import { PieChart } from './components/PieChart';
-import { RadarChart } from './components/RadarChart';
-import { RadialChart } from './components/RadialChart';
-import { MicroBarChart } from './components/MicroBarChart';
+import { BarChart } from './lib/BarChart';
+import { ColumnChart } from './lib/ColumnChart';
+import { DonutChart } from './lib/DonutChart';
+import { LineChart } from './lib/LineChart';
+import { MicroBarChart } from './lib/MicroBarChart';
+import { PieChart } from './lib/PieChart';
+import { RadarChart } from './lib/RadarChart';
+import { RadialChart } from './lib/RadialChart';
 
 export { ColumnChart, DonutChart, BarChart, LineChart, PieChart, RadarChart, RadialChart, MicroBarChart };

packages/charts/src/lib/BarChart.ts

@@ -0,0 +1,3 @@
+import { BarChart } from '../components/BarChart';
+
+export { BarChart };

packages/charts/src/lib/ColumnChart.ts

@@ -0,0 +1,3 @@
+import { ColumnChart } from '../components/ColumnChart';
+
+export { ColumnChart };

packages/charts/src/lib/DonutChart.ts

@@ -0,0 +1,3 @@
+import { DonutChart } from '../components/DonutChart';
+
+export { DonutChart };

packages/charts/src/lib/LineChart.ts

@@ -0,0 +1,3 @@
+import { LineChart } from '../components/LineChart';
+
+export { LineChart };

packages/charts/src/lib/MicroBarChart.ts

@@ -0,0 +1,3 @@
+import { MicroBarChart } from '../components/MicroBarChart';
+
+export { MicroBarChart };

packages/charts/src/lib/PieChart.ts

@@ -0,0 +1,3 @@
+import { PieChart } from '../components/PieChart';
+
+export { PieChart };

packages/charts/src/lib/RadarChart.ts

@@ -0,0 +1,3 @@
+import { RadarChart } from '../components/RadarChart';
+
+export { RadarChart };

packages/charts/src/lib/RadialChart.ts

@@ -0,0 +1,3 @@
+import { RadialChart } from '../components/RadialChart';
+
+export { RadialChart };

packages/docs/.storybook/config.js

@@ -150,7 +150,6 @@ const themr = makeDecorator({
   parameterName: 'themr',
   skipIfNoParametersOrOptions: false,
   wrapper: (getStory, context) => {
-    // debugger;
     return <ThemeProvider withToastContainer>{getStory(context)}</ThemeProvider>;
   }
 });

packages/main/package.json

@@ -16,6 +16,7 @@
   "scripts": {
     "generateWebComponents": "ts-node -O '{\"module\": \"commonjs\"}' -r esm ./scripts/wrapperGeneration/generateWebComponentWrappers --onlyStopForMerge",
     "build": "webpack --config ./scripts/wrapperGeneration/webpack.config.js",
+    "postbuild": "rollup -c rollup.config.js",
     "test:karma": "karma start ../../config/karma.conf.js",
     "test:karma:update": "cross-env UPDATE=1 yarn run test:karma"
   },

packages/main/rollup.config.js

@@ -1,48 +1,3 @@
-const resolve = require('rollup-plugin-node-resolve');
-const commonjs = require('rollup-plugin-commonjs');
-const typescriptPlugin = require('rollup-plugin-typescript');
-const jsonPlugin = require('rollup-plugin-json');
-const postcss = require('rollup-plugin-postcss');
-const typescript = require('typescript');
-const path = require('path');
-const fs = require('fs');
-const pkg = require('./package.json');
-const PATHS = require('../../config/paths');
+const rollupConfigFactory = require('../../shared/rollup/configFactory');
 
-const LIB_BASE_PATH = path.resolve(PATHS.packages, 'main', 'src', 'lib');
-
-const allLibFiles = fs.readdirSync(LIB_BASE_PATH).filter((file) => fs.statSync(`${LIB_BASE_PATH}/${file}`).isFile());
-
-const plugins = [
-  typescriptPlugin({
-    typescript,
-    importHelpers: true,
-    declarationDir: path.join(PATHS.root, 'typings')
-  }),
-  resolve(),
-  jsonPlugin(),
-  postcss(),
-  commonjs({
-    namedExports: {
-      'react-jss': ['ThemeProvider', 'jss', 'withTheme']
-    }
-  })
-];
-
-const EXTERNAL_MODULE_REGEX = new RegExp(
-  `${Object.keys(pkg.dependencies)
-    .map((item) => item.replace('/', '/'))
-    .join('|')}|react$|react-jss|react-dom$`
-);
-
-module.exports = allLibFiles.map((file) => ({
-  input: `${LIB_BASE_PATH}/${file}`,
-  external: (id) => EXTERNAL_MODULE_REGEX.test(id),
-  output: [
-    {
-      file: path.resolve(PATHS.root, 'build', 'node_modules', 'main', 'lib', file.replace(/\.ts$/, '.js')),
-      format: 'es'
-    }
-  ],
-  plugins
-}));
+module.exports = rollupConfigFactory('main');

scripts/rollup/bundles.js

@@ -34,7 +34,7 @@ const bundles = [
     bundleTypes: [bundleTypes.NODE_DEV, bundleTypes.NODE_PROD, bundleTypes.NODE_ES_DEV, bundleTypes.NODE_ES_PROD],
     entry: 'charts',
     global: 'FioriForReactCharts',
-    externals: ['react', 'react-dom']
+    externals: ['react', 'react-jss']
   }
 ];
 

scripts/rollup/packaging.js

@@ -44,10 +44,7 @@ async function prepareNpmPackages() {
   const builtPackageFolders = readdirSync('build/node_modules').filter((dir) => dir.charAt(0) !== '.');
   await Promise.all(builtPackageFolders.map(prepareNpmPackage));
   // create main lib
-  await asyncExecuteCommand(`node_modules/.bin/rollup -c packages/main/rollup.config.js`);
-  await asyncExecuteCommand(
-    `tsc packages/base/src/polyfill/*.ts --outDir build/node_modules/base/polyfill --skipLibCheck`
-  );
+  await asyncExecuteCommand(`node_modules/.bin/lerna run postbuild --stream`);
 }
 
 module.exports = {

scripts/rollup/results.json

@@ -4,29 +4,29 @@
       "filename": "charts.development.js",
       "bundleType": "NODE_ES_DEV",
       "packageName": "charts",
-      "size": 70062,
-      "gzip": 13371
+      "size": 44289,
+      "gzip": 7896
     },
     {
       "filename": "charts.production.min.js",
       "bundleType": "NODE_ES_PROD",
       "packageName": "charts",
-      "size": 70062,
-      "gzip": 13371
+      "size": 44185,
+      "gzip": 7874
     },
     {
       "filename": "charts.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "charts",
-      "size": 70596,
-      "gzip": 13381
+      "size": 45112,
+      "gzip": 7936
     },
     {
       "filename": "charts.production.min.js",
       "bundleType": "NODE_PROD",
       "packageName": "charts",
-      "size": 35724,
-      "gzip": 8896
+      "size": 22556,
+      "gzip": 6181
     },
     {
       "filename": "base.development.js",
@@ -60,29 +60,29 @@
       "filename": "main.development.js",
       "bundleType": "NODE_ES_DEV",
       "packageName": "main",
-      "size": 180494,
-      "gzip": 32621
+      "size": 181071,
+      "gzip": 32697
     },
     {
       "filename": "main.production.min.js",
       "bundleType": "NODE_ES_PROD",
       "packageName": "main",
-      "size": 180494,
-      "gzip": 32621
+      "size": 181071,
+      "gzip": 32697
     },
     {
       "filename": "main.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "main",
-      "size": 186027,
-      "gzip": 32749
+      "size": 186628,
+      "gzip": 32823
     },
     {
       "filename": "main.production.min.js",
       "bundleType": "NODE_PROD",
       "packageName": "main",
-      "size": 94897,
-      "gzip": 25035
+      "size": 95335,
+      "gzip": 25068
     }
   ]
 }

shared/rollup/configFactory.js

@@ -0,0 +1,53 @@
+const resolve = require('rollup-plugin-node-resolve');
+const commonjs = require('rollup-plugin-commonjs');
+const typescriptPlugin = require('rollup-plugin-typescript');
+const jsonPlugin = require('rollup-plugin-json');
+const postcss = require('rollup-plugin-postcss');
+const typescript = require('typescript');
+const path = require('path');
+const fs = require('fs');
+const PATHS = require('../../config/paths');
+
+const rollupConfigFactory = (pkgName) => {
+  const LIB_BASE_PATH = path.resolve(PATHS.packages, pkgName, 'src', 'lib');
+
+  const allLibFiles = fs.readdirSync(LIB_BASE_PATH).filter((file) => fs.statSync(`${LIB_BASE_PATH}/${file}`).isFile());
+
+  const plugins = [
+    typescriptPlugin({
+      typescript,
+      tsconfig: path.resolve(PATHS.root, 'tsconfig.json'),
+      importHelpers: true,
+      declarationDir: path.join(PATHS.root, 'typings')
+    }),
+    resolve(),
+    jsonPlugin(),
+    postcss(),
+    commonjs({
+      namedExports: {
+        'react-jss': ['ThemeProvider', 'jss', 'withTheme']
+      }
+    })
+  ];
+
+  const pkg = require(path.resolve(PATHS.packages, pkgName, 'package.json'));
+  const EXTERNAL_MODULE_REGEX = new RegExp(
+    `${Object.keys(pkg.dependencies)
+      .map((item) => item.replace('/', '/'))
+      .join('|')}|react$|react-jss|react-dom$`
+  );
+
+  return allLibFiles.map((file) => ({
+    input: `${LIB_BASE_PATH}/${file}`,
+    external: (id) => EXTERNAL_MODULE_REGEX.test(id),
+    output: [
+      {
+        file: path.resolve(PATHS.build, 'node_modules', pkgName, 'lib', file.replace(/\.ts$/, '.js')),
+        format: 'es'
+      }
+    ],
+    plugins
+  }));
+};
+
+module.exports = rollupConfigFactory;

yarn.lock

@@ -5773,16 +5773,11 @@ deep-object-diff@^1.1.0:
   resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a"
   integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==
 
-[email protected]:
+[email protected], deepmerge@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.0.0.tgz#3e3110ca29205f120d7cb064960a39c3d2087c09"
   integrity sha512-YZ1rOP5+kHor4hMAH+HRQnBQHg+wvS1un1hAOuIcxcBy0hzcUf6Jg2a1w65kpoOUnurOfZbERwjI1TfZxNjcww==
 
-deepmerge@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.3.0.tgz#d3c47fd6f3a93d517b14426b0628a17b0125f5f7"
-  integrity sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==
-
 default-require-extensions@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-2.0.0.tgz#f5f8fbb18a7d6d50b21f641f649ebb522cfe24f7"
@@ -8516,11 +8511,6 @@ is-in-browser@^1.0.2, is-in-browser@^1.1.3:
   resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
   integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
 
-is-mergeable-object@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz#faaa3ed1cfce87d6f7d2f5885e92cc30af3e2ebf"
-  integrity sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==
-
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"