Thet modernize mockup parser

src/core/mockup-parser.js

@@ -1,6 +1,7 @@
+import utils from "./utils";
 
-var parser = {
-    getOptions($el, patternName, options) {
+const parser = {
+    getOptions(el, pattern_name, options) {
         /* This is the Mockup parser. An alternative parser for Patternslib
          * patterns.
          *
@@ -9,37 +10,42 @@ var parser = {
          *
          * It parses a DOM element for pattern configuration options.
          */
+
+        el = utils.jqToNode(el);
         options = options || {};
+        if (!el) {
+            return options;
+        }
+
         // get options from parent element first, stop if element tag name is 'body'
-        if ($el.length !== 0 && $el[0].nodeName !== "BODY") {
-            options = this.getOptions($el.parent(), patternName, options);
+        if (el.nodeName !== "BODY") {
+            options = this.getOptions(el.parentElement, pattern_name, options);
         }
         // collect all options from element
-        let elOptions = {};
-        if ($el.length !== 0) {
-            elOptions = $el.data("pat-" + patternName);
-            if (elOptions) {
-                // parse options if string
-                if (typeof elOptions === "string") {
-                    const tmpOptions = {};
-                    elOptions.split(";").forEach(item => {
-                        item = item.split(":");
-                        item.reverse();
-                        let key = item.pop();
-                        key = key.replace(/^\s+|\s+$/g, ""); // trim
-                        item.reverse();
-                        let value = item.join(":");
-                        value = value.replace(/^\s+|\s+$/g, ""); // trim
-                        tmpOptions[key] = value;
-                    });
-                    elOptions = tmpOptions;
-                }
+        let el_options = {};
+        // Use `getAttribute` over `dataset` because dataset uses camelCasing of data attributes.
+        el_options = el.getAttribute(`data-pat-${pattern_name}`);
+        if (el_options) {
+            // parse options if string
+            if (typeof el_options === "string") {
+                const tmp_options = {};
+                el_options.split(";").forEach((item) => {
+                    item = item.split(":");
+                    item.reverse();
+                    let key = item.pop();
+                    key = key.replace(/^\s+|\s+$/g, ""); // trim
+                    item.reverse();
+                    let value = item.join(":");
+                    value = value.replace(/^\s+|\s+$/g, ""); // trim
+                    tmp_options[key] = value;
+                });
+                el_options = tmp_options;
             }
         }
         return {
             ...options,
-            ...elOptions,
-        }
+            ...el_options,
+        };
     },
 };
 

src/core/mockup-parser.test.js

@@ -14,15 +14,15 @@ describe("The mockup-parser", function () {
     it("parses the data attribute of nested nodes", function () {
         const $el = $(`
             <div data-pat-testpattern="parentOption1: value1; parentOption2: value2">
-                <span data-pat-testpattern="option1: subvalue1; option2: subvalue2">
+                <span class="pat-testpattern" data-pat-testpattern="option1: subvalue1; option2: subvalue2">
                     nested mockup parser test
                 </span>
             </div>`);
-        const options = mockupParser.getOptions($el, "testpattern");
+        const options = mockupParser.getOptions($(".pat-testpattern", $el), "testpattern");
         expect(options.parentOption1).toBe("value1");
         expect(options.parentOption2).toBe("value2");
-        expect(options.option1).toBe(undefined);
-        expect(options.option2).toBe(undefined);
+        expect(options.option1).toBe("subvalue1");
+        expect(options.option2).toBe("subvalue2");
     });
     it("parses the data attribute of a single node and preserves injected options", function () {
         const $el = $(`

src/core/utils.js

@@ -618,7 +618,7 @@ const isIE = () => {
 
 const jqToNode = (el) => {
     // Return a DOM node if a jQuery node was passed.
-    if (el.jquery) {
+    if (el?.jquery) {
         el = el[0];
     }
     return el;

src/core/utils.test.js

@@ -650,6 +650,13 @@ describe("core.utils tests", () => {
 
             done();
         });
+
+        it("it returns the empty value, if no element was passed.", (done) => {
+            expect(utils.jqToNode(null)).toBe(null);
+            expect(utils.jqToNode(undefined)).toBe(undefined);
+
+            done();
+        });
     });
 
     describe("ensureArray tests", () => {