ngx-wujie
Version:
Angular wrapper for wujie micro-frontend framework
231 lines (226 loc) • 7.57 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, ViewChild, Component } from '@angular/core';
import { startApp, destroyApp } from 'wujie';
class NgxWujieComponent {
containerRef;
name;
url;
width;
height;
loading;
sync = false;
prefix;
alive = false;
props;
replace;
fetch;
fiber = true;
attrs;
degrade = false;
plugins;
exec;
iframeAddEventListeners;
iframeOnEvents;
beforeLoad;
beforeMount;
afterMount;
beforeUnmount;
afterUnmount;
activated;
deactivated;
loadError;
mounted = new EventEmitter();
unmounted = new EventEmitter();
error = new EventEmitter();
hasMounted = false;
buildStartOptions(el) {
return {
name: this.name,
url: this.url,
el: el ?? this.containerRef?.nativeElement,
props: this.props,
attrs: this.attrs,
replace: this.replace,
sync: this.sync,
prefix: this.prefix,
alive: this.alive,
fiber: this.fiber,
degrade: this.degrade,
loading: this.loading,
fetch: this.fetch,
iframeAddEventListeners: this.iframeAddEventListeners,
iframeOnEvents: this.iframeOnEvents,
plugins: this.plugins,
beforeLoad: this.beforeLoad,
beforeMount: this.beforeMount,
afterMount: this.afterMount,
beforeUnmount: this.beforeUnmount,
afterUnmount: this.afterUnmount,
activated: this.activated,
deactivated: this.deactivated,
loadError: this.loadError,
};
}
remount() {
if (!this.containerRef || !this.name || !this.url)
return;
this.destroy();
this.start();
}
hotUpdate() {
try {
const el = this.containerRef?.nativeElement;
startApp(this.buildStartOptions(el));
}
catch (err) {
console.error('[wujie-angular] hotUpdate error:', err);
this.error.emit(err);
}
}
start() {
if (!this.containerRef || !this.name || !this.url)
return;
const el = this.containerRef.nativeElement;
try {
startApp(this.buildStartOptions(el));
}
catch (err) {
console.error('[wujie-angular] start [${this.name}] error:', err);
this.error.emit(err);
return;
}
this.hasMounted = true;
}
destroy() {
try {
if (this.name) {
destroyApp(this.name);
}
;
}
catch (err) {
console.error(`[wujie-angular] destroy [${this.name}] error:`, err);
}
this.hasMounted = false;
}
ngAfterViewInit() {
this.start();
}
ngOnChanges(changes) {
if (!this.hasMounted)
return;
const nameOrUrlChanged = !!(changes['name'] || changes['url']);
const behaviorChanged = !!(changes['replace'] || changes['fetch'] || changes['plugins'] || changes['fiber'] || changes['degrade'] || changes['sync'] || changes['prefix']);
const propsChanged = !!(changes['props'] || changes['attrs']);
const aliveChanged = !!changes['alive'];
if (nameOrUrlChanged) {
this.remount();
return;
}
if (aliveChanged) {
if (this.alive === false) {
this.remount();
return;
}
else {
this.hotUpdate();
return;
}
}
if (propsChanged || behaviorChanged) {
if (this.alive) {
this.hotUpdate();
}
else {
this.remount();
}
return;
}
}
ngOnDestroy() {
if (!this.alive) {
this.destroy();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxWujieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgxWujieComponent, isStandalone: true, selector: "ngx-wujie", inputs: { name: "name", url: "url", width: "width", height: "height", loading: "loading", sync: "sync", prefix: "prefix", alive: "alive", props: "props", replace: "replace", fetch: "fetch", fiber: "fiber", attrs: "attrs", degrade: "degrade", plugins: "plugins", exec: "exec", iframeAddEventListeners: "iframeAddEventListeners", iframeOnEvents: "iframeOnEvents", beforeLoad: "beforeLoad", beforeMount: "beforeMount", afterMount: "afterMount", beforeUnmount: "beforeUnmount", afterUnmount: "afterUnmount", activated: "activated", deactivated: "deactivated", loadError: "loadError" }, outputs: { mounted: "mounted", unmounted: "unmounted", error: "error" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
<div #container></div>
`, isInline: true, styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxWujieComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-wujie', standalone: true, imports: [], template: `
<div #container></div>
` }]
}], propDecorators: { containerRef: [{
type: ViewChild,
args: ['container', { static: true }]
}], name: [{
type: Input,
args: [{ required: true }]
}], url: [{
type: Input,
args: [{ required: true }]
}], width: [{
type: Input
}], height: [{
type: Input
}], loading: [{
type: Input
}], sync: [{
type: Input
}], prefix: [{
type: Input
}], alive: [{
type: Input
}], props: [{
type: Input
}], replace: [{
type: Input
}], fetch: [{
type: Input
}], fiber: [{
type: Input
}], attrs: [{
type: Input
}], degrade: [{
type: Input
}], plugins: [{
type: Input
}], exec: [{
type: Input
}], iframeAddEventListeners: [{
type: Input
}], iframeOnEvents: [{
type: Input
}], beforeLoad: [{
type: Input
}], beforeMount: [{
type: Input
}], afterMount: [{
type: Input
}], beforeUnmount: [{
type: Input
}], afterUnmount: [{
type: Input
}], activated: [{
type: Input
}], deactivated: [{
type: Input
}], loadError: [{
type: Input
}], mounted: [{
type: Output
}], unmounted: [{
type: Output
}], error: [{
type: Output
}] } });
/*
* Public API Surface of ngx-wujie
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxWujieComponent };
//# sourceMappingURL=ngx-wujie.mjs.map