feat: Support uri fragment in transformed require

lib/templateCompilerModules/utils.ts

@@ -8,16 +8,47 @@ export interface ASTNode {
   attrs: Attr[]
 }
 
+import { UrlWithStringQuery, parse as uriParse } from 'url'
+
 export function urlToRequire(url: string): string {
+  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)
     }
-    return `require("${url}")`
-  } else {
-    return `"${url}"`
+
+    const uriParts = parseUriParts(url)
+
+    if (!uriParts.hash) {
+      return `require("${url}")`
+    } else {
+      // 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: string): UrlWithStringQuery {
+  // initialize return value
+  const returnValue: UrlWithStringQuery = uriParse('')
+  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 ('string' === typeof urlString) {
+      // check is an uri
+      return uriParse(urlString) // take apart the uri
+    }
   }
+  return returnValue
 }

test/compileTemplate.spec.ts

@@ -46,6 +46,48 @@ test('preprocess pug', () => {
   expect(result.errors.length).toBe(0)
 })
 
+/**
+ * vuejs/component-compiler-utils#22 Support uri fragment in transformed require
+ */
+test('supports uri fragment in transformed require', () => {
+  const source = //
+    '<svg>\
+    <use href="~@svg/file.svg#fragment"></use>\
+  </svg>'
+  const result = compileTemplate({
+    filename: 'svgparticle.html',
+    source: source,
+    transformAssetUrls: {
+      use: 'href'
+    },
+    compiler: compiler
+  })
+  expect(result.errors.length).toBe(0)
+  expect(result.code).toMatch(
+    /href: require\("@svg\/file.svg"\) \+ "#fragment"/
+  )
+})
+
+/**
+ * vuejs/component-compiler-utils#22 Support uri fragment in transformed require
+ */
+test('when too short uri then empty require', () => {
+  const source = //
+    '<svg>\
+    <use href="~"></use>\
+  </svg>'
+  const result = compileTemplate({
+    filename: 'svgparticle.html',
+    source: source,
+    transformAssetUrls: {
+      use: 'href'
+    },
+    compiler: compiler
+  })
+  expect(result.errors.length).toBe(0)
+  expect(result.code).toMatch(/href: require\(""\)/)
+})
+
 test('warn missing preprocessor', () => {
   const template = parse({
     source: '<template lang="unknownLang">\n' + '</template>\n',