fix(Framework): fix side-effects in rollup build

package.json

@@ -6,7 +6,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "start": "start-storybook -p 6006 -c .storybook",
-    "build": "node ./scripts/rollup/build.js",
+    "build": "yarn clean && lerna run build --stream && node ./scripts/rollup/build.js",
     "build:storybook": "build-storybook -c .storybook -o .out",
     "pretest": "node scripts/test/clean.js",
     "test": "jest --config=config/jest.config.js --coverage",
@@ -50,20 +50,16 @@
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
     "chalk": "^3.0.0",
-    "cli-table": "^0.3.1",
     "dedent": "^0.7.0",
     "dotenv": "^8.2.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
-    "escape-string-regexp": "^2.0.0",
     "eslint": "^6.8.0",
     "eslint-plugin-prefer-arrow": "^1.1.7",
     "eslint-plugin-react": "^7.18.3",
-    "filesize": "^6.0.1",
     "glob": "^7.1.6",
     "google-closure-compiler": "^20200315.0.0",
-    "gzip-size": "^5.1.0",
     "husky": "^4.2.1",
     "identity-obj-proxy": "^3.0.0",
     "intersection-observer": "^0.7.0",
@@ -73,6 +69,7 @@
     "jest-enzyme": "^7.1.2",
     "lerna": "^3.20.2",
     "lint-staged": "^9.5.0",
+    "micromatch": "^4.0.2",
     "minimist": "^1.2.0",
     "mkdirp": "^1.0.4",
     "ncp": "^2.0.0",

packages/base/package.json

@@ -24,7 +24,7 @@
     "clean": "rimraf cjs Device hooks lib polyfill styling types utils index.esm.js index.d.ts",
     "build:rollup": "rollup -c rollup.config.js",
     "build:polyfills": "tsc ./src/polyfill/*.ts --outDir ./polyfill --skipLibCheck",
-    "postbuild": "npm-run-all -s build:rollup build:polyfills"
+    "build": "npm-run-all -s build:rollup build:polyfills"
   },
   "dependencies": {
     "core-js": "3.6.4",

packages/charts/package.json

@@ -17,7 +17,7 @@
   ],
   "scripts": {
     "clean": "rimraf cjs components interfaces internal lib themes util index.esm.js index.d.ts config.d.ts hooks indexNew.d.ts",
-    "postbuild": "rollup -c rollup.config.js"
+    "build": "rollup -c rollup.config.js"
   },
   "dependencies": {
     "chart.js": "^2.9.3",

packages/charts/rollup.config.js

@@ -1,9 +1,4 @@
 const rollupConfigFactory = require('../../shared/rollup/configFactory');
 
-const config = rollupConfigFactory('charts', [
-  'react',
-  'react-jss',
-  '@ui5/webcomponents',
-  '@ui5/webcomponents-react-charts'
-]);
+const config = rollupConfigFactory('charts', ['@ui5/webcomponents', '@ui5/webcomponents-base']);
 module.exports = config;

packages/main/package.json

@@ -16,11 +16,11 @@
     "@ui5/webcomponents-icons/dist/icons/*",
     "@ui5/webcomponents/dist/*",
     "@ui5/webcomponents-fiori/dist/*",
-    "*/ThemingSupport.js"
+    "**/ThemingSupport"
   ],
   "scripts": {
     "clean": "rimraf cjs components enums interfaces internal lib webComponents index.esm.js index.d.ts",
-    "postbuild": "rollup -c rollup.config.js"
+    "build": "rollup -c rollup.config.js"
   },
   "dependencies": {
     "@ui5/webcomponents-react-base": "^0.9.0-rc.9",

packages/main/rollup.config.js

@@ -1,3 +1,3 @@
 const rollupConfigFactory = require('../../shared/rollup/configFactory');
 
-module.exports = rollupConfigFactory('main');
+module.exports = rollupConfigFactory('main', ['@ui5/webcomponents-base']);

packages/main/src/lib/ThemingSupport.ts

@@ -1 +1,12 @@
-import '../components/ThemeProvider/ThemingSupport';
+import { root as sap_belize } from '@sap-theming/theming-base-content/content/Base/baseLib/sap_belize/variables.json';
+import { root as sap_belize_hcb } from '@sap-theming/theming-base-content/content/Base/baseLib/sap_belize_hcb/variables.json';
+import { root as sap_belize_hcw } from '@sap-theming/theming-base-content/content/Base/baseLib/sap_belize_hcw/variables.json';
+import { root as sap_fiori_3 } from '@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/variables.json';
+import { root as sap_fiori_3_dark } from '@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3_dark/variables.json';
+
+const themeMap = window['@ui5/webcomponents-react-theming'] || (window['@ui5/webcomponents-react-theming'] = new Map());
+themeMap.set('sap_fiori_3', sap_fiori_3);
+themeMap.set('sap_fiori_3_dark', sap_fiori_3_dark);
+themeMap.set('sap_belize', sap_belize);
+themeMap.set('sap_belize_hcb', sap_belize_hcb);
+themeMap.set('sap_belize_hcw', sap_belize_hcw);

scripts/rollup/build.js

@@ -6,10 +6,8 @@ const replace = require('@rollup/plugin-replace');
 const resolve = require('@rollup/plugin-node-resolve');
 const json = require('@rollup/plugin-json');
 const closure = require('./plugins/closure-plugin');
-const sizes = require('./plugins/sizes-plugin');
 const stripUnusedImports = require('./plugins/strip-unused-imports');
 const Bundles = require('./bundles');
-const Stats = require('./stats');
 const codeFrame = require('babel-code-frame');
 const chalk = require('chalk');
 const path = require('path');
@@ -170,24 +168,7 @@ function getPlugins(entry, externals, updateBabelOptions, filename, packageName,
     // Note that this plugin must be called after closure applies DCE.
     isProduction && stripUnusedImports([]),
     // Add the whitespace back if necessary.
-    shouldStayReadable && prettier({ parser: 'babylon' }),
-    // Record bundle size.
-    sizes({
-      getSize: (size, gzip) => {
-        const currentSizes = Stats.currentBuildResults.bundleSizes;
-        const recordIndex = currentSizes.findIndex(
-          (record) => record.filename === filename && record.bundleType === bundleType
-        );
-        const index = recordIndex !== -1 ? recordIndex : currentSizes.length;
-        currentSizes[index] = {
-          filename,
-          bundleType,
-          packageName,
-          size,
-          gzip
-        };
-      }
-    })
+    shouldStayReadable && prettier({ parser: 'babylon' })
   ].filter(Boolean);
 }
 
