fix: 全部从 loader 上获取 managers，避免业务打包失误有多份构造函数 (#608)

* fix: get the resource manager from the same entry

* fix(core): get the resource manager from the same entry

Author: imtaotao

packages/browser-vm/src/dynamicNode/index.ts

@@ -1,5 +1,4 @@
 import { makeMap, safeWrapper, warn } from '@garfish/utils';
-import { StyleManager } from '@garfish/loader';
 import { __domWrapper__ } from '../symbolTypes';
 import { injectHandlerParams } from './processParams';
 import { DynamicNodeProcessor, rawElementMethods } from './processor';
@@ -33,7 +32,8 @@ function injector(current: Function, methodName: string) {
 
     if (sandbox) {
       if (el && this?.tagName?.toLowerCase() === 'style') {
-        const manager = new StyleManager(el.textContent);
+        // We take it from the loader, avoid having multiple manager constructors
+        const manager = new sandbox.loader.StyleManager(el.textContent);
         const { baseUrl, namespace, styleScopeId } = sandbox.options;
         manager.correctPath(baseUrl);
         manager.setScope({
@@ -117,7 +117,7 @@ export function makeElInjector(sandboxConfig: SandboxOptions) {
 
   if (typeof window.Element === 'function') {
     // iframe can read html container this can't point to proxyDocument has Illegal invocation error
-    if (sandboxConfig.fixBaseUrl) safeWrapper(()=> handleOwnerDocument());
+    if (sandboxConfig.fixBaseUrl) safeWrapper(() => handleOwnerDocument());
     const rewrite = (
       methods: Array<string>,
       builder: typeof injector | typeof injectorRemoveChild,

packages/browser-vm/src/dynamicNode/processor.ts

@@ -1,4 +1,4 @@
-import { StyleManager, JavaScriptManager } from '@garfish/loader';
+import type { StyleManager, JavaScriptManager } from '@garfish/loader';
 import {
   def,
   warn,
@@ -235,7 +235,7 @@ export class DynamicNodeProcessor {
 
     const modifyStyleCode = (styleCode: string | null) => {
       if (styleCode) {
-        const manager = new StyleManager(styleCode);
+        const manager = new this.sandbox.loader.StyleManager(styleCode);
         manager.correctPath(baseUrl);
         if (rootElId) {
           manager.setScope({
@@ -325,7 +325,8 @@ export class DynamicNodeProcessor {
     // The style node needs to be placed in the sandbox root container
     else if (this.is('style')) {
       parentNode = this.findParentNodeInApp(context, 'head');
-      const manager = new StyleManager(this.el.textContent);
+      // We take it from the loader, avoid having multiple manager constructors
+      const manager = new this.sandbox.loader.StyleManager(this.el.textContent);
       manager.correctPath(baseUrl);
       if (styleScopeId) {
         manager.setScope({

packages/core/src/module/app.ts

@@ -1,4 +1,4 @@
-import { StyleManager, TemplateManager } from '@garfish/loader';
+import type { TemplateManager } from '@garfish/loader';
 import {
   Text,
   Node,
@@ -89,7 +89,9 @@ export class App {
   public customLoader?: CustomerLoader;
   public childGarfishConfig: interfaces.ChildGarfishConfig = {};
   public asyncProviderTimeout: number;
-  private asyncProvider?: interfaces.Provider | ((...args: any[]) => interfaces.Provider);
+  private asyncProvider?:
+    | interfaces.Provider
+    | ((...args: any[]) => interfaces.Provider);
   private resolveAsyncProvider: () => void | undefined;
   // private
   private active = false;
@@ -215,7 +217,9 @@ export class App {
 
     if (asyncProviderTimeout) {
       // just inject 'registerProvider' function for async provider registration
-      customExports.registerProvider = (provider: typeof this.asyncProvider) => {
+      customExports.registerProvider = (
+        provider: typeof this.asyncProvider,
+      ) => {
         this.asyncProvider = provider;
         // resolve it immediately
         this.resolveAsyncProvider?.();
@@ -224,7 +228,7 @@ export class App {
   }
 
   awaitAsyncProviderRegistration() {
-    return new Promise<typeof this.asyncProvider>(resolve => {
+    return new Promise<typeof this.asyncProvider>((resolve) => {
       if (this.asyncProvider) {
         resolve(this.asyncProvider);
         return;
@@ -697,7 +701,10 @@ export class App {
       style: (node) => {
         const text = node.children[0] as Text;
         if (text) {
-          const styleManager = new StyleManager(text.content, baseUrl);
+          const styleManager = new this.context.loader.StyleManager(
+            text.content,
+            baseUrl,
+          );
           styleManager.setScope({
             appName: this.name,
             rootElId: this.appContainer.id,

packages/core/src/module/resource.ts

@@ -1,5 +1,5 @@
 import { warn, error, Text, transformUrl, assert } from '@garfish/utils';
-import {
+import type {
   Loader,
   StyleManager,
   TemplateManager,
@@ -59,7 +59,7 @@ function fetchStaticResources(
         } else if (node.children.length > 0) {
           const code = (node.children[0] as Text).content;
           if (code) {
-            const jsManager = new JavaScriptManager(code, '');
+            const jsManager = new loader.JavaScriptManager(code, '');
             jsManager.setDep(node);
             type && jsManager.setMimeType(type);
             return jsManager;
@@ -141,7 +141,7 @@ export async function processAppResources(loader: Loader, appInfo: AppInfo) {
   });
 
   // Html entry
-  if (entryManager instanceof TemplateManager) {
+  if (entryManager instanceof loader.TemplateManager) {
     isHtmlMode = true;
     const [js, link, modules] = await fetchStaticResources(
       appInfo.name,
@@ -151,11 +151,14 @@ export async function processAppResources(loader: Loader, appInfo: AppInfo) {
     resources.js = js;
     resources.link = link;
     resources.modules = modules;
-  } else if (entryManager instanceof JavaScriptManager) {
+  } else if (entryManager instanceof loader.JavaScriptManager) {
     // Js entry
     isHtmlMode = false;
     const mockTemplateCode = `<script src="${entryManager.url}"></script>`;
-    fakeEntryManager = new TemplateManager(mockTemplateCode, entryManager.url);
+    fakeEntryManager = new loader.TemplateManager(
+      mockTemplateCode,
+      entryManager.url,
+    );
     entryManager.setDep(fakeEntryManager.findAllJsNodes()[0]);
     resources.js = [entryManager];
   } else {

packages/loader/src/index.ts

@@ -212,29 +212,29 @@ export class Loader {
 
         if (isRemoteModule) {
           fileType = FileTypes.module;
-          managerCtor = ModuleManager;
+          managerCtor = this.ModuleManager;
         } else if (
           isHtmlType({ type, src: result.url }) ||
           isHtmlType({
             type: defaultContentType,
           })
         ) {
           fileType = FileTypes.template;
-          managerCtor = TemplateManager;
+          managerCtor = this.TemplateManager;
         } else if (
           isJsType({ type: defaultContentType }) ||
           isJsType({ type, src: result.url })
         ) {
           fileType = FileTypes.js;
-          managerCtor = JavaScriptManager;
+          managerCtor = this.JavaScriptManager;
         } else if (
           isCssType({ src: result.url, type }) ||
           isCssType({
             type: defaultContentType,
           })
         ) {
           fileType = FileTypes.css;
-          managerCtor = StyleManager;
+          managerCtor = this.StyleManager;
         }
 
         // Use result.url, resources may be redirected

packages/remote-module/src/actuator.ts

@@ -1,5 +1,5 @@
 import { evalWithEnv } from '@garfish/utils';
-import { ModuleManager } from '@garfish/loader';
+import type { ModuleManager } from '@garfish/loader';
 import { hooks } from './hooks';
 import { currentApp, moduleConfig } from './common';
 

packages/remote-module/src/apis/loadModuleSync.ts

@@ -1,6 +1,5 @@
 import { error, assert, isPromise, isAbsolute } from '@garfish/utils';
 import {
-  ModuleInfo,
   cacheModules,
   purifyOptions,
   prettifyError,

packages/remote-module/src/common.ts

@@ -55,7 +55,7 @@ safeWrapper(() => {
       currentApp = app;
     }
     if (isObject(externals)) {
-      Object.assign(moduleConfig.externals, externals);
+      Object.assign(moduleConfig.externals!, externals);
     }
     if (Array.isArray(remoteModulesCode)) {
       resourcesStore = resourcesStore.concat(remoteModulesCode);