refactor: centralize build logic in a tools package (#948)

package.json

@@ -25,8 +25,13 @@
     "clean:icons": "cd packages/icons && yarn clean",
     "clean:main": "cd packages/main && yarn clean",
     "clean:fiori": "cd packages/fiori && yarn clean",
-    "start": "npm-run-all --sequential build:icons start:all",
-    "start:all": "npm-run-all --parallel start:base start:theme-base start:main start:fiori",
+    "prepare:main": "cd packages/main && nps prepare",
+    "prepare:fiori": "cd packages/fiori && nps prepare",
+    "dev:theme-base": "cd packages/theme-base && nps watch",
+    "dev:main": "cd packages/main && nps dev",
+    "dev:fiori": "cd packages/fiori && nps dev",
+    "start": "npm-run-all --sequential build:icons build:theme-base prepare:main prepare:fiori start:all",
+    "start:all": "npm-run-all --parallel start:base dev:theme-base dev:main dev:fiori",
     "start:base": "cd packages/base && yarn start",
     "start:theme-base": "cd packages/theme-base && yarn start",
     "start:main": "cd packages/main && yarn start",
@@ -40,6 +45,7 @@
     "unlink-all": "wsrun unlink"
   },
   "devDependencies": {
+    "nps": "^5.9.8",
     "cross-env": "^5.2.0",
     "npm-run-all": "^4.1.3",
     "rimraf": "^2.6.2",
@@ -57,6 +63,7 @@
     "packages/main",
     "packages/fiori",
     "packages/icons",
+    "packages/tools",
     "packages/playground"
   ]
 }

packages/base/.eslintrc.js

@@ -1,132 +1,3 @@
-module.exports = {
-	"env": {
-		"browser": true,
-		"es6": true
-	},
-	"root": true,
-	"extends": "airbnb-base",
-	"parserOptions": {
-		"ecmaVersion": 2018,
-		"sourceType": "module"
-	},
-	"rules": {
-		"comma-dangle": [2, "always-multiline"], // difference from openui5
-		"import/extensions": ["error", "ignorePackages"], // override for UI5 WebComponents
-		"no-cond-assign": 2,
-		"no-console": 2,
-		"no-constant-condition": 2,
-		"no-control-regex": 2,
-		"no-debugger": 2,
-		"no-dupe-args": 2,
-		"no-dupe-keys": 2,
-		"no-duplicate-case": 2,
-		"no-empty-character-class": 2,
-		"no-empty": 2,
-		"no-ex-assign": 2,
-		"no-extra-boolean-cast": 1,
-		"no-extra-parens": [2, "functions"],
-		"no-extra-semi": 2,
-		"no-func-assign": 2,
-		"no-inner-declarations": [2, "functions"],
-		"no-invalid-regexp": 2,
-		"no-irregular-whitespace": 2,
-		"no-negated-in-lhs": 2,
-		"no-obj-calls": 2,
-		"no-regex-spaces": 2,
-		"no-sparse-arrays": 2,
-		"no-trailing-spaces": 2,
-		"no-unreachable": 2,
-		"use-isnan": 2,
-		// "valid-jsdoc": [1, { removed for UI5 WebComponents
-		// 	"requireReturn": false
-		// }],
-		"valid-typeof": 2,
+const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
 
-		"accessor-pairs": 2,
-		"block-scoped-var": 1,
-		// "consistent-return": 1, // removed for UI5 WebComponents
-		"curly": [2, "all"],
-		// "default-case": 1, // removed for UI5 WebComponents
-		"no-alert": 2,
-		"no-caller": 2,
-		"no-div-regex": 2,
-		"no-eval": 2,
-		"no-extend-native": 2,
-		"no-extra-bind": 2,
-		"no-fallthrough": 2,
-		"no-floating-decimal": 2,
-		"no-implied-eval": 2,
-		"no-iterator": 2,
-		"no-labels": 2,
-		"no-lone-blocks": 2,
-		"no-loop-func": 2,
-		"no-native-reassign": 2,
-		"no-new-func": 2,
-		"no-new-wrappers": 1,
-		"no-new": 1,
-		"no-octal-escape": 2,
-		"no-octal": 2,
-		"no-proto": 2,
-		"no-redeclare": 1,
-		"no-return-assign": 2,
-		"no-script-url": 2,
-		"no-self-compare": 2,
-		"no-sequences": 2,
-		"no-unused-expressions": [1, { allowShortCircuit: true }],
-		"no-void": 2,
-		"no-warning-comments": 0,
-		"no-with": 2,
-		"radix": [2, "as-needed"],
-		"wrap-iife": [2, "any"],
-		"yoda": 2,
-
-		"strict": [2, "function"],
-
-		"no-catch-shadow": 2,
-		"no-delete-var": 2,
-		"no-label-var": 2,
-		"no-shadow-restricted-names": 2,
-		"no-undef-init": 2,
-		"no-undef": 2,
-		"no-unused-vars": [2, {"vars":"all", "args":"none"}],
-		"no-use-before-define": [1, "nofunc"],
-
-		"brace-style": [2, "1tbs", { "allowSingleLine": true }],
-		"camelcase": [1, { "properties": "never" }], // added for UI5 WebComponents
-		"consistent-this": [1, "that"],
-		"linebreak-style": 2,
-		"max-nested-callbacks": [1, 3],
-		"new-cap": 1,
-		"new-parens": 2,
-		"no-array-constructor": 2,
-		"no-lonely-if": 1,
-		"no-mixed-spaces-and-tabs": [2, "smart-tabs"],
-		"no-nested-ternary": 2,
-		"no-new-object": 2,
-		"no-spaced-func": 2,
-		"quote-props": [2, "as-needed", { "keywords": true, "unnecessary": false }],
-		"semi-spacing": [1, {"before": false, "after": true}],
-		"semi": 2,
-		"keyword-spacing": 2,
-		"space-infix-ops": 2,
-		"space-unary-ops": [2, { "words": true, "nonwords": false }],
-		// airbnb overrides
-		"indent": [2, "tab"],
-		"no-underscore-dangle": 0,
-		"no-tabs": 0,
-		"quotes": [2, "double", { "allowTemplateLiterals": true }],
-		"no-useless-constructor": 0,
-		"no-param-reassign": 0,
-		"one-var": 0,
-		"max-len": 0,
-		"arrow-parens": [2, "as-needed"],
-		"class-methods-use-this": 0,
-		"no-plusplus": 0,
-		"default-case": 0,
-		"consistent-return": 0,
-		"prefer-destructuring": 0,
-		"arrow-body-style": 0,
-		"import/no-unresolved": 0,
-		"no-use-before-define": 0
-	}
-};
+module.exports = config;

