fix(v3): enable transform asset urls (template)

packages/uni-template-compiler/__tests__/compiler-app-plus-extra.service.spec.js

@@ -79,10 +79,10 @@ describe('codegen', () => {
     assertCodegen(
       `<div :id="'a'+b">A{{ d | e | f }}B{{text}}C</div>`,
       `with(this){return _c('div',{attrs:{"id":_$s(0,'a-id','a'+b),"_i":0}},[_v((_$s(0,'t0-0',_s(_f("f")(_f("e")(d)))))+(_$s(0,'t0-1',_s(text))))])}`
-    )
-    assertCodegen(
-      `<view>{{obj.param1}}123123{{obj.param1}}123123{{obj.param1}}<text> -{{obj.param3}}---{{obj.param3}} </text>{{obj.param2}}aaaa{{obj.param2}}aaaa{{obj.param2}}</view>`,
-      `with(this){return _c('view',[_v((_$s(0,'t0-0',_s(obj.param1)))+(_$s(0,'t0-1',_s(obj.param1)))+(_$s(0,'t0-2',_s(obj.param1)))),_c('text',[_v((_$s(1,'t0-0',_s(obj.param3)))+(_$s(1,'t0-1',_s(obj.param3))))]),_v((_$s(0,'t2-0',_s(obj.param2)))+(_$s(0,'t2-1',_s(obj.param2)))+(_$s(0,'t2-2',_s(obj.param2))))])}`
+    )
+    assertCodegen(
+      `<view>{{obj.param1}}123123{{obj.param1}}123123{{obj.param1}}<text> -{{obj.param3}}---{{obj.param3}} </text>{{obj.param2}}aaaa{{obj.param2}}aaaa{{obj.param2}}</view>`,
+      `with(this){return _c('view',[_v((_$s(0,'t0-0',_s(obj.param1)))+(_$s(0,'t0-1',_s(obj.param1)))+(_$s(0,'t0-2',_s(obj.param1)))),_c('text',[_v((_$s(1,'t0-0',_s(obj.param3)))+(_$s(1,'t0-1',_s(obj.param3))))]),_v((_$s(0,'t2-0',_s(obj.param2)))+(_$s(0,'t2-1',_s(obj.param2)))+(_$s(0,'t2-2',_s(obj.param2))))])}`
     )
   })
 
@@ -140,25 +140,48 @@ describe('codegen', () => {
       '<view data-a="1" :data-b="b"></view>',
       `with(this){return _c('view',{attrs:{"data-b":_$s(0,'a-data-b',b),"_i":0}})}`
     )
-  })
-  it('generate v-if directive', () => {
-    assertCodegen(
-      '<text v-if="a">1</text><text v-else-if="b">2</text><text v-else-if="c">3</text><text v-else>d</text>',
-      `with(this){return (_$s(0,'i',a))?_c('text'):(_$s(1,'e',b))?_c('text'):(_$s(2,'e',c))?_c('text'):_c('text')}`
-    )
-  })
-  it('generate dynamic slot', () => {
-    assertCodegen(
-      '<base-layout><template v-slot:[dynamicSlotName]></template></base-layout>',
-      `with(this){return _c('base-layout',{attrs:{"_i":0},scopedSlots:_u([{key:_$s(1,'st',dynamicSlotName),fn:function(_empty_, _svm, _si){return undefined}}],null,true)})}`
-    )
-  })
-
-  it('generate ref', () => {
-    assertCodegen(
-      '<p :ref="component1"></p>',
-      `with(this){return _c('p',{ref:_$s(0,'ref',component1)})}`
-    )
-  })
+  })
+  it('generate v-if directive', () => {
+    assertCodegen(
+      '<text v-if="a">1</text><text v-else-if="b">2</text><text v-else-if="c">3</text><text v-else>d</text>',
+      `with(this){return (_$s(0,'i',a))?_c('text'):(_$s(1,'e',b))?_c('text'):(_$s(2,'e',c))?_c('text'):_c('text')}`
+    )
+  })
+  it('generate dynamic slot', () => {
+    assertCodegen(
+      '<base-layout><template v-slot:[dynamicSlotName]></template></base-layout>',
+      `with(this){return _c('base-layout',{attrs:{"_i":0},scopedSlots:_u([{key:_$s(1,'st',dynamicSlotName),fn:function(_empty_, _svm, _si){return undefined}}],null,true)})}`
+    )
+  })
+
+  it('generate ref', () => {
+    assertCodegen(
+      '<p :ref="component1"></p>',
+      `with(this){return _c('p',{ref:_$s(0,'ref',component1)})}`
+    )
+  })
+
+  it('generate image', () => {
+    assertCodegen(
+      '<image :src="src"/>',
+      `with(this){return _c('image',{attrs:{"src":_$s(0,'a-src',src),"_i":0}})}`
+    )
+    assertCodegen(
+      '<image src="/static/logo.png"/>',
+      `with(this){return _c('image',{attrs:{"_i":0}})}`
+    )
+    assertCodegen(
+      '<image src="../static/logo.png"/>',
+      `with(this){return _c('image',{attrs:{"src":_$s(0,'a-src',"/"+require("../static/logo.png")),"_i":0}})}`
+    )
+    assertCodegen(
+      '<image src="@/static/logo.png"/>',
+      `with(this){return _c('image',{attrs:{"_i":0}})}`
+    )
+    assertCodegen(
+      '<image src="~@/static/logo.png"/>',
+      `with(this){return _c('image',{attrs:{"_i":0}})}`
+    )
+  })
 })
 /* eslint-enable quotes */

