perf: context global variables set method change

Author: hubert

packages/module-loader/src/createLoader.ts

@@ -2,40 +2,30 @@ import * as VueDemi from 'vue-demi';
 import { createModuleLoader } from './core/moduleLoader';
 import { createComponentLoader } from './core/componentLoader';
 import { ModuleLoaderSymbol, setActiveLoader, setOptions, addErrorHandler, removeErrorHandler } from './register';
-import { getUmdResolver } from './resolvers/umd';
+import { createUmdResolver } from './resolvers/umd';
 
 // Types
-import type { ModuleLoader, GetResolver } from './types';
+import type { ModuleLoader, Resolver, ResolverCreatorOptions } from './types';
+
+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
+type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
 
 /**
  * create module loader
  */
 export function createLoader<Props extends Record<string, any> = any, Context = any>(
-  options: {
-    /**
-     * remote module resolver, default to umd resolver
-     */
-    resolver?: GetResolver<Context>;
-    /**
-     * container to append script, default is append to body in client side
-     */
-    container?: string | ((proxy: Context) => Element);
-    /**
-     * global variables to expose to remote module
-     */
-    globals?: Record<string, any>;
-  } = {},
+  options: XOR<
+    {
+      /**
+       * remote module resolver, default to umd resolver
+       */
+      resolver?: Resolver<Context>;
+    },
+    ResolverCreatorOptions<WindowProxy>
+  > = {},
 ) {
-  const _resolver = options.resolver?.(options.container) ?? (getUmdResolver(options.container as any) as any);
-
-  // Set global variables
-  const proxy = _resolver.context;
-  if (!proxy.VueDemi) {
-    proxy.VueDemi = VueDemi;
-  }
-  if (options.globals) {
-    Object.assign(proxy, options.globals);
-  }
+  const { resolver, ...resolverOptions } = options;
+  const _resolver = resolver ?? (createUmdResolver(resolverOptions) as Resolver<any>);
 
   const loader: ModuleLoader<Props, Context> = VueDemi.markRaw({
     install(app) {

packages/module-loader/src/resolver.ts

@@ -1,5 +1,5 @@
-import type { GetResolver } from './types';
+import type { Resolver } from './types';
 
-export function defineResolver<Context>(resolver: GetResolver<Context>): GetResolver<Context> {
+export function defineResolver<Context>(resolver: Resolver<Context>): Resolver<Context> {
   return resolver;
 }

packages/module-loader/src/resolvers/cjs.ts

@@ -1,13 +1,14 @@
 import warning from 'warning';
 import { debug } from '../env';
-import { defineResolver } from '../resolver';
 
 // Types
 import { Context as vmContext } from 'vm';
 import { ClientRequest, IncomingMessage } from 'http';
+import { ResolverCreatorOptions, Resolver } from '../types';
 
-function createSandbox() {
+function createSandbox(globalVariables: Record<string, any> = {}) {
   const sandbox: Record<string, any> = {
+    ...globalVariables,
     Buffer: Buffer,
     require: require,
     console: console,
@@ -43,8 +44,8 @@ function tryGetCwd(path: any) {
   return cwd;
 }
 
-export const getCjsResolver = defineResolver<vmContext>((container) => {
-  const proxy = createSandbox();
+export function createCjsResolver({ globalVariables }: ResolverCreatorOptions): Resolver<vmContext> {
+  const proxy = createSandbox(globalVariables);
   return {
     context: proxy,
     execScript(entry) {
@@ -120,4 +121,4 @@ export const getCjsResolver = defineResolver<vmContext>((container) => {
       return Promise.resolve();
     },
   };
-});
+}

packages/module-loader/src/resolvers/umd.ts

@@ -4,7 +4,9 @@
  */
 import warning from 'warning';
 import { debug } from '../env';
-import { defineResolver } from '../resolver';
+
+// Types
+import { ResolverCreatorOptions, Resolver } from '../types';
 
 const isIE11 = typeof navigator !== 'undefined' && navigator.userAgent.indexOf('Trident') !== -1;
 
@@ -70,14 +72,18 @@ function noteGlobalProps(global: WindowProxy) {
 const scriptsCache = new Map<string, any>();
 const stylesCache = new Map<string, HTMLLinkElement>();
 
-function createSandbox() {
+function createSandbox(globalVariables: Record<string, any> = {}) {
   // TODO: load in sandbox
   const global: WindowProxy = window;
+  Object.assign(global, globalVariables);
   return global;
 }
 
-export const getUmdResolver = defineResolver<WindowProxy>((container = (proxy) => proxy.document.body) => {
-  const proxy = createSandbox();
+export function createUmdResolver({
+  container = (proxy) => proxy.document.body,
+  globalVariables,
+}: ResolverCreatorOptions): Resolver<WindowProxy> {
+  const proxy = createSandbox(globalVariables);
   return {
     context: proxy,
     execScript(entry) {
@@ -147,4 +153,4 @@ export const getUmdResolver = defineResolver<WindowProxy>((container = (proxy) =
       }
     },
   };
-});
+}

packages/module-loader/src/types.ts

@@ -16,9 +16,7 @@ export interface ModuleLoader<Props extends Record<string, any> = any, Context =
   /**
    * Resolver
    */
-  resolver: ReturnType<GetResolver<Context>> & {
-    context: Context;
-  };
+  resolver: Resolver<Context>;
   /**
    * App linked to this ModuleLoader instance
    * @internal
@@ -210,32 +208,40 @@ export type Lifecycles = {
 export type ErrorHandler = (error: Error, module: InnerRegistrableModule) => void;
 
 /**
- * Loader resolver
+ * Resolver
  */
-export interface GetResolver<Context = any> {
-  /**
-   * Get resolver
-   * @param container container to append script, default is append to body in client side
-   */
-  (container?: string | ((proxy: Context) => Element)): {
-    /**
-     * execution context
-     */
-    context: Context;
-    /**
-     * execute script
-     * @param entry remote script src
-     */
-    execScript<R = unknown>(entry: string): R | Promise<R>;
-    /**
-     * add styles
-     * @param styles style href
-     */
-    addStyles(styles: string[]): void | Promise<void>;
-    /**
-     * remove styles
-     * @param styles style href
-     */
-    removeStyles(styles: string[]): void | Promise<void>;
-  };
+export interface Resolver<Context = any> {
+  /**
+   * execution context
+   */
+  context: Context;
+  /**
+   * execute script
+   * @param entry remote script src
+   */
+  execScript<R = unknown>(entry: string): R | Promise<R>;
+  /**
+   * add styles
+   * @param styles style href
+   */
+  addStyles(styles: string[]): void | Promise<void>;
+  /**
+   * remove styles
+   * @param styles style href
+   */
+  removeStyles(styles: string[]): void | Promise<void>;
+}
+
+/**
+ * create resolver options
+ */
+export interface ResolverCreatorOptions<Context = any> {
+  /**
+   * container container to append script, default is append to body in client side
+   */
+  container?: string | ((proxy: Context) => Element);
+  /**
+   * global variables to extend to resolver context
+   */
+  globalVariables?: Record<string, any>;
 }