Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(compiler-sfc): support transforming asset urls with full base url. #2477

Merged
merged 2 commits into from
Dec 4, 2020

Conversation

joeldenning
Copy link
Contributor

@joeldenning joeldenning commented Oct 23, 2020

This feature allows for fully qualified URLs (including protocol, host, and port) to be provided as options.base when transforming template asset urls. Previously, passing full URLs was unsupported, since path.join() does not work well with full URLs.

This is my first contribution to vue 3 and I'm not sure if the lack of support for this was intentional or not. I am looking forward to your feedback.

)
attr.value.content =
host +
(path.posix || path).join(basePath, url.path + (url.hash || ''))
Copy link
Contributor Author

@joeldenning joeldenning Oct 23, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

path.join() does not work well with full URLs, which is why I'm prepending host here and only joining the path portion of the url.

// Notice how path.join() strips the second slash from http://
// This is the problem that is solved by this pull request.
path.join("http://localhost:3000/src/assets", "logo.png") === 'http:/localhost:3000/src/assets/logo.png')

"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\\" }))
Copy link
Contributor Author

@joeldenning joeldenning Oct 23, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Notice the fully qualified URL for the img src - this was previously not possible when using options.base, as far as I could tell

@znck
Copy link
Member

znck commented Oct 24, 2020

It's common to omit protocol in assets. Can you add a test case for //localhost?

@@ -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)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The true here is necessary to correctly handle URLs that include hostname but not protocol, for example //localhost

@joeldenning
Copy link
Contributor Author

@znck good catch - adding that test revealed a bug. I have pushed a new commit with the test and the corresponding fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready to merge The PR is ready to be merged. scope: compiler
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants