ov-components: update build process and module definition for improved structure

master
Carlos Santos 2025-04-30 17:58:11 +02:00
parent 3adfa91c54
commit 127fbbd4e1
4 changed files with 44 additions and 33 deletions

View File

@ -18,7 +18,8 @@
"builder": "@angular-devkit/build-angular:application", "builder": "@angular-devkit/build-angular:application",
"options": { "options": {
"outputPath": { "outputPath": {
"base": "dist/openvidu-components-testapp" "base": "dist/openvidu-components-testapp",
"browser": ""
}, },
"index": "src/index.html", "index": "src/index.html",
"polyfills": ["zone.js"], "polyfills": ["zone.js"],
@ -158,7 +159,8 @@
"builder": "@angular-devkit/build-angular:application", "builder": "@angular-devkit/build-angular:application",
"options": { "options": {
"outputPath": { "outputPath": {
"base": "dist/openvidu-webcomponent-rc" "base": "dist/openvidu-webcomponent-rc",
"browser": ""
}, },
"index": "src/index.html", "index": "src/index.html",
"polyfills": ["zone.js"], "polyfills": ["zone.js"],

View File

@ -1,15 +1,15 @@
const fs = require('fs-extra'); import fs from 'fs-extra';
const concat = require('concat'); import concat from 'concat';
const VERSION = require('./package.json').version; const packageJson = fs.readJSONSync('./package.json');
const VERSION = packageJson.version;
const ovWebcomponentRCPath = './dist/openvidu-webcomponent-rc'; const ovWebcomponentRCPath = './dist/openvidu-webcomponent-rc';
const ovWebcomponentProdPath = './dist/openvidu-webcomponent'; const ovWebcomponentProdPath = './dist/openvidu-webcomponent';
module.exports.buildWebcomponent = async () => { export const buildWebcomponent = async () => {
console.log('Building OpenVidu Web Component (' + VERSION + ')'); console.log('Building OpenVidu Web Component (' + VERSION + ')');
const tutorialWcPath = '../../openvidu-tutorials/openvidu-webcomponent/web'; const tutorialWcPath = '../../openvidu-tutorials/openvidu-webcomponent/web';
const e2eWcPath = './e2e/webcomponent-app'; const e2eWcPath = './e2e/webcomponent-app';
try { try {
await buildElement(); await buildElement();
await copyFiles(tutorialWcPath); await copyFiles(tutorialWcPath);
@ -23,16 +23,21 @@ module.exports.buildWebcomponent = async () => {
}; };
async function buildElement() { 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 { 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 fs.ensureDir('./dist/openvidu-webcomponent');
await concat(files, `${ovWebcomponentProdPath}/openvidu-webcomponent-${VERSION}.js`); await concat(files, `${ovWebcomponentProdPath}/openvidu-webcomponent-${VERSION}.js`);
await fs.copy(`${ovWebcomponentRCPath}/styles.css`, `${ovWebcomponentProdPath}/openvidu-webcomponent-${VERSION}.css`); await fs.copy(`${ovWebcomponentRCPath}/styles.css`, `${ovWebcomponentProdPath}/openvidu-webcomponent-${VERSION}.css`);
// await fs.copy(
// "./dist/openvidu-webcomponent/assets", if (fs.existsSync(`${ovWebcomponentRCPath}/assets`)) {
// "./openvidu-webcomponent/assets" await fs.copy(`${ovWebcomponentRCPath}/assets`, `${ovWebcomponentProdPath}/assets`);
// ); }
} catch (err) { } catch (err) {
console.error('Error executing build function in webcomponent-builds.js'); console.error('Error executing build function in webcomponent-builds.js');
throw err; throw err;
@ -57,4 +62,4 @@ async function copyFiles(destination) {
} }
} }
this.buildWebcomponent(); await buildWebcomponent();

View File

@ -1,15 +1,19 @@
import { OpenviduWebComponentModule } from './openvidu-webcomponent.module'; import { OpenviduWebComponentModule } from './openvidu-webcomponent.module';
import { enableProdMode } from "@angular/core"; import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from "../../environments/environment"; import { environment } from '../../environments/environment';
import 'zone.js';
if (environment.production) { if (environment.production) {
enableProdMode(); enableProdMode();
} }
/** /**
* *
* @internal * @internal
*/ */
const bootstrap = () => platformBrowserDynamic().bootstrapModule(OpenviduWebComponentModule); platformBrowserDynamic()
bootstrap().catch(err => console.error(err)); .bootstrapModule(OpenviduWebComponentModule, {
ngZone: 'zone.js' // Especificar explícitamente la zona
})
.catch((err) => console.error('Error bootstrapping webcomponent:', err));

View File

@ -20,10 +20,10 @@ export class OpenviduWebComponentModule implements DoBootstrap {
constructor(private injector: Injector) {} constructor(private injector: Injector) {}
ngDoBootstrap(): void { ngDoBootstrap(): void {
const element = createCustomElement(OpenviduWebComponentComponent, { const elementConstructor = createCustomElement(OpenviduWebComponentComponent, {
injector: this.injector injector: this.injector
}); });
customElements.define('openvidu-webcomponent', element); customElements.define('openvidu-webcomponent', elementConstructor);
} }
} }