packages/uni-template-compiler/__tests__/compiler-app-plus-extra.view.spec.js

@@ -40,12 +40,12 @@ describe('codegen', () => {
       '<div><slot><div>{{hi}}</div></slot></div>',
       `with(this){return _c('div',{attrs:{"_i":0}},[_t("default",[_c('div',{attrs:{"_i":2}},[_v((_$g(2,'t0-0')))])],{"_i":1})],2)}`
     )
-  })
-  it('generate text with multiple statements', () => {
-    assertCodegen(
-      `<view>{{obj.param1}}123123{{obj.param1}}123123{{obj.param1}}<text> -{{obj.param3}}---{{obj.param3}} </text>{{obj.param2}}aaaa{{obj.param2}}aaaa{{obj.param2}}</view>`,
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_v((_$g(0,'t0-0'))+"123123"+(_$g(0,'t0-1'))+"123123"+(_$g(0,'t0-2'))),_c('v-uni-text',{attrs:{"_i":1}},[_v("-"+(_$g(1,'t0-0'))+"---"+(_$g(1,'t0-1')))]),_v((_$g(0,'t2-0'))+"aaaa"+(_$g(0,'t2-1'))+"aaaa"+(_$g(0,'t2-2')))],1)}`
-    )
+  })
+  it('generate text with multiple statements', () => {
+    assertCodegen(
+      `<view>{{obj.param1}}123123{{obj.param1}}123123{{obj.param1}}<text> -{{obj.param3}}---{{obj.param3}} </text>{{obj.param2}}aaaa{{obj.param2}}aaaa{{obj.param2}}</view>`,
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_v((_$g(0,'t0-0'))+"123123"+(_$g(0,'t0-1'))+"123123"+(_$g(0,'t0-2'))),_c('v-uni-text',{attrs:{"_i":1}},[_v("-"+(_$g(1,'t0-0'))+"---"+(_$g(1,'t0-1')))]),_v((_$g(0,'t2-0'))+"aaaa"+(_$g(0,'t2-1'))+"aaaa"+(_$g(0,'t2-2')))],1)}`
+    )
   })
   it('generate v-slot', () => {
     assertCodegen(
@@ -81,24 +81,46 @@ describe('codegen', () => {
       '<view data-a="1" :data-b="b"></view>',
       `with(this){return _c('v-uni-view',{attrs:{"data-a":"1","data-b":_$g(0,'a-data-b'),"_i":0}})}`
     )
-  })
-  it('generate v-if directive', () => {
-    assertCodegen(
-      '<text v-if="a">1</text><text v-else-if="b">2</text><text v-else-if="c">3</text><text v-else>d</text>',
-      `with(this){return (_$g(0,'i'))?_c('v-uni-text',{attrs:{"_i":0}},[_v("1")]):(_$g(1,'e'))?_c('v-uni-text',{attrs:{"_i":1}},[_v("2")]):(_$g(2,'e'))?_c('v-uni-text',{attrs:{"_i":2}},[_v("3")]):_c('v-uni-text',{attrs:{"_i":3}},[_v("d")])}`
-    )
-  })
-  it('generate dynamic slot', () => {
-    assertCodegen(
-      '<base-layout><template v-slot:[dynamicSlotName]></template></base-layout>',
-      `with(this){return _c('base-layout',{attrs:{"_i":0},scopedSlots:_u([{key:_$g(1,'st'),fn:function(_empty_, _svm, _si){return undefined}}],null,true)})}`
-    )
-  })
-  it('generate ref', () => {
-    assertCodegen(
-      '<p :ref="component1"></p>',
-      `with(this){return _c('p',{ref:_$g(0,'ref'),attrs:{"_i":0}})}`
-    )
+  })
+  it('generate v-if directive', () => {
+    assertCodegen(
+      '<text v-if="a">1</text><text v-else-if="b">2</text><text v-else-if="c">3</text><text v-else>d</text>',
+      `with(this){return (_$g(0,'i'))?_c('v-uni-text',{attrs:{"_i":0}},[_v("1")]):(_$g(1,'e'))?_c('v-uni-text',{attrs:{"_i":1}},[_v("2")]):(_$g(2,'e'))?_c('v-uni-text',{attrs:{"_i":2}},[_v("3")]):_c('v-uni-text',{attrs:{"_i":3}},[_v("d")])}`
+    )
+  })
+  it('generate dynamic slot', () => {
+    assertCodegen(
+      '<base-layout><template v-slot:[dynamicSlotName]></template></base-layout>',
+      `with(this){return _c('base-layout',{attrs:{"_i":0},scopedSlots:_u([{key:_$g(1,'st'),fn:function(_empty_, _svm, _si){return undefined}}],null,true)})}`
+    )
+  })
+  it('generate ref', () => {
+    assertCodegen(
+      '<p :ref="component1"></p>',
+      `with(this){return _c('p',{ref:_$g(0,'ref'),attrs:{"_i":0}})}`
+    )
+  })
+  it('generate image', () => {
+    assertCodegen(
+      '<image :src="src"/>',
+      `with(this){return _c('v-uni-image',{attrs:{"src":_$g(0,'a-src'),"_i":0}})}`
+    )
+    assertCodegen(
+      '<image src="/static/logo.png"/>',
+      `with(this){return _c('v-uni-image',{attrs:{"src":"/static/logo.png","_i":0}})}`
+    )
+    assertCodegen(
+      '<image src="../static/logo.png"/>',
+      `with(this){return _c('v-uni-image',{attrs:{"src":_$g(0,'a-src'),"_i":0}})}`
+    )
+    assertCodegen(
+      '<image src="@/static/logo.png"/>',
+      `with(this){return _c('v-uni-image',{attrs:{"src":"/static/logo.png","_i":0}})}`
+    )
+    assertCodegen(
+      '<image src="~@/static/logo.png"/>',
+      `with(this){return _c('v-uni-image',{attrs:{"src":"/static/logo.png","_i":0}})}`
+    )
   })
 })
 /* eslint-enable quotes */

