feat: support the [query] template for the interpolatedName method (#162)

Author: evilebottnawi

.travis.yml

@@ -13,9 +13,13 @@ cache: yarn
 
 matrix:
   include:
-    - node_js: '11'
+    - node_js: '12'
       script: yarn pretest
       env: CI=pretest
+    # Yarn doesn't support node@4
+    # - node_js: '4'
+    #   script: yarn test:ci
+    #   env: CI=tests 4
     - node_js: '6'
       script: yarn test:ci
       env: CI=tests 6
@@ -25,9 +29,12 @@ matrix:
     - node_js: '10'
       script: yarn test:ci
       env: CI=tests 10
-    - node_js: '11'
+    - node_js: '12'
       script: yarn test:ci
-      env: CI=coverage 11
+      env: CI=coverage 12
+    - node_js: '13'
+      script: yarn test:ci
+      env: CI=coverage 13
 
 before_install:
   - yarn install --ignore-engines

README.md

@@ -176,7 +176,8 @@ The following tokens are replaced in the `name` parameter:
 * `[ext]` the extension of the resource
 * `[name]` the basename of the resource
 * `[path]` the path of the resource relative to the `context` query parameter or option.
-* `[folder]` the folder the resource is in.
+* `[folder]` the folder the resource is in
+* `[query]` the queryof the resource, i.e. `?foo=bar`
 * `[emoji]` a random emoji representation of `options.content`
 * `[emoji:<length>]` same as above, but with a customizable number of emojis
 * `[contenthash]` the hash of `options.content` (Buffer) (by default it's the hex digest of the md5 hash)
@@ -200,6 +201,11 @@ Examples
 loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext]", { content: ... });
 // => js/9473fdd0d880a43c21b7778d34872157.script.js
 
+// loaderContext.resourcePath = "/app/js/javascript.js"
+// loaderContext.resourceQuery = "?foo=bar"
+loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext][query]", { content: ... });
+// => js/9473fdd0d880a43c21b7778d34872157.script.js?foo=bar
+
 // loaderContext.resourcePath = "/app/js/javascript.js"
 loaderUtils.interpolateName(loaderContext, "js/[contenthash].script.[ext]", { content: ... });
 // => js/9473fdd0d880a43c21b7778d34872157.script.js

appveyor.yml

@@ -2,10 +2,13 @@
 
 environment:
   matrix:
+    # Yarn doesn't support node@4
+    # - nodejs_version: 4
     - nodejs_version: 6
     - nodejs_version: 8
     - nodejs_version: 10
-    - nodejs_version: 11
+    - nodejs_version: 12
+    - nodejs_version: 13
 
 clone_depth: 10
 

azure-pipelines.yml

@@ -52,6 +52,7 @@ function interpolateName(loaderContext, name, options) {
   let basename = 'file';
   let directory = '';
   let folder = '';
+  let query = '';
 
   if (loaderContext.resourcePath) {
     const parsed = path.parse(loaderContext.resourcePath);
@@ -83,6 +84,16 @@ function interpolateName(loaderContext, name, options) {
     }
   }
 
+  if (loaderContext.resourceQuery && loaderContext.resourceQuery.length > 1) {
+    query = loaderContext.resourceQuery;
+
+    const hashIdx = query.indexOf('#');
+
+    if (hashIdx >= 0) {
+      query = query.substr(0, hashIdx);
+    }
+  }
+
   let url = filename;
 
   if (content) {
@@ -104,7 +115,8 @@ function interpolateName(loaderContext, name, options) {
     .replace(/\[ext\]/gi, () => ext)
     .replace(/\[name\]/gi, () => basename)
     .replace(/\[path\]/gi, () => directory)
-    .replace(/\[folder\]/gi, () => folder);
+    .replace(/\[folder\]/gi, () => folder)
+    .replace(/\[query\]/gi, () => query);
 
   if (regExp && loaderContext.resourcePath) {
     const match = loaderContext.resourcePath.match(new RegExp(regExp));

lib/interpolateName.js

@@ -5,7 +5,7 @@
   "description": "utils for webpack loaders",
   "dependencies": {
     "big.js": "^5.2.2",
-    "emojis-list": "^2.0.0",
+    "emojis-list": "^3.0.0",
     "json5": "^1.0.1"
   },
   "scripts": {
@@ -29,7 +29,7 @@
     "eslint-plugin-node": "^8.0.0",
     "eslint-plugin-prettier": "^3.0.0",
     "jest": "^21.2.1",
-    "prettier": "^1.15.3",
+    "prettier": "^1.19.1",
     "standard-version": "^4.0.0"
   },
   "main": "lib/index.js",

package.json

@@ -131,10 +131,58 @@ describe('interpolateName()', () => {
       'test content',
       'modal.[md5::base64:20].css',
     ],
+    [
+      '/app/js/javascript.js?foo=bar',
+      'js/[hash].script.[ext][query]',
+      'test content',
+      'js/9473fdd0d880a43c21b7778d34872157.script.js?foo=bar',
+    ],
+    [
+      '/app/js/javascript.js?foo=bar&bar=baz',
+      'js/[hash].script.[ext][query]',
+      'test content',
+      'js/9473fdd0d880a43c21b7778d34872157.script.js?foo=bar&bar=baz',
+    ],
+    [
+      '/app/js/javascript.js?foo',
+      'js/[hash].script.[ext][query]',
+      'test content',
+      'js/9473fdd0d880a43c21b7778d34872157.script.js?foo',
+    ],
+    [
+      '/app/js/javascript.js?',
+      'js/[hash].script.[ext][query]',
+      'test content',
+      'js/9473fdd0d880a43c21b7778d34872157.script.js',
+    ],
+    [
+      '/app/js/javascript.js?a',
+      'js/[hash].script.[ext][query]',
+      'test content',
+      'js/9473fdd0d880a43c21b7778d34872157.script.js?a',
+    ],
+    [
+      '/app/js/javascript.js?foo=bar#hash',
+      'js/[hash].script.[ext][query]',
+      'test content',
+      'js/9473fdd0d880a43c21b7778d34872157.script.js?foo=bar',
+    ],
   ].forEach((test) => {
     it('should interpolate ' + test[0] + ' ' + test[1], () => {
+      let resourcePath = '';
+      let resourceQuery = '';
+
+      const queryIdx = test[0].indexOf('?');
+
+      if (queryIdx >= 0) {
+        resourcePath = test[0].substr(0, queryIdx);
+        resourceQuery = test[0].substr(queryIdx);
+      } else {
+        resourcePath = test[0];
+      }
+
       const interpolatedName = loaderUtils.interpolateName(
-        { resourcePath: test[0] },
+        { resourcePath, resourceQuery },
         test[1],
         { content: test[2] }
       );

test/interpolateName.test.js

@@ -170,9 +170,7 @@ describe('stringifyRequest()', () => {
       ),
     },
   ].forEach((testCase) => {
-    it(`${testCase.test}. should stringify request ${testCase.request} to ${
-      testCase.expected
-    } inside context ${testCase.context}`, () => {
+    it(`${testCase.test}. should stringify request ${testCase.request} to ${testCase.expected} inside context ${testCase.context}`, () => {
       const relative = path.relative;
 
       if (testCase.os) {