Merge pull request #12 from contexD/ie11-json-parse-bug

IE11 json parse bug

Author: BramKaashoek

src/abode.ts

@@ -80,10 +80,20 @@ export const getElementProps = (el: Element | HTMLScriptElement): Props => {
       attribute.name.startsWith('data-prop-')
     );
     rawProps.forEach(prop => {
-      try {
-        props[getCleanPropName(prop.name)] = JSON.parse(prop.value);
-      } catch (e) {
+      if (/^0+\d+$/.test(prop.value)) {
+        /* 
+        ie11 bug fix; 
+        in ie11 JSON.parse will parse a string with leading zeros followed
+        by digits, e.g. '00012' will become 12, whereas in other browsers
+        an exception will be thrown by JSON.parse
+        */
         props[getCleanPropName(prop.name)] = prop.value;
+      } else {
+        try {
+          props[getCleanPropName(prop.name)] = JSON.parse(prop.value);
+        } catch (e) {
+          props[getCleanPropName(prop.name)] = prop.value;
+        }
       }
     });
   }

test/abode.test.tsx

@@ -66,6 +66,7 @@ describe('helper functions', () => {
     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-leading-zeros', '0012');
     abodeElement.setAttribute('data-prop-empty-prop', '');
     abodeElement.setAttribute(
       'data-prop-json-prop',
@@ -79,6 +80,7 @@ describe('helper functions', () => {
       numberProp: 12345,
       nullProp: null,
       trueProp: true,
+      leadingZeros: '0012',
       emptyProp: '',
       jsonProp: { id: 12345, product: 'keyboard', variant: { color: 'blue' } },
     });
@@ -94,6 +96,23 @@ describe('helper functions', () => {
     );
   });
 
+  it('getElementProps does not parse strings with leading zeros followed by other digits', () => {
+    const strWithLeadingZeros = fc
+      .tuple(fc.integer(1, 10), fc.integer())
+      .map(t => {
+        const [numberOfZeros, integer] = t;
+        return '0'.repeat(numberOfZeros) + integer.toString();
+      });
+    fc.assert(
+      fc.property(strWithLeadingZeros, data => {
+        const abodeElement = document.createElement('div');
+        abodeElement.setAttribute('data-prop-test-prop', data);
+        const props = getElementProps(abodeElement);
+        expect(props.testProp).toEqual(data);
+      })
+    );
+  });
+
   it('setAttributes', () => {
     const abodeElement = document.createElement('div');