fix: Integrate charting

Author: d3xter666

internal/npm-integration-poc/consolidated-app/package-lock.json

@@ -15,6 +15,7 @@
 	"dependencies": {
 		"validator": "^13.15.26",
 		"ui5-tooling-modules": "^3.34.2",
-		"@ui5/webcomponents": "^2.6.0"
+		"@ui5/webcomponents": "^2.6.0",
+		"chart.js": "^4.5.1"
 	}
 }

internal/npm-integration-poc/consolidated-app/package.json

@@ -1,15 +1,51 @@
 /**
- * UI5 Custom Task: WebComponents Bundler (Standalone Plugin)
+ * UI5 Custom Task: WebComponents & NPM Modules Bundler (Standalone Plugin)
  *
- * Uses the custom standalone rollup-plugin-ui5-webcomponents.js
- * to bundle @ui5/webcomponents during the build process.
+ * Bundles:
+ * 1. @ui5/webcomponents using rollup-plugin-ui5-webcomponents.js
+ * 2. NPM dependencies from package.json using shared Rollup config
+ *
+ * Output: /resources/thirdparty/<module-name>.js
  */
 
+import {readFile} from "fs/promises";
+import {join, dirname} from "path";
+import {fileURLToPath} from "url";
+
 import ui5WebComponentsPlugin from "../lib/plugins/rollup-plugin-ui5-webcomponents.js";
 import {WebComponentsBundler} from "../lib/core/webcomponents-bundler.js";
 import {WorkspaceWriter} from "../lib/core/output-writer.js";
 import {PathResolver} from "../lib/utils/path-resolver.js";
 import {DEFAULT_CONFIG, createPluginOptions, createBundlerOptions} from "../lib/config/standalone-config.js";
+import {createRollupConfig, generateAMDBundle} from "../scenarios/shared-config.js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/**
+ * NPM packages to exclude from bundling (UI5 internal, dev deps, tooling)
+ */
+const EXCLUDED_PACKAGES = [
+	"ui5-tooling-modules",
+	"@ui5/webcomponents",       // Handled separately by WebComponents bundler
+	"@ui5/webcomponents-base",
+	"@ui5/webcomponents-theming",
+	"@ui5/webcomponents-icons"
+];
+
+/**
+ * Read and parse package.json dependencies
+ *
+ * @returns {Promise<string[]>} List of dependency names to bundle
+ */
+async function getPackageDependencies() {
+	const packageJsonPath = join(__dirname, "package.json");
+	const packageJson = JSON.parse(await readFile(packageJsonPath, "utf-8"));
+
+	const dependencies = Object.keys(packageJson.dependencies || {});
+
+	// Filter out excluded packages
+	return dependencies.filter((dep) => !EXCLUDED_PACKAGES.includes(dep));
+}
 
 /**
  * Custom task entry point
@@ -22,36 +58,59 @@ import {DEFAULT_CONFIG, createPluginOptions, createBundlerOptions} from "../lib/
  * @returns {Promise<undefined>} Promise resolving when task is complete
  */
 export default async function({workspace, log, taskUtil}) {
-	log.info("Running WebComponents bundler task (standalone plugin)...");
+	log.info("Running WebComponents & NPM Modules bundler task...");
 
 	const {resourceFactory} = taskUtil;
 	const $metadata = {};
 
 	try {
-		// Create plugin instance
-		const plugin = ui5WebComponentsPlugin(createPluginOptions(log, $metadata));
+		// ========== 1. Bundle WebComponents ==========
+		log.info("📦 Phase 1: Bundling WebComponents...");
 
-		// Create path resolver
+		const plugin = ui5WebComponentsPlugin(createPluginOptions(log, $metadata));
 		const pathResolver = new PathResolver(
 			DEFAULT_CONFIG.namespace,
 			DEFAULT_CONFIG.thirdpartyNamespace
 		);
-
-		// Create workspace writer
 		const workspaceWriter = new WorkspaceWriter(pathResolver, workspace, resourceFactory);
-
-		// Create bundler instance
 		const bundler = new WebComponentsBundler(createBundlerOptions(log, plugin));
 
-		// Bundle the MessageStrip webcomponent
 		const output = await bundler.bundle("@ui5/webcomponents/dist/MessageStrip.js");
-
-		// Process output and write to workspace
 		await bundler.processOutput(output, workspaceWriter, $metadata);
 
-		log.info("✅ WebComponents bundled successfully using standalone plugin");
+		log.info("✅ WebComponents bundled successfully");
+
+		// ========== 2. Bundle NPM Packages ==========
+		log.info("📦 Phase 2: Bundling NPM packages from package.json...");
+
+		const dependencies = await getPackageDependencies();
+		log.info(`  Found ${dependencies.length} dependencies to bundle: ${dependencies.join(", ")}`);
+
+		for (const packageName of dependencies) {
+			try {
+				// Reuse shared Rollup config and AMD generator (DRY)
+				const config = createRollupConfig(packageName);
+				const code = await generateAMDBundle(config);
+
+				// Sanitize package name for path (handle scoped packages)
+				const sanitizedName = packageName.replace(/^@/, "").replace(/\//g, "-");
+				const outputPath = `/resources/thirdparty/${sanitizedName}.js`;
+
+				const resource = resourceFactory.createResource({
+					path: outputPath,
+					string: code
+				});
+
+				await workspace.write(resource);
+				log.info(`  ✅ ${packageName} → ${outputPath} (${(code.length / 1024).toFixed(1)} KB)`);
+			} catch (error) {
+				log.error(`  ❌ Failed to bundle ${packageName}: ${error.message}`);
+			}
+		}
+
+		log.info("✅ All NPM packages bundled successfully");
 	} catch (error) {
-		log.error(`❌ Error bundling WebComponents: ${error.message}`);
+		log.error(`❌ Error in bundler task: ${error.message}`);
 		log.error(error.stack);
 		throw error;
 	}

internal/npm-integration-poc/consolidated-app/ui5-task-webc-standalone.js

@@ -2,8 +2,9 @@ sap.ui.define([
 	"sap/ui/core/mvc/Controller",
 	"sap/ui/model/json/JSONModel",
 	"sap/m/MessageToast",
-	"validator" // NPM package (auto-bundled by ui5-tooling-modules)
-], function(Controller, JSONModel, MessageToast, validator) {
+	"thirdparty/validator", // NPM package (auto-bundled by ui5-tooling-modules)
+	"thirdparty/chart.js"
+], function(Controller, JSONModel, MessageToast, validator, chartjs) {
 	"use strict";
 
 	return Controller.extend("com.example.app.controller.Main", {
@@ -24,6 +25,8 @@ sap.ui.define([
 			// Log that validator is loaded
 			console.log("✅ Validator.js loaded:", typeof validator);
 			console.log("   Available methods:", Object.keys(validator).slice(0, 10).join(", "), "...");
+			
+			console.log("✅ Chart.js loaded:", chartjs);
 		},
 
 		onValidate: function() {

internal/npm-integration-poc/consolidated-app/webapp/controller/Main.controller.js

@@ -11,7 +11,7 @@
 		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-resourceroots='{
 			"com.example.app": "./",
-			"validator": "./resources/validator",
+			"thirdparty": "./resources/thirdparty",
 			"com.example.app.gen.@ui5.webcomponents": "./gen/@ui5/webcomponents"
 		}'
 		data-sap-ui-libs="sap.m,sap.ui.core,sap.ui.layout,sap.ui.webc.main"