feat: add config to disable sourceList (#572)

web-infra-dev · Nov 21, 2022 · 1cfd9a0 · 1cfd9a0 · vercel · Nov 21, 2022
1 parent 57d33d0
commit 1cfd9a0
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 21 deletions.
diff --git a/packages/browser-vm/__tests__/fetch.spec.ts b/packages/browser-vm/__tests__/fetch.spec.ts
@@ -6,10 +6,13 @@ describe('Init', () => {
   window.dispatchEvent = () => true;
 
   // Fetch methods auto fix base url
+  const sourceList: Array<any> = [];
+  const addSourceList = (n)=> sourceList.push(n);
   it('fetch methods', (next) => {
     const sandbox = new Sandbox({
       namespace: 'vue',
       baseUrl: 'http://localhost:9999',
+      addSourceList,
       fixBaseUrl: true,
     });
     const opts = sandbox.options;
@@ -23,17 +26,19 @@ describe('Init', () => {
       `,
       { next },
     );
-    assert(sandbox.options.sourceList);
-    expect(sandbox.options.sourceList[0]).toMatchObject({
+    expect(sourceList[0]).toMatchObject({
       tagName: 'fetch',
       url: 'http://localhost:9999/sub/config.json',
     });
   });
 
   // xhr methods auto fix base url
   it('xhr methods', () => {
+    const sourceList: Array<any> = [];
+    const addSourceList = (n)=> sourceList.push(n);
     const sandbox = new Sandbox({
       namespace: 'react',
+      addSourceList: addSourceList,
       baseUrl: 'http://localhost:9999',
       fixBaseUrl: false,
     });
@@ -45,8 +50,7 @@ describe('Init', () => {
       xhr.open('GET', '/sub/config.json', true);
       xhr.send();
     `);
-    assert(sandbox.options.sourceList);
-    expect(sandbox.options.sourceList[0]).toMatchObject({
+    expect(sourceList[0]).toMatchObject({
       tagName: 'xmlhttprequest',
       url: '/sub/config.json',
     });

diff --git a/packages/browser-vm/src/dynamicNode/processor.ts b/packages/browser-vm/src/dynamicNode/processor.ts
@@ -53,9 +53,8 @@ export class DynamicNodeProcessor {
       href && (el.href = transformUrl(baseUrl, href));
       const url = el.src || el.href;
 
-      const includeUrl = this.sandbox.options.sourceList?.find((source)=> source.url === url);
-      if (url && !includeUrl) {
-        this.sandbox.options.sourceList?.push({
+      if (url && this.sandbox.options.addSourceList) {
+        this.sandbox.options.addSourceList({
           tagName: el.tagName,
           url,
         });

diff --git a/packages/browser-vm/src/modules/network.ts b/packages/browser-vm/src/modules/network.ts
@@ -36,9 +36,9 @@ export function networkModule(sandbox: Sandbox) {
       }
 
       const url = arguments[1];
-      const includeUrl = sandbox.options.sourceList?.find((source)=> source.url === url);
-      if (!includeUrl) {
-        sandbox.options.sourceList?.push({
+
+      if(sandbox.options.addSourceList){
+        sandbox.options.addSourceList({
           tagName: 'xmlhttprequest',
           url,
         });
@@ -73,9 +73,8 @@ export function networkModule(sandbox: Sandbox) {
     if (needFix(input) && baseUrl) {
       input = transformUrl(baseUrl, input);
     }
-    const includeUrl = sandbox.options.sourceList?.find((source)=> source.url === input);
-    if (!includeUrl) {
-      sandbox.options.sourceList?.push({ tagName: 'fetch', url: input });
+    if(sandbox.options.addSourceList){
+      sandbox.options.addSourceList({ tagName: 'fetch', url: input });
     }
     let controller;
     if (!hasOwn(options, 'signal') && window.AbortController) {

diff --git a/packages/browser-vm/src/pluginify.ts b/packages/browser-vm/src/pluginify.ts
@@ -123,7 +123,7 @@ function createOptions(Garfish: interfaces.Garfish) {
         appInstance,
         new Sandbox({
           namespace: appInfo.name,
-          sourceList: appInstance.sourceList,
+          addSourceList: appInstance.addSourceList.bind(appInstance),
           baseUrl: appInstance.entryManager.url,
           modules: compatibleOldModule(appInfo.sandbox?.modules || []),
           fixBaseUrl: Boolean(appInfo.sandbox?.fixBaseUrl),

diff --git a/packages/browser-vm/src/sandbox.ts b/packages/browser-vm/src/sandbox.ts
@@ -88,7 +88,6 @@ export class Sandbox {
       baseUrl: '',
       namespace: '',
       modules: [],
-      sourceList: [],
       fixBaseUrl: false,
       disableWith: false,
       strictIsolation: false,
@@ -100,8 +99,6 @@ export class Sandbox {
     this.options = isPlainObject(options)
       ? deepMerge(defaultOptions, options)
       : defaultOptions;
-    // SourceUrl Using a reference type, make its can be changed
-    options.sourceList && (this.options.sourceList = options.sourceList);
 
     const { loaderOptions, protectVariable, insulationVariable } = this.options;
     this.loader = new Loader(loaderOptions);

diff --git a/packages/browser-vm/src/types.ts b/packages/browser-vm/src/types.ts
@@ -25,7 +25,7 @@ export interface SandboxOptions {
   disableWith?: boolean;
   strictIsolation?: boolean;
   modules?: Array<Module>;
-  sourceList?: Array<{ tagName: string; url: string }>;
+  addSourceList?: (sourceInfo: Array<{ tagName: string; url: string }> | { tagName: string; url: string }) => void;
   loaderOptions?: LoaderOptions;
   styleScopeId?: () => string;
   el?: () => Element | ShadowRoot | null;

diff --git a/packages/core/__tests__/sourceList.spec.ts b/packages/core/__tests__/sourceList.spec.ts
@@ -0,0 +1,55 @@
+import { mockStaticServer } from '@garfish/test-suite';
+import Garfish from '../src/index';
+
+describe('Core: preload plugin', () => {
+  const vueSubAppEntry = './resources/vueApp.html';
+  const reactSubAppEntry = './resources/reactApp.html';
+
+  mockStaticServer({
+    baseDir: __dirname,
+  });
+
+  it('disablePreloadApp is false use setRanking', async () => {
+    const GarfishInstance = new Garfish({});
+    GarfishInstance.run({
+      disablePreloadApp: false,
+      apps: [
+        {
+          name: 'vue-app',
+          entry: vueSubAppEntry,
+        },
+        {
+          name: 'react-app',
+          entry: reactSubAppEntry,
+        },
+      ],
+    });
+    let app = await GarfishInstance.loadApp('vue-app');
+    await app?.mount();
+    app?.addSourceList({tagName: 'fetch', url: "http://localhost/resources/scripts/fetch.js"});
+    app?.addSourceList({tagName: 'fetch', url: "http://localhost/resources/scripts/no-entry.js"});
+    app?.addSourceList({tagName: 'style', url: "http://localhost/resources/scripts/style.js"});
+    app?.addSourceList([
+      {tagName: 'fetch', url: "http://localhost/resources/scripts/fetch.js"},
+      {tagName: 'script', url: "http://localhost/resources/index.js"},
+    ]);
+
+    expect(app!.sourceList.length).toBe(4);
+    expect(app!.sourceList[0]).toMatchObject({
+      tagName: 'script',
+      url: 'http://localhost/resources/scripts/no-entry.js'
+    });
+    expect(app!.sourceList[1]).toMatchObject({
+      tagName: 'fetch',
+      url: 'http://localhost/resources/scripts/fetch.js'
+    });
+    expect(app!.sourceList[2]).toMatchObject({
+      tagName: 'style',
+      url: 'http://localhost/resources/scripts/style.js'
+    });
+    expect(app!.sourceList[3]).toMatchObject({
+      tagName: 'script',
+      url: 'http://localhost/resources/index.js'
+    });
+  });
+});
diff --git a/packages/core/src/interface.ts b/packages/core/src/interface.ts
@@ -96,6 +96,7 @@ export namespace interfaces {
     domGetter?: DomGetter;
     props?: Record<string, any>;
     sandbox?: false | SandboxConfig;
+    disableSourceListCollect?: boolean;
   }
 
   export interface GlobalLifecycle extends Partial<PluginLifecycle> {

diff --git a/packages/core/src/module/app.ts b/packages/core/src/module/app.ts
@@ -74,6 +74,7 @@ export class App {
   public htmlNode: HTMLElement | ShadowRoot;
   public customExports: Record<string, any> = {}; // If you don't want to use the CJS export, can use this
   public sourceList: Array<{ tagName: string; url: string }> = [];
+  public sourceListMap: Map<string, { tagName: string; url: string }> = new Map();
   public appInfo: AppInfo;
   public context: Garfish;
   public hooks: interfaces.AppHooks;
@@ -143,7 +144,7 @@ export class App {
           entryManager.findAttributeValue(node, 'href') ||
           entryManager.findAttributeValue(node, 'src');
         if (url) {
-          this.sourceList.push({
+          this.addSourceList({
             tagName: node.tagName,
             url: entryManager.url ? transformUrl(entryManager.url, url) : url,
           });
@@ -155,14 +156,36 @@ export class App {
         }
       });
     }
-    this.appInfo.entry &&
-      this.sourceList.push({ tagName: 'html', url: this.appInfo.entry });
+    this.appInfo.entry && this.addSourceList({ tagName: 'html', url: this.appInfo.entry })
   }
 
   get rootElement() {
     return findTarget(this.htmlNode, [`div[${__MockBody__}]`, 'body']);
   }
 
+  get getSourceList () {
+    return this.sourceList;
+  }
+
+  addSourceList(sourceInfo: Array<{ tagName: string; url: string }> | { tagName: string; url: string }){
+    if (this.appInfo.disableSourceListCollect) return;
+    if (Array.isArray(sourceInfo)){
+      let nSourceList = sourceInfo.filter(item => {
+        if (!this.sourceListMap.has(item.url) && item.url.startsWith('http')) {
+          this.sourceListMap.set(item.url, item);
+          return true;
+        }
+        return false;
+      });
+      this.sourceList = this.sourceList.concat(nSourceList);
+    } else {
+      if (!this.sourceListMap.get(sourceInfo.url) && sourceInfo.url.startsWith('http')){
+        this.sourceList.push(sourceInfo);
+        this.sourceListMap.set(sourceInfo.url, sourceInfo);
+      }
+    }
+  }
+
   getProvider() {
     return this.provider
       ? Promise.resolve(this.provider)

diff --git a/website/docs/api/run.md b/website/docs/api/run.md
@@ -100,6 +100,11 @@ Garfish.run({ config });
 - Garfish 会在用户端计算子应用打开的次数，应用的打开次数越多，预加载权重越大；
 - 预加载能力在弱网情况和手机端将不会开启；
 
+### disableSourceListCollect?
+
+- Type: <Highlight> boolean </Highlight>
+- 是否禁用收集子应用资源列表，可选，默认值为 `false`。默认情况下 Garfish 会自动收集子应用的资源，用于进行监控分析；
+
 ### sandbox?
 
 <SandboxConfig />