@react-buddy/ide-toolbox - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0-dev.0

CHANGELOG.md

@@ -6,2 +6,7 @@ # Change Log
 
+# [2.1.0-dev.0](https://github.com/react-buddy/ide-toolbox/tree/master/packages/react-ide-toolbox/compare/@react-buddy/ide-toolbox@1.1.0...@react-buddy/ide-toolbox@2.1.0-dev.0) (2022-03-31)
+
+### Features
+* errorBoundary for preview and palette component [#25](https://github.com/react-buddy/ide-toolbox/tree/master/packages/react-ide-toolbox/issues/25) ([d1b347c](https://github.com/react-buddy/ide-toolbox/tree/master/packages/react-ide-toolbox/commit/d1b347c655781aac2fcc15c7b3713e53988bc1a5))
+
 # [2.0.0-dev.2](https://github.com/react-buddy/ide-toolbox/tree/master/packages/react-ide-toolbox/compare/@react-buddy/ide-toolbox@2.0.0-dev.1...@react-buddy/ide-toolbox@2.0.0-dev.2) (2022-02-24)
@@ -8,0 +13,0 @@

dist/index.d.ts

@@ -1,5 +0,5 @@
-export * from "./previews/dev-support";
-export * from "./previews/previews";
-export * from "./previews/component-preview";
-export * from "./previews/previews.types";
-export * from "./palette/palette";
+export * from './previews/dev-support';
+export * from './previews/previews';
+export * from './previews/component-preview';
+export * from "./types";
+export * from './palette/palette';

dist/index.esm.js

@@ -13,3 +13,3 @@ 'use strict';
 const envDevmode = typeof process !== 'undefined'
-    ? ((_a = process.env) === null || _a === void 0 ? void 0 : _a.REACT_APP_IDE_DEVMODE) === "true"
+    ? ((_a = process.env) === null || _a === void 0 ? void 0 : _a.REACT_APP_IDE_DEVMODE) === 'true'
     : false;
@@ -36,8 +36,6 @@ const windowDevmode = window.REACT_BUDDY_IDE_DEVMODE === true;
 };
-const DevSupport = ({ children, ComponentPreviews, useInitialHook, devmode }) => {
+const DevSupport = ({ children, ComponentPreviews, useInitialHook, devmode, }) => {
     const isDevmode = enabledDevmode(devmode);
     if (isDevmode) {
-        return useInitialHook
-            ? withInitialHook(useInitialHook, ComponentPreviews)({})
-            : React__default['default'].createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews });
+        return useInitialHook ? (withInitialHook(useInitialHook, ComponentPreviews)({})) : (React__default['default'].createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews }));
     }
@@ -77,9 +75,9 @@ return React__default['default'].createElement(React__default['default'].Fragment, null, children);
 
-var css_248z$8 = ".table-header {\n  border-color: #363636;\n  border-width: 1px 0;\n  border-style: solid;\n  font-weight: 800;\n  padding: 10px 20px 10px 10px;\n  display: flex;\n}\n.table-header:after {\n  content: \"\";\n}\n.table-header .table-header-item {\n  flex-basis: 22%;\n  color: #444;\n}\n.table-header .table-header-item-control {\n  flex-basis: 78%;\n  color: #444;\n}";
-styleInject(css_248z$8);
+var css_248z$9 = ".table-header {\n  border-color: #363636;\n  border-width: 1px 0;\n  border-style: solid;\n  font-weight: 800;\n  padding: 10px 20px 10px 10px;\n  display: flex;\n}\n.table-header:after {\n  content: \"\";\n}\n.table-header .table-header-item {\n  flex-basis: 22%;\n  color: #444;\n}\n.table-header .table-header-item-control {\n  flex-basis: 78%;\n  color: #444;\n}";
+styleInject(css_248z$9);
 
 const TableHeader = () => {
-    return (React__default['default'].createElement("div", { className: "table-header" },
-        React__default['default'].createElement("div", { className: "table-header-item" }, "Property name"),
-        React__default['default'].createElement("div", { className: "table-header-item-control" }, "Edit")));
+    return (React__default['default'].createElement("div", { className: 'table-header' },
+        React__default['default'].createElement("div", { className: 'table-header-item' }, "Property name"),
+        React__default['default'].createElement("div", { className: 'table-header-item-control' }, "Edit")));
 };
@@ -126,3 +124,3 @@
     var { value } = _a, restProps = __rest(_a, ["value"]);
-    return (React__default['default'].createElement("input", Object.assign({}, restProps, { value: value !== null && value !== void 0 ? value : "", type: "text" })));
+    return React__default['default'].createElement("input", Object.assign({}, restProps, { value: value !== null && value !== void 0 ? value : '', type: 'text' }));
 };
@@ -133,3 +131,3 @@
     return (React__default['default'].createElement("div", { className: className },
-        React__default['default'].createElement("input", Object.assign({}, restProps, { checked: checked !== null && checked !== void 0 ? checked : false, type: "checkbox" }))));
+        React__default['default'].createElement("input", Object.assign({}, restProps, { checked: checked !== null && checked !== void 0 ? checked : false, type: 'checkbox' }))));
 };
@@ -144,24 +142,22 @@
 
-var css_248z$7 = ".radio-control {\n  display: flex;\n  align-items: center;\n  margin-right: 15px;\n}\n.radio-control label {\n  margin-right: 5px;\n}";
-styleInject(css_248z$7);
+var css_248z$8 = ".radio-control {\n  display: flex;\n  align-items: center;\n  margin-right: 15px;\n}\n.radio-control label {\n  margin-right: 5px;\n}";
+styleInject(css_248z$8);
 
 const Radio = (_a) => {
     var { className, radioData, extValue } = _a, restProps = __rest(_a, ["className", "radioData", "extValue"]);
-    return radioData
-        ? React__default['default'].createElement("div", { className: className }, radioData.map((value) => {
-            return (React__default['default'].createElement("div", { key: value, className: "radio-control" },
-                React__default['default'].createElement("label", { htmlFor: String(value) },
-                    " ",
-                    value),
-                React__default['default'].createElement("input", Object.assign({}, restProps, { type: "radio", checked: extValue == value, id: String(value), value: value }))));
-        }))
-        : null;
+    return radioData ? (React__default['default'].createElement("div", { className: className }, radioData.map((value) => {
+        return (React__default['default'].createElement("div", { key: value, className: 'radio-control' },
+            React__default['default'].createElement("label", { htmlFor: String(value) },
+                " ",
+                value),
+            React__default['default'].createElement("input", Object.assign({}, restProps, { type: 'radio', checked: extValue == value, id: String(value), value: value }))));
+    }))) : null;
 };
 
 const Textarea = (props) => {
-    return (React__default['default'].createElement("textarea", Object.assign({}, props)));
+    return React__default['default'].createElement("textarea", Object.assign({}, props));
 };
 
-var css_248z$6 = ".json-editor {\n  flex-direction: column;\n}\n.json-editor .json-editor-textarea {\n  align-self: start;\n  width: 100%;\n  min-height: 100px;\n  margin: 0 0 10px 0;\n}\n.json-editor .json-editor-apply-button {\n  align-self: start;\n}";
-styleInject(css_248z$6);
+var css_248z$7 = ".json-editor {\n  flex-direction: column;\n}\n.json-editor .json-editor-textarea {\n  align-self: start;\n  width: 100%;\n  min-height: 100px;\n  margin: 0 0 10px 0;\n}\n.json-editor .json-editor-apply-button {\n  align-self: start;\n}";
+styleInject(css_248z$7);
 
