💥 ✨ Custom domain resolution & template rules (#16)

kuitos · Nov 28, 2019 · 88e24bd · 88e24bd
1 parent 0a98c44
commit 88e24bd
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -15,14 +15,19 @@ interface IImportResult {
 	getExternalStyleSheets(): Promise<string[]>;
 }
 
+
 type ImportEntryOpts = {
-	fetch?: Function;
+    fetch?: Function;
+    getDomain?: Function;
+    getTemplate?: (string) => string;
+}
+type ExecScriptsOpts = {
+    fetch?: Function;
 }
-
 export type Entry = string | { styles?: string[], scripts?: string[], html?: string };
 
-export function execScripts<T>(entry: string | null, scripts: string[], proxy: Window, opts?: ImportEntryOpts): Promise<T>;
+export function execScripts<T>(entry: string | null, scripts: string[], proxy: Window, opts?: ExecScriptsOpts): Promise<T>;
 
-export default function importHTML(url: string, fetch?: Function): Promise<IImportResult>;
+export default function importHTML(url: string, opts?: ImportEntryOpts): Promise<IImportResult>;
 
 export function importEntry(entry: Entry, opts?: ImportEntryOpts): Promise<IImportResult>;
diff --git a/src/__tests__/test-custome-fetch.js b/src/__tests__/test-custome-fetch.js
@@ -13,14 +13,14 @@ test('test custome fetch importHTML', async done => {
 		});
 	});
 
-	const importHTML = jest.fn().mockImplementation((url, fetch) => {
+	const importHTML = jest.fn().mockImplementation((url, { fetch }) => {
 		return {
 			getExternalScripts: () => rawGetExternalScripts(['http://kuitos.me/index.js'], fetch),
 			getExternalStyleSheets: () => rawGetExternalStyleSheets(['http://kuitos.me/index.css'], fetch),
 		};
 	});
 
-	const { getExternalScripts, getExternalStyleSheets } = await importHTML('http://kuitos.me', (url) => fetch(url, { headers: mockHeaders }));
+	const { getExternalScripts, getExternalStyleSheets } = await importHTML('http://kuitos.me', { fetch: (url) => fetch(url, { headers: mockHeaders }) });
 	await getExternalScripts();
 	await getExternalStyleSheets();
 

diff --git a/src/index.js b/src/index.js
@@ -15,7 +15,7 @@ if (!window.fetch) {
 }
 const defaultFetch = window.fetch.bind(window);
 
-function getDomain(url) {
+function defaultGetDomain(url) {
 	try {
 		// URL 构造函数不支持使用 // 前缀的 url
 		const href = new URL(url.startsWith('//') ? `${location.protocol}${url}` : url);
@@ -25,6 +25,10 @@ function getDomain(url) {
 	}
 }
 
+function defaultGetTemplate(tpl) {
+	return tpl;
+}
+
 /**
  * convert external css link to inline style for performance optimization
  * @param template
@@ -142,15 +146,15 @@ export function execScripts(entry, scripts, proxy = window, opts = {}) {
 		});
 }
 
-export default function importHTML(url, fetch = defaultFetch) {
-
+export default function importHTML(url, opts = {}) {
+	const { fetch = defaultFetch, getDomain = defaultGetDomain, getTemplate = defaultGetTemplate } = opts;
 	return embedHTMLCache[url] || (embedHTMLCache[url] = fetch(url)
 		.then(response => response.text())
 		.then(html => {
 
 			const domain = getDomain(url);
 			const assetPublicPath = `${domain}/`;
-			const { template, scripts, entry, styles } = processTpl(html, domain);
+			const { template, scripts, entry, styles } = processTpl(getTemplate(html), domain);
 
 			return getEmbedHTML(template, styles, { fetch }).then(embedHTML => ({
 				template: embedHTML,
@@ -163,15 +167,15 @@ export default function importHTML(url, fetch = defaultFetch) {
 };
 
 export function importEntry(entry, opts = {}) {
-	const { fetch = defaultFetch } = opts;
+	const { fetch = defaultFetch, getDomain = defaultGetDomain, getTemplate = defaultGetTemplate } = opts;
 
 	if (!entry) {
 		throw new SyntaxError('entry should not be empty!');
 	}
 
 	// html entry
 	if (typeof entry === 'string') {
-		return importHTML(entry, fetch);
+		return importHTML(entry, { fetch, getDomain, getTemplate });
 	}
 
 	// config entry