react-form-with-constraints-tools - npm Package Compare versions

Comparing version 0.13.0 to 0.14.0

dist/react-form-with-constraints-tools.development.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('prop-types'), require('react-form-with-constraints')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'prop-types', 'react-form-with-constraints'], factory) :
-    (global = global || self, factory(global.ReactFormWithConstraintsTools = {}, global.React, global.ReactDOM, global.PropTypes, global.ReactFormWithConstraints));
-}(this, function (exports, React, ReactDOM, PropTypes, reactFormWithConstraints) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('react-form-with-constraints')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'react-form-with-constraints'], factory) :
+    (global = global || self, factory(global.ReactFormWithConstraintsTools = {}, global.React, global.PropTypes, global.ReactFormWithConstraints));
+}(this, function (exports, React, PropTypes, reactFormWithConstraints) { 'use strict';
 
@@ -36,2 +36,25 @@ /*! *****************************************************************************
 
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
     function __values(o) {
@@ -48,8 +71,19 @@ var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
 
-    function stringifyWithUndefinedAndWithoutPropertyQuotes(obj, space) {
+    function beautifulStringify(obj, space) {
         var str = JSON.stringify(obj, function (_key, value) { return (value === undefined ? '__undefined__' : value); }, space);
         str = str.replace(/"__undefined__"/g, 'undefined');
         str = str.replace(/"([^"]+)":/g, '$1:');
+        str = str.replace(/: "(.*[\\"].*)",/g, ': $1,');
+        str = str.replace(/\\"/g, '"');
         return str;
     }
+    function normalizeFieldElementProperty(fields) {
+        return fields.map(function (field) {
+            var element = field.element, otherProps = __rest(field, ["element"]);
+            return element
+                ? __assign({ element: reactFormWithConstraints.isHTMLInput(element)
+                        ? element.outerHTML
+                        : element.props }, otherProps) : field;
+        });
+    }
     var DisplayFields = (function (_super) {
@@ -64,22 +98,18 @@ __extends(DisplayFields, _super);
         }
-        DisplayFields.prototype.componentWillMount = function () {
-            var form = this.context.form;
-            form.fieldsStore.addListener(reactFormWithConstraints.FieldEvent.Added, this.reRender);
-            form.fieldsStore.addListener(reactFormWithConstraints.FieldEvent.Removed, this.reRender);
-            form.addFieldDidValidateEventListener(this.reRender);
-            form.addFieldDidResetEventListener(this.reRender);
+        DisplayFields.prototype.componentDidMount = function () {
+            this.context.form.fieldsStore.addListener(reactFormWithConstraints.FieldEvent.Added, this.reRender);
+            this.context.form.fieldsStore.addListener(reactFormWithConstraints.FieldEvent.Removed, this.reRender);
+            this.context.form.addFieldDidValidateEventListener(this.reRender);
+            this.context.form.addFieldDidResetEventListener(this.reRender);
         };
         DisplayFields.prototype.componentWillUnmount = function () {
-            var form = this.context.form;
-            form.fieldsStore.removeListener(reactFormWithConstraints.FieldEvent.Added, this.reRender);
-            form.fieldsStore.removeListener(reactFormWithConstraints.FieldEvent.Removed, this.reRender);
-            form.removeFieldDidValidateEventListener(this.reRender);
-            form.removeFieldDidResetEventListener(this.reRender);
+            this.context.form.fieldsStore.removeListener(reactFormWithConstraints.FieldEvent.Added, this.reRender);
+            this.context.form.fieldsStore.removeListener(reactFormWithConstraints.FieldEvent.Removed, this.reRender);
+            this.context.form.removeFieldDidValidateEventListener(this.reRender);
+            this.context.form.removeFieldDidResetEventListener(this.reRender);
         };
         DisplayFields.prototype.render = function () {
-            var str = stringifyWithUndefinedAndWithoutPropertyQuotes(this.context.form.fieldsStore.fields, 2);
+            var str = beautifulStringify(normalizeFieldElementProperty(this.context.form.fieldsStore.fields), 2);
             str = str.replace(/{\s+key: (.*),\s+type: (.*),\s+show: (.*)\s+}/g, '{ key: $1, type: $2, show: $3 }');
-            return React.createElement("pre", { style: { fontSize: 'small' } },
-                "Fields = ",
-                str);
+            return str;
         };
@@ -115,3 +145,5 @@ DisplayFields.contextTypes = {
         function FieldFeedback() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.rootEl = null;
+            return _this;
         }
@@ -128,2 +160,4 @@ FieldFeedback.prototype.getTextDecoration = function () {
                     break;
+                default:
+                    textDecoration = '';
             }
@@ -133,4 +167,5 @@ return textDecoration;
         FieldFeedback.prototype.render = function () {
+            var _this = this;
             var _a = this.state.validation, key = _a.key, type = _a.type;
-            return (React.createElement("li", null,
+            return (React.createElement("li", { ref: function (rootEl) { return (_this.rootEl = rootEl); } },
                 React.createElement("span", { style: { textDecoration: this.getTextDecoration() } },
@@ -147,4 +182,3 @@ "key=\"",
             var e_1, _a;
-            var el = ReactDOM.findDOMNode(this);
-            var fieldFeedbackSpans = el.querySelectorAll('[data-feedback]');
+            var fieldFeedbackSpans = this.rootEl.querySelectorAll('[data-feedback]');
             try {
@@ -163,3 +197,3 @@ for (var fieldFeedbackSpans_1 = __values(fieldFeedbackSpans), fieldFeedbackSpans_1_1 = fieldFeedbackSpans_1.next(); !fieldFeedbackSpans_1_1.done; fieldFeedbackSpans_1_1 = fieldFeedbackSpans_1.next()) {
             }
-            var li = el.closest('li.async');
+            var li = this.rootEl.closest('li.async');
             if (li !== null) {
@@ -171,4 +205,4 @@ var async = li.querySelector('span[style]');
             if (type === reactFormWithConstraints.FieldFeedbackType.WhenValid) {
-                var span = el.querySelector('span[style]');
-                var whenValid = el.querySelector("span." + this.props.classes.valid);
+                var span = this.rootEl.querySelector('span[style]');
+                var whenValid = this.rootEl.querySelector("span." + this.props.classes.valid);
                 span.style.textDecoration = whenValid !== null ? '' : 'line-through';
@@ -182,15 +216,17 @@ }
         function Async() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.rootEl = null;
+            return _this;
         }
-        Async.prototype.getTextDecoration = function () {
+        Async.getTextDecoration = function () {
             return 'line-through dotted';
         };
-        Async.prototype.componentWillUpdate = function () {
-            var el = ReactDOM.findDOMNode(this);
-            var async = el.querySelector('span[style]');
-            async.style.textDecoration = this.getTextDecoration();
+        Async.prototype.componentDidUpdate = function () {
+            var async = this.rootEl.querySelector('span[style]');
+            async.style.textDecoration = Async.getTextDecoration();
         };
         Async.prototype.render = function () {
-            return (React.createElement("li", { className: "async" },
-                React.createElement("span", { style: { textDecoration: this.getTextDecoration() } }, "Async"),
+            var _this = this;
+            return (React.createElement("li", { className: "async", ref: function (rootEl) { return (_this.rootEl = rootEl); } },
+                React.createElement("span", { style: { textDecoration: Async.getTextDecoration() } }, "Async"),
                 React.createElement("ul", null, _super.prototype.render.call(this))));
@@ -197,0 +233,0 @@ };

dist/react-form-with-constraints-tools.production.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom"),require("prop-types"),require("react-form-with-constraints")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","react-form-with-constraints"],t):t((e=e||self).ReactFormWithConstraintsTools={},e.React,e.ReactDOM,e.PropTypes,e.ReactFormWithConstraints)}(this,function(e,n,c,t,d){"use strict";var o=function(e,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};function r(e,t){function r(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var i,s=(r(l,i=n.Component),l.prototype.componentWillMount=function(){var e=this.context.form;e.fieldsStore.addListener(d.FieldEvent.Added,this.reRender),e.fieldsStore.addListener(d.FieldEvent.Removed,this.reRender),e.addFieldDidValidateEventListener(this.reRender),e.addFieldDidResetEventListener(this.reRender)},l.prototype.componentWillUnmount=function(){var e=this.context.form;e.fieldsStore.removeListener(d.FieldEvent.Added,this.reRender),e.fieldsStore.removeListener(d.FieldEvent.Removed,this.reRender),e.removeFieldDidValidateEventListener(this.reRender),e.removeFieldDidResetEventListener(this.reRender)},l.prototype.render=function(){var e=function(e,t){var r=JSON.stringify(e,function(e,t){return void 0===t?"__undefined__":t},t);return r=(r=r.replace(/"__undefined__"/g,"undefined")).replace(/"([^"]+)":/g,"$1:")}(this.context.form.fieldsStore.fields,2);return e=e.replace(/{\s+key: (.*),\s+type: (.*),\s+show: (.*)\s+}/g,"{ key: $1, type: $2, show: $3 }"),n.createElement("pre",{style:{fontSize:"small"}},"Fields = ",e)},l.contextTypes={form:t.instanceOf(d.FormWithConstraints).isRequired},l);function l(){var e=null!==i&&i.apply(this,arguments)||this;return e.reRender=function(){e.forceUpdate()},e}var a,p=(r(u,a=d.FieldFeedbacks),u.prototype.render=function(){var e=this.props,t=e.for,r="";return t&&(r+='for="'+t+'" '),r+='stop="'+e.stop+'"',n.createElement(n.Fragment,null,n.createElement("li",null,'key="',this.key,'" ',r),n.createElement("ul",null,a.prototype.render.call(this)))},u);function u(){return null!==a&&a.apply(this,arguments)||this}var y,f=(r(h,y=d.FieldFeedback),h.prototype.getTextDecoration=function(){var e="";switch(this.state.validation.show){case!1:e="line-through";break;case void 0:e="line-through dotted"}return e},h.prototype.render=function(){var e=this.state.validation,t=e.key,r=e.type;return n.createElement("li",null,n.createElement("span",{style:{textDecoration:this.getTextDecoration()}},'key="',t,'" type="',r,'"')," ",y.prototype.render.call(this))},h.prototype.componentDidUpdate=function(){var t,e,r=c.findDOMNode(this),n=r.querySelectorAll("[data-feedback]");try{for(var o=function(e){var t="function"==typeof Symbol&&e[Symbol.iterator],r=0;return t?t.call(e):{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}}}(n),i=o.next();!i.done;i=o.next())i.value.style.display="inline"}catch(e){t={error:e}}finally{try{i&&!i.done&&(e=o.return)&&e.call(o)}finally{if(t)throw t.error}}var s=r.closest("li.async");if(null!==s&&(s.querySelector("span[style]").style.textDecoration=this.getTextDecoration()),this.state.validation.type===d.FieldFeedbackType.WhenValid){var l=r.querySelector("span[style]"),a=r.querySelector("span."+this.props.classes.valid);l.style.textDecoration=null!==a?"":"line-through"}},h);function h(){return null!==y&&y.apply(this,arguments)||this}var v,m=(r(F,v=d.Async),F.prototype.getTextDecoration=function(){return"line-through dotted"},F.prototype.componentWillUpdate=function(){c.findDOMNode(this).querySelector("span[style]").style.textDecoration=this.getTextDecoration()},F.prototype.render=function(){return n.createElement("li",{className:"async"},n.createElement("span",{style:{textDecoration:this.getTextDecoration()}},"Async"),n.createElement("ul",null,v.prototype.render.call(this)))},F);function F(){return null!==v&&v.apply(this,arguments)||this}Object.defineProperty(e,"FormWithConstraints",{enumerable:!0,get:function(){return d.FormWithConstraints}}),e.Async=m,e.DisplayFields=s,e.FieldFeedback=f,e.FieldFeedbacks=p,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("react-form-with-constraints")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","react-form-with-constraints"],t):t((e=e||self).ReactFormWithConstraintsTools={},e.React,e.PropTypes,e.ReactFormWithConstraints)}(this,function(e,o,t,a){"use strict";var n=function(e,t){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};function r(e,t){function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var i=function(){return(i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function l(e){return e.map(function(e){var t=e.element,r=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(e,["element"]);return t?i({element:a.isHTMLInput(t)?t.outerHTML:t.props},r):e})}var s,c=(r(p,s=o.Component),p.prototype.componentDidMount=function(){this.context.form.fieldsStore.addListener(a.FieldEvent.Added,this.reRender),this.context.form.fieldsStore.addListener(a.FieldEvent.Removed,this.reRender),this.context.form.addFieldDidValidateEventListener(this.reRender),this.context.form.addFieldDidResetEventListener(this.reRender)},p.prototype.componentWillUnmount=function(){this.context.form.fieldsStore.removeListener(a.FieldEvent.Added,this.reRender),this.context.form.fieldsStore.removeListener(a.FieldEvent.Removed,this.reRender),this.context.form.removeFieldDidValidateEventListener(this.reRender),this.context.form.removeFieldDidResetEventListener(this.reRender)},p.prototype.render=function(){var e=function(e,t){var r=JSON.stringify(e,function(e,t){return void 0===t?"__undefined__":t},t);return r=(r=(r=(r=r.replace(/"__undefined__"/g,"undefined")).replace(/"([^"]+)":/g,"$1:")).replace(/: "(.*[\\"].*)",/g,": $1,")).replace(/\\"/g,'"')}(l(this.context.form.fieldsStore.fields),2);return e=e.replace(/{\s+key: (.*),\s+type: (.*),\s+show: (.*)\s+}/g,"{ key: $1, type: $2, show: $3 }")},p.contextTypes={form:t.instanceOf(a.FormWithConstraints).isRequired},p);function p(){var e=null!==s&&s.apply(this,arguments)||this;return e.reRender=function(){e.forceUpdate()},e}var u,d=(r(f,u=a.FieldFeedbacks),f.prototype.render=function(){var e=this.props,t=e.for,r="";return t&&(r+='for="'+t+'" '),r+='stop="'+e.stop+'"',o.createElement(o.Fragment,null,o.createElement("li",null,'key="',this.key,'" ',r),o.createElement("ul",null,u.prototype.render.call(this)))},f);function f(){return null!==u&&u.apply(this,arguments)||this}var y,h=(r(m,y=a.FieldFeedback),m.prototype.getTextDecoration=function(){var e="";switch(this.state.validation.show){case!1:e="line-through";break;case void 0:e="line-through dotted";break;default:e=""}return e},m.prototype.render=function(){var t=this,e=this.state.validation,r=e.key,n=e.type;return o.createElement("li",{ref:function(e){return t.rootEl=e}},o.createElement("span",{style:{textDecoration:this.getTextDecoration()}},'key="',r,'" type="',n,'"')," ",y.prototype.render.call(this))},m.prototype.componentDidUpdate=function(){var t,e,r=this.rootEl.querySelectorAll("[data-feedback]");try{for(var n=function(e){var t="function"==typeof Symbol&&e[Symbol.iterator],r=0;return t?t.call(e):{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}}}(r),o=n.next();!o.done;o=n.next())o.value.style.display="inline"}catch(e){t={error:e}}finally{try{o&&!o.done&&(e=n.return)&&e.call(n)}finally{if(t)throw t.error}}var i=this.rootEl.closest("li.async");if(null!==i&&(i.querySelector("span[style]").style.textDecoration=this.getTextDecoration()),this.state.validation.type===a.FieldFeedbackType.WhenValid){var l=this.rootEl.querySelector("span[style]"),s=this.rootEl.querySelector("span."+this.props.classes.valid);l.style.textDecoration=null!==s?"":"line-through"}},m);function m(){var e=null!==y&&y.apply(this,arguments)||this;return e.rootEl=null,e}var v,x=(r(E,v=a.Async),E.getTextDecoration=function(){return"line-through dotted"},E.prototype.componentDidUpdate=function(){this.rootEl.querySelector("span[style]").style.textDecoration=E.getTextDecoration()},E.prototype.render=function(){var t=this;return o.createElement("li",{className:"async",ref:function(e){return t.rootEl=e}},o.createElement("span",{style:{textDecoration:E.getTextDecoration()}},"Async"),o.createElement("ul",null,v.prototype.render.call(this)))},E);function E(){var e=null!==v&&v.apply(this,arguments)||this;return e.rootEl=null,e}Object.defineProperty(e,"FormWithConstraints",{enumerable:!0,get:function(){return a.FormWithConstraints}}),e.Async=x,e.DisplayFields=c,e.FieldFeedback=h,e.FieldFeedbacks=d,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=react-form-with-constraints-tools.production.min.js.map

lib-es5/DisplayFields.js

@@ -15,6 +15,28 @@ "use strict";
 })();
-var __values = (this && this.__values) || function (o) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
     if (m) return m.call(o);
-    return {
+    if (o && typeof o.length === "number") return {
         next: function () {
@@ -25,15 +47,26 @@ if (o && i >= o.length) o = void 0;
     };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
-var ReactDOM = require("react-dom");
 var PropTypes = require("prop-types");
 var react_form_with_constraints_1 = require("react-form-with-constraints");
 exports.FormWithConstraints = react_form_with_constraints_1.FormWithConstraints;
-function stringifyWithUndefinedAndWithoutPropertyQuotes(obj, space) {
+function beautifulStringify(obj, space) {
     var str = JSON.stringify(obj, function (_key, value) { return (value === undefined ? '__undefined__' : value); }, space);
     str = str.replace(/"__undefined__"/g, 'undefined');
     str = str.replace(/"([^"]+)":/g, '$1:');
+    str = str.replace(/: "(.*[\\"].*)",/g, ': $1,');
+    str = str.replace(/\\"/g, '"');
     return str;
 }
+function normalizeFieldElementProperty(fields) {
+    return fields.map(function (field) {
+        var element = field.element, otherProps = __rest(field, ["element"]);
+        return element
+            ? __assign({ element: react_form_with_constraints_1.isHTMLInput(element)
+                    ? element.outerHTML
+                    : element.props }, otherProps) : field;
+    });
+}
 var DisplayFields = (function (_super) {
@@ -48,22 +81,18 @@ __extends(DisplayFields, _super);
     }
-    DisplayFields.prototype.componentWillMount = function () {
-        var form = this.context.form;
-        form.fieldsStore.addListener(react_form_with_constraints_1.FieldEvent.Added, this.reRender);
-        form.fieldsStore.addListener(react_form_with_constraints_1.FieldEvent.Removed, this.reRender);
-        form.addFieldDidValidateEventListener(this.reRender);
-        form.addFieldDidResetEventListener(this.reRender);
+    DisplayFields.prototype.componentDidMount = function () {
+        this.context.form.fieldsStore.addListener(react_form_with_constraints_1.FieldEvent.Added, this.reRender);
+        this.context.form.fieldsStore.addListener(react_form_with_constraints_1.FieldEvent.Removed, this.reRender);
+        this.context.form.addFieldDidValidateEventListener(this.reRender);
+        this.context.form.addFieldDidResetEventListener(this.reRender);
     };
     DisplayFields.prototype.componentWillUnmount = function () {
-        var form = this.context.form;
-        form.fieldsStore.removeListener(react_form_with_constraints_1.FieldEvent.Added, this.reRender);
-        form.fieldsStore.removeListener(react_form_with_constraints_1.FieldEvent.Removed, this.reRender);
-        form.removeFieldDidValidateEventListener(this.reRender);
-        form.removeFieldDidResetEventListener(this.reRender);
+        this.context.form.fieldsStore.removeListener(react_form_with_constraints_1.FieldEvent.Added, this.reRender);
+        this.context.form.fieldsStore.removeListener(react_form_with_constraints_1.FieldEvent.Removed, this.reRender);
+        this.context.form.removeFieldDidValidateEventListener(this.reRender);
+        this.context.form.removeFieldDidResetEventListener(this.reRender);
     };
     DisplayFields.prototype.render = function () {
-        var str = stringifyWithUndefinedAndWithoutPropertyQuotes(this.context.form.fieldsStore.fields, 2);
+        var str = beautifulStringify(normalizeFieldElementProperty(this.context.form.fieldsStore.fields), 2);
         str = str.replace(/{\s+key: (.*),\s+type: (.*),\s+show: (.*)\s+}/g, '{ key: $1, type: $2, show: $3 }');
-        return React.createElement("pre", { style: { fontSize: 'small' } },
-            "Fields = ",
-            str);
+        return str;
     };
@@ -101,3 +130,5 @@ DisplayFields.contextTypes = {
     function FieldFeedback() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.rootEl = null;
+        return _this;
     }
@@ -114,2 +145,4 @@ FieldFeedback.prototype.getTextDecoration = function () {
                 break;
+            default:
+                textDecoration = '';
         }
@@ -119,4 +152,5 @@ return textDecoration;
     FieldFeedback.prototype.render = function () {
+        var _this = this;
         var _a = this.state.validation, key = _a.key, type = _a.type;
-        return (React.createElement("li", null,
+        return (React.createElement("li", { ref: function (rootEl) { return (_this.rootEl = rootEl); } },
             React.createElement("span", { style: { textDecoration: this.getTextDecoration() } },
@@ -133,4 +167,3 @@ "key=\"",
         var e_1, _a;
-        var el = ReactDOM.findDOMNode(this);
-        var fieldFeedbackSpans = el.querySelectorAll('[data-feedback]');
+        var fieldFeedbackSpans = this.rootEl.querySelectorAll('[data-feedback]');
         try {
@@ -149,3 +182,3 @@ for (var fieldFeedbackSpans_1 = __values(fieldFeedbackSpans), fieldFeedbackSpans_1_1 = fieldFeedbackSpans_1.next(); !fieldFeedbackSpans_1_1.done; fieldFeedbackSpans_1_1 = fieldFeedbackSpans_1.next()) {
         }
-        var li = el.closest('li.async');
+        var li = this.rootEl.closest('li.async');
         if (li !== null) {
@@ -157,4 +190,4 @@ var async = li.querySelector('span[style]');
         if (type === react_form_with_constraints_1.FieldFeedbackType.WhenValid) {
-            var span = el.querySelector('span[style]');
-            var whenValid = el.querySelector("span." + this.props.classes.valid);
+            var span = this.rootEl.querySelector('span[style]');
+            var whenValid = this.rootEl.querySelector("span." + this.props.classes.valid);
             span.style.textDecoration = whenValid !== null ? '' : 'line-through';
@@ -169,15 +202,17 @@ }
     function Async() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.rootEl = null;
+        return _this;
     }
-    Async.prototype.getTextDecoration = function () {
+    Async.getTextDecoration = function () {
         return 'line-through dotted';
     };
-    Async.prototype.componentWillUpdate = function () {
-        var el = ReactDOM.findDOMNode(this);
-        var async = el.querySelector('span[style]');
-        async.style.textDecoration = this.getTextDecoration();
+    Async.prototype.componentDidUpdate = function () {
+        var async = this.rootEl.querySelector('span[style]');
+        async.style.textDecoration = Async.getTextDecoration();
     };
     Async.prototype.render = function () {
-        return (React.createElement("li", { className: "async" },
-            React.createElement("span", { style: { textDecoration: this.getTextDecoration() } }, "Async"),
+        var _this = this;
+        return (React.createElement("li", { className: "async", ref: function (rootEl) { return (_this.rootEl = rootEl); } },
+            React.createElement("span", { style: { textDecoration: Async.getTextDecoration() } }, "Async"),
             React.createElement("ul", null, _super.prototype.render.call(this))));
@@ -188,2 +223,2 @@ };
 exports.Async = Async;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGlzcGxheUZpZWxkcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9EaXNwbGF5RmllbGRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsNkJBQStCO0FBQy9CLG9DQUFzQztBQUN0QyxzQ0FBd0M7QUFFeEMsMkVBUXFDO0FBa0U1Qiw4QkF6RVAsaURBQW1CLENBeUVPO0FBOUQ1QixTQUFTLDhDQUE4QyxDQUFDLEdBQVcsRUFBRSxLQUF1QjtJQUMxRixJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUN0QixHQUFHLEVBQ0gsVUFBQyxJQUFJLEVBQUUsS0FBSyxJQUFLLE9BQUEsQ0FBQyxLQUFLLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxFQUEvQyxDQUErQyxFQUNoRSxLQUFLLENBQ04sQ0FBQztJQUNGLEdBQUcsR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDLGtCQUFrQixFQUFFLFdBQVcsQ0FBQyxDQUFDO0lBQ25ELEdBQUcsR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUN4QyxPQUFPLEdBQUcsQ0FBQztBQUNiLENBQUM7QUFFRDtJQUFtQyxpQ0FBZTtJQUFsRDtRQUFBLHFFQWlEQztRQTNCQyxjQUFRLEdBQUc7WUFDVCxLQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDckIsQ0FBQyxDQUFDOztJQXlCSixDQUFDO0lBM0NDLDBDQUFrQixHQUFsQjtRQUNVLElBQUEsd0JBQUksQ0FBa0I7UUFDOUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLENBQUMsd0NBQVUsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzlELElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVyxDQUFDLHdDQUFVLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxRQUFRLENB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Q0FBQztJQUMvQixDQUFDO0lBRUQsbUNBQW1CLEdBQW5CO1FBR0UsSUFBTSxFQUFFLEdBQUcsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQWtCLENBQUM7UUFHdkQsSUFBTSxLQUFLLEdBQUcsRUFBRSxDQUFDLGFBQWEsQ0FBa0IsYUFBYSxDQUFDLENBQUM7UUFDL0QsS0FBTSxDQUFDLEtBQUssQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7SUFDekQsQ0FBQztJQUVELHNCQUFNLEdBQU47UUFDRSxPQUFPLENBQ0wsNEJBQUksU0FBUyxFQUFDLE9BQU87WUFDbkIsOEJBQU0sS0FBSyxFQUFFLEVBQUUsY0FBYyxFQUFFLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLFlBQWM7WUFDdkUsZ0NBQUssaUJBQU0sTUFBTSxXQUFFLENBQU0sQ0FDdEIsQ0FDTixDQUFDO0lBQ0osQ0FBQztJQUNILFlBQUM7QUFBRCxDQUFDLEFBdkJELENBQThCLG1DQUFNLEdBdUJuQztBQXZCWSxzQkFBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSc7XG5pbXBvcnQgKiBhcyBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmltcG9ydCB7XG4gIEZvcm1XaXRoQ29uc3RyYWludHMsXG4gIEZvcm1XaXRoQ29uc3RyYWludHNDaGlsZENvbnRleHQsXG4gIEZpZWxkRmVlZGJhY2sgYXMgX0ZpZWxkRmVlZGJhY2ssXG4gIEZpZWxkRmVlZGJhY2tUeXBlLFxuICBGaWVsZEZlZWRiYWNrcyBhcyBfRmllbGRGZWVkYmFja3MsXG4gIEFzeW5jIGFzIF9Bc3luYyxcbiAgRmllbGRFdmVudFxufSBmcm9tICdyZWFjdC1mb3JtLXdpdGgtY29uc3RyYWludHMnO1xuXG4vLyBTZWUgW1ByZXNlcnZpbmcgdW5kZWZpbmVkIHRoYXQgSlNPTi5zdHJpbmdpZnkgb3RoZXJ3aXNlIHJlbW92ZXNdKGh0dHBzOi8vc3RhY2tvdmVyZmxvdy5jb20vcS8yNjU0MDcwNilcbi8vIFNlZSBbSlNPTi5zdHJpbmdpZnkgd2l0aG91dCBxdW90ZXMgb24gcHJvcGVydGllcz9dKGh0dHBzOi8vc3RhY2tvdmVyZmxvdy5jb20vcS8xMTIzMzQ5OClcbmZ1bmN0aW9uIHN0cmluZ2lmeVdpdGhVbmRlZmluZWRBbmRXaXRob3V0UHJvcGVydHlRdW90ZXMob2JqOiBvYmplY3QsIHNwYWNlPzogc3RyaW5nIHwgbnVtYmVyKSB7XG4gIGxldCBzdHIgPSBKU09OLnN0cmluZ2lmeShcbiAgICBvYmosXG4gICAgKF9rZXksIHZhbHVlKSA9PiAodmFsdWUgPT09IHVuZGVmaW5lZCA/ICdfX3VuZGVmaW5lZF9fJyA6IHZhbHVlKSxcbiAgICBzcGFjZVxuICApO1xuICBzdHIgPSBzdHIucmVwbGFjZSgvXCJfX3VuZGVmaW5lZF9fXCIvZywgJ3VuZGVmaW5lZCcpO1xuICBzdHIgPSBzdHIucmVwbGFjZSgvXCIoW15cIl0rKVwiOi9nLCAnJDE6Jyk7XG4gIHJldHVybiBzdHI7XG59XG5cbmV4cG9ydCBjbGFzcyBEaXNwbGF5RmllbGRzIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcbiAgc3RhdGljIGNvbnRleHRUeXBlczogUmVhY3QuVmFsaWRhdGlvbk1hcDxGb3JtV2l0aENvbnN0cmFpbnRzQ2hpbGRDb250ZXh0PiA9IHtcbiAgICBmb3JtOiBQcm9wVHlwZXMuaW5zdGFuY2VPZihGb3JtV2l0aENvbnN0cmFpbnRzKS5pc1JlcXVpcmVkXG4gIH07XG4gIGNvbnRleHQhOiBGb3JtV2l0aENvbnN0cmFpbnRzQ2hpbGRDb250ZXh0O1xuXG4gIGNvbXBvbmVudFdpbGxNb3VudCgpIHtcbiAgICBjb25zdCB7IGZvcm0gfSA9IHRoaXMuY29udGV4dDtcbiAgICBmb3JtLmZpZWxkc1N0b3JlLmFkZExpc3RlbmVyKEZpZWxkRXZlbnQuQWRkZWQsIHRoaXMucmVSZW5kZXIpO1xuICAgIGZvcm0uZmllbGRzU3RvcmUuYWRkTGlzdGVuZXIoRmllbGRFdmVudC5SZW1vdmVkLCB0aGlzLnJlUmVuZGVyKTtcbiAgICBmb3JtLmFkZEZpZWxkRGlkVmFsaWRhdGVFdmVudExpc3RlbmVyKHRoaXMucmVSZW5kZXIpO1xuICAgIGZvcm0uYWRkRmllbGREaWRSZXNldEV2ZW50TGlzdGVuZXIodGhpcy5yZVJlbmRlcik7XG4gIH1cblxuICBjb21wb25lbnRXaWxsVW5tb3VudCgpIHtcbiAgICBjb25zdCB7IGZvcm0gfSA9IHRoaXMuY29udGV4dDtcbiAgICBmb3JtLmZpZWxkc1N0b3JlLnJlbW92ZUxpc3RlbmVyKEZpZWxkRXZlbnQuQWRkZWQsIHRoaXMucmVSZW5kZXIpO1xuICAgIGZvcm0uZmllbGRzU3RvcmUucmVtb3ZlTGlzdGVuZXIoRmllbGRFdmVudC5SZW1vdmVkLCB0aGlzLnJlUmVuZGVyKTtcbiAgICBmb3JtLnJlbW92ZUZpZWxkRGlkVmFsaWRhdGVFdmVudExpc3RlbmVyKHRoaXMucmVSZW5kZXIpO1xuICAgIGZvcm0ucmVtb3ZlRmllbGREaWRSZXNldEV2ZW50TGlzdGVuZXIodGhpcy5yZVJlbmRlcik7XG4gIH1cblxuICByZVJlbmRlciA9ICgpID0+IHtcbiAgICB0aGlzLmZvcmNlVXBkYXRlKCk7XG4gIH07XG5cbiAgcmVuZGVyKCkge1xuICAgIGxldCBzdHIgPSBzdHJpbmdpZnlXaXRoVW5kZWZpbmVkQW5kV2l0aG91dFByb3BlcnR5UXVvdGVzKFxuICAgICAgdGhpcy5jb250ZXh0LmZvcm0uZmllbGRzU3RvcmUuZmllbGRzLFxuICAgICAgMlxuICAgICk7XG5cbiAgICAvLyBDb3NtZXRpYzogaW1wcm92ZSBmb3JtYXR0aW5nXG4gICAgLy9cbiAgICAvLyBSZXBsYWNlIHRoaXMgc3RyaW5nOlxuICAgIC8vIHtcbiAgICAvLyAgIGtleTogXCIxLjBcIixcbiAgICAvLyAgIHR5cGU6IFwiZXJyb3JcIixcbiAgICAvLyAgIHNob3c6IHRydWVcbiAgICAvLyB9XG4gICAgLy8gd2l0aCB0aGlzOlxuICAgIC8vIHsga2V5OiBcIjEuMFwiLCB0eXBlOiBcImVycm9yXCIsIHNob3c6IHRydWUgfVxuICAgIHN0ciA9IHN0ci5yZXBsYWNlKFxuICAgICAgL3tcXHMra2V5OiAoLiopLFxccyt0eXBlOiAoLiopLFxccytzaG93OiAoLiopXFxzK30vZyxcbiAgICAgICd7IGtleTogJDEsIHR5cGU6ICQyLCBzaG93OiAkMyB9J1xuICAgICk7XG5cbiAgICByZXR1cm4gPHByZSBzdHlsZT17eyBmb250U2l6ZTogJ3NtYWxsJyB9fT5GaWVsZHMgPSB7c3RyfTwvcHJlPjtcbiAgfVxufVxuXG5leHBvcnQgeyBGb3JtV2l0aENvbnN0cmFpbnRzIH07XG5cbmV4cG9ydCBjbGFzcyBGaWVsZEZlZWRiYWNrcyBleHRlbmRzIF9GaWVsZEZlZWRiYWNrcyB7XG4gIHJlbmRlcigpIHtcbiAgICBjb25zdCB7IGZvcjogZmllbGROYW1lLCBzdG9wIH0gPSB0aGlzLnByb3BzO1xuXG4gICAgbGV0IGF0dHIgPSAnJztcbiAgICBpZiAoZmllbGROYW1lKSBhdHRyICs9IGBmb3I9XCIke2ZpZWxkTmFtZX1cIiBgO1xuICAgIGF0dHIgKz0gYHN0b3A9XCIke3N0b3B9XCJgO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDw+XG4gICAgICAgIDxsaT5cbiAgICAgICAgICBrZXk9XCJ7dGhpcy5rZXl9XCIge2F0dHJ9XG4gICAgICAgIDwvbGk+XG4gICAgICAgIDx1bD57c3VwZXIucmVuZGVyKCl9PC91bD5cbiAgICAgIDwvPlxuICAgICk7XG4gIH1cbn1cblxuZXhwb3J0IGNsYXNzIEZpZWxkRmVlZGJhY2sgZXh0ZW5kcyBfRmllbGRGZWVkYmFjayB7XG4gIHByaXZhdGUgZ2V0VGV4dERlY29yYXRpb24oKSB7XG4gICAgY29uc3QgeyBzaG93IH0gPSB0aGlzLnN0YXRlLnZhbGlkYXRpb247XG5cbiAgICBsZXQgdGV4dERlY29yYXRpb24gPSAnJztcbiAgICBzd2l0Y2ggKHNob3cpIHtcbiAgICAgIGNhc2UgZmFsc2U6XG4gICAgICAgIHRleHREZWNvcmF0aW9uID0gJ2xpbmUtdGhyb3VnaCc7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSB1bmRlZmluZWQ6XG4gICAgICAgIHRleHREZWNvcmF0aW9uID0gJ2xpbmUtdGhyb3VnaCBkb3R0ZWQnO1xuICAgICAgICBicmVhaztcbiAgICB9XG5cbiAgICByZXR1cm4gdGV4dERlY29yYXRpb247XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgY29uc3QgeyBrZXksIHR5cGUgfSA9IHRoaXMuc3RhdGUudmFsaWRhdGlvbjtcblxuICAgIHJldHVybiAoXG4gICAgICA8bGk+XG4gICAgICAgIDxzcGFuIHN0eWxlPXt7IHRleHREZWNvcmF0aW9uOiB0aGlzLmdldFRleHREZWNvcmF0aW9uKCkgfX0+XG4gICAgICAgICAga2V5PVwie2tleX1cIiB0eXBlPVwie3R5cGV9XCJcbiAgICAgICAgPC9zcGFuPnsnICd9XG4gICAgICAgIHtzdXBlci5yZW5kZXIoKX1cbiAgICAgIDwvbGk+XG4gICAgKTtcbiAgfVxuXG4gIGNvbXBvbmVudERpZFVwZGF0ZSgpIHtcbiAgICAvLyBGSVhNRVxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSByZWFjdC9uby1maW5kLWRvbS1ub2RlXG4gICAgY29uc3QgZWwgPSBSZWFjdERPTS5maW5kRE9NTm9kZSh0aGlzKSBhcyBIVE1MTElFbGVtZW50O1xuXG4gICAgLy8gSGFjazogbWFrZSBGaWVsZEZlZWRiYWNrIDxzcGFuIHN0eWxlPVwiZGlzcGxheTogaW5saW5lXCI+XG4gICAgLy8gQWxzbyBtYWtlIEJvb3RzdHJhcCA0IGhhcHB5IGJlY2F1c2UgaXQgc2V0cyAnZGlzcGxheTogbm9uZScsIHNlZSBodHRwczovL2dpdGh1Yi5jb20vdHdicy9ib290c3RyYXAvYmxvYi92NC4xLjIvc2Nzcy9taXhpbnMvX2Zvcm1zLnNjc3MjTDMxXG4gICAgY29uc3QgZmllbGRGZWVkYmFja1NwYW5zID0gZWwucXVlcnlTZWxlY3RvckFsbDxIVE1MU3BhbkVsZW1lbnQ+KCdbZGF0YS1mZWVkYmFja10nKTtcbiAgICBmb3IgKGNvbnN0IGZpZWxkRmVlZGJhY2tTcGFuIG9mIGZpZWxkRmVlZGJhY2tTcGFucykge1xuICAgICAgZmllbGRGZWVkYmFja1NwYW4uc3R5bGUuZGlzcGxheSA9ICdpbmxpbmUnO1xuICAgIH1cblxuICAgIC8vIENoYW5nZSBBc3luYyBwYXJlbnQgc3R5bGVcbiAgICBjb25zdCBsaSA9IGVsLmNsb3Nlc3QoJ2xpLmFzeW5jJyk7XG4gICAgaWYgKGxpICE9PSBudWxsKSB7XG4gICAgICBjb25zdCBhc3luYyA9IGxpLnF1ZXJ5U2VsZWN0b3I8SFRNTFNwYW5FbGVtZW50Pignc3BhbltzdHlsZV0nKTtcbiAgICAgIGFzeW5jIS5zdHlsZS50ZXh0RGVjb3JhdGlvbiA9IHRoaXMuZ2V0VGV4dERlY29yYXRpb24oKTtcbiAgICB9XG5cbiAgICAvLyBDaGFuZ2Ugd2hlblZhbGlkIHN0eWxlXG4gICAgY29uc3QgeyB0eXBlIH0gPSB0aGlzLnN0YXRlLnZhbGlkYXRpb247XG4gICAgaWYgKHR5cGUgPT09IEZpZWxkRmVlZGJhY2tUeXBlLldoZW5WYWxpZCkge1xuICAgICAgY29uc3Qgc3BhbiA9IGVsLnF1ZXJ5U2VsZWN0b3I8SFRNTFNwYW5FbGVtZW50Pignc3BhbltzdHlsZV0nKTtcbiAgICAgIGNvbnN0IHdoZW5WYWxpZCA9IGVsLnF1ZXJ5U2VsZWN0b3I8SFRNTFNwYW5FbGVtZW50Pihgc3Bhbi4ke3RoaXMucHJvcHMuY2xhc3NlcyEudmFsaWR9YCk7XG4gICAgICBzcGFuIS5zdHlsZS50ZXh0RGVjb3JhdGlvbiA9IHdoZW5WYWxpZCAhPT0gbnVsbCA/ICcnIDogJ2xpbmUtdGhyb3VnaCc7XG4gICAgfVxuICB9XG59XG5cbmV4cG9ydCBjbGFzcyBBc3luYzxUPiBleHRlbmRzIF9Bc3luYzxUPiB7XG4gIHByaXZhdGUgZ2V0VGV4dERlY29yYXRpb24oKSB7XG4gICAgcmV0dXJuICdsaW5lLXRocm91Z2ggZG90dGVkJztcbiAgfVxuXG4gIGNvbXBvbmVudFdpbGxVcGRhdGUoKSB7XG4gICAgLy8gRklYTUVcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcmVhY3Qvbm8tZmluZC1kb20tbm9kZVxuICAgIGNvbnN0IGVsID0gUmVhY3RET00uZmluZERPTU5vZGUodGhpcykgYXMgSFRNTExJRWxlbWVudDtcblxuICAgIC8vIFJlc2V0IHN0eWxlXG4gICAgY29uc3QgYXN5bmMgPSBlbC5xdWVyeVNlbGVjdG9yPEhUTUxTcGFuRWxlbWVudD4oJ3NwYW5bc3R5bGVdJyk7XG4gICAgYXN5bmMhLnN0eWxlLnRleHREZWNvcmF0aW9uID0gdGhpcy5nZXRUZXh0RGVjb3JhdGlvbigpO1xuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiAoXG4gICAgICA8bGkgY2xhc3NOYW1lPVwiYXN5bmNcIj5cbiAgICAgICAgPHNwYW4gc3R5bGU9e3sgdGV4dERlY29yYXRpb246IHRoaXMuZ2V0VGV4dERlY29yYXRpb24oKSB9fT5Bc3luYzwvc3Bhbj5cbiAgICAgICAgPHVsPntzdXBlci5yZW5kZXIoKX08L3VsPlxuICAgICAgPC9saT5cbiAgICApO1xuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGlzcGxheUZpZWxkcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9EaXNwbGF5RmllbGRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSw2QkFBK0I7QUFDL0Isc0NBQXdDO0FBRXhDLDJFQVlxQztBQTBINUIsOEJBcklQLGlEQUFtQixDQXFJTztBQS9GNUIsU0FBUyxrQkFBa0IsQ0FBQyxHQUFXLEVBQUUsS0FBdUI7SUFHOUQsSUFBSSxHQUFHLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FDdEIsR0FBRyxFQUNILFVBQUMsSUFBSSxFQUFFLEtBQUssSUFBSyxPQUFBLENBQUMsS0FBSyxLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsRUFBL0MsQ0FBK0MsRUFDaEUsS0FBSyxDQUNOLENBQUM7SUFDRixHQUFHLEdBQUcsR0FBRyxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsRUFBRSxXQUFXLENBQUMsQ0FBQztJQU1uRCxHQUFHLEdBQUcsR0FBRyxDQUFDLE9BQU8sQ0FBQyxhQUFhLEVBQUUsS0FBSyxDQUFDLENBQUM7SUFJeEMsR0FBRyxHQUFHLEdBQUcsQ0FBQyxPQUFPLENBQUMsbUJBQW1CLEVBQUUsT0FBTyxDQUFDLENBQUM7SUFJaEQsR0FBRyxHQUFHLEdBQUcsQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLEdBQUcsQ0FBQyxDQUFDO0lBRS9CLE9BQU8sR0FBRyxDQUFDO0FBQ2IsQ0FBQztBQUdELFNBQVMsNkJBQTZCLENBQUMsTUFBZTtJQUNwRCxPQUFPLE1BQU0sQ0FBQyxHQUFHLENBQUMsVUFBQSxLQUFLO1FBQ2IsSUFBQSx1QkFBTyxFQUFFLHVDQUFhLENBQVc7UUFDekMsT0FBTyxPQUFPO1lBQ1osQ0FBQyxZQUNHLE9BQU8sRUFBRSx5Q0FBVyxDQUFDLE9BQU8sQ0FBQztvQkFDM0IsQ0FB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QU5DLE9BQU8sQ0FDTCw0QkFBSSxTQUFTLEVBQUMsT0FBTyxFQUFDLEdBQUcsRUFBRSxVQUFBLE1BQU0sSUFBSSxPQUFBLENBQUMsS0FBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUMsRUFBdEIsQ0FBc0I7WUFDekQsOEJBQU0sS0FBSyxFQUFFLEVBQUUsY0FBYyxFQUFFLEtBQUssQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLFlBQWM7WUFDeEUsZ0NBQUssaUJBQU0sTUFBTSxXQUFFLENBQU0sQ0FDdEIsQ0FDTixDQUFDO0lBQ0osQ0FBQztJQUNILFlBQUM7QUFBRCxDQUFDLEFBckJELENBQThCLG1DQUFNLEdBcUJuQztBQXJCWSxzQkFBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcblxuaW1wb3J0IHtcbiAgRm9ybVdpdGhDb25zdHJhaW50cyxcbiAgRm9ybVdpdGhDb25zdHJhaW50c0NoaWxkQ29udGV4dCxcbiAgRmllbGRGZWVkYmFjayBhcyBfRmllbGRGZWVkYmFjayxcbiAgRmllbGRGZWVkYmFja1R5cGUsXG4gIEZpZWxkRmVlZGJhY2tzIGFzIF9GaWVsZEZlZWRiYWNrcyxcbiAgQXN5bmMgYXMgX0FzeW5jLFxuICBGaWVsZEV2ZW50LFxuICBGaWVsZCxcbiAgaXNIVE1MSW5wdXQsXG4gIEhUTUxJbnB1dCxcbiAgVGV4dElucHV0XG59IGZyb20gJ3JlYWN0LWZvcm0td2l0aC1jb25zdHJhaW50cyc7XG5cbi8vIEJlZm9yZTpcbi8vIFtcbi8vICAge1xuLy8gICAgIFwiZWxlbWVudFwiOiBcIjxpbnB1dCBpZD1cXFwidXNlcm5hbWVcXFwiIG5hbWU9XFxcInVzZXJuYW1lXFxcIiByZXF1aXJlZD1cXFwiXFxcIiBtaW5sZW5ndGg9XFxcIjNcXFwiIGNsYXNzPVxcXCJmb3JtLWNvbnRyb2wgaXMtcGVuZGluZy1zbSBpcy1pbnZhbGlkXFxcIiB2YWx1ZT1cXFwiXFxcIj5cIixcbi8vICAgICBcIm5hbWVcIjogXCJ1c2VybmFtZVwiLFxuLy8gICAgIFwidmFsaWRhdGlvbnNcIjogW1xuLy8gICAgICAgeyBcImtleVwiOiBcIjAuMFwiLCBcInR5cGVcIjogXCJlcnJvclwiLCBcInNob3dcIjogZmFsc2UgfSxcbi8vICAgICAgIHsgXCJrZXlcIjogXCIwLjFcIiwgXCJ0eXBlXCI6IFwiZXJyb3JcIiwgXCJzaG93XCI6IHRydWUgfSxcbi8vICAgICAgIHsgXCJrZXlcIjogXCIwLjJcIiwgXCJ0eXBlXCI6IFwid2hlblZhbGlkXCIgfVxuLy8gICAgIF1cbi8vICAgfVxuLy8gXVxuLy9cbi8vIEFmdGVyOlxuLy8gW1xuLy8gICB7XG4vLyAgICAgZWxlbWVudDogPGlucHV0IGlkPVwidXNlcm5hbWVcIiBuYW1lPVwidXNlcm5hbWVcIiByZXF1aXJlZD1cIlwiIG1pbmxlbmd0aD1cIjNcIiBjbGFzcz1cImZvcm0tY29udHJvbCBpcy1wZW5kaW5nLXNtIGlzLWludmFsaWRcIiB2YWx1ZT1cIlwiPixcbi8vICAgICBuYW1lOiBcInVzZXJuYW1lXCIsXG4vLyAgICAgdmFsaWRhdGlvbnM6IFtcbi8vICAgICAgIHsga2V5OiBcIjAuMFwiLCB0eXBlOiBcImVycm9yXCIsIHNob3c6IGZhbHNlIH0sXG4vLyAgICAgICB7IGtleTogXCIwLjFcIiwgdHlwZTogXCJlcnJvclwiLCBzaG93OiB0cnVlIH0sXG4vLyAgICAgICB7IGtleTogXCIwLjJcIiwgdHlwZTogXCJ3aGVuVmFsaWRcIiwgc2hvdzogdW5kZWZpbmVkIH1cbi8vICAgICBdXG4vLyAgIH1cbi8vIF1cbmZ1bmN0aW9uIGJlYXV0aWZ1bFN0cmluZ2lmeShvYmo6IG9iamVjdCwgc3BhY2U/OiBzdHJpbmcgfCBudW1iZXIpIHtcbiAgLy8gS2VlcCB1bmRlZmluZWRcbiAgLy8gU2VlIFtQcmVzZXJ2aW5nIHVuZGVmaW5lZCB0aGF0IEpTT04uc3RyaW5naWZ5IG90aGVyd2lzZSByZW1vdmVzXShodHRwczovL3N0YWNrb3ZlcmZsb3cuY29tL3EvMjY1NDA3MDYpXG4gIGxldCBzdHIgPSBKU09OLnN0cmluZ2lmeShcbiAgICBvYmosXG4gICAgKF9rZXksIHZhbHVlKSA9PiAodmFsdWUgPT09IHVuZGVmaW5lZCA/ICdfX3VuZGVmaW5lZF9fJyA6IHZhbHVlKSxcbiAgICBzcGFjZVxuICApO1xuICBzdHIgPSBzdHIucmVwbGFjZSgvXCJfX3VuZGVmaW5lZF9fXCIvZywgJ3VuZGVmaW5lZCcpO1xuXG4gIC8vIFJlbW92ZSBxdW90ZXMgZnJvbSBwcm9wZXJ0aWVzXG4gIC8vIEJlZm9yZTogXCJuYW1lXCI6XG4gIC8vIEFmdGVyOiBuYW1lOlxuICAvLyBTZWUgW0pTT04uc3RyaW5naWZ5IHdpdGhvdXQgcXVvdGVzIG9uIHByb3BlcnRpZXM/XShodHRwczovL3N0YWNrb3ZlcmZsb3cuY29tL3EvMTEyMzM0OTgpXG4gIHN0ciA9IHN0ci5yZXBsYWNlKC9cIihbXlwiXSspXCI6L2csICckMTonKTtcblxuICAvLyBCZWZvcmU6IGVsZW1lbnQ6IFwiPGlucHV0IGlkPVxcXCJ1c2VybmFtZVxcXCIgbmFtZT1cXFwidXNlcm5hbWVcXFwiIHJlcXVpcmVkPVxcXCJcXFwiPlwiLFxuICAvLyBBZnRlcjogZWxlbWVudDogPGlucHV0IGlkPVxcXCJ1c2VybmFtZVxcXCIgbmFtZT1cXFwidXNlcm5hbWVcXFwiIHJlcXVpcmVkPVxcXCJcXFwiPixcbiAgc3RyID0gc3RyLnJlcGxhY2UoLzogXCIoLipbXFxcXFwiXS4qKVwiLC9nLCAnOiAkMSwnKTtcblxuICAvLyBCZWZvcmU6IDxpbnB1dCBpZD1cXFwidXNlcm5hbWVcXFwiIG5hbWU9XFxcInVzZXJuYW1lXFxcIiByZXF1aXJlZD1cXFwiXFxcIj5cbiAgLy8gQWZ0ZXI6IDxpbnB1dCBpZD1cInVzZXJuYW1lXCIgbmFtZT1cInVzZXJuYW1lXCIgcmVxdWlyZWQ9XCJcIj5cbiAgc3RyID0gc3RyLnJlcGxhY2UoL1xcXFxcIi9nLCAnXCInKTtcblxuICByZXR1cm4gc3RyO1xufVxuXG4vLyBDYW5ub3QgZGlzcGxheSBmaWVsZC5lbGVtZW50IGRpcmVjdGx5LCB3aWxsIHRocm93IFwiQ29udmVydGluZyBjaXJjdWxhciBzdHJ1Y3R1cmUgdG8gSlNPTlwiIHdoZW4gY2FsbGluZyBKU09OLnN0cmluZ2lmeSgpXG5mdW5jdGlvbiBub3JtYWxpemVGaWVsZEVsZW1lbnRQcm9wZXJ0eShmaWVsZHM6IEZpZWxkW10pIHtcbiAgcmV0dXJuIGZpZWxkcy5tYXAoZmllbGQgPT4ge1xuICAgIGNvbnN0IHsgZWxlbWVudCwgLi4ub3RoZXJQcm9wcyB9ID0gZmllbGQ7XG4gICAgcmV0dXJuIGVsZW1lbnRcbiAgICAgID8ge1xuICAgICAgICAgIGVsZW1lbnQ6IGlzSFRNTElucHV0KGVsZW1lbnQpXG4gICAgICAgICAgICA/IChlbGVtZW50IGFzIEhUTUxJbnB1dCkub3V0ZXJIVE1MXG4gICAgICAgICAgICA6IChlbGVtZW50IGFzIFRleHRJbnB1dCkucHJvcHMsXG4gICAgICAgICAgLi4ub3RoZXJQcm9wc1xuICAgICAgICB9XG4gICAgICA6IGZpZWxkO1xuICB9KTtcbn1cblxuZXhwb3J0IGNsYXNzIERpc3BsYXlGaWVsZHMgZXh0ZW5kcyBSZWFjdC5Db21wb25lbnQge1xuICBzdGF0aWMgY29udGV4dFR5cGVzOiBSZWFjdC5WYWxpZGF0aW9uTWFwPEZvcm1XaXRoQ29uc3RyYWludHNDaGlsZENvbnRleHQ+ID0ge1xuICAgIGZvcm06IFByb3BUeXBlcy5pbnN0YW5jZU9mKEZvcm1XaXRoQ29uc3RyYWludHMpLmlzUmVxdWlyZWRcbiAgfTtcbiAgY29udGV4dCE6IEZvcm1XaXRoQ29uc3RyYWludHNDaGlsZENvbnRleHQ7XG5cbiAgLyogZXNsaW50LWRpc2FibGUgcmVhY3QvZGVzdHJ1Y3R1cmluZy1hc3NpZ25tZW50ICovXG5cbiAgY29tcG9uZW50RGlkTW91bnQoKSB7XG4gICAgdGhpcy5jb250ZXh0LmZvcm0uZmllbGRzU3RvcmUuYWRkTGlzdGVuZXIoRmllbGRFdmVudC5BZGRlZCwgdGhpcy5yZVJlbmRlcik7XG4gICAgdGhpcy5jb250ZXh0LmZvcm0uZmllbGRzU3RvcmUuYWRkTGlzdGVuZXIoRmllbGRFdmVudC5SZW1vdmVkLCB0aGlzLnJlUmVuZGVyKTtcbiAgICB0aGlzLmNvbnRleHQuZm9ybS5hZGRGaWVsZERpZFZhbGlkYXRlRXZlbnRMaXN0ZW5lcih0aGlzLnJlUmVuZGVyKTtcbiAgICB0aGlzLmNvbnRleHQuZm9ybS5hZGRGaWVsZERpZFJlc2V0RXZlbnRMaXN0ZW5lcih0aGlzLnJlUmVuZGVyKTtcbiAgfVxuXG4gIGNvbXBvbmVudFdpbGxVbm1vdW50KCkge1xuICAgIHRoaXMuY29udGV4dC5mb3JtLmZpZWxkc1N0b3JlLnJlbW92ZUxpc3RlbmVyKEZpZWxkRXZlbnQuQWRkZWQsIHRoaXMucmVSZW5kZXIpO1xuICAgIHRoaXMuY29udGV4dC5mb3JtLmZpZWxkc1N0b3JlLnJlbW92ZUxpc3RlbmVyKEZpZWxkRXZlbnQuUmVtb3ZlZCwgdGhpcy5yZVJlbmRlcik7XG4gICAgdGhpcy5jb250ZXh0LmZvcm0ucmVtb3ZlRmllbGREaWRWYWxpZGF0ZUV2ZW50TGlzdGVuZXIodGhpcy5yZVJlbmRlcik7XG4gICAgdGhpcy5jb250ZXh0LmZvcm0ucmVtb3ZlRmllbGREaWRSZXNldEV2ZW50TGlzdGVuZXIodGhpcy5yZVJlbmRlcik7XG4gIH1cblxuICByZVJlbmRlciA9ICgpID0+IHtcbiAgICB0aGlzLmZvcmNlVXBkYXRlKCk7XG4gIH07XG5cbiAgcmVuZGVyKCkge1xuICAgIGxldCBzdHIgPSBiZWF1dGlmdWxTdHJpbmdpZnkoXG4gICAgICBub3JtYWxpemVGaWVsZEVsZW1lbnRQcm9wZXJ0eSh0aGlzLmNvbnRleHQuZm9ybS5maWVsZHNTdG9yZS5maWVsZHMpLFxuICAgICAgMlxuICAgICk7XG5cbiAgICAvLyBDb3NtZXRpYzogaW1wcm92ZSBmb3JtYXR0aW5nXG4gICAgLy9cbiAgICAvLyBSZXBsYWNlIHRoaXMgc3RyaW5nOlxuICAgIC8vIHtcbiAgICAvLyAgIGtleTogXCIxLjBcIixcbiAgICAvLyAgIHR5cGU6IFwiZXJyb3JcIixcbiAgICAvLyAgIHNob3c6IHRydWVcbiAgICAvLyB9XG4gICAgLy8gd2l0aCB0aGlzOlxuICAgIC8vIHsga2V5OiBcIjEuMFwiLCB0eXBlOiBcImVycm9yXCIsIHNob3c6IHRydWUgfVxuICAgIHN0ciA9IHN0ci5yZXBsYWNlKFxuICAgICAgL3tcXHMra2V5OiAoLiopLFxccyt0eXBlOiAoLiopLFxccytzaG93OiAoLiopXFxzK30vZyxcbiAgICAgICd7IGtleTogJDEsIHR5cGU6ICQyLCBzaG93OiAkMyB9J1xuICAgICk7XG5cbiAgICByZXR1cm4gc3RyO1xuICB9XG5cbiAgLyogZXNsaW50LWVuYWJsZSByZWFjdC9kZXN0cnVjdHVyaW5nLWFzc2lnbm1lbnQgKi9cbn1cblxuZXhwb3J0IHsgRm9ybVdpdGhDb25zdHJhaW50cyB9O1xuXG5leHBvcnQgY2xhc3MgRmllbGRGZWVkYmFja3MgZXh0ZW5kcyBfRmllbGRGZWVkYmFja3Mge1xuICByZW5kZXIoKSB7XG4gICAgY29uc3QgeyBmb3I6IGZpZWxkTmFtZSwgc3RvcCB9ID0gdGhpcy5wcm9wcztcblxuICAgIGxldCBhdHRyID0gJyc7XG4gICAgaWYgKGZpZWxkTmFtZSkgYXR0ciArPSBgZm9yPVwiJHtmaWVsZE5hbWV9XCIgYDtcbiAgICBhdHRyICs9IGBzdG9wPVwiJHtzdG9wfVwiYDtcblxuICAgIHJldHVybiAoXG4gICAgICA8PlxuICAgICAgICA8bGk+XG4gICAgICAgICAga2V5PVwie3RoaXMua2V5fVwiIHthdHRyfVxuICAgICAgICA8L2xpPlxuICAgICAgICA8dWw+e3N1cGVyLnJlbmRlcigpfTwvdWw+XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG59XG5cbmV4cG9ydCBjbGFzcyBGaWVsZEZlZWRiYWNrIGV4dGVuZHMgX0ZpZWxkRmVlZGJhY2sge1xuICBwcml2YXRlIHJvb3RFbDogSFRNTExJRWxlbWVudCB8IG51bGwgPSBudWxsO1xuXG4gIHByaXZhdGUgZ2V0VGV4dERlY29yYXRpb24oKSB7XG4gICAgY29uc3QgeyBzaG93IH0gPSB0aGlzLnN0YXRlLnZhbGlkYXRpb247XG5cbiAgICBsZXQgdGV4dERlY29yYXRpb24gPSAnJztcbiAgICBzd2l0Y2ggKHNob3cpIHtcbiAgICAgIGNhc2UgZmFsc2U6XG4gICAgICAgIHRleHREZWNvcmF0aW9uID0gJ2xpbmUtdGhyb3VnaCc7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSB1bmRlZmluZWQ6XG4gICAgICAgIHRleHREZWNvcmF0aW9uID0gJ2xpbmUtdGhyb3VnaCBkb3R0ZWQnO1xuICAgICAgICBicmVhaztcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIHRleHREZWNvcmF0aW9uID0gJyc7XG4gICAgfVxuXG4gICAgcmV0dXJuIHRleHREZWNvcmF0aW9uO1xuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IHsga2V5LCB0eXBlIH0gPSB0aGlzLnN0YXRlLnZhbGlkYXRpb247XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGxpIHJlZj17cm9vdEVsID0+ICh0aGlzLnJvb3RFbCA9IHJvb3RFbCl9PlxuICAgICAgICA8c3BhbiBzdHlsZT17eyB0ZXh0RGVjb3JhdGlvbjogdGhpcy5nZXRUZXh0RGVjb3JhdGlvbigpIH19PlxuICAgICAgICAgIGtleT1cIntrZXl9XCIgdHlwZT1cInt0eXBlfVwiXG4gICAgICAgIDwvc3Bhbj57JyAnfVxuICAgICAgICB7c3VwZXIucmVuZGVyKCl9XG4gICAgICA8L2xpPlxuICAgICk7XG4gIH1cblxuICBjb21wb25lbnREaWRVcGRhdGUoKSB7XG4gICAgLy8gSGFjazogbWFrZSBGaWVsZEZlZWRiYWNrIDxzcGFuIHN0eWxlPVwiZGlzcGxheTogaW5saW5lXCI+XG4gICAgLy8gQWxzbyBtYWtlIEJvb3RzdHJhcCA0IGhhcHB5IGJlY2F1c2UgaXQgc2V0cyAnZGlzcGxheTogbm9uZScsIHNlZSBodHRwczovL2dpdGh1Yi5jb20vdHdicy9ib290c3RyYXAvYmxvYi92NC4xLjIvc2Nzcy9taXhpbnMvX2Zvcm1zLnNjc3MjTDMxXG4gICAgY29uc3QgZmllbGRGZWVkYmFja1NwYW5zID0gdGhpcy5yb290RWwhLnF1ZXJ5U2VsZWN0b3JBbGw8SFRNTFNwYW5FbGVtZW50PignW2RhdGEtZmVlZGJhY2tdJyk7XG4gICAgZm9yIChjb25zdCBmaWVsZEZlZWRiYWNrU3BhbiBvZiBmaWVsZEZlZWRiYWNrU3BhbnMpIHtcbiAgICAgIGZpZWxkRmVlZGJhY2tTcGFuLnN0eWxlLmRpc3BsYXkgPSAnaW5saW5lJztcbiAgICB9XG5cbiAgICAvLyBDaGFuZ2UgQXN5bmMgcGFyZW50IHN0eWxlXG4gICAgY29uc3QgbGkgPSB0aGlzLnJvb3RFbCEuY2xvc2VzdCgnbGkuYXN5bmMnKTtcbiAgICBpZiAobGkgIT09IG51bGwpIHtcbiAgICAgIGNvbnN0IGFzeW5jID0gbGkucXVlcnlTZWxlY3RvcjxIVE1MU3BhbkVsZW1lbnQ+KCdzcGFuW3N0eWxlXScpO1xuICAgICAgYXN5bmMhLnN0eWxlLnRleHREZWNvcmF0aW9uID0gdGhpcy5nZXRUZXh0RGVjb3JhdGlvbigpO1xuICAgIH1cblxuICAgIC8vIENoYW5nZSB3aGVuVmFsaWQgc3R5bGVcbiAgICBjb25zdCB7IHR5cGUgfSA9IHRoaXMuc3RhdGUudmFsaWRhdGlvbjtcbiAgICBpZiAodHlwZSA9PT0gRmllbGRGZWVkYmFja1R5cGUuV2hlblZhbGlkKSB7XG4gICAgICBjb25zdCBzcGFuID0gdGhpcy5yb290RWwhLnF1ZXJ5U2VsZWN0b3I8SFRNTFNwYW5FbGVtZW50Pignc3BhbltzdHlsZV0nKTtcbiAgICAgIGNvbnN0IHdoZW5WYWxpZCA9IHRoaXMucm9vdEVsIS5xdWVyeVNlbGVjdG9yPEhUTUxTcGFuRWxlbWVudD4oXG4gICAgICAgIGBzcGFuLiR7dGhpcy5wcm9wcy5jbGFzc2VzIS52YWxpZH1gXG4gICAgICApO1xuICAgICAgc3BhbiEuc3R5bGUudGV4dERlY29yYXRpb24gPSB3aGVuVmFsaWQgIT09IG51bGwgPyAnJyA6ICdsaW5lLXRocm91Z2gnO1xuICAgIH1cbiAgfVxufVxuXG5leHBvcnQgY2xhc3MgQXN5bmM8VD4gZXh0ZW5kcyBfQXN5bmM8VD4ge1xuICBwcml2YXRlIHJvb3RFbDogSFRNTExJRWxlbWVudCB8IG51bGwgPSBudWxsO1xuXG4gIHByaXZhdGUgc3RhdGljIGdldFRleHREZWNvcmF0aW9uKCkge1xuICAgIHJldHVybiAnbGluZS10aHJvdWdoIGRvdHRlZCc7XG4gIH1cblxuICBjb21wb25lbnREaWRVcGRhdGUoKSB7XG4gICAgLy8gUmVzZXQgc3R5bGVcbiAgICBjb25zdCBhc3luYyA9IHRoaXMucm9vdEVsIS5xdWVyeVNlbGVjdG9yPEhUTUxTcGFuRWxlbWVudD4oJ3NwYW5bc3R5bGVdJyk7XG4gICAgYXN5bmMhLnN0eWxlLnRleHREZWNvcmF0aW9uID0gQXN5bmMuZ2V0VGV4dERlY29yYXRpb24oKTtcbiAgfVxuXG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGxpIGNsYXNzTmFtZT1cImFzeW5jXCIgcmVmPXtyb290RWwgPT4gKHRoaXMucm9vdEVsID0gcm9vdEVsKX0+XG4gICAgICAgIDxzcGFuIHN0eWxlPXt7IHRleHREZWNvcmF0aW9uOiBBc3luYy5nZXRUZXh0RGVjb3JhdGlvbigpIH19PkFzeW5jPC9zcGFuPlxuICAgICAgICA8dWw+e3N1cGVyLnJlbmRlcigpfTwvdWw+XG4gICAgICA8L2xpPlxuICAgICk7XG4gIH1cbn1cbiJdfQ==

lib/DisplayFields.d.ts

@@ -6,6 +6,6 @@ import * as React from 'react';
     context: FormWithConstraintsChildContext;
-    componentWillMount(): void;
+    componentDidMount(): void;
     componentWillUnmount(): void;
     reRender: () => void;
-    render(): JSX.Element;
+    render(): string;
 }
@@ -17,2 +17,3 @@ export { FormWithConstraints };
 export declare class FieldFeedback extends _FieldFeedback {
+    private rootEl;
     private getTextDecoration;
@@ -23,5 +24,6 @@ render(): JSX.Element;
 export declare class Async<T> extends _Async<T> {
-    private getTextDecoration;
-    componentWillUpdate(): void;
+    private rootEl;
+    private static getTextDecoration;
+    componentDidUpdate(): void;
     render(): JSX.Element;
 }

lib/DisplayFields.js

 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import * as PropTypes from 'prop-types';
-import { FormWithConstraints, FieldFeedback as _FieldFeedback, FieldFeedbackType, FieldFeedbacks as _FieldFeedbacks, Async as _Async, FieldEvent } from 'react-form-with-constraints';
-function stringifyWithUndefinedAndWithoutPropertyQuotes(obj, space) {
+import { FormWithConstraints, FieldFeedback as _FieldFeedback, FieldFeedbackType, FieldFeedbacks as _FieldFeedbacks, Async as _Async, FieldEvent, isHTMLInput } from 'react-form-with-constraints';
+function beautifulStringify(obj, space) {
     let str = JSON.stringify(obj, (_key, value) => (value === undefined ? '__undefined__' : value), space);
     str = str.replace(/"__undefined__"/g, 'undefined');
     str = str.replace(/"([^"]+)":/g, '$1:');
+    str = str.replace(/: "(.*[\\"].*)",/g, ': $1,');
+    str = str.replace(/\\"/g, '"');
     return str;
 }
+function normalizeFieldElementProperty(fields) {
+    return fields.map(field => {
+        const { element, ...otherProps } = field;
+        return element
+            ? {
+                element: isHTMLInput(element)
+                    ? element.outerHTML
+                    : element.props,
+                ...otherProps
+            }
+            : field;
+    });
+}
 export class DisplayFields extends React.Component {
@@ -18,22 +32,18 @@ constructor() {
     }
-    componentWillMount() {
-        const { form } = this.context;
-        form.fieldsStore.addListener(FieldEvent.Added, this.reRender);
-        form.fieldsStore.addListener(FieldEvent.Removed, this.reRender);
-        form.addFieldDidValidateEventListener(this.reRender);
-        form.addFieldDidResetEventListener(this.reRender);
+    componentDidMount() {
+        this.context.form.fieldsStore.addListener(FieldEvent.Added, this.reRender);
+        this.context.form.fieldsStore.addListener(FieldEvent.Removed, this.reRender);
+        this.context.form.addFieldDidValidateEventListener(this.reRender);
+        this.context.form.addFieldDidResetEventListener(this.reRender);
     }
     componentWillUnmount() {
-        const { form } = this.context;
-        form.fieldsStore.removeListener(FieldEvent.Added, this.reRender);
-        form.fieldsStore.removeListener(FieldEvent.Removed, this.reRender);
-        form.removeFieldDidValidateEventListener(this.reRender);
-        form.removeFieldDidResetEventListener(this.reRender);
+        this.context.form.fieldsStore.removeListener(FieldEvent.Added, this.reRender);
+        this.context.form.fieldsStore.removeListener(FieldEvent.Removed, this.reRender);
+        this.context.form.removeFieldDidValidateEventListener(this.reRender);
+        this.context.form.removeFieldDidResetEventListener(this.reRender);
     }
     render() {
-        let str = stringifyWithUndefinedAndWithoutPropertyQuotes(this.context.form.fieldsStore.fields, 2);
+        let str = beautifulStringify(normalizeFieldElementProperty(this.context.form.fieldsStore.fields), 2);
         str = str.replace(/{\s+key: (.*),\s+type: (.*),\s+show: (.*)\s+}/g, '{ key: $1, type: $2, show: $3 }');
-        return React.createElement("pre", { style: { fontSize: 'small' } },
-            "Fields = ",
-            str);
+        return str;
     }
@@ -62,2 +72,6 @@ }
 export class FieldFeedback extends _FieldFeedback {
+    constructor() {
+        super(...arguments);
+        this.rootEl = null;
+    }
     getTextDecoration() {
@@ -73,2 +87,4 @@ const { show } = this.state.validation;
                 break;
+            default:
+                textDecoration = '';
         }
@@ -79,3 +95,3 @@ return textDecoration;
         const { key, type } = this.state.validation;
-        return (React.createElement("li", null,
+        return (React.createElement("li", { ref: rootEl => (this.rootEl = rootEl) },
             React.createElement("span", { style: { textDecoration: this.getTextDecoration() } },
@@ -91,8 +107,7 @@ "key=\"",
     componentDidUpdate() {
-        const el = ReactDOM.findDOMNode(this);
-        const fieldFeedbackSpans = el.querySelectorAll('[data-feedback]');
+        const fieldFeedbackSpans = this.rootEl.querySelectorAll('[data-feedback]');
         for (const fieldFeedbackSpan of fieldFeedbackSpans) {
             fieldFeedbackSpan.style.display = 'inline';
         }
-        const li = el.closest('li.async');
+        const li = this.rootEl.closest('li.async');
         if (li !== null) {
@@ -104,4 +119,4 @@ const async = li.querySelector('span[style]');
         if (type === FieldFeedbackType.WhenValid) {
-            const span = el.querySelector('span[style]');
-            const whenValid = el.querySelector(`span.${this.props.classes.valid}`);
+            const span = this.rootEl.querySelector('span[style]');
+            const whenValid = this.rootEl.querySelector(`span.${this.props.classes.valid}`);
             span.style.textDecoration = whenValid !== null ? '' : 'line-through';
@@ -112,15 +127,18 @@ }
 export class Async extends _Async {
-    getTextDecoration() {
+    constructor() {
+        super(...arguments);
+        this.rootEl = null;
+    }
+    static getTextDecoration() {
         return 'line-through dotted';
     }
-    componentWillUpdate() {
-        const el = ReactDOM.findDOMNode(this);
-        const async = el.querySelector('span[style]');
-        async.style.textDecoration = this.getTextDecoration();
+    componentDidUpdate() {
+        const async = this.rootEl.querySelector('span[style]');
+        async.style.textDecoration = Async.getTextDecoration();
     }
     render() {
-        return (React.createElement("li", { className: "async" },
-            React.createElement("span", { style: { textDecoration: this.getTextDecoration() } }, "Async"),
+        return (React.createElement("li", { className: "async", ref: rootEl => (this.rootEl = rootEl) },
+            React.createElement("span", { style: { textDecoration: Async.getTextDecoration() } }, "Async"),
             React.createElement("ul", null, super.render())));
     }
 }

package.json

 {
   "name": "react-form-with-constraints-tools",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "repository": {
@@ -17,2 +17,3 @@ "type": "git",
   ],
+  "main": "lib-es5/index.js",
   "module": "lib/index.js",
@@ -29,41 +30,39 @@ "types": "lib/index.d.ts",
     "tsc": "tsc",
-    "build": "run-p build:*",
+    "build": "yarn build:esnext && yarn build:es5",
     "build:esnext": "tsc --project tsconfig.lib.json",
     "build:es5": "tsc --project tsconfig.lib-es5.json",
-    "dist": "run-p dist:*",
+    "dist": "yarn dist:dev && yarn dist:prod",
     "dist:dev": "NODE_ENV=development rollup --config",
     "dist:prod": "NODE_ENV=production rollup --config",
-    "prepublishOnly": "yarn clean && run-p tsc build dist",
+    "prepublishOnly": "yarn clean && yarn build && yarn dist",
     "prepack": "cp ../../LICENSE . && jscodeshift --transform=../../removeConsoleTransform.ts lib lib-es5",
     "postpack": "rm LICENSE",
-    "test": "node --trace-warnings node_modules/.bin/jest --no-cache --verbose",
-    "test:coverage": "node --trace-warnings node_modules/.bin/jest --no-cache --coverage"
+    "test": "jest --verbose",
+    "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
-    "react-dom": ">=16",
-    "react-form-with-constraints": "^0.13.0"
+    "react-form-with-constraints": "^0.14.0"
   },
   "devDependencies": {
-    "@types/enzyme": "^3.9.3",
+    "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/jest": "^24.0.14",
-    "@types/jscodeshift": "^0.6.1",
-    "@types/react": "^16.8.20",
-    "@types/react-dom": "^16.8.4",
-    "enzyme": "3.9.0",
+    "@types/jest": "^24.0.18",
+    "@types/jscodeshift": "^0.6.3",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
-    "jest": "^24.8.0",
+    "jest": "^24.9.0",
     "jscodeshift": "^0.6.4",
     "npm-run-all": "^4.1.5",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-form-with-constraints": "^0.13.0",
-    "rollup": "^1.15.3",
-    "rollup-plugin-filesize": "^6.1.0",
-    "rollup-plugin-typescript2": "^0.21.1",
-    "rollup-plugin-uglify": "^6.0.2",
-    "ts-jest": "^24.0.2",
-    "typescript": "^3.5.2"
+    "react": "^16.9.0",
+    "react-form-with-constraints": "^0.14.0",
+    "rollup": "^1.21.4",
+    "rollup-plugin-filesize": "^6.2.0",
+    "rollup-plugin-typescript2": "^0.24.2",
+    "rollup-plugin-uglify": "^6.0.3",
+    "ts-jest": "^24.1.0",
+    "typescript": "^3.6.3"
   },
-  "gitHead": "0cb3bb63f7ceb4388a03dc7468a0a842be5f3ff3"
+  "gitHead": "637b033cfe5fa483c5f46d644aaaeb493bea428a"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53152

increased by18.83%

Dependency count

1

decreased by-50%

Dev dependency count

19

decreased by-5%

Lines of code

633

increased by17.01%

No dependency changes