breaking(pat-validation): Remove error-template option.

This is a breaking change.

Due to a Content-Security-Policy problem with dom.template when
unsafe-eval is not set - which you wouldn't set if possible - we had to
remove the error-template parameter. Instead the template is now defined
in a error_template method on the Patten class and can be customized by
subclassing and extending the pat-validation pattern or by patching it
via Pattern.prototype.

Author: thet

src/pat/validation/documentation.md

@@ -79,5 +79,3 @@ Error messages can also be overridden on a per-field basis, for example:
 | message-required | The error message for required fields.                                                                                     | This field is required.                              | String                                 |
 | not-after        | Field-specific. A lower time limit restriction for date and datetime fields.                                               |                                                      | CSS Selector or a ISO8601 date string. |
 | not-before       | Field-specific. An upper time limit restriction for date and datetime fields.                                              |                                                      | CSS Selector or a ISO8601 date string. |
-| error-template   | The template to be used to render the error message.                                                                       | <em class="validation warning message">${this.message}</em> | String              |
-

src/pat/validation/validation.js

@@ -26,15 +26,10 @@ parser.addArgument("not-before", null);
 parser.addArgument("equality", null);
 parser.addArgument("delay", 100); // Delay before validation is done to avoid validating while typing.
 
-// Template for the validation message
-parser.addArgument(
-    "error-template",
-    '<em class="validation warning message">${this.message}</em>'
-);
-
 // BBB
 // TODO: deprecated. Will be removed with next major version.
 parser.addAlias("message-integer", "message-number");
+parser.addArgument("error-template");
 
 const KEY_ERROR_EL = "__patternslib__input__error__el";
 const KEY_ERROR_MSG = "__patternslib__input__error__msg";
@@ -324,7 +319,7 @@ export default Base.extend({
             event.stopPropagation();
             event.stopImmediatePropagation();
         }
-        this.set_error_message(input, input_options);
+        this.set_error_message(input);
     },
 
     set_validity({ input, msg, attribute = null, min = null, max = null }) {
@@ -372,7 +367,7 @@ export default Base.extend({
         }
     },
 
-    set_error_message(input, options) {
+    set_error_message(input) {
         this.remove_error(input);
 
         // Do not set a error message for a input group like radio buttons or
@@ -385,10 +380,9 @@ export default Base.extend({
 
         // Create the validation error DOM node from the template
         const validation_message = input.validationMessage || input[KEY_ERROR_MSG];
-        const error_template = dom.template(options.errorTemplate, {
-            message: validation_message,
-        });
-        const error_node = dom.create_from_string(error_template).firstChild;
+        const error_node = dom.create_from_string(
+            this.error_template(validation_message)
+        ).firstChild;
 
         let fieldset;
         if (input.type === "radio" || input.type === "checkbox") {
@@ -423,4 +417,9 @@ export default Base.extend({
             }
         }
     },
+
+    error_template(message) {
+        // Template for the validation message
+        return `<em class="validation warning message">${message}</em>`;
+    },
 });

src/pat/validation/validation.test.js

@@ -215,20 +215,23 @@ describe("pat-validation", function () {
         expect(el.querySelector("#form-buttons-create").disabled).toBe(false);
     });
 
-    it("1.9 - can define a custom error message template.", async function () {
-        const _msg = "${this.message}"; // need to define the template in normal quotes here to not make the parser expand the missing variable.
+    it("1.9 - can define a custom error message template by subclassing.", async function () {
+        class CustomValidation extends Pattern {
+            error_template(message) {
+                return `<div class="validation-error">${message}</div>`;
+            }
+        }
+
         document.body.innerHTML = `
           <form class="pat-validation"
-            data-pat-validation='
-                message-required: need this;
-                error-template: &lt;div class="validation-error"&gt;${_msg}&lt;/div&gt;'>
+            data-pat-validation="message-required: need this;">
             <input type="text" name="name" required>
           </form>
         `;
         const el = document.querySelector(".pat-validation");
         const inp = el.querySelector("[name=name]");
 
-        new Pattern(el);
+        new CustomValidation(el);
         await utils.timeout(1); // wait a tick for async to settle.
 
         inp.value = "";

webpack/webpack.config.js

@@ -60,6 +60,8 @@ module.exports = () => {
 
     if (process.env.NODE_ENV === "development") {
         config.devServer.static.directory = path.resolve(__dirname, "../");
+        config.devServer.headers["Content-Security-Policy"] =
+            "default-src https: http: data: 'self' 'unsafe-inline'; script-src https: http: data: 'self' 'unsafe-inline';";
     }
 
     // Add an @patternslib/patternslib alias when building within this repository.