Merge pull request #1104 from Patternslib/fix-csr-problem

Fix csr problem

Author: thet

src/core/dom.js

@@ -1,5 +1,8 @@
 /* Utilities for DOM traversal or navigation */
 import events from "./events";
+import logging from "./logging";
+
+const logger = logging.getLogger("core dom");
 
 const DATA_PREFIX = "__patternslib__data_prefix__";
 const DATA_STYLE_DISPLAY = "__patternslib__style__display";
@@ -309,6 +312,10 @@ const delete_data = (el, name) => {
 /**
  * Simple template engine, based on JS template literal
  *
+ * NOTE: This uses eval and would break if Content-Security-Policy does not
+ *       allow 'unsafe-eval'.
+ *       Because of this CSR problem the use of this method is not recommended.
+ *
  * Please note: You cannot pass a template literal as template_string.
  * JavaScript itself would try to expand it and would fail.
  *
@@ -323,6 +330,9 @@ const delete_data = (el, name) => {
  * @returns {String} - Returns the a string as template expanded with the template_variables.
  */
 const template = (template_string, template_variables = {}) => {
+    logger.warn(
+        "Using dom.template is not recommended due to a problem with Content-Security-Policy."
+    );
     return new Function("return `" + template_string + "`;").call(template_variables);
 };
 

src/pat/clone-code/clone-code.js

@@ -1,6 +1,4 @@
 import { BasePattern } from "../../core/basepattern";
-import code_wrapper_template from "./templates/code-wrapper.html";
-import dom from "../../core/dom";
 import Parser from "../../core/parser";
 import registry from "../../core/registry";
 import utils from "../../core/utils";
@@ -63,17 +61,24 @@ class Pattern extends BasePattern {
             });
         }
 
-        markup = utils.escape_html(markup);
-        const pre_code_markup = dom.template(code_wrapper_template, { markup: markup });
-
         // Now we need to wrap the contents in any case in a div.
         tmp_wrapper = document.createElement("div");
-        tmp_wrapper.innerHTML = pre_code_markup;
+        tmp_wrapper.innerHTML = this.wrapper_template(utils.escape_html(markup));
         const pre_code_el = tmp_wrapper.children[0];
 
         this.el.appendChild(pre_code_el);
         registry.scan(pre_code_el);
     }
+
+    wrapper_template(markup) {
+        return `
+<pre class="pat-syntax-highlight">
+  <code class="language-html">
+${markup}
+  </code>
+</pre>
+        `;
+    }
 }
 
 registry.register(Pattern);

src/pat/clone-code/documentation.md

@@ -1,112 +1,43 @@
 ## Description
 
-The clone pattern lets the website user clone elements in the page.
+Copy part of the DOM tree and show it as code.
+
 
 ## Documentation
 
-The clone pattern is typically used in case you want to create a form on which it is unknown how many instances the user will need of a certain field or group of fields.
-For instance if you want to ask the user to fill out the name and birthdate of each family member.
+The clone-code copies a part of the DOM tree and wraps it in a `<pre><code>` structure as plain text.
+
+This pattern is especially useful when writing interactive documentation and showing the code at the same time.
+
 
 ### Usage
 
 This pattern is enabled by adding the `pat-clone` class on a container element which contains the original element and any clones of it that may have beeen added.
 The first element inside the .pat-clone container is by default assumed to be the original element may be cloned by the user.
 
-Consider the following markup:
-
-    <h3>List of family members</h3>
-
-    <div class="pat-clone">
-      <!-- The first element inside the .pat-clone container is by default
-           assumed to be the original element which will be cloned.
-        -->
-      <fieldset class="clone"> <!-- By default, pat-clone will consider elements with the "clone" class to be clones. -->
-        <legend>Family member 1</legend>
-        <input name="name-1" type="text" placeholder="Name" />
-        <input name="date-1" type="date" placeholder="birthdate" /><br/>
-        <button type="button" class="remove-clone">Remove</button>
-      </fieldset>
-      <!-- Now comes the clone trigger, a button which when clicked will cause
-           a new clone of the above fieldset to be created.
-        -->
-      <button type="button" class="add-clone">Add an extra family member</button>
+    <div class="pat-clone-code">
+      <p>Hello.</p>
     </div>
 
-Each time the user clicks on the button saying 'Add an extra family member', the
-pattern will make a copy of the first element inside the
-`.pat-clone` element, unless the `template` property is used to configure a
-different clone template. The `template` property takes a CSS selector as
-value.
-
-Typically when using a template element, such an element would be hidden from view.
-
-The new clone is always appended at the end, inside the `.pat-clone` element.
+This will result in:
 
-When creating a `.pat-clone` element containing existing clones, it's
-important that each existing clone either gets the `clone` CSS class or that you
-pass in a unique CSS selector for each clone via the `clone-element`
-property. This allows the pattern to properly determine how many existing
-clones there are to start with.
+    <pre class="pat-syntax-highlight language-html">
+      <code class="language-html hljs">
+        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+      </code>
+    </pre>
 