@@ -292,11 +273,6 @@ async function buildEverything() {
 
   await Packaging.prepareNpmPackages();
 
-  console.log(Stats.printResults());
-  if (!forcePrettyOutput) {
-    Stats.saveResults();
-  }
-
   if (shouldExtractErrors) {
     console.warn(
       '\nWarning: this build was created with --extract-errors enabled.\n' +

scripts/rollup/packaging.js

@@ -30,8 +30,6 @@ async function prepareNpmPackage(name) {
 async function prepareNpmPackages() {
   const builtPackageFolders = readdirSync('packages').filter((dir) => dir.charAt(0) !== '.');
   await Promise.all(builtPackageFolders.map(prepareNpmPackage));
-  // create main lib
-  await asyncExecuteCommand(`node_modules/.bin/lerna run postbuild --stream`);
 }
 
 module.exports = {

shared/rollup/configFactory.js

@@ -3,7 +3,7 @@ const babel = require('rollup-plugin-babel');
 const path = require('path');
 const fs = require('fs');
 const json = require('@rollup/plugin-json');
-const escapeStringRegexp = require('escape-string-regexp');
+const micromatch = require('micromatch');
 const PATHS = require('../../config/paths');
 const { highlightLog } = require('../utils');
 const { asyncCopyTo } = require('../../scripts/utils');
@@ -28,24 +28,18 @@ const rollupConfigFactory = (pkgName, externals = []) => {
     })
   ];
 
-  const pkg = require(path.resolve(PATHS.packages, pkgName, 'package.json'));
-  const externalModules = [
-    ...new Set([
+  const packageJson = require(path.resolve(PATHS.packages, pkgName, 'package.json'));
+  const externalModules = Array.from(
+    new Set([
       'react',
       'react-dom',
       'react-jss',
-      pkg.name,
-      ...Object.keys(pkg.dependencies || {}),
-      ...Object.keys(pkg.peerDependencies || {}),
+      packageJson.name,
+      ...Object.keys(packageJson.dependencies || {}),
+      ...Object.keys(packageJson.peerDependencies || {}),
       ...externals
     ])
-  ];
-  const expression = externalModules
-    .map(escapeStringRegexp)
-    .map((str) => `^${str}`)
-    .join('|');
-  const EXTERNAL_MODULE_REGEX = new RegExp(expression);
-  console.log(EXTERNAL_MODULE_REGEX);
+  );
 
   highlightLog(`Build lib folder for ${pkgName}`);
 
@@ -57,7 +51,13 @@ const rollupConfigFactory = (pkgName, externals = []) => {
 
   return allLibFiles.map((file) => ({
     input: file,
-    external: (id) => EXTERNAL_MODULE_REGEX.test(id),
+    external: (id) => {
+      const containsThisModule = (pkg) => id === pkg || id.startsWith(pkg + '/');
+      return externalModules.some(containsThisModule);
+    },
+    treeshake: {
+      moduleSideEffects: (id) => micromatch.isMatch(id, packageJson.sideEffects)
+    },
     output: [
       {
         file: path.resolve(