theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(compiler-sfc): support transforming absolute asset urls

Browse Source 
BREAKING CHANGE: `@vue/compiler-sfc`'s `transformAssetUrlsBase` option
has been removed. It is merged into `trasnformAssetUrls` which now also
accepts the format of

  ```ts
  {
    base?: string
    includeAbsolute?: string
    tags?: { [name: string]: string[] }
  }
  ```
This commit is contained in:
Evan You 2020-05-04 16:45:19 -04:00
parent f9a3766fd6
commit 6a0be882d4
9 changed files with 333 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
View File

@ -49,3 +49,17 @@ export function render(_ctx, _cache) {
], 64 /* STABLE_FRAGMENT */))
}"
`;
exports[`compiler sfc: transform asset url with includeAbsolute: true 1`] = `
"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
import _imports_0 from './bar.png'
import _imports_1 from '/bar.png'
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode(\\"img\\", { src: _imports_0 }),
_createVNode(\\"img\\", { src: _imports_1 })
], 64 /* STABLE_FRAGMENT */))
}"
`;

112
packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
View File

@ -59,3 +59,115 @@ export function render(_ctx, _cache) {
], 64 /* STABLE_FRAGMENT */))
}"
`;
exports[`compiler sfc: transform srcset transform srcset w/ base 1`] = `
"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png\\"
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x\\"
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x\\"
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png, /foo/logo.png 2x\\"
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x, /foo/logo.png\\"
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x, /foo/logo.png 3x\\"
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x\\"
}),
_createVNode(\\"img\\", {
src: \\"/logo.png\\",
srcset: \\"/logo.png, /logo.png 2x\\"
}),
_createVNode(\\"img\\", {
src: \\"https://example.com/logo.png\\",
srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
}),
_createVNode(\\"img\\", {
src: \\"/logo.png\\",
srcset: \\"/logo.png, /foo/logo.png 2x\\"
})
], 64 /* STABLE_FRAGMENT */))
}"
`;
exports[`compiler sfc: transform srcset transform srcset w/ includeAbsolute: true 1`] = `
"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
import _imports_0 from './logo.png'
import _imports_1 from '/logo.png'
const _hoisted_1 = _imports_0
const _hoisted_2 = _imports_0 + '2x'
const _hoisted_3 = _imports_0 + '2x'
const _hoisted_4 = _imports_0 + ', ' + _imports_0 + '2x'
const _hoisted_5 = _imports_0 + '2x, ' + _imports_0
const _hoisted_6 = _imports_0 + '2x, ' + _imports_0 + '3x'
const _hoisted_7 = _imports_0 + ', ' + _imports_0 + '2x, ' + _imports_0 + '3x'
const _hoisted_8 = _imports_1 + ', ' + _imports_1 + '2x'
const _hoisted_9 = \\"https://example.com/logo.png\\" + ', ' + \\"https://example.com/logo.png\\" + '2x'
const _hoisted_10 = _imports_1 + ', ' + _imports_0 + '2x'
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: _hoisted_1
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: _hoisted_2
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: _hoisted_3
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: _hoisted_4
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: _hoisted_5
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: _hoisted_6
}),
_createVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: _hoisted_7
}),
_createVNode(\\"img\\", {
src: \\"/logo.png\\",
srcset: _hoisted_8
}),
_createVNode(\\"img\\", {
src: \\"https://example.com/logo.png\\",
srcset: _hoisted_9
}),
_createVNode(\\"img\\", {
src: \\"/logo.png\\",
srcset: _hoisted_10
})
], 64 /* STABLE_FRAGMENT */))
}"
`;

18
packages/compiler-sfc/__tests__/compileTemplate.spec.ts
View File

