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

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

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({
base: '/foo'
}),
transformElement
],
directiveTransforms: {
bind: transformBind
`<img src="@theme/bar.png"></img>`, // -> @theme/bar.png (untouched)
{
base: '/foo'
}
})
const { code } = generate(ast, { mode: 'module' })
)
expect(code).toMatchSnapshot()
})
test('with includeAbsolute: true', () => {
const { code } = compileWithAssetUrls(
`<img src="./bar.png"></img>` + `<img src="/bar.png"></img>`,
{
includeAbsolute: true
}
)
expect(code).toMatchSnapshot()
})
})