@@ -171,3 +167,3 @@ const JsonEditor = ({ className, propName, propValue, propUpdate, }) => {
     const textareaOnChange = React.useCallback((event) => {
-        const { currentTarget: { value } } = event;
+        const { currentTarget: { value }, } = event;
         setEditedJsonValue(value);
@@ -182,40 +178,40 @@ }, []);
     }, [propName, editedJsonValue]);
-    return (React__default['default'].createElement("div", { className: className + " json-editor" },
-        React__default['default'].createElement(Textarea, { className: "json-editor-textarea", onChange: textareaOnChange, id: propName, value: editedJsonValue !== null && editedJsonValue !== void 0 ? editedJsonValue : propValue }),
-        React__default['default'].createElement("button", { className: "json-editor-apply-button", disabled: isEnabledToApply, onClick: onPropUpdate }, "Apply changes")));
+    return (React__default['default'].createElement("div", { className: className + ' json-editor' },
+        React__default['default'].createElement(Textarea, { className: 'json-editor-textarea', onChange: textareaOnChange, id: propName, value: editedJsonValue !== null && editedJsonValue !== void 0 ? editedJsonValue : propValue }),
+        React__default['default'].createElement("button", { className: 'json-editor-apply-button', disabled: isEnabledToApply, onClick: onPropUpdate }, "Apply changes")));
 };
 
