feat(compiler-sfc): add transformAssetUrlsBase option

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

@@ -36,3 +36,16 @@ export function render(_ctx, _cache) {
  ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
+
+exports[`compiler sfc: transform asset url with explicit 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: \\"/foo/bar.png\\" }),
+ _createVNode(\\"img\\", { src: \\"/foo/bar.png\\" }),
+ _createVNode(\\"img\\", { src: \\"bar.png\\" }),
+ _createVNode(\\"img\\", { src: \\"@theme/bar.png\\" })
+ ], 64 /* STABLE_FRAGMENT */))
+}"
+`;

packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts

@@ -1,5 +1,8 @@
 import { generate, baseParse, transform } from '@vue/compiler-core'
-import { transformAssetUrl } from '../src/templateTransformAssetUrl'
+import {
+ transformAssetUrl,
+ createAssetUrlTransformWithOptions
+} from '../src/templateTransformAssetUrl'
 import { transformElement } from '../../compiler-core/src/transforms/transformElement'
 import { transformBind } from '../../compiler-core/src/transforms/vBind'
 
@@ -46,4 +49,26 @@ describe('compiler sfc: transform asset url', () => {
 
  expect(result.code).toMatchSnapshot()
  })
+
+ test('with explicit base', () => {
+ const ast = baseParse(
+ `<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
+ }
+ })
+ const { code } = generate(ast, { mode: 'module' })
+ expect(code).toMatchSnapshot()
+ })
 })

packages/compiler-sfc/src/compileTemplate.ts

@@ -40,8 +40,23 @@ export interface SFCTemplateCompileOptions {
  compilerOptions?: CompilerOptions
  preprocessLang?: string
  preprocessOptions?: any
+ /**
+ * In some cases, compiler-sfc may not be inside the project root (e.g. when
+ * linked or globally installed). In such cases a custom `require` can be
+ * passed to correctly resolve the preprocessors.
+ */
  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.
+ */
+ transformAssetUrlsBase?: string
 }
 
 function preprocess(
@@ -129,18 +144,24 @@ function doCompileTemplate({
  ssr = false,
  compiler = ssr ? (CompilerSSR as TemplateCompiler) : CompilerDOM,
  compilerOptions = {},
- transformAssetUrls
+ transformAssetUrls,
+ transformAssetUrlsBase
 }: SFCTemplateCompileOptions): SFCTemplateCompileResults {
  const errors: CompilerError[] = []
 
  let nodeTransforms: NodeTransform[] = []
- if (isObject(transformAssetUrls)) {
- nodeTransforms = [
- createAssetUrlTransformWithOptions(transformAssetUrls),
- transformSrcset
- ]
- } else if (transformAssetUrls !== false) {
- nodeTransforms = [transformAssetUrl, transformSrcset]
+ if (transformAssetUrls !== false) {
+ if (transformAssetUrlsBase || isObject(transformAssetUrls)) {
+ nodeTransforms = [
+ createAssetUrlTransformWithOptions({
+ base: transformAssetUrlsBase,
+ tags: isObject(transformAssetUrls) ? transformAssetUrls : undefined
+ }),
+ transformSrcset
+ ]
+ } else {
+ nodeTransforms = [transformAssetUrl, transformSrcset]
+ }
  }
 
  let { code, map } = compiler.compile(source, {

packages/compiler-sfc/src/templateTransformAssetUrl.ts

@@ -1,3 +1,4 @@
+import path from 'path'
 import {
  createSimpleExpression,
  ExpressionNode,
@@ -12,54 +13,97 @@ export interface AssetURLOptions {
  [name: string]: string[]
 }
 
-const defaultOptions: AssetURLOptions = {
- video: ['src', 'poster'],
- source: ['src'],
- img: ['src'],
- image: ['xlink:href', 'href'],
- use: ['xlink:href', 'href']
+export interface NormlaizedAssetURLOptions {
+ base?: string | null
+ tags?: AssetURLOptions
+}
+
+const defaultAssetUrlOptions: Required<NormlaizedAssetURLOptions> = {
+ base: null,
+ tags: {
+ video: ['src', 'poster'],
+ source: ['src'],
+ img: ['src'],
+ image: ['xlink:href', 'href'],
+ use: ['xlink:href', 'href']
+ }
 }
 
 export const createAssetUrlTransformWithOptions = (
- options: AssetURLOptions
+ options: NormlaizedAssetURLOptions
 ): NodeTransform => {
  const mergedOptions = {
- ...defaultOptions,
+ ...defaultAssetUrlOptions,
  ...options
  }
  return (node, context) =>
  (transformAssetUrl as Function)(node, context, mergedOptions)
 }
 
+/**
+ * A `@vue/compiler-core` plugin that transforms relative asset urls into
+ * either imports or absolute urls.
+ *
+ * ``` js
+ * // Before
+ * createVNode('img', { src: './logo.png' })
+ *
+ * // After
+ * import _imports_0 from './logo.png'
+ * createVNode('img', { src: _imports_0 })
+ * ```
+ */
 export const transformAssetUrl: NodeTransform = (
  node,
  context,
- options: AssetURLOptions = defaultOptions
+ options: NormlaizedAssetURLOptions = defaultAssetUrlOptions
 ) => {
  if (node.type === NodeTypes.ELEMENT) {
- for (const tag in options) {
+ const tags = options.tags || defaultAssetUrlOptions.tags
+ for (const tag in tags) {
  if ((tag === '*' || node.tag === tag) && node.props.length) {
- const attributes = options[tag]
- attributes.forEach(item => {
+ const attributes = tags[tag]
+ attributes.forEach(name => {
  node.props.forEach((attr, index) => {
- if (attr.type !== NodeTypes.ATTRIBUTE) return
- if (attr.name !== item) return
- if (!attr.value) return
- if (!isRelativeUrl(attr.value.content)) return
+ if (
+ attr.type !== NodeTypes.ATTRIBUTE ||
+ attr.name !== name ||
+ !attr.value ||
+ !isRelativeUrl(attr.value.content)
+ ) {
+ return
+ }
  const url = parseUrl(attr.value.content)
- const exp = getImportsExpressionExp(
- url.path,
- url.hash,
- attr.loc,
- context
- )
- node.props[index] = {
- type: NodeTypes.DIRECTIVE,
- name: 'bind',
- arg: createSimpleExpression(item, true, attr.loc),
- exp,
- modifiers: [],
- loc: attr.loc
+ 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] !== '@') {
+ // 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(
+ options.base,
+ 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
+ }
  }
  })
  })

packages/compiler-sfc/src/templateUtils.ts

@@ -6,8 +6,9 @@ export function isRelativeUrl(url: string): boolean {
  return firstChar === '.' || firstChar === '~' || firstChar === '@'
 }
 
-// We need an extra transform context API for injecting arbitrary import
-// statements.
+/**
+ * Parses string url into URL object.
+ */
 export function parseUrl(url: string): UrlWithStringQuery {
  const firstChar = url.charAt(0)
  if (firstChar === '~') {

rollup.config.js

@@ -129,7 +129,7 @@ function createConfig(format, output, plugins = []) {
  [
  ...Object.keys(pkg.dependencies || {}),
  ...Object.keys(pkg.peerDependencies || {}),
- 'url' // for @vue/compiler-sfc
+ ...['path', 'url'] // for @vue/compiler-sfc
  ]
 
  // the browser builds of @vue/compiler-sfc requires postcss to be available