packages/uni-template-compiler/lib/asset-url.js

+const url = require('url')
+
 const transformAssetUrls = {
   'audio': 'src',
   'video': ['src', 'poster'],
@@ -14,7 +16,47 @@ const transformAssetUrls = {
   'u-video': ['src', 'poster']
 }
 
-function rewrite (attr, name) {
+function urlToRequire (url) {
+  const returnValue = `"${url}"`
+  // same logic as in transform-require.js
+  const firstChar = url.charAt(0)
+  if (firstChar === '.' || firstChar === '~' || firstChar === '@') {
+    if (firstChar === '~') {
+      const secondChar = url.charAt(1)
+      url = url.slice(secondChar === '/' ? 2 : 1)
+    }
+    const uriParts = parseUriParts(url)
+    if (!uriParts.hash) { // fixed by xxxxxx (v3 template中需要加/)
+      return `"/"+require("${url}")`
+    } else { // fixed by xxxxxx (v3 template中需要加/)
+      // support uri fragment case by excluding it from
+      // the require and instead appending it as string;
+      // assuming that the path part is sufficient according to
+      // the above caseing(t.i. no protocol-auth-host parts expected)
+      return `"/"+require("${uriParts.path}") + "${uriParts.hash}"`
+    }
+  }
+  return returnValue
+}
+/**
+ * vuejs/component-compiler-utils#22 Support uri fragment in transformed require
+ * @param urlString an url as a string
+ */
+function parseUriParts (urlString) {
+  // initialize return value
+  const returnValue = url.parse('')
+  if (urlString) {
+    // A TypeError is thrown if urlString is not a string
+    // @see https://nodejs.org/api/url.html#url_url_parse_urlstring_parsequerystring_slashesdenotehost
+    if (typeof urlString === 'string') {
+      // check is an uri
+      return url.parse(urlString) // take apart the uri
+    }
+  }
+  return returnValue
+}
+
+function rewrite (attr, name, options) {
   if (attr.name === name) {
     const value = attr.value
     // only transform static URLs
@@ -22,13 +64,17 @@ function rewrite (attr, name) {
       attr.value = attr.value
         .replace('"@/', '"/')
         .replace('"~@/', '"/')
+      if (options.service || options.view) { // v3
+        attr.value = urlToRequire(attr.value.slice(1, -1))
+      }
       return true
     }
   }
   return false
 }
+
 module.exports = {
-  postTransformNode: (node) => {
+  postTransformNode: (node, options) => {
     if (!node.attrs) {
       return
     }
@@ -37,9 +83,19 @@ module.exports = {
       return
     }
     if (typeof attributes === 'string') {
-      node.attrs.some(attr => rewrite(attr, attributes))
+      if (node.attrs.some(attr => rewrite(attr, attributes, options))) {
+        if (options.service || options.view) {
+          node.hasBindings = true
+        }
+      }
     } else if (Array.isArray(attributes)) {
-      attributes.forEach(item => node.attrs.some(attr => rewrite(attr, item)))
+      attributes.forEach(item => {
+        if (node.attrs.some(attr => rewrite(attr, item, options))) {
+          if (options.service || options.view) {
+            node.hasBindings = true
+          }
+        }
+      })
     }
   }
 }