-const TableItemControl = ({ controlType, data, propName, propValue, onPropChange }) => {
+const TableItemControl = ({ controlType, data, propName, propValue, onPropChange, }) => {
     switch (controlType) {
         case exports.PropsControlTypes.Input:
-            return (React__default['default'].createElement(Input, { className: "table-item-control", id: propName, value: propValue, onChange: onPropChange }));
+            return (React__default['default'].createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
         case exports.PropsControlTypes.Textarea:
-            return (React__default['default'].createElement(Textarea, { className: "table-item-control", id: propName, value: propValue, onChange: onPropChange }));
+            return (React__default['default'].createElement(Textarea, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
         case exports.PropsControlTypes.Select:
-            return (React__default['default'].createElement(Select, { className: "table-item-control", id: propName, onChange: onPropChange, optionsData: data }));
+            return (React__default['default'].createElement(Select, { className: 'table-item-control', id: propName, onChange: onPropChange, optionsData: data }));
         case exports.PropsControlTypes.Checkbox:
             return (React__default['default'].createElement(Checkbox, { checked: propValue, id: propName, onChange: onPropChange }));
         case exports.PropsControlTypes.Radio:
-            return (React__default['default'].createElement(Radio, { className: "table-item-control", extValue: propValue, name: propName, onChange: onPropChange, radioData: data }));
+            return (React__default['default'].createElement(Radio, { className: 'table-item-control', extValue: propValue, name: propName, onChange: onPropChange, radioData: data }));
         case exports.PropsControlTypes.JsonEditor:
-            return (React__default['default'].createElement(JsonEditor, { className: "table-item-control", propValue: propValue, propName: propName, propUpdate: onPropChange }));
+            return (React__default['default'].createElement(JsonEditor, { className: 'table-item-control', propValue: propValue, propName: propName, propUpdate: onPropChange }));
         default:
-            return (React__default['default'].createElement(Input, { className: "table-item-control", id: propName, value: propValue, onChange: onPropChange }));
+            return (React__default['default'].createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
     }
 };
 
-var css_248z$5 = ".table-item-wrapper {\n  border-color: #363636;\n  border-width: 0 0 1px 0;\n  border-style: solid;\n  padding: 10px;\n  display: flex;\n}\n.table-item-wrapper:after {\n  content: \"\";\n}\n.table-item-wrapper .table-item, .table-item-wrapper .table-item-control {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n}\n.table-item-wrapper .table-item {\n  flex-basis: 22%;\n}\n.table-item-wrapper .table-item-control {\n  flex-basis: 78%;\n}";
-styleInject(css_248z$5);
+var css_248z$6 = ".table-item-wrapper {\n  border-color: #363636;\n  border-width: 0 0 1px 0;\n  border-style: solid;\n  padding: 10px;\n  display: flex;\n}\n.table-item-wrapper:after {\n  content: \"\";\n}\n.table-item-wrapper .table-item,\n.table-item-wrapper .table-item-control {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n}\n.table-item-wrapper .table-item {\n  flex-basis: 22%;\n}\n.table-item-wrapper .table-item-control {\n  flex-basis: 78%;\n}";
+styleInject(css_248z$6);
 
-const TableItem = ({ propName, propValue, onPropChange, controlType, data }) => {
-    return (React__default['default'].createElement("div", { className: "table-item-wrapper" },
-        React__default['default'].createElement("div", { className: "table-item" }, propName),
+const TableItem = ({ propName, propValue, onPropChange, controlType, data, }) => {
+    return (React__default['default'].createElement("div", { className: 'table-item-wrapper' },
+        React__default['default'].createElement("div", { className: 'table-item' }, propName),
         React__default['default'].createElement(TableItemControl, { data: data, controlType: controlType, propName: propName, propValue: propValue, onPropChange: onPropChange })));
 };
 
-var css_248z$4 = ".table-items {\n  background-color: whitesmoke;\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n}\n.table-items:after {\n  content: \"\";\n}";
-styleInject(css_248z$4);
+var css_248z$5 = ".table-items {\n  background-color: whitesmoke;\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n}\n.table-items:after {\n  content: \"\";\n}";
+styleInject(css_248z$5);
 
 const TableItems = ({ toolsPropsToEdit }) => {
-    const { props = null, initialProps = null, propsEditInfo = null, updateProps } = Object.assign({}, toolsPropsToEdit);
+    const { props = null, initialProps = null, propsEditInfo = null, updateProps, } = Object.assign({}, toolsPropsToEdit);
     React.useEffect(() => {
@@ -284,3 +280,4 @@ let propsValuesFromData = {};
                 return onJsonChange;
-            default: return onInputChange;
+            default:
+                return onInputChange;
         }
@@ -290,27 +287,28 @@ }, [props]);
         let items = [];
-        const itemsWithoutInfo = props && Object.entries(props)
-            .filter(([propName]) => {
-            return !(propsEditInfo === null || propsEditInfo === void 0 ? void 0 : propsEditInfo.hasOwnProperty(propName));
-        })
-            .map(([propName, propValue]) => {
-            return (React__default['default'].createElement(TableItem, { key: propName, propName: propName, propValue: propValue, initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler() }));
-        });
+        const itemsWithoutInfo = props &&
+            Object.entries(props)
+                .filter(([propName]) => {
+                return !(propsEditInfo === null || propsEditInfo === void 0 ? void 0 : propsEditInfo.hasOwnProperty(propName));
+            })
+                .map(([propName, propValue]) => {
+                return (React__default['default'].createElement(TableItem, { key: propName, propName: propName, propValue: propValue, initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler() }));
+            });
         items = itemsWithoutInfo ? [...items, ...itemsWithoutInfo] : items;
-        const itemsWithInfo = propsEditInfo && Object.entries(propsEditInfo)
-            .map(([propName, propInfo]) => {
-            return (React__default['default'].createElement(TableItem, { key: propName, data: propInfo.data, controlType: propInfo.controlType, propName: propName, propValue: propInfo.controlType === exports.PropsControlTypes.JsonEditor
-                    ? JSON.stringify(props === null || props === void 0 ? void 0 : props[propName], null, 2)
-                    : props === null || props === void 0 ? void 0 : props[propName], initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler(propInfo.controlType) }));
-        });
+        const itemsWithInfo = propsEditInfo &&
+            Object.entries(propsEditInfo).map(([propName, propInfo]) => {
+                return (React__default['default'].createElement(TableItem, { key: propName, data: propInfo.data, controlType: propInfo.controlType, propName: propName, propValue: propInfo.controlType === exports.PropsControlTypes.JsonEditor
+                        ? JSON.stringify(props === null || props === void 0 ? void 0 : props[propName], null, 2)
+                        : props === null || props === void 0 ? void 0 : props[propName], initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler(propInfo.controlType) }));
+            });
         items = itemsWithInfo ? [...items, ...itemsWithInfo] : items;
         return items;
     }, [props, propsEditInfo]);
-    return (React__default['default'].createElement("div", { className: "table-items" }, renderTableItems()));
+    return React__default['default'].createElement("div", { className: 'table-items' }, renderTableItems());
 };
 
-var css_248z$3 = ".props-edit-table {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}";
-styleInject(css_248z$3);
+var css_248z$4 = ".props-edit-table {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}";
+styleInject(css_248z$4);
 
 const PropsEditTable = ({ toolsPropsToEdit }) => {
-    return (React__default['default'].createElement("div", { className: "props-edit-table" },
+    return (React__default['default'].createElement("div", { className: 'props-edit-table' },
         React__default['default'].createElement(TableHeader, null),
@@ -320,4 +318,4 @@ React__default['default'].createElement(TableItems, { toolsPropsToEdit: toolsPropsToEdit })));
 
-var css_248z$2 = ".tools-panel {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background-color: #eeeeee;\n}\n.tools-panel .empty-props-message {\n  color: red;\n}";
-styleInject(css_248z$2);
+var css_248z$3 = ".tools-panel {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background-color: #eeeeee;\n}\n.tools-panel .empty-props-message {\n  color: red;\n}";
+styleInject(css_248z$3);
 
@@ -329,8 +327,8 @@ const ToolsPanel = ({ toolsPropsToEdit }) => {
         hasPropetiesToEdit = props ? Object.keys(props).length > 0 : false;
-        hasPropetiesToEdit = hasPropetiesToEdit || (propsEditInfo ? Object.keys(propsEditInfo).length > 0 : false);
-        return hasPropetiesToEdit
-            ? (React__default['default'].createElement(PropsEditTable, { toolsPropsToEdit: toolsPropsToEdit }))
-            : (React__default['default'].createElement("div", { className: "empty-props-message" }, "This component has no properties to edit"));
+        hasPropetiesToEdit =
+            hasPropetiesToEdit ||
+                (propsEditInfo ? Object.keys(propsEditInfo).length > 0 : false);
+        return hasPropetiesToEdit ? (React__default['default'].createElement(PropsEditTable, { toolsPropsToEdit: toolsPropsToEdit })) : (React__default['default'].createElement("div", { className: 'empty-props-message' }, "This component has no properties to edit"));
     }, [props, propsEditInfo]);
-    return (React__default['default'].createElement("div", { className: "tools-panel" }, renederToolsPanelContent()));
+    return React__default['default'].createElement("div", { className: 'tools-panel' }, renederToolsPanelContent());
 };
@@ -343,3 +341,3 @@
 const PALETTE_PATH = '/REACT_BUDDY_PALETTE';
-const URL_CHANGE_EVENT = "urlchange";
+const URL_CHANGE_EVENT = 'urlchange';
 const useRoute = (path, exact) => {
@@ -354,6 +352,6 @@ const [, setUpdate] = React.useState(false);
         window.addEventListener(URL_CHANGE_EVENT, update);
-        window.addEventListener("popstate", update);
+        window.addEventListener('popstate', update);
         return () => {
             window.removeEventListener(URL_CHANGE_EVENT, update);
-            window.removeEventListener("popstate", update);
+            window.removeEventListener('popstate', update);
         };
@@ -377,6 +375,6 @@ }, []);
     const { hash, pathname } = window.location;
-    return hash ? hash.replace("#", "") : pathname;
+    return hash ? hash.replace('#', '') : pathname;
 }
 function historyPush(url) {
-    window.history.replaceState({}, "", url);
+    window.history.replaceState({}, '', url);
     dispatchUrlChangeEvent(url);
@@ -387,3 +385,3 @@ }
         bubbles: true,
-        detail: url
+        detail: url,
     });
@@ -393,9 +391,9 @@ window.dispatchEvent(urlChangeEvent);
 
-var css_248z$1 = ".previews-module_previewsMain__31L3F {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.previews-module_previewsContent__1aMUf {\n  flex-basis: 100%;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.previews-module_previewsToolsPanel__30jjI {\n  flex-basis: 295px;\n  min-height: 100px;\n}";
-var styles$1 = {"previewsMain":"previews-module_previewsMain__31L3F","previewsContent":"previews-module_previewsContent__1aMUf","previewsToolsPanel":"previews-module_previewsToolsPanel__30jjI"};
-styleInject(css_248z$1);
+var css_248z$2 = ".previews-module_previewsMain__31L3F {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.previews-module_previewsContent__1aMUf {\n  flex-basis: 100%;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.previews-module_previewsToolsPanel__30jjI {\n  flex-basis: 295px;\n  min-height: 100px;\n}";
+var styles$2 = {"previewsMain":"previews-module_previewsMain__31L3F","previewsContent":"previews-module_previewsContent__1aMUf","previewsToolsPanel":"previews-module_previewsToolsPanel__30jjI"};
+styleInject(css_248z$2);
 
-const Previews = ({ children, palette = null }) => {
+const Previews = ({ children, palette = null, }) => {
     const [toolsPropsToEdit, setToolsPropsToEdit] = React.useState(null);
-    const [toolsPanelEnabled, enableToolsPanel] = React.useState(window.__PROPERTIES_EDIT_PANEL_ENABLED__);
+    const [toolsPanelEnabled, enableToolsPanel] = React.useState(() => { var _a; return (_a = window.__PROPERTIES_EDIT_PANEL_ENABLED__) !== null && _a !== void 0 ? _a : false; });
     const isPalettePath = useRoute(PALETTE_PATH);
@@ -410,11 +408,10 @@ const childrenWithSetProps = React.useMemo(() => {
     React.useEffect(() => {
-        var _a, _b;
+        var _a;
         window.enableComponentsPropsPanelEditor = (toolsPanelStatus) => {
-            window.setPropertiesEditPanelStatus
-                ? window.setPropertiesEditPanelStatus(toolsPanelStatus)
-                : null;
+            var _a;
+            (_a = window.setPropertiesEditPanelStatus) === null || _a === void 0 ? void 0 : _a.call(window, toolsPanelStatus);
             enableToolsPanel(toolsPanelStatus);
         };
         window.reactBuddyHistoryPush = historyPush;
-        (_b = (_a = window).cefQuery) === null || _b === void 0 ? void 0 : _b.call(_a, { request: "event:react-toolbox-initialized" });
+        (_a = window.cefQuery) === null || _a === void 0 ? void 0 : _a.call(window, { request: 'event:react-toolbox-initialized' });
     }, []);
@@ -424,9 +421,9 @@ if (isPalettePath) {
     }
-    return (React__default['default'].createElement("div", { className: styles$1.previewsMain },
-        React__default['default'].createElement("div", { className: styles$1.previewsContent }, childrenWithSetProps),
-        toolsPanelEnabled && (React__default['default'].createElement("div", { className: styles$1.previewsToolsPanel },
+    return (React__default['default'].createElement("div", { className: styles$2.previewsMain },
+        React__default['default'].createElement("div", { className: styles$2.previewsContent }, childrenWithSetProps),
+        toolsPanelEnabled && (React__default['default'].createElement("div", { className: styles$2.previewsToolsPanel },
             React__default['default'].createElement(ToolsPanel, { toolsPropsToEdit: toolsPropsToEdit })))));
 };
 
-const RoutePreview = ({ children, path, exact, setPropsToEdit }) => {
+const RoutePreview = ({ children, path, exact, setPropsToEdit, }) => {
     const [modfiedProps, setModifiedProps] = React.useState(null);
@@ -439,3 +436,3 @@ const isMatchPath = useRoute(path, exact);
                 props: currentProps,
-                updateProps: setModifiedProps
+                updateProps: setModifiedProps,
             };
@@ -454,11 +451,41 @@ setPropsToEdit(propsToEdit);
 
-const ComponentPreview = ({ path, children, setToolsPropsToEdit, exact = true, propsEditInfo }) => {
+var css_248z$1 = ".error-boundary-module_errorMessage__1SKhh {\n  text-align: center;\n  padding-left: 20px;\n  padding-right: 20px;\n  color: red;\n}";
+var styles$1 = {"errorMessage":"error-boundary-module_errorMessage__1SKhh"};
+styleInject(css_248z$1);
+
+class ErrorBoundary extends React__default['default'].Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hasError: false,
+        };
+    }
+    componentDidCatch() {
+        this.setState({ hasError: true });
+    }
+    componentDidUpdate(_prevProps, prevState) {
+        if (prevState.hasError) {
+            this.setState({ hasError: false });
+        }
+    }
+    render() {
+        const { hasError } = this.state;
+        const { componentName = '', children } = this.props;
+        if (hasError) {
+            return (React__default['default'].createElement("h2", { className: styles$1.errorMessage }, `Something went wrong while rendering ${componentName} component`));
+        }
+        return children;
+    }
+}
+
+const ComponentPreview = ({ path, children, setToolsPropsToEdit, exact = true, propsEditInfo, }) => {
     const setPropsToEdit = React.useCallback((propsToEdit) => {
         setToolsPropsToEdit(Object.assign(Object.assign({}, propsToEdit), { initialProps: children.props, propsEditInfo }));
     }, []);
-    return (React__default['default'].createElement(RoutePreview, { path: path, exact: exact, setPropsToEdit: setPropsToEdit }, children));
+    return (React__default['default'].createElement(RoutePreview, { path: path, exact: exact, setPropsToEdit: setPropsToEdit },
+        React__default['default'].createElement(ErrorBoundary, null, children)));
 };
 
-const DEFAULT_VARIANT_NAME = "DEFAULT_VARIANT";
-const VariantRoute = ({ categoryName, componentName, variantName = DEFAULT_VARIANT_NAME, children }) => {
+const DEFAULT_VARIANT_NAME = 'DEFAULT_VARIANT';
+const VariantRoute = ({ categoryName, componentName, variantName = DEFAULT_VARIANT_NAME, children, }) => {
     const paletteItemPath = React.useMemo(() => {
@@ -468,8 +495,6 @@ return getPaletteItemPath([categoryName, componentName, variantName]);
     const isPathMatch = useRoute(paletteItemPath, true);
-    return isPathMatch
-        ? React__default['default'].createElement(React__default['default'].Fragment, null, children)
-        : null;
+    return isPathMatch ? React__default['default'].createElement(React__default['default'].Fragment, null, children) : null;
 };
 function getPaletteItemPath(names) {
-    return PALETTE_PATH + "/" + names.filter(name => name != null).join("/");
+    return PALETTE_PATH + '/' + names.filter((name) => name != null).join('/');
 }
@@ -482,9 +507,10 @@
 const Category = ({ children, name }) => {
-    return (React__default['default'].createElement(React__default['default'].Fragment, null, getTransformedCategoryChildren(children, name)));
+    return React__default['default'].createElement(React__default['default'].Fragment, null, getTransformedCategoryChildren(children, name));
 };
-const Component = ({ children, categoryName, name }) => {
-    return (React__default['default'].createElement(React__default['default'].Fragment, null, getTransformedComponentChildren(children, name, categoryName)));
+const Component = ({ children, categoryName, name, }) => {
+    return React__default['default'].createElement(React__default['default'].Fragment, null, getTransformedComponentChildren(children, name, categoryName));
 };
-const Variant = ({ children, categoryName, componentName, name }) => {
-    return (React__default['default'].createElement(VariantRoute, { categoryName: categoryName, componentName: componentName, variantName: name }, children));
+const Variant = ({ children, categoryName, componentName, name, }) => {
+    return (React__default['default'].createElement(VariantRoute, { categoryName: categoryName, componentName: componentName, variantName: name },
+        React__default['default'].createElement(ErrorBoundary, { componentName: componentName }, children)));
 };
@@ -498,3 +524,3 @@ const Palette = ({ children }) => {
     }, []);
-    return (React__default['default'].createElement("div", { className: styles.palette }, children));
+    return React__default['default'].createElement("div", { className: styles.palette }, children);
 };
@@ -501,0 +527,0 @@ function getTransformedCategoryChildren(children, categoryName) {

dist/index.js

@@ -5,3 +5,3 @@ import React, { Suspense, useState, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
 const envDevmode = typeof process !== 'undefined'
-    ? ((_a = process.env) === null || _a === void 0 ? void 0 : _a.REACT_APP_IDE_DEVMODE) === "true"
+    ? ((_a = process.env) === null || _a === void 0 ? void 0 : _a.REACT_APP_IDE_DEVMODE) === 'true'
     : false;
@@ -28,8 +28,6 @@ const windowDevmode = window.REACT_BUDDY_IDE_DEVMODE === true;
 };
-const DevSupport = ({ children, ComponentPreviews, useInitialHook, devmode }) => {
+const DevSupport = ({ children, ComponentPreviews, useInitialHook, devmode, }) => {
     const isDevmode = enabledDevmode(devmode);
     if (isDevmode) {
-        return useInitialHook
-            ? withInitialHook(useInitialHook, ComponentPreviews)({})
-            : React.createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews });
+        return useInitialHook ? (withInitialHook(useInitialHook, ComponentPreviews)({})) : (React.createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews }));
     }
@@ -69,9 +67,9 @@ return React.createElement(React.Fragment, null, children);
 
-var css_248z$8 = ".table-header {\n  border-color: #363636;\n  border-width: 1px 0;\n  border-style: solid;\n  font-weight: 800;\n  padding: 10px 20px 10px 10px;\n  display: flex;\n}\n.table-header:after {\n  content: \"\";\n}\n.table-header .table-header-item {\n  flex-basis: 22%;\n  color: #444;\n}\n.table-header .table-header-item-control {\n  flex-basis: 78%;\n  color: #444;\n}";
-styleInject(css_248z$8);
+var css_248z$9 = ".table-header {\n  border-color: #363636;\n  border-width: 1px 0;\n  border-style: solid;\n  font-weight: 800;\n  padding: 10px 20px 10px 10px;\n  display: flex;\n}\n.table-header:after {\n  content: \"\";\n}\n.table-header .table-header-item {\n  flex-basis: 22%;\n  color: #444;\n}\n.table-header .table-header-item-control {\n  flex-basis: 78%;\n  color: #444;\n}";
+styleInject(css_248z$9);
 
 const TableHeader = () => {
-    return (React.createElement("div", { className: "table-header" },
-        React.createElement("div", { className: "table-header-item" }, "Property name"),
-        React.createElement("div", { className: "table-header-item-control" }, "Edit")));
+    return (React.createElement("div", { className: 'table-header' },
+        React.createElement("div", { className: 'table-header-item' }, "Property name"),
+        React.createElement("div", { className: 'table-header-item-control' }, "Edit")));
 };
@@ -118,3 +116,3 @@
     var { value } = _a, restProps = __rest(_a, ["value"]);
-    return (React.createElement("input", Object.assign({}, restProps, { value: value !== null && value !== void 0 ? value : "", type: "text" })));
+    return React.createElement("input", Object.assign({}, restProps, { value: value !== null && value !== void 0 ? value : '', type: 'text' }));
 };
@@ -125,3 +123,3 @@
     return (React.createElement("div", { className: className },
-        React.createElement("input", Object.assign({}, restProps, { checked: checked !== null && checked !== void 0 ? checked : false, type: "checkbox" }))));
+        React.createElement("input", Object.assign({}, restProps, { checked: checked !== null && checked !== void 0 ? checked : false, type: 'checkbox' }))));
 };
@@ -136,24 +134,22 @@
 
-var css_248z$7 = ".radio-control {\n  display: flex;\n  align-items: center;\n  margin-right: 15px;\n}\n.radio-control label {\n  margin-right: 5px;\n}";
-styleInject(css_248z$7);
+var css_248z$8 = ".radio-control {\n  display: flex;\n  align-items: center;\n  margin-right: 15px;\n}\n.radio-control label {\n  margin-right: 5px;\n}";
+styleInject(css_248z$8);
 
 const Radio = (_a) => {
     var { className, radioData, extValue } = _a, restProps = __rest(_a, ["className", "radioData", "extValue"]);
-    return radioData
-        ? React.createElement("div", { className: className }, radioData.map((value) => {
-            return (React.createElement("div", { key: value, className: "radio-control" },
-                React.createElement("label", { htmlFor: String(value) },
-                    " ",
-                    value),
-                React.createElement("input", Object.assign({}, restProps, { type: "radio", checked: extValue == value, id: String(value), value: value }))));
-        }))
-        : null;
+    return radioData ? (React.createElement("div", { className: className }, radioData.map((value) => {
+        return (React.createElement("div", { key: value, className: 'radio-control' },
+            React.createElement("label", { htmlFor: String(value) },
+                " ",
+                value),
+            React.createElement("input", Object.assign({}, restProps, { type: 'radio', checked: extValue == value, id: String(value), value: value }))));
+    }))) : null;
 };
 
 const Textarea = (props) => {
-    return (React.createElement("textarea", Object.assign({}, props)));
+    return React.createElement("textarea", Object.assign({}, props));
 };
 
-var css_248z$6 = ".json-editor {\n  flex-direction: column;\n}\n.json-editor .json-editor-textarea {\n  align-self: start;\n  width: 100%;\n  min-height: 100px;\n  margin: 0 0 10px 0;\n}\n.json-editor .json-editor-apply-button {\n  align-self: start;\n}";
-styleInject(css_248z$6);
+var css_248z$7 = ".json-editor {\n  flex-direction: column;\n}\n.json-editor .json-editor-textarea {\n  align-self: start;\n  width: 100%;\n  min-height: 100px;\n  margin: 0 0 10px 0;\n}\n.json-editor .json-editor-apply-button {\n  align-self: start;\n}";
+styleInject(css_248z$7);
 
@@ -163,3 +159,3 @@ const JsonEditor = ({ className, propName, propValue, propUpdate, }) => {
     const textareaOnChange = useCallback((event) => {
-        const { currentTarget: { value } } = event;
+        const { currentTarget: { value }, } = event;
         setEditedJsonValue(value);
@@ -174,40 +170,40 @@ }, []);
     }, [propName, editedJsonValue]);
-    return (React.createElement("div", { className: className + " json-editor" },
-        React.createElement(Textarea, { className: "json-editor-textarea", onChange: textareaOnChange, id: propName, value: editedJsonValue !== null && editedJsonValue !== void 0 ? editedJsonValue : propValue }),
-        React.createElement("button", { className: "json-editor-apply-button", disabled: isEnabledToApply, onClick: onPropUpdate }, "Apply changes")));
+    return (React.createElement("div", { className: className + ' json-editor' },
+        React.createElement(Textarea, { className: 'json-editor-textarea', onChange: textareaOnChange, id: propName, value: editedJsonValue !== null && editedJsonValue !== void 0 ? editedJsonValue : propValue }),
+        React.createElement("button", { className: 'json-editor-apply-button', disabled: isEnabledToApply, onClick: onPropUpdate }, "Apply changes")));
 };
 
-const TableItemControl = ({ controlType, data, propName, propValue, onPropChange }) => {
+const TableItemControl = ({ controlType, data, propName, propValue, onPropChange, }) => {
     switch (controlType) {
         case PropsControlTypes.Input:
-            return (React.createElement(Input, { className: "table-item-control", id: propName, value: propValue, onChange: onPropChange }));
+            return (React.createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
         case PropsControlTypes.Textarea:
-            return (React.createElement(Textarea, { className: "table-item-control", id: propName, value: propValue, onChange: onPropChange }));
+            return (React.createElement(Textarea, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
         case PropsControlTypes.Select:
-            return (React.createElement(Select, { className: "table-item-control", id: propName, onChange: onPropChange, optionsData: data }));
+            return (React.createElement(Select, { className: 'table-item-control', id: propName, onChange: onPropChange, optionsData: data }));
         case PropsControlTypes.Checkbox:
             return (React.createElement(Checkbox, { checked: propValue, id: propName, onChange: onPropChange }));
         case PropsControlTypes.Radio:
-            return (React.createElement(Radio, { className: "table-item-control", extValue: propValue, name: propName, onChange: onPropChange, radioData: data }));
+            return (React.createElement(Radio, { className: 'table-item-control', extValue: propValue, name: propName, onChange: onPropChange, radioData: data }));
         case PropsControlTypes.JsonEditor:
-            return (React.createElement(JsonEditor, { className: "table-item-control", propValue: propValue, propName: propName, propUpdate: onPropChange }));
+            return (React.createElement(JsonEditor, { className: 'table-item-control', propValue: propValue, propName: propName, propUpdate: onPropChange }));
         default:
-            return (React.createElement(Input, { className: "table-item-control", id: propName, value: propValue, onChange: onPropChange }));
+            return (React.createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
     }
 };
 
-var css_248z$5 = ".table-item-wrapper {\n  border-color: #363636;\n  border-width: 0 0 1px 0;\n  border-style: solid;\n  padding: 10px;\n  display: flex;\n}\n.table-item-wrapper:after {\n  content: \"\";\n}\n.table-item-wrapper .table-item, .table-item-wrapper .table-item-control {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n}\n.table-item-wrapper .table-item {\n  flex-basis: 22%;\n}\n.table-item-wrapper .table-item-control {\n  flex-basis: 78%;\n}";
-styleInject(css_248z$5);
+var css_248z$6 = ".table-item-wrapper {\n  border-color: #363636;\n  border-width: 0 0 1px 0;\n  border-style: solid;\n  padding: 10px;\n  display: flex;\n}\n.table-item-wrapper:after {\n  content: \"\";\n}\n.table-item-wrapper .table-item,\n.table-item-wrapper .table-item-control {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n}\n.table-item-wrapper .table-item {\n  flex-basis: 22%;\n}\n.table-item-wrapper .table-item-control {\n  flex-basis: 78%;\n}";
+styleInject(css_248z$6);
 
-const TableItem = ({ propName, propValue, onPropChange, controlType, data }) => {
-    return (React.createElement("div", { className: "table-item-wrapper" },
-        React.createElement("div", { className: "table-item" }, propName),
+const TableItem = ({ propName, propValue, onPropChange, controlType, data, }) => {
+    return (React.createElement("div", { className: 'table-item-wrapper' },
+        React.createElement("div", { className: 'table-item' }, propName),
         React.createElement(TableItemControl, { data: data, controlType: controlType, propName: propName, propValue: propValue, onPropChange: onPropChange })));
 };
 
-var css_248z$4 = ".table-items {\n  background-color: whitesmoke;\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n}\n.table-items:after {\n  content: \"\";\n}";
-styleInject(css_248z$4);
+var css_248z$5 = ".table-items {\n  background-color: whitesmoke;\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n}\n.table-items:after {\n  content: \"\";\n}";
+styleInject(css_248z$5);
 
 const TableItems = ({ toolsPropsToEdit }) => {
-    const { props = null, initialProps = null, propsEditInfo = null, updateProps } = Object.assign({}, toolsPropsToEdit);
+    const { props = null, initialProps = null, propsEditInfo = null, updateProps, } = Object.assign({}, toolsPropsToEdit);
     useEffect(() => {
@@ -276,3 +272,4 @@ let propsValuesFromData = {};
                 return onJsonChange;
-            default: return onInputChange;
+            default:
+                return onInputChange;
         }
@@ -282,27 +279,28 @@ }, [props]);
         let items = [];
-        const itemsWithoutInfo = props && Object.entries(props)
-            .filter(([propName]) => {
-            return !(propsEditInfo === null || propsEditInfo === void 0 ? void 0 : propsEditInfo.hasOwnProperty(propName));
-        })
-            .map(([propName, propValue]) => {
-            return (React.createElement(TableItem, { key: propName, propName: propName, propValue: propValue, initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler() }));
-        });
+        const itemsWithoutInfo = props &&
+            Object.entries(props)
+                .filter(([propName]) => {
+                return !(propsEditInfo === null || propsEditInfo === void 0 ? void 0 : propsEditInfo.hasOwnProperty(propName));
+            })
+                .map(([propName, propValue]) => {
+                return (React.createElement(TableItem, { key: propName, propName: propName, propValue: propValue, initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler() }));
+            });
         items = itemsWithoutInfo ? [...items, ...itemsWithoutInfo] : items;
-        const itemsWithInfo = propsEditInfo && Object.entries(propsEditInfo)
-            .map(([propName, propInfo]) => {
-            return (React.createElement(TableItem, { key: propName, data: propInfo.data, controlType: propInfo.controlType, propName: propName, propValue: propInfo.controlType === PropsControlTypes.JsonEditor
-                    ? JSON.stringify(props === null || props === void 0 ? void 0 : props[propName], null, 2)
-                    : props === null || props === void 0 ? void 0 : props[propName], initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler(propInfo.controlType) }));
-        });
+        const itemsWithInfo = propsEditInfo &&
+            Object.entries(propsEditInfo).map(([propName, propInfo]) => {
+                return (React.createElement(TableItem, { key: propName, data: propInfo.data, controlType: propInfo.controlType, propName: propName, propValue: propInfo.controlType === PropsControlTypes.JsonEditor
+                        ? JSON.stringify(props === null || props === void 0 ? void 0 : props[propName], null, 2)
+                        : props === null || props === void 0 ? void 0 : props[propName], initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler(propInfo.controlType) }));
+            });
         items = itemsWithInfo ? [...items, ...itemsWithInfo] : items;
         return items;
     }, [props, propsEditInfo]);
-    return (React.createElement("div", { className: "table-items" }, renderTableItems()));
+    return React.createElement("div", { className: 'table-items' }, renderTableItems());
 };
 
-var css_248z$3 = ".props-edit-table {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}";
-styleInject(css_248z$3);
+var css_248z$4 = ".props-edit-table {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}";
+styleInject(css_248z$4);
 
 const PropsEditTable = ({ toolsPropsToEdit }) => {
-    return (React.createElement("div", { className: "props-edit-table" },
+    return (React.createElement("div", { className: 'props-edit-table' },
         React.createElement(TableHeader, null),
@@ -312,4 +310,4 @@ React.createElement(TableItems, { toolsPropsToEdit: toolsPropsToEdit })));
 
-var css_248z$2 = ".tools-panel {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background-color: #eeeeee;\n}\n.tools-panel .empty-props-message {\n  color: red;\n}";
-styleInject(css_248z$2);
+var css_248z$3 = ".tools-panel {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background-color: #eeeeee;\n}\n.tools-panel .empty-props-message {\n  color: red;\n}";
+styleInject(css_248z$3);
 
@@ -321,8 +319,8 @@ const ToolsPanel = ({ toolsPropsToEdit }) => {
         hasPropetiesToEdit = props ? Object.keys(props).length > 0 : false;
-        hasPropetiesToEdit = hasPropetiesToEdit || (propsEditInfo ? Object.keys(propsEditInfo).length > 0 : false);
-        return hasPropetiesToEdit
-            ? (React.createElement(PropsEditTable, { toolsPropsToEdit: toolsPropsToEdit }))
-            : (React.createElement("div", { className: "empty-props-message" }, "This component has no properties to edit"));
+        hasPropetiesToEdit =
+            hasPropetiesToEdit ||
+                (propsEditInfo ? Object.keys(propsEditInfo).length > 0 : false);
+        return hasPropetiesToEdit ? (React.createElement(PropsEditTable, { toolsPropsToEdit: toolsPropsToEdit })) : (React.createElement("div", { className: 'empty-props-message' }, "This component has no properties to edit"));
     }, [props, propsEditInfo]);
-    return (React.createElement("div", { className: "tools-panel" }, renederToolsPanelContent()));
+    return React.createElement("div", { className: 'tools-panel' }, renederToolsPanelContent());
 };
@@ -335,3 +333,3 @@
 const PALETTE_PATH = '/REACT_BUDDY_PALETTE';
-const URL_CHANGE_EVENT = "urlchange";
+const URL_CHANGE_EVENT = 'urlchange';
 const useRoute = (path, exact) => {
@@ -346,6 +344,6 @@ const [, setUpdate] = useState(false);
         window.addEventListener(URL_CHANGE_EVENT, update);
-        window.addEventListener("popstate", update);
+        window.addEventListener('popstate', update);
         return () => {
             window.removeEventListener(URL_CHANGE_EVENT, update);
-            window.removeEventListener("popstate", update);
+            window.removeEventListener('popstate', update);
         };
@@ -369,6 +367,6 @@ }, []);
     const { hash, pathname } = window.location;
-    return hash ? hash.replace("#", "") : pathname;
+    return hash ? hash.replace('#', '') : pathname;
 }
 function historyPush(url) {
-    window.history.replaceState({}, "", url);
+    window.history.replaceState({}, '', url);
     dispatchUrlChangeEvent(url);
@@ -379,3 +377,3 @@ }
         bubbles: true,
-        detail: url
+        detail: url,
     });
@@ -385,9 +383,9 @@ window.dispatchEvent(urlChangeEvent);
 
-var css_248z$1 = ".previews-module_previewsMain__31L3F {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.previews-module_previewsContent__1aMUf {\n  flex-basis: 100%;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.previews-module_previewsToolsPanel__30jjI {\n  flex-basis: 295px;\n  min-height: 100px;\n}";
-var styles$1 = {"previewsMain":"previews-module_previewsMain__31L3F","previewsContent":"previews-module_previewsContent__1aMUf","previewsToolsPanel":"previews-module_previewsToolsPanel__30jjI"};
-styleInject(css_248z$1);
+var css_248z$2 = ".previews-module_previewsMain__31L3F {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.previews-module_previewsContent__1aMUf {\n  flex-basis: 100%;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.previews-module_previewsToolsPanel__30jjI {\n  flex-basis: 295px;\n  min-height: 100px;\n}";
+var styles$2 = {"previewsMain":"previews-module_previewsMain__31L3F","previewsContent":"previews-module_previewsContent__1aMUf","previewsToolsPanel":"previews-module_previewsToolsPanel__30jjI"};
+styleInject(css_248z$2);
 
-const Previews = ({ children, palette = null }) => {
+const Previews = ({ children, palette = null, }) => {
     const [toolsPropsToEdit, setToolsPropsToEdit] = useState(null);
-    const [toolsPanelEnabled, enableToolsPanel] = useState(window.__PROPERTIES_EDIT_PANEL_ENABLED__);
+    const [toolsPanelEnabled, enableToolsPanel] = useState(() => { var _a; return (_a = window.__PROPERTIES_EDIT_PANEL_ENABLED__) !== null && _a !== void 0 ? _a : false; });
     const isPalettePath = useRoute(PALETTE_PATH);
@@ -402,11 +400,10 @@ const childrenWithSetProps = useMemo(() => {
     useEffect(() => {
-        var _a, _b;
+        var _a;
         window.enableComponentsPropsPanelEditor = (toolsPanelStatus) => {
-            window.setPropertiesEditPanelStatus
-                ? window.setPropertiesEditPanelStatus(toolsPanelStatus)
-                : null;
+            var _a;
+            (_a = window.setPropertiesEditPanelStatus) === null || _a === void 0 ? void 0 : _a.call(window, toolsPanelStatus);
             enableToolsPanel(toolsPanelStatus);
         };
         window.reactBuddyHistoryPush = historyPush;
-        (_b = (_a = window).cefQuery) === null || _b === void 0 ? void 0 : _b.call(_a, { request: "event:react-toolbox-initialized" });
+        (_a = window.cefQuery) === null || _a === void 0 ? void 0 : _a.call(window, { request: 'event:react-toolbox-initialized' });
     }, []);
@@ -416,9 +413,9 @@ if (isPalettePath) {
     }
-    return (React.createElement("div", { className: styles$1.previewsMain },
-        React.createElement("div", { className: styles$1.previewsContent }, childrenWithSetProps),
-        toolsPanelEnabled && (React.createElement("div", { className: styles$1.previewsToolsPanel },
+    return (React.createElement("div", { className: styles$2.previewsMain },
+        React.createElement("div", { className: styles$2.previewsContent }, childrenWithSetProps),
+        toolsPanelEnabled && (React.createElement("div", { className: styles$2.previewsToolsPanel },
             React.createElement(ToolsPanel, { toolsPropsToEdit: toolsPropsToEdit })))));
 };
 
-const RoutePreview = ({ children, path, exact, setPropsToEdit }) => {
+const RoutePreview = ({ children, path, exact, setPropsToEdit, }) => {
     const [modfiedProps, setModifiedProps] = useState(null);
@@ -431,3 +428,3 @@ const isMatchPath = useRoute(path, exact);
                 props: currentProps,
-                updateProps: setModifiedProps
+                updateProps: setModifiedProps,
             };
@@ -446,11 +443,41 @@ setPropsToEdit(propsToEdit);
 
-const ComponentPreview = ({ path, children, setToolsPropsToEdit, exact = true, propsEditInfo }) => {
+var css_248z$1 = ".error-boundary-module_errorMessage__1SKhh {\n  text-align: center;\n  padding-left: 20px;\n  padding-right: 20px;\n  color: red;\n}";
+var styles$1 = {"errorMessage":"error-boundary-module_errorMessage__1SKhh"};
+styleInject(css_248z$1);
+
+class ErrorBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hasError: false,
+        };
+    }
+    componentDidCatch() {
+        this.setState({ hasError: true });
+    }
+    componentDidUpdate(_prevProps, prevState) {
+        if (prevState.hasError) {
+            this.setState({ hasError: false });
+        }
+    }
+    render() {
+        const { hasError } = this.state;
+        const { componentName = '', children } = this.props;
+        if (hasError) {
+            return (React.createElement("h2", { className: styles$1.errorMessage }, `Something went wrong while rendering ${componentName} component`));
+        }
+        return children;
+    }
+}
+
+const ComponentPreview = ({ path, children, setToolsPropsToEdit, exact = true, propsEditInfo, }) => {
     const setPropsToEdit = useCallback((propsToEdit) => {
         setToolsPropsToEdit(Object.assign(Object.assign({}, propsToEdit), { initialProps: children.props, propsEditInfo }));
     }, []);
-    return (React.createElement(RoutePreview, { path: path, exact: exact, setPropsToEdit: setPropsToEdit }, children));
+    return (React.createElement(RoutePreview, { path: path, exact: exact, setPropsToEdit: setPropsToEdit },
+        React.createElement(ErrorBoundary, null, children)));
 };
 
-const DEFAULT_VARIANT_NAME = "DEFAULT_VARIANT";
-const VariantRoute = ({ categoryName, componentName, variantName = DEFAULT_VARIANT_NAME, children }) => {
+const DEFAULT_VARIANT_NAME = 'DEFAULT_VARIANT';
+const VariantRoute = ({ categoryName, componentName, variantName = DEFAULT_VARIANT_NAME, children, }) => {
     const paletteItemPath = useMemo(() => {
@@ -460,8 +487,6 @@ return getPaletteItemPath([categoryName, componentName, variantName]);
     const isPathMatch = useRoute(paletteItemPath, true);
-    return isPathMatch
-        ? React.createElement(React.Fragment, null, children)
-        : null;
+    return isPathMatch ? React.createElement(React.Fragment, null, children) : null;
 };
 function getPaletteItemPath(names) {
-    return PALETTE_PATH + "/" + names.filter(name => name != null).join("/");
+    return PALETTE_PATH + '/' + names.filter((name) => name != null).join('/');
 }
@@ -474,9 +499,10 @@
 const Category = ({ children, name }) => {
-    return (React.createElement(React.Fragment, null, getTransformedCategoryChildren(children, name)));
+    return React.createElement(React.Fragment, null, getTransformedCategoryChildren(children, name));
 };
-const Component = ({ children, categoryName, name }) => {
-    return (React.createElement(React.Fragment, null, getTransformedComponentChildren(children, name, categoryName)));
+const Component = ({ children, categoryName, name, }) => {
+    return React.createElement(React.Fragment, null, getTransformedComponentChildren(children, name, categoryName));
 };
-const Variant = ({ children, categoryName, componentName, name }) => {
-    return (React.createElement(VariantRoute, { categoryName: categoryName, componentName: componentName, variantName: name }, children));
+const Variant = ({ children, categoryName, componentName, name, }) => {
+    return (React.createElement(VariantRoute, { categoryName: categoryName, componentName: componentName, variantName: name },
+        React.createElement(ErrorBoundary, { componentName: componentName }, children)));
 };
@@ -490,3 +516,3 @@ const Palette = ({ children }) => {
     }, []);
-    return (React.createElement("div", { className: styles.palette }, children));
+    return React.createElement("div", { className: styles.palette }, children);
 };
@@ -493,0 +519,0 @@ function getTransformedCategoryChildren(children, categoryName) {

dist/palette/palette.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 export declare type CategoryProps = {
@@ -3,0 +3,0 @@ name: string;

dist/palette/variant-route.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 export declare type VariantRouteProps = {
@@ -3,0 +3,0 @@ categoryName?: string;

dist/previews/component-preview.d.ts

@@ -1,3 +0,3 @@
-import React from "react";
-import { ToolsPropsModifier, PropsEditInfo } from "./previews.types";
+import React from 'react';
+import { ToolsPropsModifier, PropsEditInfo } from "../types";
 interface Props {
@@ -4,0 +4,0 @@ path: string;

dist/previews/dev-support.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 export interface InitialHookStatus {
@@ -3,0 +3,0 @@ loading: boolean;

dist/previews/previews.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 interface Props {
@@ -3,0 +3,0 @@ palette?: JSX.Element | null;

dist/previews/tools-panel/index.d.ts

@@ -1,2 +0,2 @@
-import { ToolsPanel } from "./tools-panel";
+import { ToolsPanel } from './tools-panel';
 export default ToolsPanel;

dist/previews/tools-panel/props-edit-table/index.d.ts

@@ -1,2 +0,2 @@
-import { PropsEditTable } from "./props-edit-table";
+import { PropsEditTable } from './props-edit-table';
 export default PropsEditTable;

dist/previews/tools-panel/props-edit-table/props-edit-table.d.ts

@@ -1,4 +0,4 @@
-import React from "react";
-import { ToolsPropsModifier } from "../../previews.types";
-import "./props-edit-table.scss";
+import React from 'react';
+import { ToolsPropsModifier } from "../../../types";
+import './props-edit-table.scss';
 interface Props {
@@ -5,0 +5,0 @@ toolsPropsToEdit: ToolsPropsModifier;

dist/previews/tools-panel/props-edit-table/table-header/index.d.ts

@@ -1,2 +0,2 @@
-import { TableHeader } from "./table-header";
+import { TableHeader } from './table-header';
 export default TableHeader;

dist/previews/tools-panel/props-edit-table/table-header/table-header.d.ts

@@ -1,3 +0,3 @@
-import React from "react";
-import "./table-header.scss";
+import React from 'react';
+import './table-header.scss';
 export declare const TableHeader: React.FC;

dist/previews/tools-panel/props-edit-table/table-items/index.d.ts

@@ -1,2 +0,2 @@
-import { TableItems } from "./table-items";
+import { TableItems } from './table-items';
 export default TableItems;

dist/previews/tools-panel/props-edit-table/table-items/table-item/index.d.ts

@@ -1,2 +0,2 @@
-import { TableItem } from "./table-item";
+import { TableItem } from './table-item';
 export default TableItem;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/checkbox/checkbox.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 export declare const Checkbox: React.FC<React.HTMLProps<HTMLInputElement>>;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/checkbox/index.d.ts

@@ -1,2 +0,2 @@
-import { Checkbox } from "./checkbox";
+import { Checkbox } from './checkbox';
 export default Checkbox;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/index.d.ts

@@ -1,2 +0,2 @@
-import { TableItemControl } from "./table-item-control";
+import { TableItemControl } from './table-item-control';
 export default TableItemControl;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/input/index.d.ts

@@ -1,2 +0,2 @@
-import { Input } from "./input";
+import { Input } from './input';
 export default Input;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/input/input.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 export declare const Input: React.FC<React.HTMLProps<HTMLInputElement>>;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/json-editor/index.d.ts

@@ -1,2 +0,2 @@
-import { JsonEditor } from "./json-editor";
+import { JsonEditor } from './json-editor';
 export default JsonEditor;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/json-editor/json-editor.d.ts

@@ -1,4 +0,4 @@
-import React from "react";
-import { ControlJsonHandler } from "../../../../../../previews.types";
-import "./json-editor.scss";
+import React from 'react';
+import { ControlJsonHandler } from "../../../../../../../types";
+import './json-editor.scss';
 interface Props {
@@ -5,0 +5,0 @@ className?: string;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/radio/index.d.ts

@@ -1,2 +0,2 @@
-import { Radio } from "./radio";
+import { Radio } from './radio';
 export default Radio;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/radio/radio.d.ts

@@ -1,3 +0,3 @@
-import React from "react";
-import "./radio.scss";
+import React from 'react';
+import './radio.scss';
 declare type Props = React.HTMLProps<HTMLInputElement> & {
@@ -4,0 +4,0 @@ radioData?: string[] | number[];

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/select/index.d.ts

@@ -1,2 +0,2 @@
-import { Select } from "./select";
+import { Select } from './select';
 export default Select;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/select/select.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 interface Props extends React.HTMLProps<HTMLSelectElement> {
@@ -3,0 +3,0 @@ optionsData?: string[] | number[];

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/table-item-control.d.ts

@@ -1,3 +0,3 @@
-import React from "react";
-import { PropsControlTypes, ControlUnionHandler, TableItemControlData } from "../../../../../previews.types";
+import React from 'react';
+import { PropsControlTypes, ControlUnionHandler, TableItemControlData } from "../../../../../../types";
 interface Props {
@@ -7,3 +7,3 @@ controlType?: PropsControlTypes;
     propName: string;
-    propValue: any;
+    propValue: unknown;
     onPropChange: ControlUnionHandler;
@@ -10,0 +10,0 @@ }

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/textarea/index.d.ts

@@ -1,2 +0,2 @@
-import { Textarea } from "./textarea";
+import { Textarea } from './textarea';
 export default Textarea;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item-control/textarea/textarea.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 export declare const Textarea: React.FC<React.HTMLProps<HTMLTextAreaElement>>;

dist/previews/tools-panel/props-edit-table/table-items/table-item/table-item.d.ts

@@ -1,9 +0,9 @@
-import React from "react";
-import { PropsControlTypes, ControlUnionHandler, ComponentPreviewProps } from "../../../../previews.types";
-import "./table-item.scss";
+import React from 'react';
+import { PropsControlTypes, ControlUnionHandler, ComponentPreviewProps } from "../../../../../types";
+import './table-item.scss';
 interface Props {
     data?: string[] | number[] | ComponentPreviewProps;
     propName: string;
-    propValue: any;
-    initialPropValue: any;
+    propValue: unknown;
+    initialPropValue: unknown;
     controlType?: PropsControlTypes;
@@ -10,0 +10,0 @@ onPropChange: ControlUnionHandler;

dist/previews/tools-panel/props-edit-table/table-items/table-items.d.ts

@@ -1,4 +0,4 @@
-import React from "react";
-import { ToolsPropsModifier } from "../../../previews.types";
-import "./table-items.scss";
+import React from 'react';
+import { ToolsPropsModifier } from "../../../../types";
+import './table-items.scss';
 interface Props {
@@ -5,0 +5,0 @@ toolsPropsToEdit: ToolsPropsModifier;

dist/previews/tools-panel/tools-panel.d.ts

@@ -1,4 +0,4 @@
-import React from "react";
-import { ToolsPropsModifier } from "../previews.types";
-import "./tools-panel.scss";
+import React from 'react';
+import { ToolsPropsModifier } from "../../types";
+import './tools-panel.scss';
 interface Props {
@@ -5,0 +5,0 @@ toolsPropsToEdit: ToolsPropsModifier;

package.json

 {
   "name": "@react-buddy/ide-toolbox",
-  "version": "2.0.0",
+  "version": "2.1.0-dev.0",
   "description": "React IDE toolbox",
@@ -29,4 +29,6 @@ "main": "dist/index.js",
     "tslint-react": "^4.0.0",
+    "ttypescript": "^1.5.13",
     "typedoc": "^0.20.28",
-    "typescript": "~4.2.4"
+    "typescript": "~4.2.4",
+    "typescript-transform-paths": "^3.3.1"
   },
@@ -50,3 +52,3 @@ "scripts": {
   "license": "Apache-2.0",
-  "gitHead": "038cfb7288d2110e90ba2a020ebc5f5329f62d9e"
+  "gitHead": "6c98561d1a2937291efd5596cad22679c5e6137d"
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

203270

increased by3.42%

Lines of code

1209

increased by5.5%

Worsened metrics

Dev dependency count

18

increased by12.5%

Number of low quality alerts

2

increased by100%

No dependency changes