], 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 */))
+}"
+`;
], 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 */))
+}"
+`;
// 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', () => {
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
}
})
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)
+ `<img src="@theme/bar.png"></img>`, // -> @theme/bar.png (untouched)
+ {
+ base: '/foo'
+ }
)
- transform(ast, {
- nodeTransforms: [
- createAssetUrlTransformWithOptions({
- base: '/foo'
- }),
- transformElement
- ],
- directiveTransforms: {
- bind: transformBind
+ expect(code).toMatchSnapshot()
+ })
+
+ test('with includeAbsolute: true', () => {
+ const { code } = compileWithAssetUrls(
+ `<img src="./bar.png"></img>` + `<img src="/bar.png"></img>`,
+ {
+ includeAbsolute: true
}
- })
- const { code } = generate(ast, { mode: 'module' })
+ )
expect(code).toMatchSnapshot()
})
})
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
}
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()
+ })
+
+ test('transform srcset w/ base', () => {
+ expect(
+ compileWithSrcset(src, {
+ base: '/foo'
+ }).code
+ ).toMatchSnapshot()
+ })
- expect(result.code).toMatchSnapshot()
+ test('transform srcset w/ includeAbsolute: true', () => {
+ expect(
+ compileWithSrcset(src, {
+ includeAbsolute: true
+ }).code
+ ).toMatchSnapshot()
})
})
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'
*/
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`.
- */
- transformAssetUrls?: AssetURLOptions | boolean
- /**
- * If base is provided, instead of transforming relative asset urls into
- * imports, they will be directly rewritten to absolute urls.
+ * Configure what tags/attributes to trasnform into asset url imports,
+ * or disable the transform altogether with `false`.
*/
- transformAssetUrlsBase?: string
+ transformAssetUrls?: AssetURLOptions | AssetURLTagConfig | boolean
}
function preprocess(
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)) {
- nodeTransforms = [
- createAssetUrlTransformWithOptions({
- base: transformAssetUrlsBase,
- tags: isObject(transformAssetUrls) ? transformAssetUrls : undefined
- }),
- transformSrcset
- ]
- } else {
- nodeTransforms = [transformAssetUrl, transformSrcset]
- }
+ if (isObject(transformAssetUrls)) {
+ const assetOptions = normalizeOptions(transformAssetUrls)
+ nodeTransforms = [
+ createAssetUrlTransformWithOptions(assetOptions),
+ createSrcsetTransformWithOptions(assetOptions)
+ ]
+ } else if (transformAssetUrls !== false) {
+ nodeTransforms = [transformAssetUrl, transformSrcset]
}
let { code, map } = compiler.compile(source, {
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'],
}
}
-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)
}
/**
export const transformAssetUrl: NodeTransform = (
node,
context,
- options: NormlaizedAssetURLOptions = defaultAssetUrlOptions
+ options: AssetURLOptions = defaultAssetUrlOptions
) => {
if (node.type === NodeTypes.ELEMENT) {
const tags = options.tags || defaultAssetUrlOptions.tags
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(
url.path + (url.hash || '')
)
}
- } else {
- // 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)
- const exp = getImportsExpressionExp(
- url.path,
- url.hash,
- attr.loc,
- context
- )
- node.props[index] = {
- type: NodeTypes.DIRECTIVE,
- name: 'bind',
- arg: createSimpleExpression(name, true, attr.loc),
- exp,
- modifiers: [],
- loc: attr.loc
- }
+ 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)
+ const exp = getImportsExpressionExp(
+ url.path,
+ url.hash,
+ attr.loc,
+ context
+ )
+ node.props[index] = {
+ type: NodeTypes.DIRECTIVE,
+ name: 'bind',
+ arg: createSimpleExpression(name, true, attr.loc),
+ exp,
+ modifiers: [],
+ loc: attr.loc
}
})
})
+import path from 'path'
import {
createCompoundExpression,
createSimpleExpression,
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']
// 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 => {
})
// 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) {
return firstChar === '.' || firstChar === '~' || firstChar === '@'
}
+const externalRE = /^https?:\/\//
+export function isExternalUrl(url: string): boolean {
+ return externalRE.test(url)
+}
+
/**
* Parses string url into URL object.
*/
projects / thirdparty / vuejs / core.git / commitdiff
