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

Author: MarcusNotheis

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/components/ThemeProvider/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);

packages/main/src/lib/ThemingSupport.ts

@@ -17,9 +17,6 @@ yarn test
 # build the project
 yarn build
 
-# reset potential changes in sizes
-git checkout scripts/rollup/results.json
-
 # create npmrc with auth
 bash ${WORKSPACE}/scripts/ci/setup-npm.sh
 

scripts/ci/release-rc.sh

@@ -1,8 +1,5 @@
 #! /bin/bash
 
-# reset potential changes in sizes
-git checkout scripts/rollup/results.json
-
 CURRENT_LERNA_VERSION=$(node -p -e "require('./lerna.json').version")
 IS_IN_RC_STATUS=$(echo "${CURRENT_LERNA_VERSION}" | awk '/rc\.[0-9]+$/')
 

scripts/ci/release-snapshot.sh

@@ -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/build.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 = {