From db786b1afe41c26611a215e6d6599d50312b9c2f Mon Sep 17 00:00:00 2001
From: Joel Denning <joeldenning@gmail.com>
Date: Fri, 4 Dec 2020 16:20:25 -0700
Subject: [PATCH] fix(compiler-sfc): support transforming asset urls with full
 base url. (#2477)

---
 .../templateTransformAssetUrl.spec.ts.snap    | 32 +++++++++++++++++++
 .../templateTransformAssetUrl.spec.ts         | 32 +++++++++++++++++++
 .../src/templateTransformAssetUrl.ts          | 13 +++++---
 packages/compiler-sfc/src/templateUtils.ts    |  2 +-
 4 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
index e1c962a6..9e74a95a 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
@@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`compiler sfc: transform asset url should allow for full base URLs, with paths 1`] = `
+"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createBlock(\\"img\\", { src: \\"http://localhost:3000/src/logo.png\\" }))
+}"
+`;
+
+exports[`compiler sfc: transform asset url should allow for full base URLs, without paths 1`] = `
+"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createBlock(\\"img\\", { src: \\"http://localhost:3000/logo.png\\" }))
+}"
+`;
+
+exports[`compiler sfc: transform asset url should allow for full base URLs, without port 1`] = `
+"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createBlock(\\"img\\", { src: \\"http://localhost/logo.png\\" }))
+}"
+`;
+
+exports[`compiler sfc: transform asset url should allow for full base URLs, without protocol 1`] = `
+"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createBlock(\\"img\\", { src: \\"//localhost/logo.png\\" }))
+}"
+`;
+
 exports[`compiler sfc: transform asset url support uri fragment 1`] = `
 "import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
 import _imports_0 from '@svg/file.svg'
diff --git a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
index 41eb6463..9fdfa771 100644
--- a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
+++ b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
@@ -94,4 +94,36 @@ describe('compiler sfc: transform asset url', () => {
     // should not remove it
     expect(code).toMatch(`"xlink:href": "#myCircle"`)
   })
+
+  test('should allow for full base URLs, with paths', () => {
+    const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
+      base: 'http://localhost:3000/src/'
+    })
+
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should allow for full base URLs, without paths', () => {
+    const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
+      base: 'http://localhost:3000'
+    })
+
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should allow for full base URLs, without port', () => {
+    const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
+      base: 'http://localhost'
+    })
+
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should allow for full base URLs, without protocol', () => {
+    const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
+      base: '//localhost'
+    })
+
+    expect(code).toMatchSnapshot()
+  })
 })
diff --git a/packages/compiler-sfc/src/templateTransformAssetUrl.ts b/packages/compiler-sfc/src/templateTransformAssetUrl.ts
index 78211e6a..7a92f6ea 100644
--- a/packages/compiler-sfc/src/templateTransformAssetUrl.ts
+++ b/packages/compiler-sfc/src/templateTransformAssetUrl.ts
@@ -121,12 +121,17 @@ export const transformAssetUrl: NodeTransform = (
           attr.value.content[0] !== '@' &&
           isRelativeUrl(attr.value.content)
         ) {
+          // Allow for full hostnames provided in options.base
+          const base = parseUrl(options.base)
+          const protocol = base.protocol || ''
+          const host = base.host ? protocol + '//' + base.host : ''
+          const basePath = base.path || '/'
+
           // when packaged in the browser, path will be using the posix-
           // only version provided by rollup-plugin-node-builtins.
-          attr.value.content = (path.posix || path).join(
-            options.base,
-            url.path + (url.hash || '')
-          )
+          attr.value.content =
+            host +
+            (path.posix || path).join(basePath, url.path + (url.hash || ''))
         }
         return
       }
diff --git a/packages/compiler-sfc/src/templateUtils.ts b/packages/compiler-sfc/src/templateUtils.ts
index 6f93d612..b1befd92 100644
--- a/packages/compiler-sfc/src/templateUtils.ts
+++ b/packages/compiler-sfc/src/templateUtils.ts
@@ -35,5 +35,5 @@ export function parseUrl(url: string): UrlWithStringQuery {
 function parseUriParts(urlString: string): UrlWithStringQuery {
   // A TypeError is thrown if urlString is not a string
   // @see https://nodejs.org/api/url.html#url_url_parse_urlstring_parsequerystring_slashesdenotehost
-  return uriParse(isString(urlString) ? urlString : '')
+  return uriParse(isString(urlString) ? urlString : '', false, true)
 }