refactor: loader

BREAKING CHANGE: removed the `useRelativePath` option. It is dangerously and break url when you use multiple entry points.

README.md

@@ -283,23 +283,6 @@ _Note: If `[0]` is used, it will be replaced by the entire tested string,
 whereas `[1]` will contain the first capturing parenthesis of your regex and so
 on..._
 
-### `useRelativePath`
-
-Type: `Boolean`
-Default: `false`
-
-Specifies whether or not to generate a relative URI for each target file context.
-
-```js
-// webpack.config.js
-{
-  loader: 'file-loader',
-  options: {
-    useRelativePath: process.env.NODE_ENV === "production"
-  }
-}
-```
-
 ## Placeholders
 
 ### `[ext]`

src/index.js

@@ -28,38 +28,17 @@ export default function loader(content) {
     }
   }
 
-  if (options.useRelativePath) {
-    const filePath = this.resourcePath;
-
-    const issuer = options.context
-      ? context
-      : this._module && this._module.issuer && this._module.issuer.context;
-
-    const relativeUrl =
-      issuer &&
-      path
-        .relative(issuer, filePath)
-        .split(path.sep)
-        .join('/');
-
-    const relativePath = relativeUrl && `${path.dirname(relativeUrl)}/`;
-    // eslint-disable-next-line no-bitwise
-    if (~relativePath.indexOf('../')) {
-      outputPath = path.posix.join(outputPath, relativePath, url);
-    } else {
-      outputPath = path.posix.join(relativePath, url);
-    }
-  }
-
   let publicPath = `__webpack_public_path__ + ${JSON.stringify(outputPath)}`;
 
   if (options.publicPath) {
     if (typeof options.publicPath === 'function') {
       publicPath = options.publicPath(url, this.resourcePath, context);
-    } else if (options.publicPath.endsWith('/')) {
-      publicPath = options.publicPath + url;
     } else {
-      publicPath = `${options.publicPath}/${url}`;
+      publicPath = `${
+        options.publicPath.endsWith('/')
+          ? options.publicPath
+          : `${options.publicPath}/`
+      }${url}`;
     }
 
     publicPath = JSON.stringify(publicPath);

src/options.json

@@ -1,24 +1,60 @@
 {
-  "type": "object",
+  "additionalProperties": false,
   "properties": {
-    "name": {},
-    "regExp": {},
+    "name": {
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "instanceof": "Function"
+        }
+      ]
+    },
+    "outputPath": {
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "instanceof": "Function"
+        }
+      ]
+    },
+    "publicPath": {
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "instanceof": "Function"
+        }
+      ]
+    },
     "context": {
       "type": "string"
     },
-    "publicPath": {},
-    "outputPath": {},
-    "useRelativePath": {
-      "type": "boolean"
-    },
     "emitFile": {
       "type": "boolean"
+    },
+    "regExp": {
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "instanceof": "RegExp"
+        }
+      ]
     }
   },
   "errorMessages": {
+    "name": "should be {String} or {Function} (https://github.com/webpack-contrib/file-loader#name)",
+    "outputPath": "should be {String} or {Function} (https://github.com/webpack-contrib/file-loader#outputpath)",
+    "publicPath": "should be {String} or {Function} (https://github.com/webpack-contrib/file-loader#publicpath)",
     "context": "should be {String} (https://github.com/webpack-contrib/file-loader#context)",
-    "useRelativePath": "should be {Boolean} (https://github.com/webpack-contrib/file-loader#userelativepath)",
-    "emitFile": "should be {Boolean} (https://github.com/webpack-contrib/file-loader#emitfile)"
+    "emitFile": "should be {Boolean} (https://github.com/webpack-contrib/file-loader#emitfile)",
+    "regExp": "should be {String} or {RegExp} (https://github.com/webpack-contrib/file-loader#regexp)"
   },
-  "additionalProperties": true
+  "type": "object"
 }

test/__snapshots__/errors.test.js.snap

@@ -1,8 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`errors validation errors 1`] = `
+exports[`validation errors 1`] = `
 "File Loader Invalid Options
 
