feat: 添加子应用可以直接读取html的能力 (#307)

Tencent · Dec 6, 2022 · f45e57e · f45e57e
1 parent 8492027
commit f45e57e
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 52 deletions.
diff --git a/docs/api/preloadApp.md b/docs/api/preloadApp.md
@@ -13,6 +13,8 @@ type preOptions  {
   name: string;
   /** 需要渲染的url */
   url: string;
+  /** 需要渲染的html, 如果用户已有则无需从url请求 */
+  html?: string;
   /** 注入给子应用的数据 */
   props?: { [key: string]: any };
   /** 自定义运行iframe的属性 */
@@ -74,6 +76,12 @@ type preOptions  {
 
 - **详情：** 子应用的路径地址
 
+## html
+
+- **类型：** `String`
+
+- **详情：** 子应用的html，设置后子应用将直接读取该值，没有设置则子应用通过`url`请求获取
+
 ## props
 
 - **类型：** `{ [key: string]: any }`

diff --git a/docs/api/setupApp.md b/docs/api/setupApp.md
@@ -15,6 +15,8 @@ type baseOptions = {
   name: string;
   /** 需要渲染的url */
   url: string;
+  /** 需要渲染的html, 如果用户已有则无需从url请求 */
+  html?: string;
   /** 代码替换钩子 */
   replace?: (code: string) => string;
   /** 自定义fetch */

diff --git a/docs/api/startApp.md b/docs/api/startApp.md
@@ -15,6 +15,8 @@ type startOption  {
   name: string;
   /** 需要渲染的url */
   url: string;
+  /** 需要渲染的html, 如果用户已有则无需从url请求 */
+  html?: string;
   /** 渲染的容器 */
   el: HTMLElement | string;
   /** 子应用加载时loading元素 */
@@ -84,6 +86,11 @@ type startOption  {
   - 如果子应用为 [保活模式](/guide/mode.html#保活模式)，改变`url`则无效，需要采用 [通信](/guide/communication.html) 的方式对子应用路由进行跳转
   - 如果子应用为 [重建模式](/guide/mode.html#保活模式)，改变 `url` 子应用的路由会跳转对应路由，但是在 [路由同步](/guide/sync.html) 场景并且子应用的路由同步参数已经同步到主应用`url`上时则无法生效，因为改变`url`后会导致子应用销毁重新渲染，此时如果有同步参数则同步参数的优先级最高
 
+## html
+
+- **类型：** `String`
+
+- **详情：** 子应用的html，设置后子应用将直接读取该值，没有设置则子应用通过`url`请求获取
 
 ## el
 

diff --git a/packages/wujie-core/src/entry.ts b/packages/wujie-core/src/entry.ts
@@ -190,7 +190,12 @@ export function getExternalScripts(
   });
 }
 
-export default function importHTML(url: string, opts?: ImportEntryOpts): Promise<htmlParseResult> {
+export default function importHTML(params: {
+  url: string;
+  html?: string;
+  opts: ImportEntryOpts;
+}): Promise<htmlParseResult> {
+  const { url, opts, html } = params;
   const fetch = opts.fetch ?? defaultFetch;
   const fiber = opts.fiber ?? true;
   const { plugins, loadError } = opts;
@@ -201,45 +206,46 @@ export default function importHTML(url: string, opts?: ImportEntryOpts): Promise
   const cssIgnores = getEffectLoaders("cssIgnores", plugins);
   const getPublicPath = defaultGetPublicPath;
 
-  const getHtmlParseResult = (url, htmlLoader) =>
-    fetch(url)
-      .then(
-        (response) => response.text(),
-        (e) => {
-          loadError?.(url, e);
-          return Promise.reject(e);
-        }
-      )
-      .then((html) => {
-        const assetPublicPath = getPublicPath(url);
-        const { template, scripts, styles } = processTpl(htmlLoader(html), assetPublicPath);
-        return {
-          template: template,
-          assetPublicPath,
-          getExternalScripts: () =>
-            getExternalScripts(
-              scripts
-                .filter((script) => !script.src || !isMatchUrl(script.src, jsExcludes))
-                .map((script) => ({ ...script, ignore: script.src && isMatchUrl(script.src, jsIgnores) })),
-              fetch,
-              loadError,
-              fiber
-            ),
-          getExternalStyleSheets: () =>
-            getExternalStyleSheets(
-              styles
-                .filter((style) => !style.src || !isMatchUrl(style.src, cssExcludes))
-                .map((style) => ({ ...style, ignore: style.src && isMatchUrl(style.src, cssIgnores) })),
-              fetch,
-              loadError
-            ),
-        };
-      });
+  const getHtmlParseResult = (url, html, htmlLoader) =>
+    (html
+      ? Promise.resolve(html)
+      : fetch(url).then(
+          (response) => response.text(),
+          (e) => {
+            loadError?.(url, e);
+            return Promise.reject(e);
+          }
+        )
+    ).then((html) => {
+      const assetPublicPath = getPublicPath(url);
+      const { template, scripts, styles } = processTpl(htmlLoader(html), assetPublicPath);
+      return {
+        template: template,
+        assetPublicPath,
+        getExternalScripts: () =>
+          getExternalScripts(
+            scripts
+              .filter((script) => !script.src || !isMatchUrl(script.src, jsExcludes))
+              .map((script) => ({ ...script, ignore: script.src && isMatchUrl(script.src, jsIgnores) })),
+            fetch,
+            loadError,
+            fiber
+          ),
+        getExternalStyleSheets: () =>
+          getExternalStyleSheets(
+            styles
+              .filter((style) => !style.src || !isMatchUrl(style.src, cssExcludes))
+              .map((style) => ({ ...style, ignore: style.src && isMatchUrl(style.src, cssIgnores) })),
+            fetch,
+            loadError
+          ),
+      };
+    });
 
   if (opts?.plugins.some((plugin) => plugin.htmlLoader)) {
-    return getHtmlParseResult(url, htmlLoader);
+    return getHtmlParseResult(url, html, htmlLoader);
     // 没有html-loader可以做缓存
   } else {
-    return embedHTMLCache[url] || (embedHTMLCache[url] = getHtmlParseResult(url, htmlLoader));
+    return embedHTMLCache[url] || (embedHTMLCache[url] = getHtmlParseResult(url, html, htmlLoader));
   }
 }
diff --git a/packages/wujie-core/src/index.ts b/packages/wujie-core/src/index.ts
@@ -82,6 +82,8 @@ type baseOptions = {
   name: string;
   /** 需要渲染的url */
   url: string;
+  /** 需要渲染的html, 如果已有则无需从url请求 */
+  html?: string;
   /** 代码替换钩子 */
   replace?: (code: string) => string;
   /** 自定义fetch */
@@ -177,6 +179,7 @@ export async function startApp(startOptions: startOptions): Promise<Function | v
   const {
     name,
     url,
+    html,
     replace,
     fetch,
     props,
@@ -206,11 +209,15 @@ export async function startApp(startOptions: startOptions): Promise<Function | v
       // 预加载但是没有执行的情况
       if (!sandbox.execFlag) {
         sandbox.lifecycles?.beforeLoad?.(sandbox.iframe.contentWindow);
-        const { getExternalScripts } = await importHTML(url, {
-          fetch: fetch || window.fetch,
-          plugins: sandbox.plugins,
-          loadError: sandbox.lifecycles.loadError,
-          fiber,
+        const { getExternalScripts } = await importHTML({
+          url,
+          html,
+          opts: {
+            fetch: fetch || window.fetch,
+            plugins: sandbox.plugins,
+            loadError: sandbox.lifecycles.loadError,
+            fiber,
+          },
         });
         await sandbox.start(getExternalScripts);
       }
@@ -240,11 +247,15 @@ export async function startApp(startOptions: startOptions): Promise<Function | v
   addLoading(el, loading);
   const newSandbox = new WuJie({ name, url, attrs, degradeAttrs, fiber, degrade, plugins, lifecycles });
   newSandbox.lifecycles?.beforeLoad?.(newSandbox.iframe.contentWindow);
-  const { template, getExternalScripts, getExternalStyleSheets } = await importHTML(url, {
-    fetch: fetch || window.fetch,
-    plugins: newSandbox.plugins,
-    loadError: newSandbox.lifecycles.loadError,
-    fiber,
+  const { template, getExternalScripts, getExternalStyleSheets } = await importHTML({
+    url,
+    html,
+    opts: {
+      fetch: fetch || window.fetch,
+      plugins: newSandbox.plugins,
+      loadError: newSandbox.lifecycles.loadError,
+      fiber,
+    },
   });
 
   const processedHtml = await processCssLoader(newSandbox, template, getExternalStyleSheets);
@@ -269,6 +280,7 @@ export function preloadApp(preOptions: preOptions): void {
     const {
       name,
       url,
+      html,
       props,
       alive,
       replace,
@@ -287,11 +299,15 @@ export function preloadApp(preOptions: preOptions): void {
     if (sandbox.preload) return sandbox.preload;
     const runPreload = async () => {
       sandbox.lifecycles?.beforeLoad?.(sandbox.iframe.contentWindow);
-      const { template, getExternalScripts, getExternalStyleSheets } = await importHTML(url, {
-        fetch: fetch || window.fetch,
-        plugins: sandbox.plugins,
-        loadError: sandbox.lifecycles.loadError,
-        fiber,
+      const { template, getExternalScripts, getExternalStyleSheets } = await importHTML({
+        url,
+        html,
+        opts: {
+          fetch: fetch || window.fetch,
+          plugins: sandbox.plugins,
+          loadError: sandbox.lifecycles.loadError,
+          fiber,
+        },
       });
       const processedHtml = await processCssLoader(sandbox, template, getExternalStyleSheets);
       await sandbox.active({ url, props, prefix, alive, template: processedHtml, fetch, replace });

diff --git a/packages/wujie-core/src/utils.ts b/packages/wujie-core/src/utils.ts
@@ -289,6 +289,7 @@ export function mergeOptions(options: cacheOptions, cacheOptions: cacheOptions)
     name: options.name,
     el: options.el || cacheOptions?.el,
     url: options.url || cacheOptions?.url,
+    html: options.html || cacheOptions?.html,
     exec: options.exec !== undefined ? options.exec : cacheOptions?.exec,
     replace: options.replace || cacheOptions?.replace,
     fetch: options.fetch || cacheOptions?.fetch,