3d8c440e-6657-4a66-8275-a385519b2df0

Committed 13 Mar 2024 01:41AM UTC coverage: 93.033% (-0.06%) from 93.088%

Build # 3d8c440e-6657-4a66-8275-a385519b2df0

Build Type

Pull #308

circleci

Committed by

why520crazy

Commit Message

refactor: remove console

Pull Request Pull Request #308: feat: support index.html as assets manifest

Run Details

225 of 255 branches covered (88.24%)

Branch coverage included in aggregate %.

27 of 28 new or added lines in 2 files covered. (96.43%)

10 existing lines in 1 file now uncovered.

643 of 678 relevant lines covered (94.84%)

18.92 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

83.97

/packages/planet/src/assets-loader.ts

import { Injectable } from '@angular/core';
import { hashCode, isEmpty, getScriptsAndStylesFullPaths, getResourceFileName, getExtName } from './helpers';
import { of, Observable, Observer, forkJoin, concat } from 'rxjs';
import { map, switchMap, concatAll } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { PlanetApplication } from './planet.class';
import { createSandbox } from './sandbox';

const STYLE_LINK_OR_SCRIPT_REG = /<[script|link].*?">/gi;
const LINK_OR_SRC_REG = /(src|href)=["'](.*?)["']/i;

export interface AssetsLoadResult {
    src: string;
    hashCode: number;
    loaded: boolean;
    status: string;
}

@Injectable({
    providedIn: 'root'
})
export class AssetsLoader {
    private loadedSources: number[] = [];

    constructor(private http: HttpClient) {}

    loadScript(src: string): Observable<AssetsLoadResult> {
        const id = hashCode(src);
        if (this.loadedSources.includes(id)) {
            return of({
                src: src,
                hashCode: id,
                loaded: true,
                status: 'Loaded'
            });
        }
        return new Observable((observer: Observer<AssetsLoadResult>) => {
            const script: HTMLScriptElement = document.createElement('script');
            script.type = 'text/javascript';
            script.src = src;
            script.async = true;
            if (script['readyState']) {
                // IE
                script['onreadystatechange'] = () => {
                    if (script['readyState'] === 'loaded' || script['readyState'] === 'complete') {
                        script['onreadystatechange'] = null;
                        observer.next({
                            src: src,
                            hashCode: id,
                            loaded: true,
                            status: 'Loaded'
                        });
                        observer.complete();
                        this.loadedSources.push(id);
                    }
                };
            } else {
                // Others
                script.onload = () => {
                    observer.next({
                        src: src,
                        hashCode: id,
                        loaded: true,
                        status: 'Loaded'
                    });
                    observer.complete();
                    this.loadedSources.push(id);
                };
            }
            script.onerror = error => {
                observer.error({
                    src: src,
                    hashCode: id,
                    loaded: false,
                    status: 'Error',
                    error: error
                });
                observer.complete();
            };
            document.body.appendChild(script);
        });
    }

    loadScriptWithSandbox(app: string, src: string): Observable<AssetsLoadResult> {
        const id = hashCode(src);
        if (this.loadedSources.includes(id)) {
            return of({
                src: src,
                hashCode: id,
                loaded: true,
                status: 'Loaded'
            });
        }
        return new Observable((observer: Observer<AssetsLoadResult>) => {
            this.http.get(src, { responseType: 'text' }).subscribe(
                (code: string) => {
                    this.loadedSources.push(id);
                    const sandbox = createSandbox(app);
                    sandbox.execScript(code, src);
                    observer.next({
                        src: src,
                        hashCode: id,
                        loaded: true,
                        status: 'Loaded'
                    });
                    observer.complete();
                },
                error => {
                    observer.error({
                        src: src,
                        hashCode: id,
                        loaded: false,
                        status: 'Error',
                        error: error
                    });
                    observer.complete();
                }
            );
        });
    }

    loadStyle(src: string): Observable<AssetsLoadResult> {
        const id = hashCode(src);
        if (this.loadedSources.includes(id)) {
            return of({
                src: src,
                hashCode: id,
                loaded: true,
                status: 'Loaded'
            });
        }
        return new Observable((observer: Observer<AssetsLoadResult>) => {
            const head = document.getElementsByTagName('head')[0];
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = src;
            link.media = 'all';
            link.onload = () => {
                observer.next({
                    src: src,
                    hashCode: id,
                    loaded: true,
                    status: 'Loaded'
                });
                observer.complete();
                this.loadedSources.push(id);
            };
            link.onerror = error => {
                observer.error({
                    src: src,
                    hashCode: id,
                    loaded: true,
                    status: 'Loaded',
                    error: error
                });
                observer.complete();
            };
            head.appendChild(link);
        });
    }

    loadScripts(
        sources: string[],
        options: {
            app?: string;
            sandbox?: boolean;
            serial?: boolean;
        } = {
            serial: false,
            sandbox: false
        }
    ): Observable<AssetsLoadResult[]> {
        if (isEmpty(sources)) {
            return of(null);
        }
        const observables = sources.map(src => {
            // TODO: 暂时只支持Proxy沙箱
            if (options.sandbox && window.Proxy) {
                return this.loadScriptWithSandbox(options.app, src);
            } else {
                return this.loadScript(src);
            }
        });
        if (options.serial) {
            const a = concat(...observables).pipe(
                map(item => {
                    return of([item]);
                }),
                concatAll()
            );
            return a;
        } else {
            return forkJoin(observables).pipe();
        }
    }

    loadStyles(sources: string[]): Observable<AssetsLoadResult[]> {
        if (isEmpty(sources)) {
            return of(null);
        }
        return forkJoin(
            sources.map(src => {
                return this.loadStyle(src);
            })
        );
    }

    loadScriptsAndStyles(
        scripts: string[] = [],
        styles: string[] = [],
        options?: {
            app?: string;
            sandbox?: boolean;
            serial?: boolean;
        }
    ) {
        return forkJoin([this.loadScripts(scripts, options), this.loadStyles(styles)]);
    }

    parseManifestFromHTML(html: string): Record<string, string> {
        const result = {};
        const matchResult = html.match(STYLE_LINK_OR_SCRIPT_REG);
        matchResult.forEach(item => {
            const linkOrSrcResult = item.match(LINK_OR_SRC_REG);
            if (linkOrSrcResult[2]) {
                const src = linkOrSrcResult[2];
                const hashName = getResourceFileName(src);
                let barSplitIndex = hashName.indexOf('-');
                let dotSplitIndex = hashName.indexOf('.');
                const splitIndex = barSplitIndex > -1 ? barSplitIndex : dotSplitIndex;
                if (splitIndex > -1) {
                    const name = hashName.slice(0, splitIndex);
                    const ext = getExtName(hashName);
                    result[ext ? `${name}.${ext}` : name] = src;
                }
            }
        });
        return result;
    }

    loadAppAssets(app: PlanetApplication) {
        if (app.manifest) {
            const responseType = app.manifest.endsWith('.html') ? 'text' : 'json';
            return this.loadManifest(`${app.manifest}?t=${new Date().getTime()}`, responseType).pipe(
                switchMap(manifestResult => {
                    if (responseType === 'text') {
                        manifestResult = this.parseManifestFromHTML(manifestResult as string);
                    }
                    const { scripts, styles } = getScriptsAndStylesFullPaths(app, manifestResult as Record<string, string>);
                    return this.loadScriptsAndStyles(scripts, styles, {
                        app: app.name,
                        sandbox: app.sandbox,
                        serial: app.loadSerial
                    });
                })
            );
        } else {
            const { scripts, styles } = getScriptsAndStylesFullPaths(app);
            return this.loadScriptsAndStyles(scripts, styles, {
                app: app.name,
                sandbox: app.sandbox,
                serial: app.loadSerial
            });
        }
    }

    loadManifest(url: string, responseType: 'text' | 'json' = 'json'): Observable<Record<string, string> | string> {
        return this.http
            .get(url, {
                responseType: responseType as 'json'
            })
            .pipe(
                map((response: any) => {
                    return response;
                })
            );
    }
}

1	import { Injectable } from '@angular/core';
2	import { hashCode, isEmpty, getScriptsAndStylesFullPaths, getResourceFileName, getExtName } from './helpers';
3	import { of, Observable, Observer, forkJoin, concat } from 'rxjs';
4	import { map, switchMap, concatAll } from 'rxjs/operators';
5	import { HttpClient } from '@angular/common/http';
6	import { PlanetApplication } from './planet.class';
7	import { createSandbox } from './sandbox';
8
9	const STYLE_LINK_OR_SCRIPT_REG = /<[script\|link].*?">/gi;	1✔
10	const LINK_OR_SRC_REG = /(src\|href)=["'](.*?)["']/i;	1✔
11
12	export interface AssetsLoadResult {
13	src: string;
14	hashCode: number;
15	loaded: boolean;
16	status: string;
17	}
18
19	@Injectable({
20	providedIn: 'root'
21	})
22	export class AssetsLoader {	1✔
23	private loadedSources: number[] = [];	87✔
24
25	constructor(private http: HttpClient) {}	87✔
26
27	loadScript(src: string): Observable<AssetsLoadResult> {
28	const id = hashCode(src);	7✔
29	if (this.loadedSources.includes(id)) {	7✔
30	return of({	1✔
31	src: src,
32	hashCode: id,
33	loaded: true,
34	status: 'Loaded'
35	});
36	}
37	return new Observable((observer: Observer<AssetsLoadResult>) => {	6✔
38	const script: HTMLScriptElement = document.createElement('script');	6✔
39	script.type = 'text/javascript';	6✔
40	script.src = src;	6✔
41	script.async = true;	6✔
42	if (script['readyState']) {	6✔
43	// IE
44	script['onreadystatechange'] = () => {	3✔
45	if (script['readyState'] === 'loaded' \|\| script['readyState'] === 'complete') {	3✔
46	script['onreadystatechange'] = null;	2✔
47	observer.next({	2✔
48	src: src,
49	hashCode: id,
50	loaded: true,
51	status: 'Loaded'
52	});
53	observer.complete();	2✔
54	this.loadedSources.push(id);	2✔
55	}
56	};
57	} else {
58	// Others
59	script.onload = () => {	3✔
60	observer.next({	2✔
61	src: src,
62	hashCode: id,
63	loaded: true,
64	status: 'Loaded'
65	});
66	observer.complete();	2✔
67	this.loadedSources.push(id);	2✔
68	};
69	}
70	script.onerror = error => {	6✔
71	observer.error({	1✔
72	src: src,
73	hashCode: id,
74	loaded: false,
75	status: 'Error',
76	error: error
77	});
78	observer.complete();	1✔
79	};
80	document.body.appendChild(script);	6✔
81	});
82	}
83
84	loadScriptWithSandbox(app: string, src: string): Observable<AssetsLoadResult> {
UNCOV 85	const id = hashCode(src);	×
UNCOV 86	if (this.loadedSources.includes(id)) {	×
UNCOV 87	return of({	×
88	src: src,
89	hashCode: id,
90	loaded: true,
91	status: 'Loaded'
92	});
93	}
94	return new Observable((observer: Observer<AssetsLoadResult>) => {	×
95	this.http.get(src, { responseType: 'text' }).subscribe(	×
96	(code: string) => {
UNCOV 97	this.loadedSources.push(id);	×
UNCOV 98	const sandbox = createSandbox(app);	×
UNCOV 99	sandbox.execScript(code, src);	×
UNCOV 100	observer.next({	×
101	src: src,
102	hashCode: id,
103	loaded: true,
104	status: 'Loaded'
105	});
106	observer.complete();	×
107	},
108	error => {
109	observer.error({	×
110	src: src,
111	hashCode: id,
112	loaded: false,
113	status: 'Error',
114	error: error
115	});
UNCOV 116	observer.complete();	×
117	}
118	);
119	});
120	}
121
122	loadStyle(src: string): Observable<AssetsLoadResult> {
123	const id = hashCode(src);	4✔
124	if (this.loadedSources.includes(id)) {	4✔
125	return of({	1✔
126	src: src,
127	hashCode: id,
128	loaded: true,
129	status: 'Loaded'
130	});
131	}
132	return new Observable((observer: Observer<AssetsLoadResult>) => {	3✔
133	const head = document.getElementsByTagName('head')[0];	3✔
134	const link = document.createElement('link');	3✔
135	link.rel = 'stylesheet';	3✔
136	link.type = 'text/css';	3✔
137	link.href = src;	3✔
138	link.media = 'all';	3✔
139	link.onload = () => {	3✔
140	observer.next({	2✔
141	src: src,
142	hashCode: id,
143	loaded: true,
144	status: 'Loaded'
145	});
146	observer.complete();	2✔
147	this.loadedSources.push(id);	2✔
148	};
149	link.onerror = error => {	3✔
150	observer.error({	1✔
151	src: src,
152	hashCode: id,
153	loaded: true,
154	status: 'Loaded',
155	error: error
156	});
157	observer.complete();	1✔
158	};
159	head.appendChild(link);	3✔
160	});
161	}
162
163	loadScripts(
164	sources: string[],
165	options: {	1✔
166	app?: string;
167	sandbox?: boolean;
168	serial?: boolean;
169	} = {
170	serial: false,
171	sandbox: false
172	}
173	): Observable<AssetsLoadResult[]> {
174	if (isEmpty(sources)) {	2!
UNCOV 175	return of(null);	×
176	}
177	const observables = sources.map(src => {	2✔
178	// TODO: 暂时只支持Proxy沙箱
179	if (options.sandbox && window.Proxy) {	4!
UNCOV 180	return this.loadScriptWithSandbox(options.app, src);	×
181	} else {
182	return this.loadScript(src);	4✔
183	}
184	});
185	if (options.serial) {	2✔
186	const a = concat(...observables).pipe(	1✔
187	map(item => {
188	return of([item]);	2✔
189	}),
190	concatAll()
191	);
192	return a;	1✔
193	} else {
194	return forkJoin(observables).pipe();	1✔
195	}
196	}
197
198	loadStyles(sources: string[]): Observable<AssetsLoadResult[]> {
199	if (isEmpty(sources)) {	4✔
200	return of(null);	3✔
201	}
202	return forkJoin(	1✔
203	sources.map(src => {
204	return this.loadStyle(src);	2✔
205	})
206	);
207	}
208
209	loadScriptsAndStyles(
210	scripts: string[] = [],	×
211	styles: string[] = [],	×
212	options?: {
213	app?: string;
214	sandbox?: boolean;
215	serial?: boolean;
216	}
217	) {
218	return forkJoin([this.loadScripts(scripts, options), this.loadStyles(styles)]);	2✔
219	}
220
221	parseManifestFromHTML(html: string): Record<string, string> {
222	const result = {};	2✔
223	const matchResult = html.match(STYLE_LINK_OR_SCRIPT_REG);	2✔
224	matchResult.forEach(item => {	2✔
225	const linkOrSrcResult = item.match(LINK_OR_SRC_REG);	12✔
226	if (linkOrSrcResult[2]) {	12✔
227	const src = linkOrSrcResult[2];	12✔
228	const hashName = getResourceFileName(src);	12✔
229	let barSplitIndex = hashName.indexOf('-');	12✔
230	let dotSplitIndex = hashName.indexOf('.');	12✔
231	const splitIndex = barSplitIndex > -1 ? barSplitIndex : dotSplitIndex;	12✔
232	if (splitIndex > -1) {	12✔
233	const name = hashName.slice(0, splitIndex);	10✔
234	const ext = getExtName(hashName);	10✔
235	result[ext ? `${name}.${ext}` : name] = src;	10!
236	}
237	}
238	});
239	return result;	2✔
240	}
241
242	loadAppAssets(app: PlanetApplication) {
243	if (app.manifest) {	3✔
244	const responseType = app.manifest.endsWith('.html') ? 'text' : 'json';	2✔
245	return this.loadManifest(`${app.manifest}?t=${new Date().getTime()}`, responseType).pipe(	2✔
246	switchMap(manifestResult => {
247	if (responseType === 'text') {	2✔
248	manifestResult = this.parseManifestFromHTML(manifestResult as string);	1✔
249	}
250	const { scripts, styles } = getScriptsAndStylesFullPaths(app, manifestResult as Record<string, string>);	2✔
251	return this.loadScriptsAndStyles(scripts, styles, {	2✔
252	app: app.name,
253	sandbox: app.sandbox,
254	serial: app.loadSerial
255	});
256	})
257	);
258	} else {
259	const { scripts, styles } = getScriptsAndStylesFullPaths(app);	1✔
260	return this.loadScriptsAndStyles(scripts, styles, {	1✔
261	app: app.name,
262	sandbox: app.sandbox,
263	serial: app.loadSerial
264	});
265	}
266	}
267
268	loadManifest(url: string, responseType: 'text' \| 'json' = 'json'): Observable<Record<string, string> \| string> {	1✔
269	return this.http	1✔
270	.get(url, {
271	responseType: responseType as 'json'
272	})
273	.pipe(
274	map((response: any) => {
275	return response;	1✔
276	})
277	);
278	}
279	}

worktile / ngx-planet / 3d8c440e-6657-4a66-8275-a385519b2df0

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous