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
Download Patch File Download Diff File Expand all files Collapse all files

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()
})
})