From 81ed0bf3e30088c07cd348117c8832fa5d446b22 Mon Sep 17 00:00:00 2001
From: maoxiaoke <maoxiaoke@outlook.com>
Date: Sun, 22 Aug 2021 10:04:26 +0800
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20compatible=20angular?=
 =?UTF-8?q?12?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/handleAssets.ts    | 23 ++++++++++++-----------
 tests/handleAssets.spec.tsx |  2 ++
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/util/handleAssets.ts b/src/util/handleAssets.ts
index 86d5fc72..31718585 100644
--- a/src/util/handleAssets.ts
+++ b/src/util/handleAssets.ts
@@ -15,6 +15,7 @@ const STYLESHEET_LINK_TYPE = 'stylesheet';
 
 const cachedScriptsContent: object = {};
 const cachedStyleContent: object = {};
+const cachedProcessedContent: object = {};
 
 const defaultFetch = window?.fetch.bind(window);
 
@@ -340,7 +341,10 @@ export function processHtml(html: string, entry?: string): ProcessedContent {
 
   const domContent = (new DOMParser()).parseFromString(html.replace(COMMENT_REGEX, ''), 'text/html');
 
-  if (entry) {
+  /**
+  * If `<base>` is alread exists.
+  */
+  if (entry && !domContent.getElementsByTagName('base').length) {
     // add base URI for absolute resource. see more https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
     const base = document.createElement('base');
     base.href = entry;
@@ -402,8 +406,6 @@ export function processHtml(html: string, entry?: string): ProcessedContent {
   };
 }
 
-const cachedProcessedContent: object = {};
-
 export async function getEntryAssets({
   root,
   entry,
@@ -420,9 +422,10 @@ export async function getEntryAssets({
   fetch?: Fetch;
   assertsCached?: boolean;
 }) {
-  let cachedContent = cachedProcessedContent[assetsCacheKey];
+  const cachedContent = cachedProcessedContent[assetsCacheKey];
+  let htmlContent = entryContent;
+
   if (!cachedContent) {
-    let htmlContent = entryContent;
     if (!htmlContent && entry) {
       if (!fetch) {
         warn('Current environment does not support window.fetch, please use custom fetch');
@@ -431,20 +434,18 @@ export async function getEntryAssets({
         );
       }
 
-      const res = await fetch(entry);
-      htmlContent = await res.text();
+      htmlContent = await fetch(entry).then((res) => res.text());
     }
-    cachedContent = processHtml(htmlContent, entry || href);
-    cachedProcessedContent[assetsCacheKey] = cachedContent;
+    cachedProcessedContent[assetsCacheKey] = htmlContent;
   }
 
-  const { html } = cachedContent;
+  const { html, assets } = processHtml(cachedContent ?? htmlContent, entry || href);
 
   if (root) {
     root.appendChild(html);
   }
 
-  return cachedContent.assets;
+  return assets;
 }
 
 export function getAssetsNode(): Array<HTMLStyleElement|HTMLScriptElement> {
diff --git a/tests/handleAssets.spec.tsx b/tests/handleAssets.spec.tsx
index adcd0dc9..a588c12b 100644
--- a/tests/handleAssets.spec.tsx
+++ b/tests/handleAssets.spec.tsx
@@ -297,6 +297,8 @@ describe('getEntryAssets', () => {
       assetsCacheKey: '/test',
     });
 
+    console.log('fsfsfsfsdf', assets)
+
     expect(assets).toStrictEqual({
       cssList: [
         {

From 4defed5e91023e2ae3eda661737e6915cf89d222 Mon Sep 17 00:00:00 2001
From: maoxiaoke <maoxiaoke@outlook.com>
Date: Wed, 1 Sep 2021 15:27:11 +0800
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20handle=20base=20elem?=
 =?UTF-8?q?ent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/handleAssets.ts    | 38 +++++++++++++++++++++++++++----------
 tests/handleAssets.spec.tsx | 36 +++++++++++++++++++++++++++++++----
 2 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/src/util/handleAssets.ts b/src/util/handleAssets.ts
index 31718585..891be778 100644
--- a/src/util/handleAssets.ts
+++ b/src/util/handleAssets.ts
@@ -341,14 +341,30 @@ export function processHtml(html: string, entry?: string): ProcessedContent {
 
   const domContent = (new DOMParser()).parseFromString(html.replace(COMMENT_REGEX, ''), 'text/html');
 
-  /**
-  * If `<base>` is alread exists.
-  */
-  if (entry && !domContent.getElementsByTagName('base').length) {
-    // add base URI for absolute resource. see more https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-    const base = document.createElement('base');
-    base.href = entry;
-    domContent.getElementsByTagName('head')[0].appendChild(base);
+  /*
+  * When using DOMParser，the origin of relative path of `<script />` 和 `<link />` is Framwork's origin.
+  * To escape this error, append <base /> element and then remove them to avoid conflict.
+   */
+  if (entry) {
+    const baseElements = domContent.getElementsByTagName('base');
+    const hasBaseElement = baseElements.length;
+
+    if (hasBaseElement) {
+      // <base /> exists
+      for (let i = 0; i < baseElements.length; ++i) {
+        const { href } = baseElements[i];
+        const { origin } = urlParse(href);
+        // If <base />'s href is equal to current location.origin, replace origin to entry.
+        const baseHref = origin === window.location.origin ? href.replace(origin, entry) : href;
+        baseElements[i].href = baseHref;
+      }
+    } else {
+      // add base URI for absolute resource.
+      // see more https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+      const base = document.createElement('base');
+      base.href = entry;
+      domContent.getElementsByTagName('head')[0].appendChild(base);
+    }
   }
 
   // process js assets
@@ -393,8 +409,10 @@ export function processHtml(html: string, entry?: string): ProcessedContent {
 
   if (entry) {
     // remove base node
-    const baseNode = domContent.getElementsByTagName('base')[0];
-    baseNode?.parentNode.removeChild(baseNode);
+    const baseNodes = domContent.getElementsByTagName('base');
+    for (let i = 0; i < baseNodes.length; ++i) {
+      baseNodes[i]?.parentNode.removeChild(baseNodes[i]);
+    }
   }
 
   return {
diff --git a/tests/handleAssets.spec.tsx b/tests/handleAssets.spec.tsx
index a588c12b..9694a1d8 100644
--- a/tests/handleAssets.spec.tsx
+++ b/tests/handleAssets.spec.tsx
@@ -119,7 +119,7 @@ describe('getComment', () => {
 });
 
 describe('processHtml', () => {
-  test('processHtml', () => {
+  test('processHtml - basic', () => {
     expect(processHtml(undefined).html.innerHTML).toBe('');
 
     const { html, assets: {jsList, cssList} } = processHtml(tempHTML);
@@ -155,7 +155,6 @@ describe('processHtml', () => {
     expect(jsList[5].type).toBe(AssetTypeEnum.EXTERNAL);
     expect(jsList[5].content).toContain('//g.alicdn.com/test.min.js');
 
-
     // script inline assets
     expect(jsList[0].type).toBe(AssetTypeEnum.INLINE);
     expect(jsList[0].content).toContain('console.log()');
@@ -163,8 +162,39 @@ describe('processHtml', () => {
     expect(jsList[4].content).toContain('window.g_config');
 
   });
+
+  test('processHtml - entry', () => {
+    const { html } = processHtml(tempHTML, "https://localhost:3333");
+    const div = document.createElement('div');
+    div.appendChild(html);
+    const content = div.innerHTML;
+
+    expect(content).toContain('<!--link https://localhost:3333/test.css processed by @ice/stark-->');
+    expect(content).toContain('<!--link https://localhost:3333/index.css processed by @ice/stark-->');
+    expect(content).not.toContain('href="/index.css"');
+    expect(content).not.toContain('href="index.css"');
+
+    expect(content).not.toContain('base href="https://localhost:3333"')
+  });
+
+  test('processHtml - baseElement', () => {
+    let localHtml = tempHTML.replace('<head>', '<head> <base href="https://localhost:3334">')
+
+    const { html } = processHtml(localHtml);
+    const div = document.createElement('div');
+    div.appendChild(html);
+    const content = div.innerHTML;
+
+    expect(content).toContain('<!--link https://localhost:3334/test.css processed by @ice/stark-->');
+    expect(content).toContain('<!--link https://localhost:3334/index.css processed by @ice/stark-->');
+    expect(content).not.toContain('href="/index.css"');
+    expect(content).not.toContain('href="index.css"');
+
+    expect(content).not.toContain('base href="https://localhost:3333"')
+  });
 });
 
+
 describe('appendExternalScript', () => {
   test('appendExternalScript -> inline', () => {
     const div = document.createElement('div');
@@ -297,8 +327,6 @@ describe('getEntryAssets', () => {
       assetsCacheKey: '/test',
     });
 
-    console.log('fsfsfsfsdf', assets)
-
     expect(assets).toStrictEqual({
       cssList: [
         {

From ae88f58f3e1294dce400550e85dfbe3a54eee490 Mon Sep 17 00:00:00 2001
From: maoxiaoke <maoxiaoke@outlook.com>
Date: Thu, 9 Sep 2021 11:45:02 +0800
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20handle=20.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/handleAssets.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/util/handleAssets.ts b/src/util/handleAssets.ts
index 891be778..87a21e10 100644
--- a/src/util/handleAssets.ts
+++ b/src/util/handleAssets.ts
@@ -352,10 +352,17 @@ export function processHtml(html: string, entry?: string): ProcessedContent {
     if (hasBaseElement) {
       // <base /> exists
       for (let i = 0; i < baseElements.length; ++i) {
+        const removeEndHtml = (url: string) => {
+          if (entry.endsWith('.html')) {
+            return entry.split('/').slice(0, -1).join('/');
+          }
+          return url;
+        };
         const { href } = baseElements[i];
+        // Origin of <base /> will be current href's origin (relative path) or actual origin (absolute path).
         const { origin } = urlParse(href);
         // If <base />'s href is equal to current location.origin, replace origin to entry.
-        const baseHref = origin === window.location.origin ? href.replace(origin, entry) : href;
+        const baseHref = origin === window.location.origin ? href.replace(origin, removeEndHtml(entry)) : href;
         baseElements[i].href = baseHref;
       }
     } else {
@@ -408,7 +415,9 @@ export function processHtml(html: string, entry?: string): ProcessedContent {
   ];
 
   if (entry) {
-    // remove base node
+    /*
+    * Remove all child's <base /> element to avoid conflict with parent's.
+     */
     const baseNodes = domContent.getElementsByTagName('base');
     for (let i = 0; i < baseNodes.length; ++i) {
       baseNodes[i]?.parentNode.removeChild(baseNodes[i]);

From 43e42ea057d95d4d00a5ad1cbd55d1b4e78deda5 Mon Sep 17 00:00:00 2001
From: maoxiaoke <maoxiaoke@outlook.com>
Date: Thu, 9 Sep 2021 21:31:46 +0800
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20parse=20base=20&=20t?=
 =?UTF-8?q?ests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/handleAssets.ts    | 25 +++++++-----------
 tests/handleAssets.spec.tsx | 52 ++++++++++++++++++++++++++++++++++---
 2 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/src/util/handleAssets.ts b/src/util/handleAssets.ts
index 87a21e10..9d5ced61 100644
--- a/src/util/handleAssets.ts
+++ b/src/util/handleAssets.ts
@@ -9,6 +9,7 @@ import type { Fetch } from './globalConfiguration';
 import type { ScriptAttributes } from '../apps';
 
 const COMMENT_REGEX = /<!--.*?-->/g;
+const BASE_LOOSE_REGEX = /<base\s[^>]*href=['"]?([^'"]*)['"]?[^>]*>/;
 
 const EMPTY_STRING = '';
 const STYLESHEET_LINK_TYPE = 'stylesheet';
@@ -346,25 +347,17 @@ export function processHtml(html: string, entry?: string): ProcessedContent {
   * To escape this error, append <base /> element and then remove them to avoid conflict.
    */
   if (entry) {
+    const baseElementMatch = html.match(BASE_LOOSE_REGEX);
+
     const baseElements = domContent.getElementsByTagName('base');
     const hasBaseElement = baseElements.length;
 
-    if (hasBaseElement) {
-      // <base /> exists
-      for (let i = 0; i < baseElements.length; ++i) {
-        const removeEndHtml = (url: string) => {
-          if (entry.endsWith('.html')) {
-            return entry.split('/').slice(0, -1).join('/');
-          }
-          return url;
-        };
-        const { href } = baseElements[i];
-        // Origin of <base /> will be current href's origin (relative path) or actual origin (absolute path).
-        const { origin } = urlParse(href);
-        // If <base />'s href is equal to current location.origin, replace origin to entry.
-        const baseHref = origin === window.location.origin ? href.replace(origin, removeEndHtml(entry)) : href;
-        baseElements[i].href = baseHref;
-      }
+    if (baseElementMatch && hasBaseElement) {
+      // Only take the first one into consideration.
+      const baseElement = baseElements[0];
+
+      const [, baseHerf] = baseElementMatch;
+      baseElement.href = isAbsoluteUrl(baseHerf) ? baseHerf : getUrl(entry, baseHerf);
     } else {
       // add base URI for absolute resource.
       // see more https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
diff --git a/tests/handleAssets.spec.tsx b/tests/handleAssets.spec.tsx
index 9694a1d8..5df115b1 100644
--- a/tests/handleAssets.spec.tsx
+++ b/tests/handleAssets.spec.tsx
@@ -19,6 +19,8 @@ import {
 } from '../src/util/handleAssets';
 import { setCache } from '../src/util/cache';
 
+const originalLocation = window.location;
+
 const tempHTML =
   '<!DOCTYPE html>' +
   '<html>' +
@@ -119,6 +121,19 @@ describe('getComment', () => {
 });
 
 describe('processHtml', () => {
+  beforeEach(() => {
+    delete window.location;
+    // @ts-ignore
+    window.location = Object.assign(new URL("https://localhost:3333"), {
+      ancestorOrigins: "",
+      assign: jest.fn(),
+      reload: jest.fn(),
+      replace: jest.fn()
+    });
+  });
+  afterEach(() => {
+    window.location = originalLocation;
+  });
   test('processHtml - basic', () => {
     expect(processHtml(undefined).html.innerHTML).toBe('');
 
@@ -177,10 +192,42 @@ describe('processHtml', () => {
     expect(content).not.toContain('base href="https://localhost:3333"')
   });
 
-  test('processHtml - baseElement', () => {
+  test('processHtml - baseElement - absolute', () => {
     let localHtml = tempHTML.replace('<head>', '<head> <base href="https://localhost:3334">')
 
-    const { html } = processHtml(localHtml);
+    const { html, assets } = processHtml(localHtml);
+    const div = document.createElement('div');
+    div.appendChild(html);
+    const content = div.innerHTML;
+
+    expect(content).toContain('<!--link https://localhost:3334/test.css processed by @ice/stark-->');
+    expect(content).toContain('<!--link https://localhost:3334/index.css processed by @ice/stark-->');
+    expect(content).not.toContain('href="/index.css"');
+    expect(content).not.toContain('href="index.css"');
+
+    expect(content).not.toContain('base href="https://localhost:3333"')
+  });
+
+  test('processHtml - baseElement - relative', () => {
+    let localHtml = tempHTML.replace('<head>', '<head> <base href="./a/b">')
+
+    const { html } = processHtml(localHtml, "https://localhost:3334");
+    const div = document.createElement('div');
+    div.appendChild(html);
+    const content = div.innerHTML;
+
+    expect(content).toContain('<!--link https://localhost:3334/a/test.css processed by @ice/stark-->');
+    expect(content).toContain('<!--link https://localhost:3334/index.css processed by @ice/stark-->');
+    expect(content).not.toContain('href="/index.css"');
+    expect(content).not.toContain('href="index.css"');
+
+    expect(content).not.toContain('base href="https://localhost:3334"')
+  });
+
+  test('processHtml - baseElement - relative', () => {
+    let localHtml = tempHTML.replace('<head>', '<head> <base href="/">')
+
+    const { html } = processHtml(localHtml, "https://localhost:3334/a/b/index.html");
     const div = document.createElement('div');
     div.appendChild(html);
     const content = div.innerHTML;
@@ -599,7 +646,6 @@ describe('appendCSS', () => {
   });
 });
 
-
 describe('isAbsoluteUrl', () => {
   test('isAbsoluteUrl', () => {
     expect(isAbsoluteUrl('https://www.baidu.com/')).toBe(true);

From b1082cd874179ce849a560654b6ff452677fd690 Mon Sep 17 00:00:00 2001
From: maoxiaoke <maoxiaoke@outlook.com>
Date: Fri, 10 Sep 2021 10:19:35 +0800
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20remove=20location=20?=
 =?UTF-8?q?mock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tests/handleAssets.spec.tsx | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/tests/handleAssets.spec.tsx b/tests/handleAssets.spec.tsx
index 5df115b1..7cdbe495 100644
--- a/tests/handleAssets.spec.tsx
+++ b/tests/handleAssets.spec.tsx
@@ -121,19 +121,6 @@ describe('getComment', () => {
 });
 
 describe('processHtml', () => {
-  beforeEach(() => {
-    delete window.location;
-    // @ts-ignore
-    window.location = Object.assign(new URL("https://localhost:3333"), {
-      ancestorOrigins: "",
-      assign: jest.fn(),
-      reload: jest.fn(),
-      replace: jest.fn()
-    });
-  });
-  afterEach(() => {
-    window.location = originalLocation;
-  });
   test('processHtml - basic', () => {
     expect(processHtml(undefined).html.innerHTML).toBe('');
 

From 54e842e73b44180860a507369562b01f37e4117c Mon Sep 17 00:00:00 2001
From: maoxiaoke <maoxiaoke@outlook.com>
Date: Fri, 10 Sep 2021 14:40:59 +0800
Subject: [PATCH 6/6] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20refact=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/handleAssets.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/util/handleAssets.ts b/src/util/handleAssets.ts
index 9d5ced61..9c73bf6c 100644
--- a/src/util/handleAssets.ts
+++ b/src/util/handleAssets.ts
@@ -350,7 +350,7 @@ export function processHtml(html: string, entry?: string): ProcessedContent {
     const baseElementMatch = html.match(BASE_LOOSE_REGEX);
 
     const baseElements = domContent.getElementsByTagName('base');
-    const hasBaseElement = baseElements.length;
+    const hasBaseElement = baseElements.length > 0;
 
     if (baseElementMatch && hasBaseElement) {
       // Only take the first one into consideration.
@@ -362,6 +362,7 @@ export function processHtml(html: string, entry?: string): ProcessedContent {
       // add base URI for absolute resource.
       // see more https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
       const base = document.createElement('base');
+      // <base /> element also takes effects if href includues `.html`
       base.href = entry;
       domContent.getElementsByTagName('head')[0].appendChild(base);
     }
@@ -459,7 +460,7 @@ export async function getEntryAssets({
     cachedProcessedContent[assetsCacheKey] = htmlContent;
   }
 
-  const { html, assets } = processHtml(cachedContent ?? htmlContent, entry || href);
+  const { html, assets } = processHtml(cachedContent || htmlContent, entry || href);
 
   if (root) {
     root.appendChild(html);