refactor: reduce bundle size (#43)

* refactor: reduce bundle size

- strip down Device.js by leaving only browser, os, system and touch objects
- remove default locale fallback from LocaleData.js as we always fetch it separately
- add setupSystem, use it for both html and shadow root spans
- 8 KB minzip reduction

Author: pskelin

packages/base/src/sap/ui/webcomponents/base/Core.js

@@ -2,6 +2,7 @@ import ShadowDOM from './compatibility/ShadowDOM';
 import whenDOMReady from './util/whenDOMReady';
 import setupBrowser from './util/setupBrowser';
 import setupOS from './util/setupOS';
+import setupSystem from './util/setupSystem';
 import configuration from "./Configuration";
 import { inject as injectCore } from "@ui5/webcomponents-core/dist/sap/ui/core/Core";
 import "./jquery-shim";
@@ -66,8 +67,9 @@ const Core = {
 				ShadowDOM.setWebComponentRootOnHTML();
 				attachThemeChange(ShadowDOM._applyTheme);
 
-				setupBrowser();
-				setupOS();
+				setupBrowser(document.documentElement);
+				setupOS(document.documentElement);
+				setupSystem(document.documentElement);
 
 				IconFonts.load();
 				DOMEventHandler.start();
@@ -86,4 +88,4 @@ window.sap.ui.getWCCore = function() {
 };
 
 injectCore(Core);
-export default Core;
+export default Core;

packages/base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM.js

@@ -1,6 +1,9 @@
 import WCPolyfill from '../thirdparty/webcomponents-polyfill';
 import configuration from "../Configuration";
 import { fetchThemeBundle } from "../ThemeBundle";
+import setupBrowser from '../util/setupBrowser';
+import setupOS from '../util/setupOS';
+import setupSystem from '../util/setupSystem';
 
 // Shorthands
 const d = document;
@@ -88,8 +91,9 @@ class ShadowDOM {
 				shadowDOM = template.content.cloneNode(true);
 
 				rootSpan = shadowDOM.querySelector("span[data-sap-ui-wc-placeholder]");
-				rootSpan.setAttribute("data-sap-ui-browser", document.documentElement.getAttribute("data-sap-ui-browser"));
-				rootSpan.setAttribute("data-sap-ui-os", document.documentElement.getAttribute("data-sap-ui-os"));
+				setupBrowser(rootSpan);
+				setupOS(rootSpan);
+				setupSystem(rootSpan);
 			}
 
 			if (isCompact) {
@@ -264,4 +268,4 @@ class ShadowDOM {
 	}
 }
 
-export default ShadowDOM;
+export default ShadowDOM;

packages/base/src/sap/ui/webcomponents/base/util/setupBrowser.js

@@ -1,18 +1,16 @@
 import Device from "@ui5/webcomponents-core/dist/sap/ui/Device";
 
-const setupBrowser = () => {
-	var html = document.documentElement;
-
-	var b = Device.browser;
-	var id = b.name;
+const setupBrowser = (node) => {
+	const b = Device.browser;
+	let id = b.name;
 
 	if (id) {
 		if (id === b.BROWSER.SAFARI && b.mobile) {
 			id = "m" + id;
 		}
 		id = id + (b.version === -1 ? "" : Math.floor(b.version));
-		html.dataset.sapUiBrowser = id;
+		node.dataset.sapUiBrowser = id;
 	}
 };
 
-export default setupBrowser;
+export default setupBrowser;

packages/base/src/sap/ui/webcomponents/base/util/setupOS.js

@@ -1,11 +1,9 @@
 import Device from "@ui5/webcomponents-core/dist/sap/ui/Device";
 
-const setupOS = () => {
-	var html = document.documentElement;
+const setupOS = (node) => {
+	node.dataset.sapUiOs = Device.os.name + Device.os.versionStr;
 
-	html.dataset.sapUiOs = Device.os.name + Device.os.versionStr;
-
-	var osCSS = null;
+	let osCSS = null;
 	switch (Device.os.name) {
 		case Device.os.OS.IOS:
 			osCSS = "sap-ios";
@@ -21,8 +19,8 @@ const setupOS = () => {
 			break;
 	}
 	if (osCSS) {
-		html.classList.add(osCSS);
+		node.classList.add(osCSS);
 	}
 };
 
-export default setupOS;
+export default setupOS;

packages/base/src/sap/ui/webcomponents/base/util/setupSystem.js

@@ -0,0 +1,14 @@
+import Device from "@ui5/webcomponents-core/dist/sap/ui/Device";
+
+const setupSystem = (node) => {
+	const sysTypes = Object.entries(Device.system.SYSTEMTYPE).map(([_key, value]) => value);
+
+	node.classList.remove(...sysTypes);
+	sysTypes.forEach(sysType => {
+		if (Device.system[sysType]) {
+			node.classList.add("sap-" + sysType);
+		}
+	});
+};
+
+export default setupSystem;