12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- // vue compiler module for transforming `img:srcset` to a number of `require`s
- import { urlToRequire, ASTNode } from './utils'
- import { TransformAssetUrlsOptions } from './assetUrl'
- interface ImageCandidate {
- require: string
- descriptor: string
- }
- export default (transformAssetUrlsOptions?: TransformAssetUrlsOptions) => ({
- postTransformNode: (node: ASTNode) => {
- transform(node, transformAssetUrlsOptions)
- }
- })
- // http://w3c.github.io/html/semantics-embedded-content.html#ref-for-image-candidate-string-5
- const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
- function transform(
- node: ASTNode,
- transformAssetUrlsOptions?: TransformAssetUrlsOptions
- ) {
- const tags = ['img', 'source']
- if (tags.indexOf(node.tag) !== -1 && node.attrs) {
- node.attrs.forEach(attr => {
- if (attr.name === 'srcset') {
- // same logic as in transform-require.js
- const value = attr.value
- const isStatic =
- value.charAt(0) === '"' && value.charAt(value.length - 1) === '"'
- if (!isStatic) {
- return
- }
- const imageCandidates: ImageCandidate[] = value
- .substr(1, value.length - 2)
- .split(',')
- .map(s => {
- // The attribute value arrives here with all whitespace, except
- // normal spaces, represented by escape sequences
- const [url, descriptor] = s
- .replace(escapedSpaceCharacters, ' ')
- .trim()
- .split(' ', 2)
- return {
- require: urlToRequire(url, transformAssetUrlsOptions),
- descriptor
- }
- })
- // "require(url1)"
- // "require(url1) 1x"
- // "require(url1), require(url2)"
- // "require(url1), require(url2) 2x"
- // "require(url1) 1x, require(url2)"
- // "require(url1) 1x, require(url2) 2x"
- const code = imageCandidates
- .map(
- ({ require, descriptor }) =>
- `${require} + "${descriptor ? ' ' + descriptor : ''}, " + `
- )
- .join('')
- .slice(0, -6)
- .concat('"')
- .replace(/ \+ ""$/, '')
- attr.value = code
- }
- })
- }
- }
|