fix: hash processing improved

src/plugins/source-plugin.js

@@ -627,16 +627,13 @@ export default (options) =>
       const { startIndex, unquoted } = source;
       let { value } = source;
       const URLObject = parse(value);
+      const { hash } = URLObject;
 
-      if (URLObject.hash) {
-        const { hash } = URLObject;
-
+      if (hash) {
         URLObject.hash = null;
         source.value = URLObject.format();
 
-        if (hash) {
-          value = value.slice(0, value.length - hash.length);
-        }
+        value = value.slice(0, value.length - hash.length);
       }
 
       const importKey = urlToRequest(decodeURIComponent(source.value), root);
@@ -656,7 +653,11 @@ export default (options) =>
         });
       }
 
-      const replacerKey = JSON.stringify({ importKey, unquoted });
+      const replacerKey = JSON.stringify({
+        importKey,
+        unquoted,
+        hash,
+      });
       let replacerName = replacersMap.get(replacerKey);
 
       if (!replacerName) {
@@ -667,20 +668,23 @@ export default (options) =>
           type: 'replacer',
           value: {
             type: 'source',
+            hash,
             importName,
             replacerName,
             unquoted,
           },
         });
       }
 
+      const valueLength = hash ? value.length + hash.length : value.length;
+
       // eslint-disable-next-line no-param-reassign
       html =
         html.substr(0, startIndex + offset) +
         replacerName +
-        html.substr(startIndex + value.length + offset);
+        html.substr(startIndex + valueLength + offset);
 
-      offset += replacerName.length - value.length;
+      offset += replacerName.length - valueLength;
     }
 
     return html;

src/runtime/getUrl.js

