From e46a802e1d31657b741e25fc9608ec85cfee9ef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartek=20Bu=C5=82at?= <bartek.bulat@gmail.com>
Date: Thu, 9 Jan 2020 12:23:53 +0100
Subject: [PATCH] Replace JS eval with split/reduce call

In default CSP setup `eval` is disabled. The code can be easily
replaced by split/reduce keeping the logic but avoiding `eval`.
---
 priv/js/react_phoenix.js | 2 +-
 src/react_phoenix.js     | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/priv/js/react_phoenix.js b/priv/js/react_phoenix.js
index ed03754..680bd78 100644
--- a/priv/js/react_phoenix.js
+++ b/priv/js/react_phoenix.js
@@ -1 +1 @@
-"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var a=0;a<t.length;a++){var r=t[a];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function _createClass(e,t,a){return t&&_defineProperties(e.prototype,t),a&&_defineProperties(e,a),e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_reactDom=_interopRequireDefault(require("react-dom")),ReactPhoenix=function(){function ReactPhoenix(){_classCallCheck(this,ReactPhoenix)}return _createClass(ReactPhoenix,null,[{key:"init",value:function init(){var elements=document.querySelectorAll("[data-react-class]");Array.prototype.forEach.call(elements,function(e){var targetId=document.getElementById(e.dataset.reactTargetId),targetDiv=targetId||e,reactProps=e.dataset.reactProps?e.dataset.reactProps:"{}",reactElement=_react.default.createElement(eval(e.dataset.reactClass),JSON.parse(reactProps));_reactDom.default.render(reactElement,targetDiv)})}}]),ReactPhoenix}();exports.default=ReactPhoenix,document.addEventListener("DOMContentLoaded",function(e){ReactPhoenix.init()});
\ No newline at end of file
+"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var a=t[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_reactDom=_interopRequireDefault(require("react-dom")),ReactPhoenix=function(){function e(){_classCallCheck(this,e)}return _createClass(e,null,[{key:"init",value:function(){var e=document.querySelectorAll("[data-react-class]");Array.prototype.forEach.call(e,function(e){var t=document.getElementById(e.dataset.reactTargetId),r=t||e,a=e.dataset.reactProps?e.dataset.reactProps:"{}",n=Array.prototype.reduce.call(e.dataset.reactClass.split("."),function(e,t){return e[t]},window),o=_react.default.createElement(n,JSON.parse(a));_reactDom.default.render(o,r)})}}]),e}();exports.default=ReactPhoenix,document.addEventListener("DOMContentLoaded",function(e){ReactPhoenix.init()});
\ No newline at end of file
diff --git a/src/react_phoenix.js b/src/react_phoenix.js
index 2a0a2aa..310f222 100644
--- a/src/react_phoenix.js
+++ b/src/react_phoenix.js
@@ -8,7 +8,8 @@ export default class ReactPhoenix {
       const targetId = document.getElementById(e.dataset.reactTargetId)
       const targetDiv = targetId ? targetId : e
       const reactProps = e.dataset.reactProps ? e.dataset.reactProps : "{}"
-      const reactElement = React.createElement(eval(e.dataset.reactClass), JSON.parse(reactProps))
+      const reactClass = Array.prototype.reduce.call(e.dataset.reactClass.split('.'), (acc, el) => { return acc[el] }, window);
+      const reactElement = React.createElement(reactClass, JSON.parse(reactProps))
       ReactDOM.render(reactElement, targetDiv)
     })
   }