From 127fbbd4e1686fb663a25ded24a49333e6a26b16 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Wed, 30 Apr 2025 17:58:11 +0200
Subject: [PATCH] ov-components: update build process and module definition for
 improved structure

---
 openvidu-components-angular/angular.json      | 16 +++++-----
 .../openvidu-webcomponent-build.js            | 29 +++++++++++--------
 .../openvidu-webcomponent.main.ts             | 28 ++++++++++--------
 .../openvidu-webcomponent.module.ts           |  4 +--
 4 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/openvidu-components-angular/angular.json b/openvidu-components-angular/angular.json
index 21ace3f9..70501825 100644
--- a/openvidu-components-angular/angular.json
+++ b/openvidu-components-angular/angular.json
@@ -18,7 +18,8 @@
 					"builder": "@angular-devkit/build-angular:application",
 					"options": {
 						"outputPath": {
-							"base": "dist/openvidu-components-testapp"
+							"base": "dist/openvidu-components-testapp",
+							"browser": ""
 						},
 						"index": "src/index.html",
 						"polyfills": ["zone.js"],
@@ -158,16 +159,17 @@
 					"builder": "@angular-devkit/build-angular:application",
 					"options": {
 						"outputPath": {
-              "base": "dist/openvidu-webcomponent-rc"
-            },
-            "index": "src/index.html",
+							"base": "dist/openvidu-webcomponent-rc",
+							"browser": ""
+						},
+						"index": "src/index.html",
 						"polyfills": ["zone.js"],
 						"tsConfig": "src/app/openvidu-webcomponent/tsconfig.openvidu-webcomponent.json",
 						"aot": true,
 						"assets": ["src/favicon.ico"],
 						"styles": ["src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss"],
-            "scripts": [],
-            "browser": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts"
+						"scripts": [],
+						"browser": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts"
 					},
 					"configurations": {
 						"production": {
@@ -181,7 +183,7 @@
 							"outputHashing": "none",
 							"sourceMap": false,
 							"namedChunks": false,
-              "extractLicenses": true,
+							"extractLicenses": true,
 							"budgets": [
 								{
 									"type": "initial",
diff --git a/openvidu-components-angular/openvidu-webcomponent-build.js b/openvidu-components-angular/openvidu-webcomponent-build.js
index 1e6dba97..dd35a81b 100644
--- a/openvidu-components-angular/openvidu-webcomponent-build.js
+++ b/openvidu-components-angular/openvidu-webcomponent-build.js
@@ -1,15 +1,15 @@
-const fs = require('fs-extra');
-const concat = require('concat');
-const VERSION = require('./package.json').version;
+import fs from 'fs-extra';
+import concat from 'concat';
+const packageJson = fs.readJSONSync('./package.json');
+const VERSION = packageJson.version;
 const ovWebcomponentRCPath = './dist/openvidu-webcomponent-rc';
 const ovWebcomponentProdPath = './dist/openvidu-webcomponent';
 
-module.exports.buildWebcomponent = async () => {
+export const buildWebcomponent = async () => {
 	console.log('Building OpenVidu Web Component (' + VERSION + ')');
 	const tutorialWcPath = '../../openvidu-tutorials/openvidu-webcomponent/web';
 	const e2eWcPath = './e2e/webcomponent-app';
 
-
 	try {
 		await buildElement();
 		await copyFiles(tutorialWcPath);
@@ -23,16 +23,21 @@ module.exports.buildWebcomponent = async () => {
 };
 
 async function buildElement() {
-	const files = [`${ovWebcomponentRCPath}/runtime.js`, `${ovWebcomponentRCPath}/main.js`, `${ovWebcomponentRCPath}/polyfills.js`];
-
+	const files = [`${ovWebcomponentRCPath}/polyfills.js`, /*`${ovWebcomponentRCPath}/runtime.js`,*/ `${ovWebcomponentRCPath}/main.js`];
 	try {
+		for (const file of files) {
+			if (!fs.existsSync(file)) {
+				console.error(`Error: File ${file} does not exist`);
+				throw new Error(`Missing required file: ${file}`);
+			}
+		}
 		await fs.ensureDir('./dist/openvidu-webcomponent');
 		await concat(files, `${ovWebcomponentProdPath}/openvidu-webcomponent-${VERSION}.js`);
 		await fs.copy(`${ovWebcomponentRCPath}/styles.css`, `${ovWebcomponentProdPath}/openvidu-webcomponent-${VERSION}.css`);
-		// await fs.copy(
-		// 	"./dist/openvidu-webcomponent/assets",
-		// 	"./openvidu-webcomponent/assets"
-		// );
+
+		if (fs.existsSync(`${ovWebcomponentRCPath}/assets`)) {
+			await fs.copy(`${ovWebcomponentRCPath}/assets`, `${ovWebcomponentProdPath}/assets`);
+		}
 	} catch (err) {
 		console.error('Error executing build function in webcomponent-builds.js');
 		throw err;
@@ -57,4 +62,4 @@ async function copyFiles(destination) {
 	}
 }
 
-this.buildWebcomponent();
+await buildWebcomponent();
diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts
index ce77f80b..a4cdc71b 100644
--- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts
+++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts
@@ -1,15 +1,19 @@
 import { OpenviduWebComponentModule } from './openvidu-webcomponent.module';
-import { enableProdMode } from "@angular/core";
-import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
-import { environment } from "../../environments/environment";
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { environment } from '../../environments/environment';
+import 'zone.js';
 
-  if (environment.production) {
-    enableProdMode();
-  }
+if (environment.production) {
+	enableProdMode();
+}
 
-  /**
-   *
-   * @internal
-   */
-  const bootstrap = () => platformBrowserDynamic().bootstrapModule(OpenviduWebComponentModule);
-  bootstrap().catch(err => console.error(err));
\ No newline at end of file
+/**
+ *
+ * @internal
+ */
+platformBrowserDynamic()
+	.bootstrapModule(OpenviduWebComponentModule, {
+		ngZone: 'zone.js' // Especificar explícitamente la zona
+	})
+	.catch((err) => console.error('Error bootstrapping webcomponent:', err));
diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts
index 1cee8bef..64ffa5cb 100644
--- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts
+++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts
@@ -20,10 +20,10 @@ export class OpenviduWebComponentModule implements DoBootstrap {
 	constructor(private injector: Injector) {}
 
 	ngDoBootstrap(): void {
-		const element = createCustomElement(OpenviduWebComponentComponent, {
+		const elementConstructor = createCustomElement(OpenviduWebComponentComponent, {
 			injector: this.injector
 		});
 
-		customElements.define('openvidu-webcomponent', element);
+		customElements.define('openvidu-webcomponent', elementConstructor);
 	}
 }