@@ -1,12 +1,22 @@
-module.exports = (url, maybeNeedQuotes) => {
+module.exports = (url, options) => {
+  if (!options) {
+    // eslint-disable-next-line no-param-reassign
+    options = {};
+  }
+
   // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   url = url && url.__esModule ? url.default : url;
 
   if (typeof url !== 'string') {
     return url;
   }
 
-  if (maybeNeedQuotes && /[\t\n\f\r "'=<>`]/.test(url)) {
+  if (options.hash) {
+    // eslint-disable-next-line no-param-reassign
+    url += options.hash;
+  }
+
+  if (options.maybeNeedQuotes && /[\t\n\f\r "'=<>`]/.test(url)) {
     return `"${url}"`;
   }
 

src/utils.js

@@ -74,11 +74,15 @@ export function getModuleCode(html, replaceableMessages) {
   let replacersCode = '';
 
   for (const item of replaceableMessages) {
-    const { importName, replacerName, unquoted } = item;
+    const { importName, replacerName, unquoted, hash } = item;
 
-    replacersCode += `var ${replacerName} = ${GET_SOURCE_FROM_IMPORT_NAME}(${importName}${
-      unquoted ? ', true' : ''
-    });\n`;
+    const getUrlOptions = []
+      .concat(hash ? [`hash: ${JSON.stringify(hash)}`] : [])
+      .concat(unquoted ? 'maybeNeedQuotes: true' : []);
+    const preparedOptions =
+      getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(', ')} }` : '';
+
+    replacersCode += `var ${replacerName} = ${GET_SOURCE_FROM_IMPORT_NAME}(${importName}${preparedOptions});\n`;
 
     code = code.replace(
       new RegExp(replacerName, 'g'),

test/fixtures/simple.html

@@ -269,3 +269,5 @@ <h2>An Ordered HTML List</h2>
 />
 
 <img data-srcset="image.png 480w, image.png 800w" sizes="(max-width: 600px) 480px, 800px" data-src="image.png" alt="Elva dressed as a fairy">
+
+<img src=~aliasImageWithSpace#hash />

test/runtime/__snapshots__/getUrl.test.js.snap

@@ -66,4 +66,64 @@ exports[`getUrl should work 26`] = `"\\"image<image.png\\""`;
 
 exports[`getUrl should work 27`] = `"\\"image\`image.png\\""`;
 
-exports[`getUrl should work 28`] = `"image.png"`;
+exports[`getUrl should work 28`] = `"image.png#hash"`;
+
+exports[`getUrl should work 29`] = `"\\"image	image.png#hash\\""`;
+
+exports[`getUrl should work 30`] = `
+"\\"image
+image.png#hash\\""
+`;
+
+exports[`getUrl should work 31`] = `"\\"imageimage.png#hash\\""`;
+
+exports[`getUrl should work 32`] = `
+"\\"image
+image.png#hash\\""
+`;
+
+exports[`getUrl should work 33`] = `"\\"image image.png#hash\\""`;
+
+exports[`getUrl should work 34`] = `"\\"image\\"image.png#hash\\""`;
+
+exports[`getUrl should work 35`] = `"\\"image'image.png#hash\\""`;
+
+exports[`getUrl should work 36`] = `"\\"image=image.png#hash\\""`;
+
+exports[`getUrl should work 37`] = `"\\"image>image.png#hash\\""`;
+
+exports[`getUrl should work 38`] = `"\\"image<image.png#hash\\""`;
+
+exports[`getUrl should work 39`] = `"\\"image\`image.png#hash\\""`;
+
+exports[`getUrl should work 40`] = `"image.png#hash"`;
+
+exports[`getUrl should work 41`] = `"image	image.png#hash"`;
+
+exports[`getUrl should work 42`] = `
+"image
+image.png#hash"
+`;
+
+exports[`getUrl should work 43`] = `"imageimage.png#hash"`;
+
+exports[`getUrl should work 44`] = `
+"image
+image.png#hash"
+`;
+
+exports[`getUrl should work 45`] = `"image image.png#hash"`;
+
+exports[`getUrl should work 46`] = `"image\\"image.png#hash"`;
+
+exports[`getUrl should work 47`] = `"image'image.png#hash"`;
+
+exports[`getUrl should work 48`] = `"image=image.png#hash"`;
+
+exports[`getUrl should work 49`] = `"image>image.png#hash"`;
+
+exports[`getUrl should work 50`] = `"image<image.png#hash"`;
+
+exports[`getUrl should work 51`] = `"image\`image.png#hash"`;
+
+exports[`getUrl should work 52`] = `"image.png"`;

test/runtime/getUrl.test.js

@@ -18,18 +18,88 @@ describe('getUrl', () => {
     expect(getUrl('image>image.png')).toMatchSnapshot();
     expect(getUrl('image<image.png')).toMatchSnapshot();
     expect(getUrl('image`image.png')).toMatchSnapshot();
-    expect(getUrl('image.png', true)).toMatchSnapshot();
-    expect(getUrl('image\timage.png', true)).toMatchSnapshot();
-    expect(getUrl('image\nimage.png', true)).toMatchSnapshot();
-    expect(getUrl('image\fimage.png', true)).toMatchSnapshot();
-    expect(getUrl('image\rimage.png', true)).toMatchSnapshot();
-    expect(getUrl('image image.png', true)).toMatchSnapshot();
-    expect(getUrl('image"image.png', true)).toMatchSnapshot();
-    expect(getUrl("image'image.png", true)).toMatchSnapshot();
-    expect(getUrl('image=image.png', true)).toMatchSnapshot();
-    expect(getUrl('image>image.png', true)).toMatchSnapshot();
-    expect(getUrl('image<image.png', true)).toMatchSnapshot();
-    expect(getUrl('image`image.png', true)).toMatchSnapshot();
+    expect(getUrl('image.png', { maybeNeedQuotes: true })).toMatchSnapshot();
+    expect(
+      getUrl('image\timage.png', { maybeNeedQuotes: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image\nimage.png', { maybeNeedQuotes: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image\fimage.png', { maybeNeedQuotes: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image\rimage.png', { maybeNeedQuotes: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image image.png', { maybeNeedQuotes: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image"image.png', { maybeNeedQuotes: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl("image'image.png", { maybeNeedQuotes: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image=image.png', { maybeNeedQuotes: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image>image.png', { maybeNeedQuotes: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image<image.png', { maybeNeedQuotes: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image`image.png', { maybeNeedQuotes: true })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image.png', { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image\timage.png', { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image\nimage.png', { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image\fimage.png', { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image\rimage.png', { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image image.png', { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image"image.png', { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(
+      getUrl("image'image.png", { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image=image.png', { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image>image.png', { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image<image.png', { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(
+      getUrl('image`image.png', { maybeNeedQuotes: true, hash: '#hash' })
+    ).toMatchSnapshot();
+    expect(getUrl('image.png', { hash: '#hash' })).toMatchSnapshot();
+    expect(getUrl('image\timage.png', { hash: '#hash' })).toMatchSnapshot();
+    expect(getUrl('image\nimage.png', { hash: '#hash' })).toMatchSnapshot();
+    expect(getUrl('image\fimage.png', { hash: '#hash' })).toMatchSnapshot();
+    expect(getUrl('image\rimage.png', { hash: '#hash' })).toMatchSnapshot();
+    expect(getUrl('image image.png', { hash: '#hash' })).toMatchSnapshot();
+    expect(getUrl('image"image.png', { hash: '#hash' })).toMatchSnapshot();
+    expect(getUrl("image'image.png", { hash: '#hash' })).toMatchSnapshot();
+    expect(getUrl('image=image.png', { hash: '#hash' })).toMatchSnapshot();
+    expect(getUrl('image>image.png', { hash: '#hash' })).toMatchSnapshot();
+    expect(getUrl('image<image.png', { hash: '#hash' })).toMatchSnapshot();
+    expect(getUrl('image`image.png', { hash: '#hash' })).toMatchSnapshot();
     expect(
       getUrl({ default: 'image.png', __esModule: true })
     ).toMatchSnapshot();