@ui5/webcomponents-base - npm Package Compare versions

Comparing version 0.12.0 to 0.13.0

CHANGELOG.md

@@ -6,2 +6,24 @@ # Change Log
 
+# [0.13.0](https://github.com/SAP/ui5-webcomponents/compare/v0.12.0...v0.13.0) (2019-06-21)
+
+
+### Bug Fixes
+
+* fix broken translations ([#548](https://github.com/SAP/ui5-webcomponents/issues/548)) ([37b2b07](https://github.com/SAP/ui5-webcomponents/commit/37b2b07))
+* remove custom "falsy" checks from ifDefined ([#544](https://github.com/SAP/ui5-webcomponents/issues/544)) ([92a85fa](https://github.com/SAP/ui5-webcomponents/commit/92a85fa))
+
+
+### Code Refactoring
+
+* **ui5-select:** change default slot from list items to options ([#532](https://github.com/SAP/ui5-webcomponents/issues/532)) ([2e4486b](https://github.com/SAP/ui5-webcomponents/commit/2e4486b))
+
+
+### BREAKING CHANGES
+
+* **ui5-select:** Use ui5-option instead of ui5-li in ui5-select
+
+
+
+
+
 # [0.12.0](https://github.com/SAP/ui5-webcomponents/compare/v0.11.0...v0.12.0) (2019-06-10)
@@ -8,0 +30,0 @@

package.json

 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "UI5 Web Components: webcomponents.base",
@@ -24,3 +24,3 @@ "author": "SAP SE (https://www.sap.com)",
   "dependencies": {
-    "@ui5/webcomponents-core": "0.12.0",
+    "@ui5/webcomponents-core": "0.13.0",
     "lit-html": "^1.0.0",
@@ -27,0 +27,0 @@ "regenerator-runtime": "0.12.1",

src/Configuration.js

 import CalendarType from "@ui5/webcomponents-core/dist/sap/ui/core/CalendarType.js";
 import getDesigntimePropertyAsArray from "./util/getDesigntimePropertyAsArray.js";
 
+let initialized = false;
+
 const CONFIGURATION = {
@@ -17,2 +19,3 @@ theme: "sap_fiori_3",
 const getTheme = () => {
+	initConfiguration();
 	return CONFIGURATION.theme;
@@ -22,2 +25,3 @@ };
 const getRTL = () => {
+	initConfiguration();
 	return CONFIGURATION.rtl;
@@ -27,2 +31,3 @@ };
 const getLanguage = () => {
+	initConfiguration();
 	return CONFIGURATION.language;
@@ -32,2 +37,3 @@ };
 const getCompactSize = () => {
+	initConfiguration();
 	return CONFIGURATION.compactSize;
@@ -41,2 +47,3 @@ };
 const getWCNoConflict = () => {
+	initConfiguration();
 	return CONFIGURATION["xx-wc-no-conflict"];
@@ -51,2 +58,3 @@ };
 const getCalendarType = () => {
+	initConfiguration();
 	if (CONFIGURATION.calendarType) {
@@ -66,2 +74,3 @@ const type = Object.keys(CalendarType).filter(calType => calType === CONFIGURATION.calendarType)[0];
 const getLocale = () => {
+	initConfiguration();
 	return CONFIGURATION.language;
@@ -124,9 +133,14 @@ };
 const initConfiguration = () => {
+	if (initialized) {
+		return;
+	}
+
 	parseConfigurationScript();
 	parseURLParameters();
 	applyConfigurations();
+
+	initialized = true;
 };
 
 export {
-	initConfiguration,
 	getTheme,
@@ -133,0 +147,0 @@ getRTL,

src/DOMEventHandler.js

 import ManagedEvents from "./events/ManagedEvents.js";
 import getOriginalEventTarget from "./events/getOriginalEventTarget.js";
-import UI5Element from "./UI5Element.js";
 
@@ -22,3 +21,3 @@ const handleEvent = function handleEvent(event) {
 const processDOMNode = function processDOMNode(node, event) {
-	if (node && node instanceof UI5Element) {
+	if (node && node._isUI5Element) {
 		return dispatchEvent(node, event);
@@ -25,0 +24,0 @@ }

src/events/ManagedEvents.js

@@ -7,4 +7,2 @@ const ManagedEvents = {};
 	"contextmenu",
-	"focusin",
-	"focusout",
 	"keydown",
@@ -11,0 +9,0 @@ "keypress",

src/renderer/ifDefined.js

@@ -11,3 +11,3 @@ import {
 export default directive(value => part => {
-	if ((value === undefined || value === null || value === "") && part instanceof AttributePart) {
+	if ((value === undefined) && part instanceof AttributePart) {
 		if (value !== part.value) {
@@ -14,0 +14,0 @@ const name = part.committer.name;

src/renderer/LitRenderer.js

 import { html, render } from "lit-html";
 
-class LitRenderer {
-	/**
-	 * Renders "templateResult" by replacing the content of "domNode", and optionally prepends a style tag containing "styles"
-	 * @param templateResult - lit template result object
-	 * @param domNode - the node whose content will be replaced
-	 * @param eventContext - the context of events, bound via the template
-	 * @param styles - if given, will be prepended in a style tag
-	 */
-	static render(templateResult, domNode, eventContext, styles) {
-		if (styles) {
-			templateResult = html`<style data-ui5-shadow-root-styles>${styles}</style>${templateResult}`;
-		}
-		render(templateResult, domNode, { eventContext });
+const litRender = (templateResult, domNode, styles, { eventContext } = {}) => {
+	if (styles) {
+		templateResult = html`<style>${styles}</style>${templateResult}`;
 	}
-}
+	render(templateResult, domNode, { eventContext });
+};
 
 export { html, svg } from "lit-html";
-export { repeat } from "lit-html/directives/repeat";
-export { classMap } from "lit-html/directives/class-map";
-export { styleMap } from "lit-html/directives/style-map";
+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";
 
-export default LitRenderer;
+export default litRender;

src/ResourceBundle.js

 import "./shims/jquery-shim.js";
+import "./shims/Core-shim.js";
 import ResourceBundle from "@ui5/webcomponents-core/dist/sap/base/i18n/ResourceBundle.js";
@@ -3,0 +4,0 @@ import formatMessage from "@ui5/webcomponents-core/dist/sap/base/strings/formatMessage.js";

src/ResourceLoaderOverrides.js

@@ -13,3 +13,3 @@ /* global sap */
 sap.ui.loader._ = sap.ui.loader._ || {};
-const getModulecontentOrig = sap.ui.loader._.getModuleContent;
+const getModuleContentOrig = sap.ui.loader._.getModuleContent;
 
@@ -22,4 +22,4 @@ sap.ui.loader._.getModuleContent = (moduleName, url) => {
 	}
-	if (getModulecontentOrig) {
-		return getModulecontentOrig(moduleName, url);
+	if (getModuleContentOrig) {
+		return getModuleContentOrig(moduleName, url);
 	}
@@ -26,0 +26,0 @@

src/UI5Element.js

@@ -0,1 +1,2 @@
+import boot from "./boot.js";
 import { getWCNoConflict, getCompactSize } from "./Configuration.js";
@@ -5,6 +6,7 @@ import DOMObserver from "./compatibility/DOMObserver.js";
 import Integer from "./types/Integer.js";
-import Renderer from "./Renderer.js";
 import RenderScheduler from "./RenderScheduler.js";
-import { getConstructableStyle, createHeadStyle } from "./CSS.js";
+import { getConstructableStyle, createHeadStyle, getShadowRootStyle } from "./CSS.js";
 import { attachThemeChange } from "./Theming.js";
+import { kebabToCamelCase, camelToKebabCase } from "./util/StringHelper.js";
+import isValidPropertyName from "./util/isValidPropertyName.js";
 
@@ -44,3 +46,3 @@ const metadata = {
 	onThemeChanged() {
-		if (window.ShadyDOM) {
+		if (window.ShadyDOM || this.constructor.getMetadata().getNoShadowDOM()) {
 			// polyfill theme handling is in head styles directly
@@ -277,3 +279,4 @@ return;
 
-	static define() {
+	static async define() {
+		await boot();
 		const tag = this.getMetadata().getTag();
@@ -413,3 +416,3 @@
 	_render() {
-		// onBeforeRendering
+		// Call the onBeforeRendering hook
 		if (typeof this.onBeforeRendering === "function") {
@@ -421,6 +424,6 @@ this._suppressInvalidation = true;
 
-		// render
+		// Update the shadow root with the render result
 		// console.log(this.getDomRef() ? "RE-RENDER" : "FIRST RENDER", this);
 		delete this._invalidated;
-		Renderer.render(this);
+		this._updateShadowRoot();
 
@@ -430,3 +433,3 @@ // Safari requires that children get the slot attribute only after the slot tags have been rendered in the shadow DOM
 
-		// onAfterRendering
+		// Call the onAfterRendering hook
 		if (typeof this.onAfterRendering === "function") {
@@ -437,2 +440,9 @@ this.onAfterRendering();
 
+	_updateShadowRoot() {
+		const renderResult = this.constructor.template(this);
+		// For browsers that do not support constructable style sheets (and not using the polyfill)
+		const styleToPrepend = getShadowRootStyle(this.constructor);
+		this.constructor.render(renderResult, this.shadowRoot, styleToPrepend, { eventContext: this });
+	}
+
 	_assignSlotsToChildren() {
@@ -593,2 +603,11 @@ const defaultSlot = this.constructor.getMetadata().getDefaultSlot();
 	/**
+	 * Used to duck-type UI5 elements without using instanceof
+	 * @returns {boolean}
+	 * @private
+	 */
+	get _isUI5Element() {
+		return true;
+	}
+
+	/**
 	 * Used to generate the next auto-increment id for the current class
@@ -614,3 +633,3 @@ * @returns {string}
 
-		// Check for explicitly given logical slot
+		// Check for explicitly given logical slot - for backward compatibility, should not be used
 		const ui5Slot = child.getAttribute("data-ui5-slot");
@@ -683,3 +702,3 @@ if (ui5Slot) {
 		for (const [prop, propData] of Object.entries(properties)) { // eslint-disable-line
-			if (nameCollidesWithNative(prop)) {
+			if (!isValidPropertyName(prop)) {
 				throw new Error(`"${prop}" is not a valid property name. Use a name that does not collide with DOM APIs`);
@@ -737,3 +756,3 @@ }
 		for (const [slot, slotData] of Object.entries(slots)) { // eslint-disable-line
-			if (nameCollidesWithNative(slot)) {
+			if (!isValidPropertyName(slot)) {
 				throw new Error(`"${slot}" is not a valid property name. Use a name that does not collide with DOM APIs`);
@@ -759,21 +778,3 @@ }
 }
-const kebabToCamelCase = string => toCamelCase(string.split("-"));
-const camelToKebabCase = string => string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-const toCamelCase = parts => {
-	return parts.map((string, index) => {
-		return index === 0 ? string.toLowerCase() : string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
-	}).join("");
-};
-const nameCollidesWithNative = name => {
-	if (name === "disabled") {
-		return false;
-	}
-	const classes = [
-		HTMLElement,
-		Element,
-		Node,
-	];
-	return classes.some(klass => klass.prototype.hasOwnProperty(name)); // eslint-disable-line
-};
 
 export default UI5Element;

src/UI5ElementMetadata.js

 import DataType from "./types/DataType.js";
+import isDescendantOf from "./util/isDescendantOf.js";
 
@@ -119,16 +120,2 @@ class UI5ElementMetadata {
 
-const isDescendantOf = (klass, baseKlass, inclusive = false) => {
-	if (typeof klass !== "function" || typeof baseKlass !== "function") {
-		return false;
-	}
-	if (inclusive && klass === baseKlass) {
-		return true;
-	}
-	let parent = klass;
-	do {
-		parent = Object.getPrototypeOf(parent);
-	} while (parent !== null && parent !== baseKlass);
-	return parent === baseKlass;
-};
-
 export default UI5ElementMetadata;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

682251

decreased by-0.03%

Number of package files

95

decreased by-2.06%

Lines of code

12290

decreased by-0.25%

Dependency changes

• + Added@ui5/webcomponents-core@0.13.0(transitive)

• - Removed@ui5/webcomponents-core@0.12.0(transitive)

• Updated@ui5/webcomponents-core@0.13.0