feat: improved validation error messages (#187)

lint-staged.config.js

@@ -1,7 +1,4 @@
 module.exports = {
-  ignore: ['package-lock.json', 'CHANGELOG.md'],
-  linters: {
-    '*.js': ['prettier --write', 'eslint --fix', 'git add'],
-    '*.{json,md,yml,css}': ['prettier --write', 'git add'],
-  },
+  '*.js': ['prettier --write', 'eslint --fix', 'git add'],
+  '*.{json,md,yml,css}': ['prettier --write', 'git add'],
 };

package.json

@@ -37,36 +37,36 @@
     "webpack": "^4.0.0"
   },
   "dependencies": {
-    "loader-utils": "^1.1.0",
+    "loader-utils": "^1.2.3",
     "mime": "^2.4.4",
-    "schema-utils": "^1.0.0"
+    "schema-utils": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.5",
-    "@commitlint/cli": "^8.0.0",
-    "@commitlint/config-conventional": "^8.0.0",
-    "@webpack-contrib/defaults": "^5.0.1",
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@commitlint/cli": "^8.1.0",
+    "@commitlint/config-conventional": "^8.1.0",
+    "@webpack-contrib/defaults": "^5.0.2",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^24.8.0",
     "commitlint-azure-pipelines-cli": "^1.0.2",
     "cross-env": "^5.2.0",
-    "del": "^4.1.1",
+    "del": "^5.0.0",
     "del-cli": "^2.0.0",
     "eslint": "^6.0.1",
-    "eslint-config-prettier": "^5.1.0",
+    "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-import": "^2.18.0",
     "file-loader": "^4.0.0",
-    "husky": "^2.5.0",
+    "husky": "^3.0.0",
     "jest": "^24.8.0",
     "jest-junit": "^6.4.0",
-    "lint-staged": "^8.2.1",
+    "lint-staged": "^9.2.0",
     "memory-fs": "^0.4.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.18.2",
     "standard-version": "^6.0.1",
-    "webpack": "^4.35.0"
+    "webpack": "^4.36.1"
   },
   "keywords": [
     "webpack"

src/index.js

@@ -27,7 +27,10 @@ export default function loader(src) {
   // Loader Options
   const options = getOptions(this) || {};
 
-  validateOptions(schema, options, 'URL Loader');
+  validateOptions(schema, options, {
+    name: 'URL Loader',
+    baseDataPath: 'options',
+  });
 
   // No limit or within the specified limit
   if (shouldTransform(options.limit, src.length)) {

src/options.json

@@ -2,12 +2,15 @@
   "type": "object",
   "properties": {
     "limit": {
+      "description": "Enables/Disables transformation target file into base64 URIs (https://github.com/webpack-contrib/url-loader#limit).",
       "type": ["boolean", "number", "string"]
     },
     "mimetype": {
+      "description": "The MIME type for the file to be transformed (https://github.com/webpack-contrib/url-loader#mimetype).",
       "type": "string"
     },
     "fallback": {
+      "description": "An alternative loader to use when a target file's size exceeds the limit set in the limit option (https://github.com/webpack-contrib/url-loader#fallback).",
       "anyOf": [
         {
           "type": "string"
@@ -16,11 +19,11 @@
           "additionalProperties": false,
           "properties": {
             "loader": {
-              "description": "Fallback loader name",
+              "description": "Fallback loader name.",
               "type": "string"
             },
             "options": {
-              "description": "Fallback loader options",
+              "description": "Fallback loader options.",
               "anyOf": [
                 {
                   "type": "object"

test/__snapshots__/validate-options.test.js.snap

@@ -1,24 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`validation 1`] = `
-"URL Loader Invalid Options
-
-options.limit should be boolean,number,string
-"
+exports[`validate options 1`] = `
+"Invalid options object. URL Loader has been initialised using an options object that does not match the API schema.
+ - options.limit should be:
+   boolean | number | string
+   -> Enables/Disables transformation target file into base64 URIs (https://github.com/webpack-contrib/url-loader#limit)."
 `;
 
-exports[`validation 2`] = `
-"URL Loader Invalid Options
-
-options.mimetype should be string
-"
+exports[`validate options 2`] = `
+"Invalid options object. URL Loader has been initialised using an options object that does not match the API schema.
+ - options.mimetype should be a string.
+   -> The MIME type for the file to be transformed (https://github.com/webpack-contrib/url-loader#mimetype)."
 `;
 
-exports[`validation 3`] = `
-"URL Loader Invalid Options
-
-options.fallback should be string
-options.fallback should be object
-options.fallback should match some schema in anyOf
-"
+exports[`validate options 3`] = `
+"Invalid options object. URL Loader has been initialised using an options object that does not match the API schema.
+ - options.fallback should be one of these:
+   string | object { loader?, options? }
+   -> An alternative loader to use when a target file's size exceeds the limit set in the limit option (https://github.com/webpack-contrib/url-loader#fallback).
+   Details:
+    * options.fallback should be a string.
+    * options.fallback should be an object:
+      object { loader?, options? }"
 `;

test/validate-options.test.js

@@ -1,6 +1,6 @@
 import loader from '../src';
 
-it('validation', async () => {
+it('validate options', async () => {
   const validate = (options) =>
     loader.call(
       Object.assign(
@@ -14,6 +14,8 @@ it('validation', async () => {
       'context'
     );
 
+  expect(() => validate()).not.toThrow();
+
   // The `fallback` loader can have any optsions so we use `additionalProperties: false` to avoid problems.
   expect(() => validate({ unknown: 'unknown' })).not.toThrow();