Use flatted instead of CircularJSON

- Will break old localStorage caches.

Author: pascalgagneur

lib/schemas/schema.js

@@ -3,8 +3,7 @@ import textSchema from './textSchema';
 import optionsSchema from './optionsSchema';
 import customSchema from './customSchema';
 import updateSchema from './updateSchema';
-
-const JSON = require('circular-json');
+import { stringify } from 'flatted';
 
 const schema = {
   parse(step) {
@@ -21,14 +20,14 @@ const schema = {
     } else if (step.update) {
       parser = updateSchema;
     } else {
-      throw new Error(`The step ${JSON.stringify(step)} is invalid`);
+      throw new Error(`The step ${stringify(step)} is invalid`);
     }
 
     for (let i = 0, len = parser.length; i < len; i += 1) {
       const { key, types, required } = parser[i];
 
       if (!step[key] && required) {
-        throw new Error(`Key '${key}' is required in step ${JSON.stringify(step)}`);
+        throw new Error(`Key '${key}' is required in step ${stringify(step)}`);
       } else if (step[key]) {
         if (types[0] !== 'any' && types.indexOf(typeof step[key]) < 0) {
           throw new Error(

lib/storage.js

@@ -1,4 +1,4 @@
-const JSON = require('circular-json');
+import { stringify, parse } from 'flatted';
 
 /* istanbul ignore next */
 const getData = (params, callback) => {
@@ -7,54 +7,59 @@ const getData = (params, callback) => {
   const renderedSteps = [steps[currentStep.id]];
   const previousSteps = [steps[currentStep.id]];
   const previousStep = {};
+  const unParsedCache = localStorage.getItem(cacheName);
 
-  if (cache && localStorage.getItem(cacheName)) {
-    const data = JSON.parse(localStorage.getItem(cacheName));
-    const lastStep = data.renderedSteps[data.renderedSteps.length - 1];
+  if (cache && unParsedCache) {
+    try {
+      const data = parse(unParsedCache);
+      const lastStep = data.renderedSteps[data.renderedSteps.length - 1];
 
-    if (lastStep && lastStep.end) {
-      localStorage.removeItem(cacheName);
-    } else {
-      for (let i = 0, len = data.renderedSteps.length; i < len; i += 1) {
-        const renderedStep = data.renderedSteps[i];
-        // remove delay of cached rendered steps
-        data.renderedSteps[i].delay = 0;
-        // flag used to avoid call triggerNextStep in cached rendered steps
-        data.renderedSteps[i].rendered = true;
+      if (lastStep && lastStep.end) {
+        localStorage.removeItem(cacheName);
+      } else {
+        for (let i = 0, len = data.renderedSteps.length; i < len; i += 1) {
+          const renderedStep = data.renderedSteps[i];
+          // remove delay of cached rendered steps
+          data.renderedSteps[i].delay = 0;
+          // flag used to avoid call triggerNextStep in cached rendered steps
+          data.renderedSteps[i].rendered = true;
 
-        // an error is thrown when render a component from localStorage.
-        // So it's necessary reassing the component
-        if (renderedStep.component) {
-          const { id } = renderedStep;
-          data.renderedSteps[i].component = steps[id].component;
+          // an error is thrown when render a component from localStorage.
+          // So it's necessary reassing the component
+          if (renderedStep.component) {
+            const { id } = renderedStep;
+            data.renderedSteps[i].component = steps[id].component;
+          }
         }
-      }
 
-      const { trigger, end, options } = data.currentStep;
-      const { id } = data.currentStep;
+        const { trigger, end, options } = data.currentStep;
+        const { id } = data.currentStep;
 
-      if (options) {
-        delete data.currentStep.rendered;
-      }
-
-      // add trigger function to current step
-      if (!trigger && !end) {
         if (options) {
-          for (let i = 0; i < options.length; i += 1) {
-            data.currentStep.options[i].trigger = steps[id].options[i].trigger;
+          delete data.currentStep.rendered;
+        }
+
+        // add trigger function to current step
+        if (!trigger && !end) {
+          if (options) {
+            for (let i = 0; i < options.length; i += 1) {
+              data.currentStep.options[i].trigger = steps[id].options[i].trigger;
+            }
+          } else {
+            data.currentStep.trigger = steps[id].trigger;
           }
-        } else {
-          data.currentStep.trigger = steps[id].trigger;
         }
-      }
 
-      // execute callback function to enable input if last step is
-      // waiting user type
-      if (data.currentStep.user) {
-        callback();
-      }
+        // execute callback function to enable input if last step is
+        // waiting user type
+        if (data.currentStep.user) {
+          callback();
+        }
 
-      return data;
+        return data;
+      }
+    } catch (error) {
+      console.info(`Unable to parse cache named:${cacheName}. \nThe cache where probably created with an older version of react-simple-chatbot.\n`, error);
     }
   }
 
@@ -68,7 +73,7 @@ const getData = (params, callback) => {
 
 /* istanbul ignore next */
 const setData = (cacheName, cachedData) => {
-  const data = JSON.parse(JSON.stringify(cachedData));
+  const data = parse(stringify(cachedData));
   // clean components
   for (const key in data) {
     for (let i = 0, len = data[key].length; i < len; i += 1) {
@@ -78,7 +83,7 @@ const setData = (cacheName, cachedData) => {
     }
   }
 
-  localStorage.setItem(cacheName, JSON.stringify(data));
+  localStorage.setItem(cacheName, stringify(data));
 };
 
 export { getData, setData };

package-lock.json

@@ -84,11 +84,11 @@
     "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
-    "circular-json": "^0.3.1",
     "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-prettier": "^3.0.1",
     "onchange": "^5.2.0",
     "prettier": "^1.16.4",
+    "flatted": "^2.0.0",
     "prop-types": "^15.6.0",
     "random-id": "0.0.2",
     "react": "^16.4.1",
@@ -99,4 +99,4 @@
     "react": "^16.3.0",
     "react-dom": "^16.3.0"
   }
-}
+}

package.json

@@ -12,6 +12,8 @@ import {
 import { CloseIcon } from '../../lib/icons';
 import { TextStep } from '../../lib/steps_components';
 
+import { parse } from 'flatted';
+
 const CustomComponent = () => (
   <div />
 );
@@ -24,7 +26,7 @@ describe('ChatBot', () => {
         botDelay={0}
         userDelay={0}
         customDelay={0}
-        handleEnd={() => {}}
+        handleEnd={() => { }}
         steps={[
           {
             id: '1',
@@ -125,7 +127,7 @@ describe('ChatBot', () => {
         botDelay={0}
         userDelay={0}
         customDelay={0}
-        handleEnd={() => {}}
+        handleEnd={() => { }}
         steps={[
           {
             id: '1',
@@ -148,7 +150,7 @@ describe('ChatBot', () => {
         botDelay={0}
         userDelay={0}
         customDelay={0}
-        handleEnd={() => {}}
+        handleEnd={() => { }}
         steps={[
           {
             id: '1',
@@ -173,7 +175,7 @@ describe('ChatBot', () => {
         cache={true}
         userDelay={0}
         customDelay={0}
-        handleEnd={() => {}}
+        handleEnd={() => { }}
         steps={[
           {
             id: '1',
@@ -205,7 +207,7 @@ describe('ChatBot', () => {
     });
 
     it('should cache the steps', () => {
-      const data = JSON.parse(localStorage.getItem('rsc_cache'));
+      const data = parse(localStorage.getItem('rsc_cache'));
       expect(data.renderedSteps.length).to.be.equal(2);
     });
   });
@@ -241,7 +243,7 @@ describe('ChatBot', () => {
             botDelay={0}
             userDelay={0}
             customDelay={0}
-            handleEnd={() => {}}
+            handleEnd={() => { }}
             steps={[
               {
                 id: '1',

tests/lib/ChatBot.spec.js

@@ -2,26 +2,25 @@ import React from 'react';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
 import schema from '../../lib/schemas/schema';
-
-const JSON = require('circular-json');
+import { stringify } from 'flatted';
 
 describe('schema', () => {
   it('should throw a invalid step error', () => {
     const step = { test: 'test' };
     expect(() => {
       schema.parse(step);
-    }).to.throw(Error, `The step ${JSON.stringify(step)} is invalid`);
+    }).to.throw(Error, `The step ${stringify(step)} is invalid`);
   });
 
   it('should throw a key required error', () => {
     const step = { message: 'test' };
     expect(() => {
       schema.parse(step);
-    }).to.throw(Error, `Key 'id' is required in step ${JSON.stringify(step)}`);
+    }).to.throw(Error, `Key 'id' is required in step ${stringify(step)}`);
   });
 
   it('should throw a key type error', () => {
-    const step = { id: () => {}, options: [] };
+    const step = { id: () => { }, options: [] };
     expect(() => {
       schema.parse(step);
     }).to.throw(Error, 'The type of \'id\' value must be string or number instead of function');
@@ -33,8 +32,8 @@ describe('schema', () => {
       message: 'test',
       test: 'test',
     });
-    const resultStep = JSON.stringify({ id: '1', message: 'test' });
-    expect(JSON.stringify(step)).to.be.equal(resultStep);
+    const resultStep = stringify({ id: '1', message: 'test' });
+    expect(stringify(step)).to.be.equal(resultStep);
   });
 
   it('should not throw error to a user step', () => {