-options.useRelativePath should be boolean
+options should NOT have additional properties
+"
+`;
+
+exports[`validation errors 2`] = `
+"File Loader Invalid Options
+
+options.name should be string
+options.name should pass \\"instanceof\\" keyword validation
+options.name should match some schema in anyOf
+"
+`;
+
+exports[`validation errors 3`] = `
+"File Loader Invalid Options
+
+options.outputPath should be string
+options.outputPath should pass \\"instanceof\\" keyword validation
+options.outputPath should match some schema in anyOf
+"
+`;
+
+exports[`validation errors 4`] = `
+"File Loader Invalid Options
+
+options.publicPath should be string
+options.publicPath should pass \\"instanceof\\" keyword validation
+options.publicPath should match some schema in anyOf
+"
+`;
+
+exports[`validation errors 5`] = `
+"File Loader Invalid Options
+
+options.context should be string
+"
+`;
+
+exports[`validation errors 6`] = `
+"File Loader Invalid Options
+
+options.emitFile should be boolean
+"
+`;
+
+exports[`validation errors 7`] = `
+"File Loader Invalid Options
+
+options.regExp should be string
+options.regExp should pass \\"instanceof\\" keyword validation
+options.regExp should match some schema in anyOf
 "
 `;

test/__snapshots__/outputPath-option.test.js.snap

@@ -107,3 +107,12 @@ Object {
   "source": "module.exports = __webpack_public_path__ + \\"output_path/file.png\\";",
 }
 `;
+
+exports[`when applied with \`outputPath\` option matches snapshot without value 1`] = `
+Object {
+  "assets": Array [
+    "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;

test/__snapshots__/publicPath-option.test.js.snap

@@ -53,3 +53,12 @@ Object {
   "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
 }
 `;
+
+exports[`when applied with \`publicPath\` option matches snapshot without value 1`] = `
+Object {
+  "assets": Array [
+    "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;

test/errors.test.js

@@ -1,14 +1,57 @@
 import loader from '../src';
 
-describe('errors', () => {
-  it('validation errors', () => {
-    const err = () =>
-      loader.call({
-        query: { useRelativePath: 1 },
-        emitFile: true,
-      });
-
-    expect(err).toThrow();
-    expect(err).toThrowErrorMatchingSnapshot();
+describe('validation', () => {
+  it('errors', () => {
+    const validate = (options) =>
+      loader.call(
+        Object.assign(
+          {},
+          {
+            resourcePath: 'image.png',
+            query: options,
+            emitFile: () => {},
+          }
+        ),
+        'a { color: red; }'
+      );
+
+    expect(() =>
+      validate({ unknown: 'unknown' })
+    ).toThrowErrorMatchingSnapshot();
+
+    expect(() => validate({ name: '[path][name].[ext]' })).not.toThrow();
+    expect(() =>
+      validate({
+        name: () => '[hash].[ext]',
+      })
+    ).not.toThrow();
+    expect(() => validate({ name: true })).toThrowErrorMatchingSnapshot();
+
+    expect(() => validate({ outputPath: 'assets' })).not.toThrow();
+    expect(() =>
+      validate({
+        outputPath: () => 'assets',
+      })
+    ).not.toThrow();
+    expect(() => validate({ outputPath: true })).toThrowErrorMatchingSnapshot();
+
+    expect(() => validate({ publicPath: 'assets' })).not.toThrow();
+    expect(() =>
+      validate({
+        publicPath: () => 'assets',
+      })
+    ).not.toThrow();
+    expect(() => validate({ publicPath: true })).toThrowErrorMatchingSnapshot();
+
+    expect(() => validate({ context: 'assets' })).not.toThrow();
+    expect(() => validate({ context: true })).toThrowErrorMatchingSnapshot();
+
+    expect(() => validate({ emitFile: true })).not.toThrow();
+    expect(() => validate({ emitFile: false })).not.toThrow();
+    expect(() => validate({ emitFile: 'true' })).toThrowErrorMatchingSnapshot();
+
+    expect(() => validate({ regExp: /image\.png/ })).not.toThrow();
+    expect(() => validate({ regExp: 'image\\.png' })).not.toThrow();
+    expect(() => validate({ regExp: true })).toThrowErrorMatchingSnapshot();
   });
 });

test/outputPath-option.test.js

@@ -1,6 +1,20 @@
 import webpack from './helpers/compiler';
 
 describe('when applied with `outputPath` option', () => {
+  it('matches snapshot without value', async () => {
+    const config = {
+      loader: {
+        test: /(png|jpg|svg)/,
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [module] = stats.toJson().modules;
+    const { assets, source } = module;
+
+    expect({ assets, source }).toMatchSnapshot();
+  });
+
   it('matches snapshot for `{String}` value', async () => {
     const config = {
       loader: {

test/publicPath-option.test.js

@@ -1,6 +1,20 @@
 import webpack from './helpers/compiler';
 
 describe('when applied with `publicPath` option', () => {
+  it('matches snapshot without value', async () => {
+    const config = {
+      loader: {
+        test: /(png|jpg|svg)/,
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [module] = stats.toJson().modules;
+    const { assets, source } = module;
+
+    expect({ assets, source }).toMatchSnapshot();
+  });
+
   it('matches snapshot for `{String}` value', async () => {
     const config = {
       loader: {