feat: Support uri fragment in transformed require

lib/modules/template-compiler.js

@@ -2,6 +2,8 @@ const assert = require('assert')
 const compiler = require('vue-template-compiler')
 const transpile = require('vue-template-es2015-compiler')
 const SourceMapGenerator = require('source-map').SourceMapGenerator
+const url = require('url')
+const loaderUtils = require('loader-utils')
 
 const empty =
   `var render = ${toFunction('')}\n` +
@@ -87,10 +89,50 @@ function rewriteAsset (attr) {
     if (first === '~') {
       value = '"' + value.slice(2)
     }
-    attr.value = `require(${value})`
+
+    const uriParts = evalUriParts(value)
+
+    attr.value =
+      !uriParts.uriFragment
+        ? `require(${value})`
+        :
+        // support uri fragment case by excluding it from
+        // the require and instead appending it as string
+        `require("${uriParts.uriPath}") + "${uriParts.uriFragment}"`
   }
 }
 
 function toFunction (code) {
   return `function(){${code}}`
 }
+
+/**
+ * ktsn/vue-template-loader#49 Support uri fragment in transformed require
+ * @param candidate {string}
+ * @returns {{uriFragment: string, uriPath: string}}
+ */
+function evalUriParts(candidate) {
+  // initialize return value
+  const returnValue = {
+    uriFragment: null,
+    uriPath: null
+  }
+  if (candidate) {
+    // if we have enough input to eliminate the sourrounding quotes
+    const fullUri =
+      candidate.length > 2 ? candidate.slice(1, candidate.length - 1) : null
+    // isUrlRequest throws TypeError if url is not of type string
+    if ('string' === typeof fullUri && loaderUtils.isUrlRequest(fullUri)) {
+      // check is an uri
+      const uri = url.parse(fullUri) // take apart the uri
+      if (uri.hash) {
+        // if there is a fragment part
+        // memo the fragment part(contains the  leading #)
+        returnValue.uriFragment = uri.hash
+        // memo the uri minus the fragment part
+        returnValue.uriPath = uri.path
+      }
+    }
+  }
+  return returnValue
+}

test/modules/template-compiler.spec.js

@@ -38,4 +38,36 @@ describe('template-compiler', () => {
     expect(pos.line).toBe(1)
     expect(pos.column).toBe(0)
   })
+
+  /**
+   * ktsn/vue-template-loader#49 Support uri fragment in transformed require
+   */
+  it('supports uri fragment in transformed require', () => {
+    const src = //
+    '<svg>\
+      <use href="~@svg/file.svg#fragment"></use>\
+    </svg>'
+    const actual = compile(src, {
+      transformToRequire: {
+        use: 'href'
+      }
+    })
+    expect(actual.code).toMatch(/"href":require\("@svg\/file.svg"\) \+ "#fragment"/)
+  })
+
+  /**
+   * ktsn/vue-template-loader#49 Support uri fragment in transformed require
+   */
+  it('when too short uri then empty require', () => {
+    const src = //
+    '<svg>\
+      <use href="~"></use>\
+    </svg>'
+    const actual = compile(src, {
+      transformToRequire: {
+        use: 'href'
+      }
+    })
+    expect(actual.code).toMatch(/"href":require\(""\)/)
+  })
 })