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

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

@@ -160,5 +160,28 @@ describe('codegen', () => {
       `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

@@ -100,5 +100,27 @@ describe('codegen', () => {
       `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
+          }
+        }
+      })
     }
   }
 }