@ -54,15 +54,27 @@ test('transform asset url options', () => {
// Object option
const { code: code1 } = compileTemplate({
...input,
transformAssetUrls: { foo: ['bar'] }
transformAssetUrls: {
tags: { foo: ['bar'] }
}
})
expect(code1).toMatch(`import _imports_0 from 'baz'\n`)
// false option
// legacy object option (direct tags config)
const { code: code2 } = compileTemplate({
...input,
transformAssetUrls: {
foo: ['bar']
}
})
expect(code2).toMatch(`import _imports_0 from 'baz'\n`)
// false option
const { code: code3 } = compileTemplate({
...input,
transformAssetUrls: false
})
expect(code2).not.toMatch(`import _imports_0 from 'baz'\n`)
expect(code3).not.toMatch(`import _imports_0 from 'baz'\n`)
})
test('source map', () => {

36
packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
View File

@ -1,15 +1,20 @@
import { generate, baseParse, transform } from '@vue/compiler-core'
import {
transformAssetUrl,
createAssetUrlTransformWithOptions
createAssetUrlTransformWithOptions,
AssetURLOptions,
normalizeOptions
} from '../src/templateTransformAssetUrl'
import { transformElement } from '../../compiler-core/src/transforms/transformElement'
import { transformBind } from '../../compiler-core/src/transforms/vBind'
function compileWithAssetUrls(template: string) {
function compileWithAssetUrls(template: string, options?: AssetURLOptions) {
const ast = baseParse(template)
const t = options
? createAssetUrlTransformWithOptions(normalizeOptions(options))
: transformAssetUrl
transform(ast, {
nodeTransforms: [transformAssetUrl, transformElement],
nodeTransforms: [t, transformElement],
directiveTransforms: {
bind: transformBind
}
@ -51,24 +56,25 @@ describe('compiler sfc: transform asset url', () => {
})
test('with explicit base', () => {
const ast = baseParse(
const { code } = compileWithAssetUrls(
`<img src="./bar.png"></img>` + // -> /foo/bar.png
`<img src="~bar.png"></img>` + // -> /foo/bar.png
`<img src="bar.png"></img>` + // -> bar.png (untouched)
`<img src="@theme/bar.png"></img>` // -> @theme/bar.png (untouched)
)
transform(ast, {
nodeTransforms: [
createAssetUrlTransformWithOptions({
`<img src="@theme/bar.png"></img>`, // -> @theme/bar.png (untouched)
{
base: '/foo'
}),
transformElement
],
directiveTransforms: {
bind: transformBind
}
)
expect(code).toMatchSnapshot()
})
const { code } = generate(ast, { mode: 'module' })
test('with includeAbsolute: true', () => {
const { code } = compileWithAssetUrls(
`<img src="./bar.png"></img>` + `<img src="/bar.png"></img>`,
{
includeAbsolute: true
}
)
expect(code).toMatchSnapshot()
})
})

58
packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts
View File

@ -1,12 +1,22 @@
import { generate, baseParse, transform } from '@vue/compiler-core'
import { transformSrcset } from '../src/templateTransformSrcset'
import {
transformSrcset,
createSrcsetTransformWithOptions
} from '../src/templateTransformSrcset'
import { transformElement } from '../../compiler-core/src/transforms/transformElement'
import { transformBind } from '../../compiler-core/src/transforms/vBind'
import {
AssetURLOptions,
normalizeOptions
} from '../src/templateTransformAssetUrl'
function compileWithSrcset(template: string) {
function compileWithSrcset(template: string, options?: AssetURLOptions) {
const ast = baseParse(template)
const srcsetTrasnform = options
? createSrcsetTransformWithOptions(normalizeOptions(options))
: transformSrcset
transform(ast, {
nodeTransforms: [transformSrcset, transformElement],
nodeTransforms: [srcsetTrasnform, transformElement],
directiveTransforms: {
bind: transformBind
}
@ -14,21 +24,37 @@ function compileWithSrcset(template: string) {
return generate(ast, { mode: 'module' })
}
const src = `
<img src="./logo.png" srcset="./logo.png"/>
<img src="./logo.png" srcset="./logo.png 2x"/>
<img src="./logo.png" srcset="./logo.png 2x"/>
<img src="./logo.png" srcset="./logo.png, ./logo.png 2x"/>
<img src="./logo.png" srcset="./logo.png 2x, ./logo.png"/>
<img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x"/>
<img src="./logo.png" srcset="./logo.png, ./logo.png 2x, ./logo.png 3x"/>
<img src="/logo.png" srcset="/logo.png, /logo.png 2x"/>
<img src="https://example.com/logo.png" srcset="https://example.com/logo.png, https://example.com/logo.png 2x"/>
<img src="/logo.png" srcset="/logo.png, ./logo.png 2x"/>
`
describe('compiler sfc: transform srcset', () => {
test('transform srcset', () => {
const result = compileWithSrcset(`
<img src="./logo.png" srcset="./logo.png"/>
<img src="./logo.png" srcset="./logo.png 2x"/>
<img src="./logo.png" srcset="./logo.png 2x"/>
<img src="./logo.png" srcset="./logo.png, ./logo.png 2x"/>
<img src="./logo.png" srcset="./logo.png 2x, ./logo.png"/>
<img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x"/>
<img src="./logo.png" srcset="./logo.png, ./logo.png 2x, ./logo.png 3x"/>
<img src="/logo.png" srcset="/logo.png, /logo.png 2x"/>
<img src="https://example.com/logo.png" srcset="https://example.com/logo.png, https://example.com/logo.png 2x"/>
<img src="/logo.png" srcset="/logo.png, ./logo.png 2x"/>
`)
expect(compileWithSrcset(src).code).toMatchSnapshot()
})
expect(result.code).toMatchSnapshot()
test('transform srcset w/ base', () => {
expect(
compileWithSrcset(src, {
base: '/foo'
}).code
).toMatchSnapshot()
})
test('transform srcset w/ includeAbsolute: true', () => {
expect(
compileWithSrcset(src, {
includeAbsolute: true
}).code
).toMatchSnapshot()
})
})

38
packages/compiler-sfc/src/compileTemplate.ts
View File

@ -10,9 +10,14 @@ import { SourceMapConsumer, SourceMapGenerator, RawSourceMap } from 'source-map'
import {
transformAssetUrl,
AssetURLOptions,
createAssetUrlTransformWithOptions
createAssetUrlTransformWithOptions,
AssetURLTagConfig,
normalizeOptions
} from './templateTransformAssetUrl'
import { transformSrcset } from './templateTransformSrcset'
import {
transformSrcset,
createSrcsetTransformWithOptions
} from './templateTransformSrcset'
import { isObject } from '@vue/shared'
import * as CompilerDOM from '@vue/compiler-dom'
import * as CompilerSSR from '@vue/compiler-ssr'
@ -47,16 +52,10 @@ export interface SFCTemplateCompileOptions {
*/
preprocessCustomRequire?: (id: string) => any
/**
* Configure what tags/attributes to trasnform into relative asset url imports
* in the form of `{ [tag: string]: string[] }`, or disable the transform with
* `false`.
* Configure what tags/attributes to trasnform into asset url imports,
* or disable the transform altogether with `false`.
*/
transformAssetUrls?: AssetURLOptions | boolean
/**
* If base is provided, instead of transforming relative asset urls into
* imports, they will be directly rewritten to absolute urls.
*/
transformAssetUrlsBase?: string
transformAssetUrls?: AssetURLOptions | AssetURLTagConfig | boolean
}
function preprocess(
@ -144,25 +143,20 @@ function doCompileTemplate({
ssr = false,
compiler = ssr ? (CompilerSSR as TemplateCompiler) : CompilerDOM,
compilerOptions = {},
transformAssetUrls,
transformAssetUrlsBase
transformAssetUrls
}: SFCTemplateCompileOptions): SFCTemplateCompileResults {
const errors: CompilerError[] = []
let nodeTransforms: NodeTransform[] = []
if (transformAssetUrls !== false) {
if (transformAssetUrlsBase || isObject(transformAssetUrls)) {
if (isObject(transformAssetUrls)) {
const assetOptions = normalizeOptions(transformAssetUrls)
nodeTransforms = [
createAssetUrlTransformWithOptions({
base: transformAssetUrlsBase,
tags: isObject(transformAssetUrls) ? transformAssetUrls : undefined
}),
transformSrcset
createAssetUrlTransformWithOptions(assetOptions),
createSrcsetTransformWithOptions(assetOptions)
]
} else {
} else if (transformAssetUrls !== false) {
nodeTransforms = [transformAssetUrl, transformSrcset]
}
}
let { code, map } = compiler.compile(source, {
mode: 'module',

60
packages/compiler-sfc/src/templateTransformAssetUrl.ts
View File

@ -8,18 +8,28 @@ import {
TransformContext
} from '@vue/compiler-core'
import { isRelativeUrl, parseUrl } from './templateUtils'
import { isArray } from '@vue/shared'
export interface AssetURLOptions {
export interface AssetURLTagConfig {
[name: string]: string[]
}
export interface NormlaizedAssetURLOptions {
export interface AssetURLOptions {
/**
* If base is provided, instead of transforming relative asset urls into
* imports, they will be directly rewritten to absolute urls.
*/
base?: string | null
tags?: AssetURLOptions
/**
* If true, also processes absolute urls.
*/
includeAbsolute?: boolean
tags?: AssetURLTagConfig
}
const defaultAssetUrlOptions: Required<NormlaizedAssetURLOptions> = {
export const defaultAssetUrlOptions: Required<AssetURLOptions> = {
base: null,
includeAbsolute: false,
tags: {
video: ['src', 'poster'],
source: ['src'],
@ -29,15 +39,27 @@ const defaultAssetUrlOptions: Required<NormlaizedAssetURLOptions> = {
}
}
export const createAssetUrlTransformWithOptions = (
options: NormlaizedAssetURLOptions
): NodeTransform => {
const mergedOptions = {
export const normalizeOptions = (
options: AssetURLOptions | AssetURLTagConfig
): Required<AssetURLOptions> => {
if (Object.keys(options).some(key => isArray((options as any)[key]))) {
// legacy option format which directly passes in tags config
return {
...defaultAssetUrlOptions,
tags: options as any
}
}
return {
...defaultAssetUrlOptions,
...options
}
}
export const createAssetUrlTransformWithOptions = (
options: Required<AssetURLOptions>
): NodeTransform => {
return (node, context) =>
(transformAssetUrl as Function)(node, context, mergedOptions)
(transformAssetUrl as Function)(node, context, options)
}
/**
@ -56,7 +78,7 @@ export const createAssetUrlTransformWithOptions = (
export const transformAssetUrl: NodeTransform = (
node,
context,
options: NormlaizedAssetURLOptions = defaultAssetUrlOptions
options: AssetURLOptions = defaultAssetUrlOptions
) => {
if (node.type === NodeTypes.ELEMENT) {
const tags = options.tags || defaultAssetUrlOptions.tags
@ -69,16 +91,21 @@ export const transformAssetUrl: NodeTransform = (
attr.type !== NodeTypes.ATTRIBUTE ||
attr.name !== name ||
!attr.value ||
!isRelativeUrl(attr.value.content)
(!options.includeAbsolute && !isRelativeUrl(attr.value.content))
) {
return
}
const url = parseUrl(attr.value.content)
if (options.base) {
// explicit base - directly rewrite the url into absolute url
// does not apply to url that starts with `@` since they are
// aliases
if (attr.value.content[0] !== '@') {
// does not apply to absolute urls or urls that start with `@`
// since they are aliases
if (
attr.value.content[0] !== '@' &&
isRelativeUrl(attr.value.content)
) {
// 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(
@ -86,7 +113,9 @@ export const transformAssetUrl: NodeTransform = (
url.path + (url.hash || '')
)
}
} else {
return
}
// otherwise, transform the url into an import.
// this assumes a bundler will resolve the import into the correct
// absolute url (e.g. webpack file-loader)
@ -104,7 +133,6 @@ export const transformAssetUrl: NodeTransform = (
modifiers: [],
loc: attr.loc
}
}
})
})
}

48
packages/compiler-sfc/src/templateTransformSrcset.ts
View File

@ -1,3 +1,4 @@
import path from 'path'
import {
createCompoundExpression,
createSimpleExpression,
@ -5,7 +6,11 @@ import {
NodeTypes,
SimpleExpressionNode
} from '@vue/compiler-core'
import { isRelativeUrl, parseUrl } from './templateUtils'
import { isRelativeUrl, parseUrl, isExternalUrl } from './templateUtils'
import {
AssetURLOptions,
defaultAssetUrlOptions
} from './templateTransformAssetUrl'
const srcsetTags = ['img', 'source']
@ -17,13 +22,23 @@ interface ImageCandidate {
// http://w3c.github.io/html/semantics-embedded-content.html#ref-for-image-candidate-string-5
const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
export const transformSrcset: NodeTransform = (node, context) => {
export const createSrcsetTransformWithOptions = (
options: Required<AssetURLOptions>
): NodeTransform => {
return (node, context) =>
(transformSrcset as Function)(node, context, options)
}
export const transformSrcset: NodeTransform = (
node,
context,
options: Required<AssetURLOptions> = defaultAssetUrlOptions
) => {
if (node.type === NodeTypes.ELEMENT) {
if (srcsetTags.includes(node.tag) && node.props.length) {
node.props.forEach((attr, index) => {
if (attr.name === 'srcset' && attr.type === NodeTypes.ATTRIBUTE) {
if (!attr.value) return
// same logic as in transform-require.js
const value = attr.value.content
const imageCandidates: ImageCandidate[] = value.split(',').map(s => {
@ -37,11 +52,34 @@ export const transformSrcset: NodeTransform = (node, context) => {
})
// When srcset does not contain any relative URLs, skip transforming
if (!imageCandidates.some(({ url }) => isRelativeUrl(url))) return
if (
!options.includeAbsolute &&
!imageCandidates.some(({ url }) => isRelativeUrl(url))
) {
return
}
if (options.base) {
const base = options.base
const set: string[] = []
imageCandidates.forEach(({ url, descriptor }, index) => {
descriptor = descriptor ? ` ${descriptor}` : ``
if (isRelativeUrl(url)) {
set.push((path.posix || path).join(base, url) + descriptor)
} else {
set.push(url + descriptor)
}
})
attr.value.content = set.join(', ')
return
}
const compoundExpression = createCompoundExpression([], attr.loc)
imageCandidates.forEach(({ url, descriptor }, index) => {
if (isRelativeUrl(url)) {
if (
!isExternalUrl(url) &&
(options.includeAbsolute || isRelativeUrl(url))
) {
const { path } = parseUrl(url)
let exp: SimpleExpressionNode
if (path) {

5
packages/compiler-sfc/src/templateUtils.ts
View File

@ -6,6 +6,11 @@ export function isRelativeUrl(url: string): boolean {
return firstChar === '.' || firstChar === '~' || firstChar === '@'
}
const externalRE = /^https?:\/\//
export function isExternalUrl(url: string): boolean {
return externalRE.test(url)
}
/**
* Parses string url into URL object.
*/