fix(ui5-tooling-modules): ensure scoping suffix is set before define …

…of modules (#1123)
ui5-community · Nov 14, 2024 · db10bd3 · db10bd3
1 parent 774a209
commit db10bd3
Show file tree

Hide file tree

Showing 11 changed files with 12,886 additions and 5,256 deletions.
diff --git a/packages/ui5-tooling-modules/lib/rollup-plugin-webcomponents.js b/packages/ui5-tooling-modules/lib/rollup-plugin-webcomponents.js
@@ -55,7 +55,11 @@ module.exports = function ({ log, resolveModule, getPackageJson, framework, opti
 	// handlebars templates for the Web Components transformation
 	const webcTmplFnPackage = loadAndCompileTemplate("templates/Package.hbs");
 	const webcTmplFnControl = loadAndCompileTemplate("templates/WrapperControl.hbs");
-	const webcTmplFnPatches = loadAndCompileTemplate("templates/MonkeyPatches.hbs");
+	const webcTmplFnMPAttributes = loadAndCompileTemplate("templates/monkey_patches/RenderAttributeProperties.hbs");
+	const webcTmplFnMPAllEvents = loadAndCompileTemplate("templates/monkey_patches/RegisterAllEvents.hbs");
+
+	// array of all web component classes
+	const webcModules = [];
 
 	// helper function to load a NPM package and its custom elements metadata
 	const emittedFiles = [];
@@ -283,9 +287,14 @@ module.exports = function ({ log, resolveModule, getPackageJson, framework, opti
 					assetsModule,
 				});
 				// include the monkey patches for the Web Components base library
-				// only for UI5 versions < 1.128.0 (otherwise the monkey patches are not needed anymore)
+				// only for UI5 versions < 1.128.0 we need the attributes fix
 				if (namespace === "@ui5/webcomponents-base" && lt(framework?.version || "0.0.0", "1.128.0")) {
-					const monkeyPatches = webcTmplFnPatches();
+					const monkeyPatches = webcTmplFnMPAttributes();
+					return `${monkeyPatches}\n${code}`;
+				}
+				// only for UI5 versions < 1.132.0 we need the events fix
+				if (namespace === "@ui5/webcomponents-base" && lt(framework?.version || "0.0.0", "1.132.0")) {
+					const monkeyPatches = webcTmplFnMPAllEvents();
 					return `${monkeyPatches}\n${code}`;
 				}
 				return code;
@@ -311,10 +320,16 @@ module.exports = function ({ log, resolveModule, getPackageJson, framework, opti
 					designtime: `${ui5Metadata.namespace}/designtime/${clazz.name}.designtime`, // add a default designtime
 				});
 				const metadata = JSON.stringify(metadataObject, undefined, 2);
-				const webcClass = moduleInfo.attributes.absModulePath.replace(/\\/g, "/"); // is the absolute path of the original Web Component class
+				const webcModule = moduleInfo.attributes.absModulePath;
+				const webcClass = webcModule.replace(/\\/g, "/"); // is the absolute path of the original Web Component class
 				const needsLabelEnablement = clazz._ui5NeedsLabelEnablement;
 				const needsEnabledPropagator = clazz._ui5NeedsEnabledPropagator;
 
+				// store the webc class as a marker to add the import to @ui5/webcomponents-base
+				if (!webcModules.includes(webcModule)) {
+					webcModules.push(webcModule);
+				}
+
 				// Determine the superclass UI5 module name and import it
 				let webcBaseClass = "sap/ui/core/webc/WebComponent";
 				if (clazz.superclass?._ui5metadata) {
@@ -334,6 +349,11 @@ module.exports = function ({ log, resolveModule, getPackageJson, framework, opti
 					needsEnabledPropagator,
 				});
 				return code;
+			} else if (webcModules.includes(id)) {
+				// for all Web Component classes we need to import the @ui5/webcomponents-base
+				// to ensure that the basic functionality is available (enablement, scoping, etc.)
+				const code = readFileSync(id, "utf-8");
+				return `import "@ui5/webcomponents-base";\n${code}`;
 			}
 			return null;
 		},

diff --git a/packages/ui5-tooling-modules/lib/templates/Package.hbs b/packages/ui5-tooling-modules/lib/templates/Package.hbs
@@ -9,6 +9,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import OpenUI5Enablement from "@ui5/webcomponents-base/dist/features/OpenUI5Enablement.js";
 OpenUI5Enablement.enrichBusyIndicatorSettings(UI5Element);
 {{/if}}
+{{else}}
+import "@ui5/webcomponents-base";
 {{/if}}
 
 {{#if assetsModule}}

diff --git a/packages/ui5-tooling-modules/lib/templates/monkey_patches/RegisterAllEvents.hbs b/packages/ui5-tooling-modules/lib/templates/monkey_patches/RegisterAllEvents.hbs
@@ -0,0 +1,30 @@
+// Will be fixed with TBD in UI5 1.130
+import hyphenate from "sap/base/strings/hyphenate";
+import WebComponent from "sap/ui/core/webc/WebComponent";
+
+WebComponent.prototype.__attachCustomEventsListeners = function() {
+	// ##### MODIFICATION START #####
+	var oEvents = this.getMetadata().getAllEvents();
+	// ##### MODIFICATION END #####
+	for (var sEventName in oEvents) {
+		var sCustomEventName = hyphenate(sEventName);
+		this.getDomRef().addEventListener(sCustomEventName, this.__handleCustomEventBound);
+	}
+};
+
+WebComponent.prototype.__detachCustomEventsListeners = function() {
+	var oDomRef = this.getDomRef();
+	if (!oDomRef) {
+		return;
+	}
+
+	// ##### MODIFICATION START #####
+	var oEvents = this.getMetadata().getAllEvents();
+	// ##### MODIFICATION END #####
+	for (var sEventName in oEvents) {
+		if (oEvents.hasOwnProperty(sEventName)) {
+			var sCustomEventName = hyphenate(sEventName);
+			oDomRef.removeEventListener(sCustomEventName, this.__handleCustomEventBound);
+		}
+	}
+};
diff --git a/...g-modules/lib/templates/MonkeyPatches.hbs → ...key_patches/RenderAttributeProperties.hbs b/...g-modules/lib/templates/MonkeyPatches.hbs → ...key_patches/RenderAttributeProperties.hbs
diff --git a/packages/ui5-tooling-modules/test/__snap__/4370bd2f/@ui5/webcomponents-base.js b/packages/ui5-tooling-modules/test/__snap__/4370bd2f/@ui5/webcomponents-base.js
@@ -1,4 +1,33 @@
-sap.ui.define(['sap/ui/base/DataType'], (function (DataType) { 'use strict';
+sap.ui.define(['sap/base/strings/hyphenate', 'sap/ui/core/webc/WebComponent', 'sap/ui/base/DataType'], (function (hyphenate, WebComponent, DataType) { 'use strict';
+
+	// Will be fixed with TBD in UI5 1.130
+
+	WebComponent.prototype.__attachCustomEventsListeners = function() {
+		// ##### MODIFICATION START #####
+		var oEvents = this.getMetadata().getAllEvents();
+		// ##### MODIFICATION END #####
+		for (var sEventName in oEvents) {
+			var sCustomEventName = hyphenate(sEventName);
+			this.getDomRef().addEventListener(sCustomEventName, this.__handleCustomEventBound);
+		}
+	};
+
+	WebComponent.prototype.__detachCustomEventsListeners = function() {
+		var oDomRef = this.getDomRef();
+		if (!oDomRef) {
+			return;
+		}
+
+		// ##### MODIFICATION START #####
+		var oEvents = this.getMetadata().getAllEvents();
+		// ##### MODIFICATION END #####
+		for (var sEventName in oEvents) {
+			if (oEvents.hasOwnProperty(sEventName)) {
+				var sCustomEventName = hyphenate(sEventName);
+				oDomRef.removeEventListener(sCustomEventName, this.__handleCustomEventBound);
+			}
+		}
+	};
 
 	const pkg = {
 		"_ui5metadata": {

diff --git a/packages/ui5-tooling-modules/test/__snap__/4370bd2f/@ui5/webcomponents.js b/packages/ui5-tooling-modules/test/__snap__/4370bd2f/@ui5/webcomponents.js
@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/base/DataType', './webcomponents-base'], (function (DataType, _ui5_webcomponentsBase) { 'use strict';
+sap.ui.define(['./webcomponents-base', 'sap/ui/base/DataType', 'sap/base/strings/hyphenate', 'sap/ui/core/webc/WebComponent'], (function (_ui5_webcomponentsBase, DataType, hyphenate, WebComponent) { 'use strict';
 
 	const pkg = {
 		"_ui5metadata": {