@worktile/planet 17.0.0-next.2 → 17.0.0

package/fesm2022/worktile-planet.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, NgZone, NgModuleRef, Inject, Optional, Component, ChangeDetectionStrategy, Injector, createComponent, reflectComponentType, EventEmitter, Directive, Input, Output, inject, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, NgZone, NgModuleRef, signal, Inject, Optional, Component, ChangeDetectionStrategy, Injector, createComponent, reflectComponentType, EventEmitter, Directive, Input, Output, inject, NgModule } from '@angular/core';
 import * as i3 from '@angular/router';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import * as i1 from '@angular/common/http';
@@ -106,7 +106,7 @@ function getExtName(name) {
 function buildResourceFilePath(resourceFilePath, manifestResult) {
     const fileName = getResourceFileName(resourceFilePath);
     if (manifestResult[fileName]) {
-        return resourceFilePath.replace(fileName, manifestResult[fileName]);
+        return resourceFilePath.replace(fileName, manifestResult[fileName].src);
     }
     else {
         return resourceFilePath;
@@ -148,56 +148,56 @@ function getAssetsBasePath(app) {
     }
     return basePath || app.resourcePathPrefix;
 }
-/**
- * Get static resource full path
- * @param app PlanetApplication
- * @param manifestResult manifest
- */
-function getScriptsAndStylesFullPaths(app, basePath, manifestResult) {
+function getAssetsByDefined(definedPaths, manifest, ext) {
+    if (definedPaths) {
+        return definedPaths.map(definedPath => {
+            const fileName = getResourceFileName(definedPath);
+            const assetsTagItem = manifest[fileName];
+            return {
+                ...assetsTagItem,
+                src: definedPath.replace(fileName, assetsTagItem.src)
+            };
+        });
+    }
+    else {
+        return Object.keys(manifest)
+            .filter(key => {
+            return getExtName(key) === ext;
+        })
+            .map(key => {
+            return manifest[key];
+        });
+    }
+}
+function toAssetsTagItem(src) {
+    return {
+        src: src
+    };
+}
+function toAssetsTagItems(src) {
+    return src.map(item => toAssetsTagItem(item));
+}
+function getScriptsAndStylesAssets(app, basePath, manifestResult) {
+    const result = { scripts: [], styles: [] };
     let { scripts, styles } = getDefinedAssets(app);
     // combine resource path by manifest
     if (manifestResult) {
-        if (scripts) {
-            scripts = scripts.map(script => {
-                return buildResourceFilePath(script, manifestResult);
-            });
-        }
-        else {
-            scripts = Object.keys(manifestResult)
-                .filter(key => {
-                return getExtName(key) === 'js';
-            })
-                .map(key => {
-                return manifestResult[key];
-            });
-        }
-        if (styles) {
-            styles = styles.map(style => {
-                return buildResourceFilePath(style, manifestResult);
-            });
-        }
-        else {
-            styles = Object.keys(manifestResult)
-                .filter(key => {
-                return getExtName(key) === 'css';
-            })
-                .map(key => {
-                return manifestResult[key];
-            });
-        }
+        result.scripts = getAssetsByDefined(scripts, manifestResult, 'js');
+        result.styles = getAssetsByDefined(styles, manifestResult, 'css');
+    }
+    else {
+        result.scripts = toAssetsTagItems(scripts);
+        result.styles = toAssetsTagItems(styles);
     }
     if (basePath) {
-        scripts = scripts.map(script => {
-            return buildFullPath(script, basePath);
+        result.scripts.forEach(item => {
+            item.src = buildFullPath(item.src, basePath);
         });
-        styles = styles.map(style => {
-            return buildFullPath(style, basePath);
+        result.styles.forEach(item => {
+            item.src = buildFullPath(item.src, basePath);
         });
     }
-    return {
-        scripts: scripts || [],
-        styles: styles || []
-    };
+    return result;
 }
 
 const PLANET_SANDBOX_WINDOW_WHITELIST = window['___PLANET_SANDBOX_WINDOW_WHITELIST___'];
@@ -852,12 +852,13 @@ function getSandboxInstance() {
 
 const STYLE_LINK_OR_SCRIPT_REG = /<[script|link].*?>/gi;
 const LINK_OR_SRC_REG = /(src|href)=["'](.*?[\.js|\.css])["']/i;
+const TAG_ATTRS_REG = /(type|defer|async)((=["'].*?["'])|\s|\>)/gi;
 class AssetsLoader {
     constructor(http) {
         this.http = http;
         this.loadedSources = [];
     }
-    loadScript(src) {
+    loadScript(src, tagAttributes) {
         const id = hashCode(src);
         if (this.loadedSources.includes(id)) {
             return of({
@@ -869,9 +870,14 @@ class AssetsLoader {
         }
         return new Observable((observer) => {
             const script = document.createElement('script');
-            script.type = 'text/javascript';
+            script.type = tagAttributes?.type || 'text/javascript';
             script.src = src;
-            script.async = true;
+            if (!tagAttributes?.defer || tagAttributes?.defer !== 'false') {
+                script.defer = true;
+            }
+            if (!tagAttributes?.async && tagAttributes?.async === 'false') {
+                script.async = true;
+            }
             if (script['readyState']) {
                 // IE
                 script['onreadystatechange'] = () => {
@@ -995,13 +1001,13 @@ class AssetsLoader {
         if (isEmpty(sources)) {
             return of(null);
         }
-        const observables = sources.map(src => {
+        const observables = sources.map(source => {
             // TODO: 暂时只支持Proxy沙箱
             if (options.sandbox && window.Proxy) {
-                return this.loadScriptWithSandbox(options.app, src);
+                return this.loadScriptWithSandbox(options.app, source.src);
             }
             else {
-                return this.loadScript(src);
+                return this.loadScript(source.src, source.attributes);
             }
         });
         if (options.serial) {
@@ -1018,13 +1024,40 @@ class AssetsLoader {
         if (isEmpty(sources)) {
             return of(null);
         }
-        return forkJoin(sources.map(src => {
-            return this.loadStyle(src);
+        return forkJoin(sources.map(source => {
+            return this.loadStyle(source.src);
         }));
     }
     loadScriptsAndStyles(scripts = [], styles = [], options) {
         return forkJoin([this.loadScripts(scripts, options), this.loadStyles(styles)]);
     }
+    /**
+     * <script type="module" src="http://127.0.0.1:3001/main.js" async defer></script>
+     * => [`type="module"`, "async ", "defer>"] as attributeStrMatchArr
+     * => { type: "module", async: "async", defer: "defer" } as attributes
+     */
+    parseTagAttributes(tag) {
+        const attributeStrMatchArr = tag.match(TAG_ATTRS_REG);
+        if (attributeStrMatchArr) {
+            const attributes = {};
+            attributeStrMatchArr.forEach(item => {
+                const equalSignIndex = item.indexOf('=');
+                if (equalSignIndex > 0) {
+                    // 'type="module"' => { type: "module" }
+                    const key = item.slice(0, equalSignIndex);
+                    attributes[key] = item.slice(equalSignIndex + 2, item.length - 1);
+                }
+                else {
+                    // 'async ' => 'async'
+                    // 'defer>' => 'defer'
+                    const key = item.slice(0, item.length - 1);
+                    attributes[key] = key;
+                }
+            });
+            return attributes;
+        }
+        return undefined;
+    }
     parseManifestFromHTML(html) {
         const result = {};
         const matchResult = html.match(STYLE_LINK_OR_SCRIPT_REG);
@@ -1039,7 +1072,20 @@ class AssetsLoader {
                 if (splitIndex > -1) {
                     const name = hashName.slice(0, splitIndex);
                     const ext = getExtName(hashName);
-                    result[ext ? `${name}.${ext}` : name] = src;
+                    const assetsTag = {
+                        src: src
+                    };
+                    result[ext ? `${name}.${ext}` : name] = assetsTag;
+                    const attributes = this.parseTagAttributes(item);
+                    if (attributes) {
+                        assetsTag.attributes = attributes;
+                    }
+                    // const typeTagResult = item.match(TAG_TYPE_REG);
+                    // if (typeTagResult && typeTagResult[1]) {
+                    //     assetsTag.attributes = {
+                    //         type: typeTagResult[1]
+                    //     };
+                    // }
                 }
             }
         });
@@ -1053,10 +1099,7 @@ class AssetsLoader {
             const isHtml = manifestExt === 'html';
             const responseType = isHtml ? 'text' : 'json';
             return this.loadManifest(`${manifest}?t=${new Date().getTime()}`, responseType).pipe(switchMap(manifestResult => {
-                if (responseType === 'text') {
-                    manifestResult = this.parseManifestFromHTML(manifestResult);
-                }
-                const { scripts, styles } = getScriptsAndStylesFullPaths(app, basePath, manifestResult);
+                const { scripts, styles } = getScriptsAndStylesAssets(app, basePath, manifestResult);
                 return this.loadScriptsAndStyles(scripts, styles, {
                     app: app.name,
                     sandbox: app.sandbox,
@@ -1065,7 +1108,7 @@ class AssetsLoader {
             }));
         }
         else {
-            const { scripts, styles } = getScriptsAndStylesFullPaths(app, basePath);
+            const { scripts, styles } = getScriptsAndStylesAssets(app, basePath);
             return this.loadScriptsAndStyles(scripts, styles, {
                 app: app.name,
                 sandbox: app.sandbox,
@@ -1079,7 +1122,18 @@ class AssetsLoader {
             responseType: responseType
         })
             .pipe(map((response) => {
-            return response;
+            if (responseType === 'text') {
+                return this.parseManifestFromHTML(response);
+            }
+            else {
+                const result = {};
+                Object.keys(response).forEach(key => {
+                    result[key] = {
+                        src: response[key]
+                    };
+                });
+                return result;
+            }
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AssetsLoader, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1473,7 +1527,12 @@ class PlanetApplicationLoader {
         this.routeChange$ = new Subject();
         this.appStatusChange$ = new Subject();
         this.appsLoadingStart$ = new Subject();
+        this.innerLoading = signal(false);
+        /**
+         * @deprecated please use loading signal
+         */
         this.loadingDone = false;
+        this.loading = this.innerLoading.asReadonly();
         if (getApplicationLoader()) {
             throw new Error('PlanetApplicationLoader has been injected in the portal, repeated injection is not allowed');
         }
@@ -1525,6 +1584,7 @@ class PlanetApplicationLoader {
     setLoadingDone() {
         this.ngZone.run(() => {
             this.loadingDone = true;
+            this.innerLoading.set(false);
         });
     }
     getAppNames(apps) {
@@ -1579,6 +1639,7 @@ class PlanetApplicationLoader {
                 });
                 if (hasAppsNeedLoadingAssets) {
                     this.loadingDone = false;
+                    this.innerLoading.set(true);
                 }
                 return loadApps$.length > 0 ? forkJoin(loadApps$) : of([]);
             }), 
@@ -1609,9 +1670,7 @@ class PlanetApplicationLoader {
                             debug(`[routeChange] app(${app.name}) is active, do nothings`);
                             const appRef = getPlanetApplicationRef(app.name);
                             // Backwards compatibility sub app use old version which has not getCurrentRouterStateUrl
-                            const currentUrl = appRef?.getCurrentRouterStateUrl
-                                ? appRef.getCurrentRouterStateUrl()
-                                : '';
+                            const currentUrl = appRef?.getCurrentRouterStateUrl ? appRef.getCurrentRouterStateUrl() : '';
                             if (currentUrl !== event.url) {
                                 appRef?.navigateByUrl(event.url);
                             }
@@ -1890,9 +1949,15 @@ class Planet {
     get planetApplicationService() {
         return getApplicationService();
     }
+    /**
+     * @deprecated please use loading signal
+     */
     get loadingDone() {
         return this.planetApplicationLoader.loadingDone;
     }
+    get loading() {
+        return this.planetApplicationLoader.loading;
+    }
     get appStatusChange() {
         return this.planetApplicationLoader.appStatusChange;
     }