Merge pull request #889 from Patternslib/parse-json

fix data attributes JSON parsing

Author: thet

src/core/parser.js

@@ -15,7 +15,7 @@ class ArgumentParser {
         this.log = logging.getLogger(name + ".parser");
 
         this.group_pattern = /([a-z][a-z0-9]*)-([A-Z][a-z0-0\-]*)/i;
-        this.json_param_pattern = /^\s*{/i;
+        this.json_param_pattern = /^\s*\[?\s*{/i;
         this.named_param_pattern = /^\s*([a-z][a-z0-9\-]*)\s*:(.*)/i;
         this.token_pattern = /((["']).*?(?!\\)\2)|\s*(\S+)\s*/g;
     }
@@ -442,10 +442,14 @@ class ArgumentParser {
                 continue;
             }
             const _parse = this._parse.bind(this);
+
             if (data.match(/&&/)) {
                 frame = data.split(/\s*&&\s*/).map(_parse);
             } else {
-                frame = [_parse(data)];
+                frame = _parse(data);
+            }
+            if (!Array.isArray(frame)) {
+                frame = [frame];
             }
             final_length = Math.max(frame.length, final_length);
             stack.push(frame);

src/core/parser.test.js

@@ -208,6 +208,112 @@ describe("The Patterns parser", function () {
             expect(_.isEqual(opts["json-color"], { color: "pink" })).toBeTruthy();
         });
 
+        describe("JSON data attributes", function () {
+            it("parses JSON objects", function (done) {
+                const parser = new ArgumentParser("mypattern");
+                parser.addArgument("arg1", 0);
+                const content = document.createElement("div");
+                content.innerHTML = `
+                    <div data-pat-mypattern='{ "arg1": 1 }'></div>
+                `;
+                const opts = parser.parse(content.querySelector("[data-pat-mypattern]"));
+                expect(opts).toEqual({
+                    arg1: 1,
+                });
+
+                done();
+            });
+            it("parses JSON arrays", function (done) {
+                const parser = new ArgumentParser("mypattern");
+                parser.addArgument("arg1", 0);
+                const content = document.createElement("div");
+                content.innerHTML = `
+                    <div data-pat-mypattern='[{ "arg1": 1 }]'></div>
+                `;
+                const opts = parser.parse(content.querySelector("[data-pat-mypattern]"));
+                expect(opts).toEqual({
+                    arg1: 1,
+                });
+
+                done();
+            });
+            it("parses JSON arrays with multiple configs", function (done) {
+                const parser = new ArgumentParser("mypattern");
+                parser.addArgument("arg1", 0);
+                parser.addArgument("arg2", false);
+                const content = document.createElement("div");
+                content.innerHTML = `
+                    <div data-pat-mypattern='
+                        [
+                            {
+                                "arg1": 1,
+                                "arg2": true
+                            },
+                            {
+                                "arg1": 2,
+                                "arg2": false
+                            }
+                        ]
+                    '></div>
+                `;
+                const opts = parser.parse(
+                    content.querySelector("[data-pat-mypattern]"),
+                    {},
+                    true
+                );
+                expect(opts.length).toBe(2);
+                expect(opts[0]).toEqual({
+                    arg1: 1,
+                    arg2: true,
+                });
+                expect(opts[1]).toEqual({
+                    arg1: 2,
+                    arg2: false,
+                });
+
+                done();
+            });
+            it("parses JSON arrays and includes defaults", function (done) {
+                const parser = new ArgumentParser("mypattern");
+                parser.addArgument("arg1", 0);
+                parser.addArgument("arg2", "okay");
+                parser.addArgument("arg3", false);
+                const content = document.createElement("div");
+                content.innerHTML = `
+                    <div data-pat-mypattern='{"arg1": 1}'></div>
+                `;
+                const opts = parser.parse(content.querySelector("[data-pat-mypattern]"));
+                expect(opts).toEqual({
+                    arg1: 1,
+                    arg2: "okay",
+                    arg3: false,
+                });
+
+                done();
+            });
+            it("parses JSON arrays and does not include defaults if set so", function (done) {
+                const parser = new ArgumentParser("mypattern");
+                parser.addArgument("arg1", 0);
+                parser.addArgument("arg2", "okay");
+                parser.addArgument("arg3", false);
+                const content = document.createElement("div");
+                content.innerHTML = `
+                    <div data-pat-mypattern='{"arg1": 1}'></div>
+                `;
+                const opts = parser.parse(
+                    content.querySelector("[data-pat-mypattern]"),
+                    {},
+                    false,
+                    false
+                );
+                expect(opts).toEqual({
+                    arg1: 1,
+                });
+
+                done();
+            });
+        });
+
         describe("the shorthand notation", function () {
             it("Single argument", function () {
                 var parser = new ArgumentParser();