Sample App: Make dependency on ECL themes optional (#7420)

packages/samples/react/package.json

@@ -28,7 +28,6 @@
 		"@leanup/stack-react": "1.3.54",
 		"@leanup/stack-webpack": "1.3.54",
 		"@playwright/test": "1.49.1",
-		"@public-ui-/theme-ecl": "workspace:*",
 		"@public-ui/components": "workspace:*",
 		"@public-ui/react": "workspace:*",
 		"@public-ui/theme-default": "workspace:*",
@@ -77,6 +76,9 @@
 		"world_countries_lists": "2.9.0",
 		"yup": "1.5.0"
 	},
+	"optionalDependencies": {
+		"@public-ui-/theme-ecl": "workspace:*"
+	},
 	"files": [
 		".eslintignore",
 		".eslintrc.js",

packages/samples/react/src/react.main.tsx

@@ -6,7 +6,6 @@ import { setTagNameTransformer } from '@public-ui/react';
 import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { DEFAULT } from '@public-ui/theme-default';
-import { ECL_EC, ECL_EU } from '@public-ui-/theme-ecl';
 
 import { App } from './App';
 
@@ -35,8 +34,17 @@ const getThemes = async () => {
 		return [theme];
 	}
 
+	const optionalThemes: Theme[] = [];
+	const { ECL_EC, ECL_EU } = await import('@public-ui-/theme-ecl');
+
+	if (ECL_EC && ECL_EU) {
+		optionalThemes.push(ECL_EC, ECL_EU);
+	} else {
+		console.warn('Theme package @public-ui-/theme-ecl not available. Continuing without it.');
+	}
+
 	/* List of regular sample app themes */
-	return [DEFAULT, ECL_EC, ECL_EU] as Theme[];
+	return [DEFAULT, ...optionalThemes] as Theme[];
 };
 
 void (async () => {

packages/samples/react/webpack.config.js

@@ -1,5 +1,7 @@
 const webpack = require('webpack');
 
+const OPTIONAL_THEME_PACKAGE = '@public-ui-/theme-ecl';
+
 module.exports = (...args) => {
 	const config = require('@leanup/stack-react/webpack.config')(...args);
 	const UnoCSS = require('@unocss/webpack').default;
@@ -17,5 +19,25 @@ module.exports = (...args) => {
 		}),
 	);
 	delete config.devServer.proxy;
+
+	config.externals = [
+		...(config.externals || []),
+
+		/* Handle optional theme dependencies */
+		({ request }, callback) => {
+			if (request === OPTIONAL_THEME_PACKAGE) {
+				try {
+					require.resolve(OPTIONAL_THEME_PACKAGE);
+					// Package exists, include it
+					return callback();
+				} catch (e) {
+					// Package doesn't exist, replace with empty module
+					return callback(null, 'null');
+				}
+			}
+			callback();
+		},
+	];
+
 	return config;
 };