-#### Incrementation of values in clones
-
-The pat-clone pattern will automatically add up any number in the values of name and value attributes.
-For instance, if you have `name="item-1"` in your markup, then the first clone will be
-`name="item-2"` and the one after that `name="item-3"` etc.. If you want to print a number
-— for instance in a header of each clone — then you can use the syntax: `#{1}`. This string
-will be replaced by an number that's also increased by 1 for each clone.
-
-### Example with a hidden template
-
-The markup below would have exactly the same effect as the first example, but using a hidden template. This might come in handy when the first instance shown should either contain different information, or if it will have pre-filled values by the server.
-
-    <h3>List of family members</h3>
-
-    <div class="pat-clone" data-pat-clone="template: #my-template">
-      <!-- First visible instance and also template -->
-      <fieldset class="clone">
-        <legend>Family member 1</legend>
-        <input name="Mary Johnson" type="text" placeholder="Name" />
-        <input name="1977-04-16" type="date" placeholder="birthdate" /><br/>
-        <button type="button" class="remove-clone">Remove</button>
-      </fieldset>
-
-      <!-- Template markup -->
-      <fieldset id="my-template" hidden>
-        <legend>Family member #{1}</legend>
-        <input name="name-1" type="text" placeholder="Name" />
-        <input name="date-1" type="date" placeholder="birthdate" /><br/>
-        <button type="button" class="remove-clone">Remove</button>
-      </fieldset>
-
-      <!-- Clone trigger -->
-      <button type="button" class="add-clone">Add an extra family member</button>
-    </div>
-
-### Example with a hidden template which includes a pattern
-
-Patterns in templates are initialized after cloning.
-However, the patterns in the template itself are not initialized if the template has the attribute ``hidden`` or the class ``disable-patterns``.
-This is to prevent double-initialization within the template and after being cloned.
-
-    <div id="template" class="disable-patterns" hidden>
-      <input name="date-1" type="date" class="pat-date-picker" />
-    </fieldset>
-
-    <div class="pat-clone" data-pat-clone="template: #template">
-      <button type="button" class="add-clone">Add a date</button>
-    </div>
 
+### Excluding markup from copying
 
+You can exclude markup from copying by adding the `clone-code` class to it.
+If that class is present, the whole `clone-code` markup subtree is ignored.
 
 
 ### Option reference
 
-| Property                            | Description                                                                                                                                                                | Default       | Allowed Values    | Type                              |
-| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------------- | --------------------------------- |
-| template                            | Selects the element that will be cloned each time. You might often want to refer to a piece of template markup for this that is hidden with though the CSS.                | :first        |                   | CSS Selector                      |
-| max                                 | Maximum number of clones that is allowed                                                                                                                                   |               |                   | Integer                           |
-| trigger-element                     | Selector of the element that will add the clone when clicked upon.                                                                                                         | .add-clone    |                   | CSS Selector                      |
-| remove-element                      | Selector of the element that will remove the clone when clicked upon.                                                                                                      | .remove-clone |                   | CSS Selector                      |
-| remove-behaviour or remove-behavior | What should happen when the user clicks on the element to remove a clone? Two choices exist currently. Show a confirmation dialog, or simply remove the clone immediately. | "confirm"     | "confirm", "none" | One of the allowed string values. |
-| clone-element                       | Selector of the individual clone element(s).                                                                                                                               | .clone        |                   | CSS Selector                      |
+| Property   | Description                                                                                                                               | Default       | Type                              |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------------------- |
+| source     | CSS selector to define the source from where the markup should be copied.                                                                 | :first-child  | CSS Selector                      |
+| features   | List of features to activate. Currently only `format` is implemented. Format does prettify the HTML markup with the library `prettier`.   | null          | Comma seperated list of strings.  |
+

src/pat/clone-code/index.html

@@ -11,14 +11,29 @@
     </head>
     <body>
 
-        <h1>Example - clone-code</h1>
+        <h1>Clone Code</h1>
 
-        <p class="clone-ignore">Demo on how to use pat-clone together with pat-syntax-highlight to show the source of any html snippet</p>
+        <h2>Example 1</h2>
+
+        <p class="clone-ignore">
+          Clone the next block and ignore this paragraph which has the `clone-ignore` class.
+        </p>
+
+        <div class="pat-clone-code">
+          <p>Hello.</p>
+        </div>
+
+        <h2>Example 2</h2>
+
+        <p class="clone-ignore">
+          Clone the whole HTML page but ignore this paragraph which has the `clone-ignore` class.
+        </p>
 
         <div class="pat-clone-code"
             data-pat-clone-code="source: html">
           <p>Test paragraph</p>
         </div>
 
+
     </body>
 </html>

src/pat/clone-code/templates/code-wrapper.html

@@ -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/documentation.md

@@ -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.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 = "";

src/pat/validation/validation.test.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.