Merge pull request #6 from contexD/add-json-parsing

Add json parsing

Author: BramKaashoek

package.json

@@ -20,7 +20,6 @@
     "lint": "tsdx lint",
     "prepare": "tsdx build"
   },
-
   "husky": {
     "hooks": {
       "pre-commit": "tsdx lint"
@@ -42,6 +41,7 @@
   "devDependencies": {
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
+    "fast-check": "^2.13.0",
     "husky": "^4.2.5",
     "mutationobserver-shim": "^0.3.7",
     "tsdx": "^0.13.2",

src/abode.ts

@@ -79,7 +79,13 @@ export const getElementProps = (el: Element | HTMLScriptElement): Props => {
     const rawProps = Array.from(el.attributes).filter(attribute =>
       attribute.name.startsWith('data-prop-')
     );
-    rawProps.forEach(prop => (props[getCleanPropName(prop.name)] = prop.value));
+    rawProps.forEach(prop => {
+      try {
+        props[getCleanPropName(prop.name)] = JSON.parse(prop.value);
+      } catch (e) {
+        props[getCleanPropName(prop.name)] = prop.value;
+      }
+    });
   }
 
   return props;

test/abode.test.tsx

@@ -1,3 +1,4 @@
+import * as fc from 'fast-check';
 import {
   getCleanPropName,
   getAbodeElements,
@@ -62,10 +63,35 @@ describe('helper functions', () => {
     const abodeElement = document.createElement('div');
     abodeElement.setAttribute('data-component', 'TestComponent');
     abodeElement.setAttribute('data-prop-test-prop', 'testPropValue');
+    abodeElement.setAttribute('data-prop-number-prop', '12345');
+    abodeElement.setAttribute('data-prop-null-prop', 'null');
+    abodeElement.setAttribute('data-prop-true-prop', 'true');
+    abodeElement.setAttribute('data-prop-empty-prop', '');
+    abodeElement.setAttribute(
+      'data-prop-json-prop',
+      '{"id": 12345, "product": "keyboard", "variant": {"color": "blue"}}'
+    );
 
     const props = getElementProps(abodeElement);
 
-    expect(props).toEqual({ testProp: 'testPropValue' });
+    expect(props).toEqual({
+      testProp: 'testPropValue',
+      numberProp: 12345,
+      nullProp: null,
+      trueProp: true,
+      emptyProp: '',
+      jsonProp: { id: 12345, product: 'keyboard', variant: { color: 'blue' } },
+    });
+  });
+  it('getElementProps parses JSON', () => {
+    fc.assert(
+      fc.property(fc.jsonObject({ maxDepth: 10 }), data => {
+        const abodeElement = document.createElement('div');
+        abodeElement.setAttribute('data-prop-test-prop', JSON.stringify(data));
+        const props = getElementProps(abodeElement);
+        expect(props.testProp).toEqual(data);
+      })
+    );
   });
 
   it('setAttributes', () => {

yarn.lock

@@ -2612,6 +2612,13 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
+fast-check@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/fast-check/-/fast-check-2.13.0.tgz#92a50a6a39b58760d4b0b52b12f98f28a9f020f6"
+  integrity sha512-IOfzKm/SCA+jpUEgAfqAuxHYPmgtmpnnwljQmYPRGrqYczcTKApXKHza/SNxFxYkecWfZilYa0DJdBvqz1bcSw==
+  dependencies:
+    pure-rand "^4.1.1"
+
 fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -4706,6 +4713,11 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+pure-rand@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-4.1.2.tgz#cbad2a3e3ea6df0a8d80d8ba204779b5679a5205"
+  integrity sha512-uLzZpQWfroIqyFWmX/pl0OL2JHJdoU3dbh0dvZ25fChHFJJi56J5oQZhW6QgbT2Llwh1upki84LnTwlZvsungA==
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"