From 29e4a775794b7aaff2009753b341d27b2bbd731c Mon Sep 17 00:00:00 2001 From: Joel Denning Date: Fri, 23 Oct 2020 16:16:00 -0600 Subject: [PATCH 1/2] feat(compiler-sfc): support transforming asset urls with full base url. --- .../templateTransformAssetUrl.spec.ts.snap | 24 +++++++++++++++++++ .../templateTransformAssetUrl.spec.ts | 24 +++++++++++++++++++ .../src/templateTransformAssetUrl.ts | 12 ++++++---- 3 files changed, 56 insertions(+), 4 deletions(-) diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap index e1c962a6ff5..2386b85077a 100644 --- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap @@ -1,5 +1,29 @@ // 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 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 41eb6463cc3..878ac443807 100644 --- a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts +++ b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts @@ -94,4 +94,28 @@ 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(``, { + base: 'http://localhost:3000/src/' + }) + + expect(code).toMatchSnapshot() + }) + + test('should allow for full base URLs, without paths', () => { + const { code } = compileWithAssetUrls(``, { + base: 'http://localhost:3000' + }) + + expect(code).toMatchSnapshot() + }) + + test('should allow for full base URLs, without port', () => { + const { code } = compileWithAssetUrls(``, { + base: 'http://localhost' + }) + + expect(code).toMatchSnapshot() + }) }) diff --git a/packages/compiler-sfc/src/templateTransformAssetUrl.ts b/packages/compiler-sfc/src/templateTransformAssetUrl.ts index 968b0606b8c..f2277f913ab 100644 --- a/packages/compiler-sfc/src/templateTransformAssetUrl.ts +++ b/packages/compiler-sfc/src/templateTransformAssetUrl.ts @@ -120,12 +120,16 @@ 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 host = base.host ? base.protocol + '//' + base.host : '' + const basePath = base.path || options.base + // 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 } From 9f5482d8720c7e3c263e4ab9b2c0ecb2118567a0 Mon Sep 17 00:00:00 2001 From: Joel Denning Date: Sat, 24 Oct 2020 11:35:50 -0600 Subject: [PATCH 2/2] fix: handle omitted protocol case --- .../__snapshots__/templateTransformAssetUrl.spec.ts.snap | 8 ++++++++ .../__tests__/templateTransformAssetUrl.spec.ts | 8 ++++++++ packages/compiler-sfc/src/templateTransformAssetUrl.ts | 5 +++-- packages/compiler-sfc/src/templateUtils.ts | 2 +- 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap index 2386b85077a..9e74a95aeba 100644 --- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap @@ -24,6 +24,14 @@ export function render(_ctx, _cache) { }" `; +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 878ac443807..9fdfa77194c 100644 --- a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts +++ b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts @@ -118,4 +118,12 @@ describe('compiler sfc: transform asset url', () => { expect(code).toMatchSnapshot() }) + + test('should allow for full base URLs, without protocol', () => { + const { code } = compileWithAssetUrls(``, { + base: '//localhost' + }) + + expect(code).toMatchSnapshot() + }) }) diff --git a/packages/compiler-sfc/src/templateTransformAssetUrl.ts b/packages/compiler-sfc/src/templateTransformAssetUrl.ts index f2277f913ab..2669a360f0a 100644 --- a/packages/compiler-sfc/src/templateTransformAssetUrl.ts +++ b/packages/compiler-sfc/src/templateTransformAssetUrl.ts @@ -122,8 +122,9 @@ export const transformAssetUrl: NodeTransform = ( ) { // Allow for full hostnames provided in options.base const base = parseUrl(options.base) - const host = base.host ? base.protocol + '//' + base.host : '' - const basePath = base.path || 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. diff --git a/packages/compiler-sfc/src/templateUtils.ts b/packages/compiler-sfc/src/templateUtils.ts index 6f93d612abf..b1befd927e2 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) }