Merge pull request #18 from tomLadder/dynamic-loading-fix

fixed dynamic loading bug

Author: tomLadder

src/__tests__/__snapshots__/jsBuilder.test.js.snap

@@ -58,33 +58,41 @@ exports[`jsBuilder getJavascriptSource works 1`] = `
               chart.resize();
           };
   
-          window.document.addEventListener('message', function(e) {
-              var req = parse(e.data);
-  
-              switch(req.types) {
-                case \\"SET_OPTION\\":
-                  chart.setOption(req.payload.option, req.payload.notMerge,req.payload.lazyUpate);
-                  break;
-                case \\"CLEAR\\":
-                  chart.clear();
-                  break;
-                case \\"GET_OPTION\\":
-                  var option = chart.getOption();
-                  var data = {};
+          function processMessage (e) {
+            var req = parse(e.data);
   
-                  if(req.properties !== undefined) {
-                      req.properties.forEach((prop) => data[prop] = option[prop]);
-                  } else {
-                      var data = {
-                          option: option
-                       };
-                  }
+            switch(req.types) {
+              case \\"SET_OPTION\\":
+                chart.setOption(req.payload.option, req.payload.notMerge,req.payload.lazyUpate);
+                break;
+              case \\"CLEAR\\":
+                chart.clear();
+                break;
+              case \\"GET_OPTION\\":
+                var option = chart.getOption();
+                var data = {};
+
+                if(req.properties !== undefined) {
+                    req.properties.forEach((prop) => data[prop] = option[prop]);
+                } else {
+                    var data = {
+                        option: option
+                     };
+                }
+
+                sendCallbackData(req.uuid, data);
+                break;
+              default:
+                break;
+            }
+          }
   
-                  sendCallbackData(req.uuid, data);
-                  break;
-                default:
-                  break;
-              }
+          window.document.addEventListener('message', function(e) {
+            processMessage(e);
+          });
+
+          window.addEventListener('message', function(e) {
+            processMessage(e);
           });
   
           undefined

src/index.js

@@ -67,19 +67,23 @@ class ECharts extends Component {
   }
 
   onMessage = e => {
-    if (!e) return null;
+    try {
+      if (!e) return null;
 
-    const { onData } = this.props;
+      const { onData } = this.props;
 
-    const data = JSON.parse(e.nativeEvent.data);
+      const data = JSON.parse(e.nativeEvent.data);
 
-    if (data.types === "DATA") {
-      onData(data.payload);
-    } else if (data.types === "CALLBACK") {
-      /* eslint-disable no-case-declarations */
-      const { uuid } = data;
-      /* eslint-enable no-case-declarations */
-      this.callbacks[uuid](data.payload);
+      if (data.types === "DATA") {
+        onData(data.payload);
+      } else if (data.types === "CALLBACK") {
+        /* eslint-disable no-case-declarations */
+        const { uuid } = data;
+        /* eslint-enable no-case-declarations */
+        this.callbacks[uuid](data.payload);
+      }
+    } catch (error) {
+      console.log(error);
     }
   };
 

src/jsBuilder.js

@@ -90,33 +90,41 @@ export const getJavascriptSource = (props) => {
               chart.resize();
           };
   
-          window.document.addEventListener('message', function(e) {
-              var req = parse(e.data);
-  
-              switch(req.types) {
-                case "SET_OPTION":
-                  chart.setOption(req.payload.option, req.payload.notMerge,req.payload.lazyUpate);
-                  break;
-                case "CLEAR":
-                  chart.clear();
-                  break;
-                case "GET_OPTION":
-                  var option = chart.getOption();
-                  var data = {};
+          function processMessage (e) {
+            var req = parse(e.data);
   
-                  if(req.properties !== undefined) {
-                      req.properties.forEach((prop) => data[prop] = option[prop]);
-                  } else {
-                      var data = {
-                          option: option
-                       };
-                  }
+            switch(req.types) {
+              case "SET_OPTION":
+                chart.setOption(req.payload.option, req.payload.notMerge,req.payload.lazyUpate);
+                break;
+              case "CLEAR":
+                chart.clear();
+                break;
+              case "GET_OPTION":
+                var option = chart.getOption();
+                var data = {};
+
+                if(req.properties !== undefined) {
+                    req.properties.forEach((prop) => data[prop] = option[prop]);
+                } else {
+                    var data = {
+                        option: option
+                     };
+                }
+
+                sendCallbackData(req.uuid, data);
+                break;
+              default:
+                break;
+            }
+          }
   
-                  sendCallbackData(req.uuid, data);
-                  break;
-                default:
-                  break;
-              }
+          window.document.addEventListener('message', function(e) {
+            processMessage(e);
+          });
+
+          window.addEventListener('message', function(e) {
+            processMessage(e);
           });
   
           ${props.additionalCode}