Skip to content

Commit 26dd24f

Browse files
author
hubert
committed
perf: context global variables set method change
1 parent 1a2e301 commit 26dd24f

File tree

6 files changed

+126
-122
lines changed

6 files changed

+126
-122
lines changed

packages/module-loader/src/createLoader.ts

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import * as VueDemi from 'vue-demi';
22
import { createModuleLoader } from './core/moduleLoader';
33
import { createComponentLoader } from './core/componentLoader';
44
import { ModuleLoaderSymbol, setActiveLoader, setOptions, addErrorHandler, removeErrorHandler } from './register';
5-
import { getUmdResolver } from './resolvers/umd';
5+
import { createUmdResolver } from './resolvers/umd';
66

77
// Types
8-
import type { ModuleLoader, GetResolver } from './types';
8+
import type { ModuleLoader, Resolver, ResolverCreator } from './types';
99

1010
/**
1111
* create module loader
@@ -15,27 +15,15 @@ export function createLoader<Props extends Record<string, any> = any, Context =
1515
/**
1616
* remote module resolver, default to umd resolver
1717
*/
18-
resolver?: GetResolver<Context>;
19-
/**
20-
* container to append script, default is append to body in client side
21-
*/
22-
container?: string | ((proxy: Context) => Element);
23-
/**
24-
* global variables to expose to remote module
25-
*/
26-
globals?: Record<string, any>;
27-
} = {},
18+
resolver?: Resolver<Context> | ResolverCreator<Context>;
19+
} & Partial<Parameters<ResolverCreator<Context>>[0]> = {},
2820
) {
29-
const _resolver = options.resolver?.(options.container) ?? (getUmdResolver(options.container as any) as any);
30-
31-
// Set global variables
32-
const proxy = _resolver.context;
33-
if (!proxy.VueDemi) {
34-
proxy.VueDemi = VueDemi;
35-
}
36-
if (options.globals) {
37-
Object.assign(proxy, options.globals);
38-
}
21+
const { resolver, ...resolverOptions } = options;
22+
const _resolver = resolver
23+
? typeof resolver === 'function'
24+
? resolver(resolverOptions)
25+
: resolver
26+
: (createUmdResolver(resolverOptions as any) as Resolver<any>);
3927

4028
const loader: ModuleLoader<Props, Context> = VueDemi.markRaw({
4129
install(app) {

packages/module-loader/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@ export * from './types';
55
export * from './globalExtensions';
66
export { setDebug } from './env';
77
export { registerSubModules, registerComponents } from './register';
8-
export { defineResolver } from './resolver';
8+
export { defineResolverCreator as defineResolver } from './resolver';
Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
import type { GetResolver } from './types';
1+
import type { Resolver, ResolverCreator } from './types';
22

3-
export function defineResolver<Context>(resolver: GetResolver<Context>): GetResolver<Context> {
3+
export function defineResolverCreator<Context>(resolverCreator: ResolverCreator<Context>): ResolverCreator<Context> {
4+
return resolverCreator;
5+
}
6+
7+
export function defineResolver<Context>(resolver: Resolver<Context>): Resolver<Context> {
48
return resolver;
59
}

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import warning from 'warning';
22
import { debug } from '../env';
3-
import { defineResolver } from '../resolver';
3+
import { defineResolverCreator } from '../resolver';
44

55
// Types
66
import { Context as vmContext } from 'vm';
77
import { ClientRequest, IncomingMessage } from 'http';
88

9-
function createSandbox() {
9+
function createSandbox(globalVariables: Record<string, any> = {}) {
1010
const sandbox: Record<string, any> = {
11+
...globalVariables,
1112
Buffer: Buffer,
1213
require: require,
1314
console: console,
@@ -43,8 +44,8 @@ function tryGetCwd(path: any) {
4344
return cwd;
4445
}
4546

46-
export const getCjsResolver = defineResolver<vmContext>((container) => {
47-
const proxy = createSandbox();
47+
export const createCjsResolver = defineResolverCreator<vmContext>(({ globalVariables }) => {
48+
const proxy = createSandbox(globalVariables);
4849
return {
4950
context: proxy,
5051
execScript(entry) {

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

Lines changed: 72 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55
import warning from 'warning';
66
import { debug } from '../env';
7-
import { defineResolver } from '../resolver';
7+
import { defineResolverCreator } from '../resolver';
88

99
const isIE11 = typeof navigator !== 'undefined' && navigator.userAgent.indexOf('Trident') !== -1;
1010

@@ -70,81 +70,84 @@ function noteGlobalProps(global: WindowProxy) {
7070
const scriptsCache = new Map<string, any>();
7171
const stylesCache = new Map<string, HTMLLinkElement>();
7272

73-
function createSandbox() {
73+
function createSandbox(globalVariables: Record<string, any> = {}) {
7474
// TODO: load in sandbox
7575
const global: WindowProxy = window;
76+
Object.assign(global, globalVariables);
7677
return global;
7778
}
7879

79-
export const getUmdResolver = defineResolver<WindowProxy>((container = (proxy) => proxy.document.body) => {
80-
const proxy = createSandbox();
81-
return {
82-
context: proxy,
83-
execScript(entry) {
84-
if (scriptsCache.has(entry)) return Promise.resolve(scriptsCache.get(entry)); // 从 catch 中获取
80+
export const createUmdResolver = defineResolverCreator<WindowProxy>(
81+
({ container = (proxy) => proxy.document.body, globalVariables }) => {
82+
const proxy = createSandbox(globalVariables);
83+
return {
84+
context: proxy,
85+
execScript(entry) {
86+
if (scriptsCache.has(entry)) return Promise.resolve(scriptsCache.get(entry)); // 从 catch 中获取
8587

86-
const selector = typeof container === 'string' ? proxy.document.querySelector(container) : container(proxy);
87-
if (!selector) {
88-
return Promise.reject(new Error(`[@vue-async/module-loader] The container to append script is not found.`));
89-
}
90-
91-
return new Promise((resolve, reject) => {
92-
noteGlobalProps(proxy);
93-
94-
const script = proxy.document.createElement('script');
95-
script.src = entry;
96-
script.onload = () => {
97-
const propName = getGlobalProp(proxy);
98-
const exports = propName ? proxy[propName] || {} : {};
99-
scriptsCache.set(entry, exports); // add to catch
100-
resolve(exports);
101-
};
102-
script.onerror = (err) => {
103-
warning(!debug, `[@vue-async/module-loader] script had a problem to create, entry:${entry}`);
104-
selector.removeChild(script); // remove script
105-
reject(new Error(`script load error, error: ${err.toString()}`));
106-
};
107-
108-
selector!.appendChild(script);
109-
});
110-
},
111-
async addStyles(styles: string[]) {
112-
if (styles.length) {
11388
const selector = typeof container === 'string' ? proxy.document.querySelector(container) : container(proxy);
11489
if (!selector) {
115-
return Promise.reject(new Error(`[@vue-async/module-loader] The container to append link is not found.`));
90+
return Promise.reject(new Error(`[@vue-async/module-loader] The container to append script is not found.`));
11691
}
117-
await Promise.all(
118-
styles.map((href) => {
119-
if (stylesCache.has(href)) return Promise.resolve(); // 从 catch 中获取
120-
121-
return new Promise<void>((resolve, reject) => {
122-
const link = document.createElement('link');
123-
link.rel = 'stylesheet';
124-
link.type = 'text/css';
125-
link.href = href;
126-
link.onload = () => {
127-
stylesCache.set(href, link);
128-
resolve();
129-
};
130-
link.onerror = (err) => {
131-
warning(!debug, `[@vue-async/module-loader] href had a problem to create, href${href}`);
132-
selector.removeChild(link); // remove link
133-
reject(new Error(`style load error, error: ${err.toString()}`));
134-
};
135-
selector.appendChild(link);
136-
});
137-
}),
138-
);
139-
}
140-
},
141-
removeStyles(styles: string[]) {
142-
if (styles.length) {
143-
styles.forEach((href) => {
144-
const link = stylesCache.get(href);
145-
link?.remove();
92+
93+
return new Promise((resolve, reject) => {
94+
noteGlobalProps(proxy);
95+
96+
const script = proxy.document.createElement('script');
97+
script.src = entry;
98+
script.onload = () => {
99+
const propName = getGlobalProp(proxy);
100+
const exports = propName ? proxy[propName] || {} : {};
101+
scriptsCache.set(entry, exports); // add to catch
102+
resolve(exports);
103+
};
104+
script.onerror = (err) => {
105+
warning(!debug, `[@vue-async/module-loader] script had a problem to create, entry:${entry}`);
106+
selector.removeChild(script); // remove script
107+
reject(new Error(`script load error, error: ${err.toString()}`));
108+
};
109+
110+
selector!.appendChild(script);
146111
});
147-
}
148-
},
149-
};
150-
});
112+
},
113+
async addStyles(styles: string[]) {
114+
if (styles.length) {
115+
const selector = typeof container === 'string' ? proxy.document.querySelector(container) : container(proxy);
116+
if (!selector) {
117+
return Promise.reject(new Error(`[@vue-async/module-loader] The container to append link is not found.`));
118+
}
119+
await Promise.all(
120+
styles.map((href) => {
121+
if (stylesCache.has(href)) return Promise.resolve(); // 从 catch 中获取
122+
123+
return new Promise<void>((resolve, reject) => {
124+
const link = document.createElement('link');
125+
link.rel = 'stylesheet';
126+
link.type = 'text/css';
127+
link.href = href;
128+
link.onload = () => {
129+
stylesCache.set(href, link);
130+
resolve();
131+
};
132+
link.onerror = (err) => {
133+
warning(!debug, `[@vue-async/module-loader] href had a problem to create, href${href}`);
134+
selector.removeChild(link); // remove link
135+
reject(new Error(`style load error, error: ${err.toString()}`));
136+
};
137+
selector.appendChild(link);
138+
});
139+
}),
140+
);
141+
}
142+
},
143+
removeStyles(styles: string[]) {
144+
if (styles.length) {
145+
styles.forEach((href) => {
146+
const link = stylesCache.get(href);
147+
link?.remove();
148+
});
149+
}
150+
},
151+
};
152+
},
153+
);

packages/module-loader/src/types.ts

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ export interface ModuleLoader<Props extends Record<string, any> = any, Context =
1616
/**
1717
* Resolver
1818
*/
19-
resolver: ReturnType<GetResolver<Context>> & {
20-
context: Context;
21-
};
19+
resolver: Resolver<Context>;
2220
/**
2321
* App linked to this ModuleLoader instance
2422
* @internal
@@ -210,32 +208,42 @@ export type Lifecycles = {
210208
export type ErrorHandler = (error: Error, module: InnerRegistrableModule) => void;
211209

212210
/**
213-
* Loader resolver
211+
* Resolver
214212
*/
215-
export interface GetResolver<Context = any> {
213+
export interface Resolver<Context = any> {
216214
/**
217-
* Get resolver
218-
* @param container container to append script, default is append to body in client side
215+
* execution context
219216
*/
220-
(container?: string | ((proxy: Context) => Element)): {
221-
/**
222-
* execution context
223-
*/
224-
context: Context;
225-
/**
226-
* execute script
227-
* @param entry remote script src
228-
*/
229-
execScript<R = unknown>(entry: string): R | Promise<R>;
217+
context: Context;
218+
/**
219+
* execute script
220+
* @param entry remote script src
221+
*/
222+
execScript<R = unknown>(entry: string): R | Promise<R>;
223+
/**
224+
* add styles
225+
* @param styles style href
226+
*/
227+
addStyles(styles: string[]): void | Promise<void>;
228+
/**
229+
* remove styles
230+
* @param styles style href
231+
*/
232+
removeStyles(styles: string[]): void | Promise<void>;
233+
}
234+
235+
export interface ResolverCreator<Context = any> {
236+
/**
237+
* create resolver
238+
*/
239+
(options: {
230240
/**
231-
* add styles
232-
* @param styles style href
241+
* container container to append script, default is append to body in client side
233242
*/
234-
addStyles(styles: string[]): void | Promise<void>;
243+
container?: string | ((proxy: Context) => Element);
235244
/**
236-
* remove styles
237-
* @param styles style href
245+
* global variables to extend to resolver context
238246
*/
239-
removeStyles(styles: string[]): void | Promise<void>;
240-
};
247+
globalVariables?: Record<string, any>;
248+
}): Resolver<Context>;
241249
}

0 commit comments

Comments
 (0)