packages/base/package.json

@@ -5,7 +5,6 @@
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "module": "index.js",
-  "type": "module",
   "keywords": [
     "openui5",
     "sapui5",
@@ -32,6 +31,7 @@
     "url-search-params-polyfill": "^5.0.0"
   },
   "devDependencies": {
+    "@ui5/webcomponents-tools": "1.0.0-rc.4",
     "array-uniq": "^2.0.0",
     "copy-and-watch": "^0.1.4",
     "eslint": "^5.13.0",

packages/base/src/FormatSettings.js

@@ -8,7 +8,6 @@ const getFormatLocale = () => {
 		let oLocale = getLocale();
 		// if any user settings have been defined, add the private use subtag "sapufmt"
 		if (!Object.keys(mSettings).length === 0) {
-			// TODO move to Locale/LocaleData
 			let l = oLocale.toString();
 			if (l.indexOf("-x-") < 0) {
 				l += "-x-sapufmt";

packages/base/src/asset-registries/Icons.js

@@ -1,5 +1,5 @@
-import { registerIcon, registerCollectionPromise } from "../SVGIconRegistry";
-import { fetchJsonOnce } from "../util/FetchHelper";
+import { registerIcon, registerCollectionPromise } from "../SVGIconRegistry.js";
+import { fetchJsonOnce } from "../util/FetchHelper.js";
 
 const registerIconBundle = async (collectionName, bundleData) => {
 	let resolveFn;

packages/base/src/dates/CalendarDatesRegistry.js

@@ -10,7 +10,6 @@ export default {
 	},
 	getCalendarClass: calendarType => {
 		if (!calendarType) {
-			// TODO: add in configuration
 			calendarType = CalendarType.Gregorian;
 		}
 		return registry.get(calendarType);

packages/base/src/delegate/NativeResize.js

@@ -29,7 +29,6 @@ class NativeResize {
 		const callbacks = NativeResize.observedObjects.get(ref) || [];
 		const filteredCallbacks = callbacks.filter(fn => fn !== callback);
 
-		// TODO: think for a validation mechanism
 		if (!callbacks.length || (callbacks.length === filteredCallbacks.length && callbacks.length !== 0)) {
 			return;
 		}

packages/base/src/features/browsersupport/Edge.js

@@ -1,5 +1,5 @@
 // URLSearchParams
-import "url-search-params-polyfill";
+import "url-search-params-polyfill/index.js";
 
 
 // "pseudo mutation observer" fix for nodeValue

packages/base/src/features/browsersupport/IE11.js

@@ -28,7 +28,7 @@ import "../../thirdparty/WeakSet.js";
 import "../../thirdparty/fetch.js";
 
 // async - await
-import "regenerator-runtime/runtime";
+import "regenerator-runtime/runtime.js";
 
 // CSS Custom Properties polyfill
 import { cssVars, resetCssVars } from "../../thirdparty/css-vars-ponyfill.js";

packages/base/src/i18nBundle.js

@@ -1,5 +1,5 @@
 import { fetchI18nBundle, getI18nBundleData } from "./asset-registries/i18n.js";
-import formatMessage from "./util/formatMessage";
+import formatMessage from "./util/formatMessage.js";
 
 const I18nBundleInstances = new Map();
 

packages/base/src/renderer/LitRenderer.js

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit-html/lit-html.js";
 
 const litRender = (templateResult, domNode, styles, { eventContext } = {}) => {
 	if (styles) {
@@ -7,7 +7,7 @@ const litRender = (templateResult, domNode, styles, { eventContext } = {}) => {
 	render(templateResult, domNode, { eventContext });
 };
 
-export { html, svg } from "lit-html";
+export { html, svg } from "lit-html/lit-html.js";
 export { repeat } from "lit-html/directives/repeat.js";
 export { classMap } from "lit-html/directives/class-map.js";
 export { styleMap } from "lit-html/directives/style-map.js";

packages/base/src/renderer/ifDefined.js

@@ -2,7 +2,7 @@ import {
 	AttributePart,
 	directive,
 	noChange,
-} from "lit-html";
+} from "lit-html/lit-html.js";
 
 /*
 	lit-html directive that removes and attribute if it is undefined

packages/base/src/theming/CustomStyle.js

@@ -1,7 +1,6 @@
 const customCSSFor = {};
 
 const addCustomCSS = (tag, css, ...rest) => {
-	// TODO remove deprecation error after 1 release
 	if (rest.length) {
 		throw new Error("addCustomCSS no longer accepts theme specific CSS. new signature is `addCustomCSS(tag, css)`");
 	}

packages/base/src/util/isNodeTabbable.js

@@ -1,4 +1,4 @@
-import isNodeHidden from "./isNodeHidden";
+import isNodeHidden from "./isNodeHidden.js";
 
 const isNodeTabbable = node => {
 	if (!node) {

packages/fiori/config/.eslintrc.js

@@ -0,0 +1,3 @@
+const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
+
+module.exports = config;

packages/fiori/config/postcss.bundles/postcss.config.js

@@ -1,19 +1,3 @@
-const postcssImport = require('postcss-import');
-const combineSelectors = require('postcss-combine-duplicated-selectors');
-const postcssCSStoJSON = require('../../lib/postcss-css-to-json/index.js');
-const cssnano = require('cssnano');
+const config = require("@ui5/webcomponents-tools/components-package/postcss.bundles.js");
 
-module.exports = {
-    plugins: [
-        postcssImport(),
-        combineSelectors({
-            removeDuplicatedProperties: true
-        }),
-        cssnano({preset: [
-            'default', {
-                mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-            },
-        ]}, ),
-        postcssCSStoJSON(),
-    ]
-};
+module.exports = config;

packages/fiori/config/postcss.components/postcss.config.js

@@ -1,18 +1,3 @@
-const postcssImport = require('postcss-import');
-const postcssCSStoESM = require('../../lib/postcss-css-to-esm/index.js');
-const cssnano = require('cssnano');
+const config = require("@ui5/webcomponents-tools/components-package/postcss.components.js");
 
-module.exports = {
-	plugins: [
-		postcssImport(),
-		cssnano({
-			preset: [
-				'default', {
-					mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-					mergeRules: false, // https://github.com/cssnano/cssnano/issues/730
-				},
-			]
-		}),
-		postcssCSStoESM(),
-	]
-};
+module.exports = config;

packages/fiori/config/rollup.config.js

@@ -0,0 +1,9 @@
+const getConfig = require("@ui5/webcomponents-tools/components-package/rollup.js");
+
+const options = {
+	name: `@ui5/webcomponents-fiori`
+};
+
+const config = getConfig(options);
+
+module.exports = config;

packages/fiori/config/wdio.conf.js

@@ -0,0 +1,3 @@
+const config = require("@ui5/webcomponents-tools/components-package/wdio.js");
+
+module.exports = config;

packages/fiori/jsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+      "target": "es2017",
+      "allowSyntheticDefaultImports": false,
+      "baseUrl": "./",
+      "paths": {
+        "@ui5/webcomponents-base/dist/*": ["../base/src/*"],
+        "@ui5/webcomponents/dist/*": ["../main/src/*"]
+      }
+    },
+    "exclude": ["node_modules", "dist"]
+  }