@embeddable.com/sdk-react 0.1.2 → 1.0.0

package/lib/EmbeddableStateContext.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+export declare const EmbeddableStateContext: React.Context<{}>;
+export declare const useEmbeddableState: <S>(initialState?: S) => {};

package/lib/embedComponent.d.ts

@@ -1,13 +1,12 @@
-import * as React from 'react';
+import * as React from "react";
 import { LoadDataParams } from "@embeddable.com/sdk-core";
 type WrapperProps = {
     propsUpdateListener: HTMLElement;
     componentId: string;
 };
-export type Config = {
-    extendedProps?: (props: any) => any;
-    events: Record<string, EmbeddableEventHandler>;
-    dataLoaders: (props: any) => Record<string, LoadDataParams>;
+export type Config<ES> = {
+    props?: <P>(ownProps: P, embeddableState: [ES, React.Dispatch<React.SetStateAction<ES>>]) => Record<string, unknown | LoadDataParams>;
+    events?: Record<string, EmbeddableEventHandler>;
 };
 export type EmbeddableEventHandler = (value: any) => any;
 export type DataResponse = {
@@ -15,7 +14,7 @@ export type DataResponse = {
     data?: any;
     error?: string;
 };
-export declare function embedComponent(InnerComponent: React.ComponentType, config: Config): {
+export declare function embedComponent<ES>(InnerComponent: React.ComponentType<any>, config?: Config<ES>): {
     ({ propsUpdateListener, ...props }: WrapperProps): React.JSX.Element;
     displayName: string;
 };

package/lib/embedControl.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 export type Config<T> = {
     inputs: (value: any, setter: Setter<T>) => any;
     events: Record<string, EmbeddableEventHandler<T>>;

package/lib/index.cjs.js

@@ -67,61 +67,106 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var UPDATE_PROPS_EVENT_NAME = 'embeddable-event:update-props';
-var RELOAD_DATASET_EVENT_NAME = 'embeddable-event:reload-dataset';
+var EmbeddableStateContext = React__namespace.createContext({});
+var useEmbeddableState = function (initialState) {
+    if (initialState === void 0) { initialState = {}; }
+    var ctx = React__namespace.useContext(EmbeddableStateContext);
+    React__namespace.useEffect(function () {
+        ctx[1](initialState);
+    }, [initialState]);
+    return ctx;
+};
+
+var UPDATE_PROPS_EVENT_NAME = "embeddable-event:update-props";
+var RELOAD_DATASET_EVENT_NAME = "embeddable-event:reload-dataset";
+var LOAD_DATA_RESULT_EVENT_NAME = "embeddable-event:load-data-result";
 var ReducerActionTypes = {
-    loading: 'loading',
-    error: 'error',
-    data: 'data',
+    loading: "loading",
+    error: "error",
+    data: "data",
 };
 var reducer = function (state, action) {
     var _a, _b, _c;
     switch (action.type) {
-        case (ReducerActionTypes.loading): {
-            return __assign(__assign({}, state), (_a = {}, _a[action.inputName] = { isLoading: true }, _a));
+        case ReducerActionTypes.loading: {
+            return __assign(__assign({}, state), (_a = {}, _a[action.inputName] = {
+                data: state[action.inputName].data,
+                isLoading: true,
+            }, _a));
         }
-        case (ReducerActionTypes.data): {
-            return __assign(__assign({}, state), (_b = {}, _b[action.inputName] = { isLoading: false, data: action.payload.data }, _b));
+        case ReducerActionTypes.data: {
+            return __assign(__assign({}, state), (_b = {}, _b[action.inputName] = { isLoading: false, data: action.payload }, _b));
         }
-        case (ReducerActionTypes.error): {
-            return __assign(__assign({}, state), (_c = {}, _c[action.inputName] = { isLoading: false, error: action.payload.message || action.payload }, _c));
+        case ReducerActionTypes.error: {
+            return __assign(__assign({}, state), (_c = {}, _c[action.inputName] = {
+                isLoading: false,
+                error: action.payload.message || action.payload,
+            }, _c));
         }
     }
     return state;
 };
-var createInitialLoadersState = function (dataLoaders) { return Object.keys(dataLoaders).reduce(function (loaderState, loaderKey) {
-    var _a;
-    return (__assign(__assign({}, loaderState), (_a = {}, _a[loaderKey] = { isLoading: false }, _a)));
-}, {}); };
-var latestVariables = {};
+var createInitialLoadersState = function (dataLoaders) {
+    return Object.keys(dataLoaders).reduce(function (loaderState, loaderKey) {
+        var _a;
+        return (__assign(__assign({}, loaderState), (_a = {}, _a[loaderKey] = { isLoading: false }, _a)));
+    }, {});
+};
 function embedComponent(InnerComponent, config) {
     var _a;
+    if (config === void 0) { config = {}; }
     function EmbeddableWrapper(_a) {
         var propsUpdateListener = _a.propsUpdateListener, props = __rest(_a, ["propsUpdateListener"]);
         var _b = React__namespace.useState(props), propsProxy = _b[0], setProps = _b[1];
+        var embeddableState = React__namespace.useState();
         var componentId = props.componentId;
+        var loadDataResultEventName = "".concat(LOAD_DATA_RESULT_EVENT_NAME, ":").concat(componentId);
         var propsUpdateEventHandler = function (_a) {
             var detail = _a.detail;
             return setProps(detail);
         };
         React__namespace.useEffect(function () {
             propsUpdateListener.addEventListener(UPDATE_PROPS_EVENT_NAME, propsUpdateEventHandler);
-            return function () { return propsUpdateListener.removeEventListener(UPDATE_PROPS_EVENT_NAME, propsUpdateEventHandler); };
+            return function () {
+                return propsUpdateListener.removeEventListener(UPDATE_PROPS_EVENT_NAME, propsUpdateEventHandler);
+            };
         }, []);
-        var extendedProps = React__namespace.useMemo(function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.extendedProps) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy); }, [propsProxy, config === null || config === void 0 ? void 0 : config.extendedProps]);
-        var dataLoaders = React__namespace.useMemo(function () { var _a, _b; return (_b = (_a = config === null || config === void 0 ? void 0 : config.dataLoaders) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy)) !== null && _b !== void 0 ? _b : {}; }, [propsProxy, config === null || config === void 0 ? void 0 : config.dataLoaders]);
-        var _c = React__namespace.useReducer(reducer, dataLoaders, createInitialLoadersState), loadersState = _c[0], dispatch = _c[1];
-        var handleDataLoaded = function (inputName) { return function (res) { return dispatch({ type: ReducerActionTypes.data, inputName: inputName, payload: res.data }); }; };
-        var handleError = function (inputName) { return function (error) { return dispatch({ type: ReducerActionTypes.error, inputName: inputName, payload: error }); }; };
+        var _c = React__namespace.useMemo(function () {
+            var _a, _b;
+            return Object.entries((_b = (_a = config === null || config === void 0 ? void 0 : config.props) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy, embeddableState)) !== null && _b !== void 0 ? _b : {}).reduce(function (acc, _a) {
+                var key = _a[0], value = _a[1];
+                if (sdkCore.isLoadDataParams(value)) {
+                    acc.dataLoaders[key] = value;
+                }
+                else {
+                    acc.extendedProps[key] = value;
+                }
+                return acc;
+            }, { extendedProps: {}, dataLoaders: {} });
+        }, [propsProxy, config === null || config === void 0 ? void 0 : config.props, embeddableState[0]]), extendedProps = _c.extendedProps, dataLoaders = _c.dataLoaders;
+        var _d = React__namespace.useReducer(reducer, dataLoaders, createInitialLoadersState), loadersState = _d[0], dispatch = _d[1];
+        var handleDataLoaded = function (inputName, data) {
+            return dispatch({ type: ReducerActionTypes.data, inputName: inputName, payload: data });
+        };
+        var handleError = function (inputName, error) {
+            return dispatch({ type: ReducerActionTypes.error, inputName: inputName, payload: error });
+        };
         var reloadDataset = function (inputName, params) {
             dispatch({ type: ReducerActionTypes.loading, inputName: inputName });
-            params.dataLoader(params.requestParams, latestVariables)
-                .then(handleDataLoaded(inputName))
-                .catch(handleError(inputName));
+            var error = params.dataLoader(params.requestParams, componentId, inputName);
+            if (error)
+                handleError(inputName, error);
+        };
+        var handleLoadDataResult = function (ev) {
+            if (ev.detail.isSuccess) {
+                handleDataLoaded(ev.detail.propertyName, ev.detail.data);
+            }
+            else {
+                handleError(ev.detail.propertyName, ev.detail.error);
+            }
         };
         var variableChangedEventHandler = function (_a) {
             var detail = _a.detail;
-            latestVariables = detail.variableValues;
             Object.entries(dataLoaders)
                 .filter(function (_a) {
                 _a[0]; var params = _a[1];
@@ -138,25 +183,36 @@ function embedComponent(InnerComponent, config) {
                 return reloadDataset(inputName, params);
             });
             window.addEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler);
-            return function () { return window.removeEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler); };
-        }, [JSON.stringify(Object.values(dataLoaders).map(function (loader) { return loader.requestParams; }))]);
-        var createEvent = function (value, eventName) { return sdkCore.setValue(value, componentId, eventName); };
+            window.addEventListener(loadDataResultEventName, handleLoadDataResult);
+            return function () {
+                window.removeEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler);
+                window.removeEventListener(loadDataResultEventName, handleLoadDataResult);
+            };
+        }, [
+            JSON.stringify(Object.values(dataLoaders).map(function (loader) { return loader.requestParams; })),
+        ]);
+        var createEvent = function (value, eventName) {
+            return sdkCore.setValue(value, componentId, eventName);
+        };
         var events = config === null || config === void 0 ? void 0 : config.events;
         var eventProps = {};
         if (events) {
             var _loop_1 = function (event_1) {
                 if (events.hasOwnProperty(event_1)) {
                     var eventFunction_1 = events[event_1];
-                    eventProps[event_1] = function (value) { return createEvent(eventFunction_1(value), event_1); };
+                    eventProps[event_1] = function (value) {
+                        return createEvent(eventFunction_1(value), event_1);
+                    };
                 }
             };
             for (var event_1 in events) {
                 _loop_1(event_1);
             }
         }
-        return React__namespace.createElement(InnerComponent, __assign({}, propsProxy, extendedProps, eventProps, loadersState));
+        return (React__namespace.createElement(EmbeddableStateContext.Provider, { value: embeddableState },
+            React__namespace.createElement(InnerComponent, __assign({}, extendedProps, eventProps, loadersState))));
     }
-    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Component', ")");
+    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : "Component", ")");
     return EmbeddableWrapper;
 }
 
@@ -170,11 +226,12 @@ function embedControl(InnerComponent, config) {
             setComponentState(value);
             sdkCore.setValue(value, componentId);
         };
-        return React__namespace.createElement(InnerComponent, __assign({}, config.inputs(componentState, setter), ((_b = (_a = config.mapProps) === null || _a === void 0 ? void 0 : _a.call(config, props)) !== null && _b !== void 0 ? _b : {})));
+        return (React__namespace.createElement(InnerComponent, __assign({}, config.inputs(componentState, setter), ((_b = (_a = config.mapProps) === null || _a === void 0 ? void 0 : _a.call(config, props)) !== null && _b !== void 0 ? _b : {}))));
     }
-    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Editor', ")");
+    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : "Editor", ")");
     return EmbeddableWrapper;
 }
 
 exports.embedComponent = embedComponent;
 exports.embedControl = embedControl;
+exports.useEmbeddableState = useEmbeddableState;

package/lib/index.d.ts

@@ -1,2 +1,3 @@
-export { embedComponent } from './embedComponent';
-export { embedControl } from './embedControl';
+export { embedComponent } from "./embedComponent";
+export { embedControl } from "./embedControl";
+export { useEmbeddableState } from "./EmbeddableStateContext";

package/lib/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { setValue } from '@embeddable.com/sdk-core';
+import { isLoadDataParams, setValue } from '@embeddable.com/sdk-core';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -46,61 +46,106 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var UPDATE_PROPS_EVENT_NAME = 'embeddable-event:update-props';
-var RELOAD_DATASET_EVENT_NAME = 'embeddable-event:reload-dataset';
+var EmbeddableStateContext = React.createContext({});
+var useEmbeddableState = function (initialState) {
+    if (initialState === void 0) { initialState = {}; }
+    var ctx = React.useContext(EmbeddableStateContext);
+    React.useEffect(function () {
+        ctx[1](initialState);
+    }, [initialState]);
+    return ctx;
+};
+
+var UPDATE_PROPS_EVENT_NAME = "embeddable-event:update-props";
+var RELOAD_DATASET_EVENT_NAME = "embeddable-event:reload-dataset";
+var LOAD_DATA_RESULT_EVENT_NAME = "embeddable-event:load-data-result";
 var ReducerActionTypes = {
-    loading: 'loading',
-    error: 'error',
-    data: 'data',
+    loading: "loading",
+    error: "error",
+    data: "data",
 };
 var reducer = function (state, action) {
     var _a, _b, _c;
     switch (action.type) {
-        case (ReducerActionTypes.loading): {
-            return __assign(__assign({}, state), (_a = {}, _a[action.inputName] = { isLoading: true }, _a));
+        case ReducerActionTypes.loading: {
+            return __assign(__assign({}, state), (_a = {}, _a[action.inputName] = {
+                data: state[action.inputName].data,
+                isLoading: true,
+            }, _a));
         }
-        case (ReducerActionTypes.data): {
-            return __assign(__assign({}, state), (_b = {}, _b[action.inputName] = { isLoading: false, data: action.payload.data }, _b));
+        case ReducerActionTypes.data: {
+            return __assign(__assign({}, state), (_b = {}, _b[action.inputName] = { isLoading: false, data: action.payload }, _b));
         }
-        case (ReducerActionTypes.error): {
-            return __assign(__assign({}, state), (_c = {}, _c[action.inputName] = { isLoading: false, error: action.payload.message || action.payload }, _c));
+        case ReducerActionTypes.error: {
+            return __assign(__assign({}, state), (_c = {}, _c[action.inputName] = {
+                isLoading: false,
+                error: action.payload.message || action.payload,
+            }, _c));
         }
     }
     return state;
 };
-var createInitialLoadersState = function (dataLoaders) { return Object.keys(dataLoaders).reduce(function (loaderState, loaderKey) {
-    var _a;
-    return (__assign(__assign({}, loaderState), (_a = {}, _a[loaderKey] = { isLoading: false }, _a)));
-}, {}); };
-var latestVariables = {};
+var createInitialLoadersState = function (dataLoaders) {
+    return Object.keys(dataLoaders).reduce(function (loaderState, loaderKey) {
+        var _a;
+        return (__assign(__assign({}, loaderState), (_a = {}, _a[loaderKey] = { isLoading: false }, _a)));
+    }, {});
+};
 function embedComponent(InnerComponent, config) {
     var _a;
+    if (config === void 0) { config = {}; }
     function EmbeddableWrapper(_a) {
         var propsUpdateListener = _a.propsUpdateListener, props = __rest(_a, ["propsUpdateListener"]);
         var _b = React.useState(props), propsProxy = _b[0], setProps = _b[1];
+        var embeddableState = React.useState();
         var componentId = props.componentId;
+        var loadDataResultEventName = "".concat(LOAD_DATA_RESULT_EVENT_NAME, ":").concat(componentId);
         var propsUpdateEventHandler = function (_a) {
             var detail = _a.detail;
             return setProps(detail);
         };
         React.useEffect(function () {
             propsUpdateListener.addEventListener(UPDATE_PROPS_EVENT_NAME, propsUpdateEventHandler);
-            return function () { return propsUpdateListener.removeEventListener(UPDATE_PROPS_EVENT_NAME, propsUpdateEventHandler); };
+            return function () {
+                return propsUpdateListener.removeEventListener(UPDATE_PROPS_EVENT_NAME, propsUpdateEventHandler);
+            };
         }, []);
-        var extendedProps = React.useMemo(function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.extendedProps) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy); }, [propsProxy, config === null || config === void 0 ? void 0 : config.extendedProps]);
-        var dataLoaders = React.useMemo(function () { var _a, _b; return (_b = (_a = config === null || config === void 0 ? void 0 : config.dataLoaders) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy)) !== null && _b !== void 0 ? _b : {}; }, [propsProxy, config === null || config === void 0 ? void 0 : config.dataLoaders]);
-        var _c = React.useReducer(reducer, dataLoaders, createInitialLoadersState), loadersState = _c[0], dispatch = _c[1];
-        var handleDataLoaded = function (inputName) { return function (res) { return dispatch({ type: ReducerActionTypes.data, inputName: inputName, payload: res.data }); }; };
-        var handleError = function (inputName) { return function (error) { return dispatch({ type: ReducerActionTypes.error, inputName: inputName, payload: error }); }; };
+        var _c = React.useMemo(function () {
+            var _a, _b;
+            return Object.entries((_b = (_a = config === null || config === void 0 ? void 0 : config.props) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy, embeddableState)) !== null && _b !== void 0 ? _b : {}).reduce(function (acc, _a) {
+                var key = _a[0], value = _a[1];
+                if (isLoadDataParams(value)) {
+                    acc.dataLoaders[key] = value;
+                }
+                else {
+                    acc.extendedProps[key] = value;
+                }
+                return acc;
+            }, { extendedProps: {}, dataLoaders: {} });
+        }, [propsProxy, config === null || config === void 0 ? void 0 : config.props, embeddableState[0]]), extendedProps = _c.extendedProps, dataLoaders = _c.dataLoaders;
+        var _d = React.useReducer(reducer, dataLoaders, createInitialLoadersState), loadersState = _d[0], dispatch = _d[1];
+        var handleDataLoaded = function (inputName, data) {
+            return dispatch({ type: ReducerActionTypes.data, inputName: inputName, payload: data });
+        };
+        var handleError = function (inputName, error) {
+            return dispatch({ type: ReducerActionTypes.error, inputName: inputName, payload: error });
+        };
         var reloadDataset = function (inputName, params) {
             dispatch({ type: ReducerActionTypes.loading, inputName: inputName });
-            params.dataLoader(params.requestParams, latestVariables)
-                .then(handleDataLoaded(inputName))
-                .catch(handleError(inputName));
+            var error = params.dataLoader(params.requestParams, componentId, inputName);
+            if (error)
+                handleError(inputName, error);
+        };
+        var handleLoadDataResult = function (ev) {
+            if (ev.detail.isSuccess) {
+                handleDataLoaded(ev.detail.propertyName, ev.detail.data);
+            }
+            else {
+                handleError(ev.detail.propertyName, ev.detail.error);
+            }
         };
         var variableChangedEventHandler = function (_a) {
             var detail = _a.detail;
-            latestVariables = detail.variableValues;
             Object.entries(dataLoaders)
                 .filter(function (_a) {
                 _a[0]; var params = _a[1];
@@ -117,25 +162,36 @@ function embedComponent(InnerComponent, config) {
                 return reloadDataset(inputName, params);
             });
             window.addEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler);
-            return function () { return window.removeEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler); };
-        }, [JSON.stringify(Object.values(dataLoaders).map(function (loader) { return loader.requestParams; }))]);
-        var createEvent = function (value, eventName) { return setValue(value, componentId, eventName); };
+            window.addEventListener(loadDataResultEventName, handleLoadDataResult);
+            return function () {
+                window.removeEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler);
+                window.removeEventListener(loadDataResultEventName, handleLoadDataResult);
+            };
+        }, [
+            JSON.stringify(Object.values(dataLoaders).map(function (loader) { return loader.requestParams; })),
+        ]);
+        var createEvent = function (value, eventName) {
+            return setValue(value, componentId, eventName);
+        };
         var events = config === null || config === void 0 ? void 0 : config.events;
         var eventProps = {};
         if (events) {
             var _loop_1 = function (event_1) {
                 if (events.hasOwnProperty(event_1)) {
                     var eventFunction_1 = events[event_1];
-                    eventProps[event_1] = function (value) { return createEvent(eventFunction_1(value), event_1); };
+                    eventProps[event_1] = function (value) {
+                        return createEvent(eventFunction_1(value), event_1);
+                    };
                 }
             };
             for (var event_1 in events) {
                 _loop_1(event_1);
             }
         }
-        return React.createElement(InnerComponent, __assign({}, propsProxy, extendedProps, eventProps, loadersState));
+        return (React.createElement(EmbeddableStateContext.Provider, { value: embeddableState },
+            React.createElement(InnerComponent, __assign({}, extendedProps, eventProps, loadersState))));
     }
-    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Component', ")");
+    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : "Component", ")");
     return EmbeddableWrapper;
 }
 
@@ -149,10 +205,10 @@ function embedControl(InnerComponent, config) {
             setComponentState(value);
             setValue(value, componentId);
         };
-        return React.createElement(InnerComponent, __assign({}, config.inputs(componentState, setter), ((_b = (_a = config.mapProps) === null || _a === void 0 ? void 0 : _a.call(config, props)) !== null && _b !== void 0 ? _b : {})));
+        return (React.createElement(InnerComponent, __assign({}, config.inputs(componentState, setter), ((_b = (_a = config.mapProps) === null || _a === void 0 ? void 0 : _a.call(config, props)) !== null && _b !== void 0 ? _b : {}))));
     }
-    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Editor', ")");
+    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : "Editor", ")");
     return EmbeddableWrapper;
 }
 
-export { embedComponent, embedControl };
+export { embedComponent, embedControl, useEmbeddableState };

package/lib/index.umd.js

@@ -86,6 +86,10 @@
 
     var reactExports = react.exports;
 
+    var isLoadDataParams = function (ldp) {
+        return typeof ldp === "object" && "requestParams" in ldp && "dataLoader" in ldp;
+    };
+
     var UPDATE_VALUE_EVENT = "embeddable:value:changed";
     var setValue = function (value, componentId, eventName) {
         var event = new CustomEvent(UPDATE_VALUE_EVENT, {
@@ -93,7 +97,7 @@
             detail: {
                 componentId: componentId,
                 value: value,
-                eventName: eventName
+                eventName: eventName,
             },
         });
         window.dispatchEvent(event);
@@ -104,61 +108,106 @@
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    var UPDATE_PROPS_EVENT_NAME = 'embeddable-event:update-props';
-    var RELOAD_DATASET_EVENT_NAME = 'embeddable-event:reload-dataset';
+    var EmbeddableStateContext = reactExports.createContext({});
+    var useEmbeddableState = function (initialState) {
+        if (initialState === void 0) { initialState = {}; }
+        var ctx = reactExports.useContext(EmbeddableStateContext);
+        reactExports.useEffect(function () {
+            ctx[1](initialState);
+        }, [initialState]);
+        return ctx;
+    };
+
+    var UPDATE_PROPS_EVENT_NAME = "embeddable-event:update-props";
+    var RELOAD_DATASET_EVENT_NAME = "embeddable-event:reload-dataset";
+    var LOAD_DATA_RESULT_EVENT_NAME = "embeddable-event:load-data-result";
     var ReducerActionTypes = {
-        loading: 'loading',
-        error: 'error',
-        data: 'data',
+        loading: "loading",
+        error: "error",
+        data: "data",
     };
     var reducer = function (state, action) {
         var _a, _b, _c;
         switch (action.type) {
-            case (ReducerActionTypes.loading): {
-                return __assign(__assign({}, state), (_a = {}, _a[action.inputName] = { isLoading: true }, _a));
+            case ReducerActionTypes.loading: {
+                return __assign(__assign({}, state), (_a = {}, _a[action.inputName] = {
+                    data: state[action.inputName].data,
+                    isLoading: true,
+                }, _a));
             }
-            case (ReducerActionTypes.data): {
-                return __assign(__assign({}, state), (_b = {}, _b[action.inputName] = { isLoading: false, data: action.payload.data }, _b));
+            case ReducerActionTypes.data: {
+                return __assign(__assign({}, state), (_b = {}, _b[action.inputName] = { isLoading: false, data: action.payload }, _b));
             }
-            case (ReducerActionTypes.error): {
-                return __assign(__assign({}, state), (_c = {}, _c[action.inputName] = { isLoading: false, error: action.payload.message || action.payload }, _c));
+            case ReducerActionTypes.error: {
+                return __assign(__assign({}, state), (_c = {}, _c[action.inputName] = {
+                    isLoading: false,
+                    error: action.payload.message || action.payload,
+                }, _c));
             }
         }
         return state;
     };
-    var createInitialLoadersState = function (dataLoaders) { return Object.keys(dataLoaders).reduce(function (loaderState, loaderKey) {
-        var _a;
-        return (__assign(__assign({}, loaderState), (_a = {}, _a[loaderKey] = { isLoading: false }, _a)));
-    }, {}); };
-    var latestVariables = {};
+    var createInitialLoadersState = function (dataLoaders) {
+        return Object.keys(dataLoaders).reduce(function (loaderState, loaderKey) {
+            var _a;
+            return (__assign(__assign({}, loaderState), (_a = {}, _a[loaderKey] = { isLoading: false }, _a)));
+        }, {});
+    };
     function embedComponent(InnerComponent, config) {
         var _a;
+        if (config === void 0) { config = {}; }
         function EmbeddableWrapper(_a) {
             var propsUpdateListener = _a.propsUpdateListener, props = __rest(_a, ["propsUpdateListener"]);
             var _b = reactExports.useState(props), propsProxy = _b[0], setProps = _b[1];
+            var embeddableState = reactExports.useState();
             var componentId = props.componentId;
+            var loadDataResultEventName = "".concat(LOAD_DATA_RESULT_EVENT_NAME, ":").concat(componentId);
             var propsUpdateEventHandler = function (_a) {
                 var detail = _a.detail;
                 return setProps(detail);
             };
             reactExports.useEffect(function () {
                 propsUpdateListener.addEventListener(UPDATE_PROPS_EVENT_NAME, propsUpdateEventHandler);
-                return function () { return propsUpdateListener.removeEventListener(UPDATE_PROPS_EVENT_NAME, propsUpdateEventHandler); };
+                return function () {
+                    return propsUpdateListener.removeEventListener(UPDATE_PROPS_EVENT_NAME, propsUpdateEventHandler);
+                };
             }, []);
-            var extendedProps = reactExports.useMemo(function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.extendedProps) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy); }, [propsProxy, config === null || config === void 0 ? void 0 : config.extendedProps]);
-            var dataLoaders = reactExports.useMemo(function () { var _a, _b; return (_b = (_a = config === null || config === void 0 ? void 0 : config.dataLoaders) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy)) !== null && _b !== void 0 ? _b : {}; }, [propsProxy, config === null || config === void 0 ? void 0 : config.dataLoaders]);
-            var _c = reactExports.useReducer(reducer, dataLoaders, createInitialLoadersState), loadersState = _c[0], dispatch = _c[1];
-            var handleDataLoaded = function (inputName) { return function (res) { return dispatch({ type: ReducerActionTypes.data, inputName: inputName, payload: res.data }); }; };
-            var handleError = function (inputName) { return function (error) { return dispatch({ type: ReducerActionTypes.error, inputName: inputName, payload: error }); }; };
+            var _c = reactExports.useMemo(function () {
+                var _a, _b;
+                return Object.entries((_b = (_a = config === null || config === void 0 ? void 0 : config.props) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy, embeddableState)) !== null && _b !== void 0 ? _b : {}).reduce(function (acc, _a) {
+                    var key = _a[0], value = _a[1];
+                    if (isLoadDataParams(value)) {
+                        acc.dataLoaders[key] = value;
+                    }
+                    else {
+                        acc.extendedProps[key] = value;
+                    }
+                    return acc;
+                }, { extendedProps: {}, dataLoaders: {} });
+            }, [propsProxy, config === null || config === void 0 ? void 0 : config.props, embeddableState[0]]), extendedProps = _c.extendedProps, dataLoaders = _c.dataLoaders;
+            var _d = reactExports.useReducer(reducer, dataLoaders, createInitialLoadersState), loadersState = _d[0], dispatch = _d[1];
+            var handleDataLoaded = function (inputName, data) {
+                return dispatch({ type: ReducerActionTypes.data, inputName: inputName, payload: data });
+            };
+            var handleError = function (inputName, error) {
+                return dispatch({ type: ReducerActionTypes.error, inputName: inputName, payload: error });
+            };
             var reloadDataset = function (inputName, params) {
                 dispatch({ type: ReducerActionTypes.loading, inputName: inputName });
-                params.dataLoader(params.requestParams, latestVariables)
-                    .then(handleDataLoaded(inputName))
-                    .catch(handleError(inputName));
+                var error = params.dataLoader(params.requestParams, componentId, inputName);
+                if (error)
+                    handleError(inputName, error);
+            };
+            var handleLoadDataResult = function (ev) {
+                if (ev.detail.isSuccess) {
+                    handleDataLoaded(ev.detail.propertyName, ev.detail.data);
+                }
+                else {
+                    handleError(ev.detail.propertyName, ev.detail.error);
+                }
             };
             var variableChangedEventHandler = function (_a) {
                 var detail = _a.detail;
-                latestVariables = detail.variableValues;
                 Object.entries(dataLoaders)
                     .filter(function (_a) {
                     _a[0]; var params = _a[1];
@@ -175,25 +224,36 @@
                     return reloadDataset(inputName, params);
                 });
                 window.addEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler);
-                return function () { return window.removeEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler); };
-            }, [JSON.stringify(Object.values(dataLoaders).map(function (loader) { return loader.requestParams; }))]);
-            var createEvent = function (value, eventName) { return setValue(value, componentId, eventName); };
+                window.addEventListener(loadDataResultEventName, handleLoadDataResult);
+                return function () {
+                    window.removeEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler);
+                    window.removeEventListener(loadDataResultEventName, handleLoadDataResult);
+                };
+            }, [
+                JSON.stringify(Object.values(dataLoaders).map(function (loader) { return loader.requestParams; })),
+            ]);
+            var createEvent = function (value, eventName) {
+                return setValue(value, componentId, eventName);
+            };
             var events = config === null || config === void 0 ? void 0 : config.events;
             var eventProps = {};
             if (events) {
                 var _loop_1 = function (event_1) {
                     if (events.hasOwnProperty(event_1)) {
                         var eventFunction_1 = events[event_1];
-                        eventProps[event_1] = function (value) { return createEvent(eventFunction_1(value), event_1); };
+                        eventProps[event_1] = function (value) {
+                            return createEvent(eventFunction_1(value), event_1);
+                        };
                     }
                 };
                 for (var event_1 in events) {
                     _loop_1(event_1);
                 }
             }
-            return reactExports.createElement(InnerComponent, __assign({}, propsProxy, extendedProps, eventProps, loadersState));
+            return (reactExports.createElement(EmbeddableStateContext.Provider, { value: embeddableState },
+                reactExports.createElement(InnerComponent, __assign({}, extendedProps, eventProps, loadersState))));
         }
-        EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Component', ")");
+        EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : "Component", ")");
         return EmbeddableWrapper;
     }
 
@@ -207,13 +267,14 @@
                 setComponentState(value);
                 setValue(value, componentId);
             };
-            return reactExports.createElement(InnerComponent, __assign({}, config.inputs(componentState, setter), ((_b = (_a = config.mapProps) === null || _a === void 0 ? void 0 : _a.call(config, props)) !== null && _b !== void 0 ? _b : {})));
+            return (reactExports.createElement(InnerComponent, __assign({}, config.inputs(componentState, setter), ((_b = (_a = config.mapProps) === null || _a === void 0 ? void 0 : _a.call(config, props)) !== null && _b !== void 0 ? _b : {}))));
         }
-        EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Editor', ")");
+        EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : "Editor", ")");
         return EmbeddableWrapper;
     }
 
     exports.embedComponent = embedComponent;
     exports.embedControl = embedControl;
+    exports.useEmbeddableState = useEmbeddableState;
 
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddable.com/sdk-react",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "description": "Embeddable SDK React plugin/module responsible for React components bundling.",
   "keywords": [
     "embeddable",
@@ -41,5 +41,10 @@
     "@vitejs/plugin-react": "^4.0.2",
     "vite": "^4.4.2",
     "ora": "^6.3.1"
+  },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx,json}": [
+      "prettier --write"
+    ]
   }
 }

package/scripts/build.js

@@ -1,47 +1,79 @@
 const path = require("path");
-const { fork } = require('child_process');
-const oraP = import('ora');
+const { fork } = require("child_process");
+const oraP = import("ora");
 const core = require("@embeddable.com/sdk-core/scripts");
 
-const {createContext} = require("./createContext");
-const {prepare} = require("./prepare");
-const {cleanup} = require("./cleanup");
+const { createContext } = require("./createContext");
+const { prepare } = require("./prepare");
 
-const generateFork = fork(
-    path.resolve(__dirname, 'generate.js'),
-    [],
-    process.env.NODE_ENV === 'dev' ? undefined : { silent: true }
-);
+let ora;
 
 async function build() {
-    const ora = (await oraP).default;
+  ora = (await oraP).default;
 
-    const spinnerPrepare = ora("preparing...").start();
+  const spinnerPrepare = ora("preparing...").start();
 
-    const ctx = createContext(path.resolve(__dirname, '..'), process.cwd());
+  const ctx = createContext(path.resolve(__dirname, ".."), process.cwd());
 
-    await validationEmulation();
-    await prepare(ctx);
-    spinnerPrepare.succeed("preparation competed");
+  await core.validate(ctx);
 
-    const spinnerBuild = ora("building...").start();
+  await prepare(ctx);
+  spinnerPrepare.succeed("preparation competed");
 
-    generateFork.send({ ctx });
+  await runProcess({
+    ctx,
+    processFile: "generateProcess.js",
+    initMessage: "building components...",
+    successMessage: "components built completed",
+    failMessage: "components built failed",
+  });
 
-    generateFork.on('exit', async () => {
-        await cleanup(ctx);
-        spinnerBuild.succeed("build completed");
+  await runProcess({
+    ctx,
+    processFile: "buildTypesProcess.js",
+    initMessage: "building types...",
+    successMessage: "types built completed",
+    failMessage: "types built failed",
+  });
+}
 
-        await core.buildTypes(ctx);
-    })
 
+module.exports = { build };
+
+async function runProcess({ processFile, ctx, initMessage, successMessage, failMessage }) {
+  const spinner = ora(initMessage).start();
+  try {
+    await promisifyForkedProcess(processFile, ctx);
+    spinner.succeed(successMessage);
+  } catch ({ watchFiles, ...info }) {
+    spinner.fail(failMessage);
+    console.log(info);
+    await core.globalCleanup(ctx);
+    process.exit(1);
+  }
 }
 
-module.exports = { build };
+function promisifyForkedProcess (fileName, ctx) {
+  const forkedProcess = fork(
+      path.resolve(__dirname, fileName),
+      [],
+      process.env.NODE_ENV === "dev" ? undefined : { silent: true },
+  );
+
+  forkedProcess.send({ ctx });
 
-// TODO: later we will validate configs e.g. yaml files with this function.
-function validationEmulation() {
-    return new Promise((res, _rej) => {
-        setTimeout(res, 4000);
+  return new Promise((resolve, reject) => {
+    forkedProcess.on("exit", (code) => {
+      if (code === 0) resolve();
+    });
+
+    forkedProcess.on("message", ({ error }) => {
+      if (!error) return;
+
+      reject(error);
     })
+  });
 }
+
+
+

package/scripts/buildTypesProcess.js

@@ -0,0 +1,12 @@
+const core = require("@embeddable.com/sdk-core/scripts");
+
+process.on("message", async ({ ctx }) => {
+    try {
+        await core.buildTypes(ctx);
+    } catch (error) {
+        process.send({ error });
+        process.exit(1);
+    }
+
+    process.exit();
+});

package/scripts/cleanup.js

@@ -2,7 +2,7 @@ const fs = require("fs/promises");
 const path = require("path");
 
 async function cleanup(ctx) {
-    await fs.rm(path.resolve(ctx.client.rootDir, 'embeddable-entry-point.jsx'));
+  await fs.rm(path.resolve(ctx.client.rootDir, ctx.outputOptions.componentsEntryPointFilename));
 }
 
-module.exports = { cleanup };
+module.exports = { cleanup };

package/scripts/createContext.js

@@ -1,22 +1,24 @@
-const path = require('path');
+const path = require("path");
 
-function createContext (pluginRoot, clientRoot) {
-    return {
-        plugin: {
-            rootDir: pluginRoot,
-            templatesDir: path.resolve(pluginRoot, 'templates'),
-        },
-        client: {
-            rootDir: clientRoot,
-            srcDir: path.resolve(clientRoot, 'src'), // TODO: should be specified via command parameters or from rc file.
-            buildDir: path.resolve(clientRoot, '.embeddable-build'),
-        },
-        outputOptions: { // TODO: should be specified via command parameters or from rc file.
-            fileName: 'embeddable-prepared',
-            buildName: 'embeddable-prepared-build',
-            typesEntryPointFilename: 'embeddable-types-entry-point.js',
-        },
-    };
+function createContext(pluginRoot, clientRoot) {
+  return {
+    plugin: {
+      rootDir: pluginRoot,
+      templatesDir: path.resolve(pluginRoot, "templates"),
+    },
+    client: {
+      rootDir: clientRoot,
+      srcDir: path.resolve(clientRoot, "src"), // TODO: should be specified via command parameters or from rc file.
+      buildDir: path.resolve(clientRoot, ".embeddable-build"),
+    },
+    outputOptions: {
+      // TODO: should be specified via command parameters or from rc file.
+      fileName: "embeddable-prepared",
+      buildName: "embeddable-prepared-build",
+      componentsEntryPointFilename: "embeddable-entry-point.jsx",
+      typesEntryPointFilename: "embeddable-types-entry-point.js",
+    },
+  };
 }
 
 module.exports = { createContext };

package/scripts/generate.js

@@ -1,69 +1,70 @@
 const fs = require("fs/promises");
 const path = require("path");
 const vite = require("vite");
-const viteReactPlugin = require('@vitejs/plugin-react');
+const viteReactPlugin = require("@vitejs/plugin-react");
 const core = require("@embeddable.com/sdk-core/scripts");
 
-process.on('message', async ({ ctx }) => {
-    await generate(ctx);
-
-    process.exit();
-});
-
 const EMB_FILE_REGEX = /^(.*)(?<!\.type|\.options)\.emb\.[jt]s$/;
 
 async function generate(ctx) {
-    const filesList = await core.findEmbFiles(ctx.client.srcDir, EMB_FILE_REGEX);
+  const filesList = await core.findEmbFiles(ctx.client.srcDir, EMB_FILE_REGEX);
 
-    await injectImports(ctx, filesList);
+  await injectImports(ctx, filesList);
 
-    await runViteBuild(ctx);
+  await runViteBuild(ctx);
 
-    await runCoreBuild(ctx);
+  await runCoreBuild(ctx);
 }
 
 module.exports = { generate };
 
-
 async function runCoreBuild(ctx) {
-    await core.build({
-        outDir: ctx.outputOptions.buildName,
-        renderFunctionFileName: ctx.outputOptions.fileName
-    });
+  await core.build({
+    outDir: ctx.outputOptions.buildName,
+    renderFunctionFileName: ctx.outputOptions.fileName,
+  });
 }
 
 async function runViteBuild(ctx) {
-    process.chdir(ctx.client.rootDir);
-
-    await vite.build({
-        plugins: [viteReactPlugin()],
-        build: {
-            lib: {
-                entry: './embeddable-entry-point.jsx',
-                formats: ['es'],
-                fileName: ctx.outputOptions.fileName
-            },
-            outDir: `.embeddable-build/${ctx.outputOptions.buildName}`
-        },
-        define: { 'process.env.NODE_ENV': '"production"' }
-    });
+  process.chdir(ctx.client.rootDir);
+
+  await vite.build({
+    plugins: [viteReactPlugin()],
+    build: {
+      lib: {
+        entry: `./${ctx.outputOptions.componentsEntryPointFilename}`,
+        formats: ["es"],
+        fileName: ctx.outputOptions.fileName,
+      },
+      outDir: `.embeddable-build/${ctx.outputOptions.buildName}`,
+    },
+    define: { "process.env.NODE_ENV": '"production"' },
+  });
 }
 
-
-const REPLACE_TOKEN = '{{LAZY_IMPORTS}}';
+const REPLACE_TOKEN = "{{LAZY_IMPORTS}}";
 
 async function injectImports(ctx, filesList) {
-    const imports = filesList.map(([fileName, filePath]) =>
-        `\t${fileName}: React.lazy(() => import('./${path.relative(ctx.client.rootDir, filePath)}'))`
-    ).join(',\n');
-
-    const content = await fs.readFile(
-        path.resolve(ctx.plugin.templatesDir, 'embeddable-entry-point.jsx.template'),
-        'utf8'
-    );
-
-    await fs.writeFile(
-        path.resolve(ctx.client.rootDir, 'embeddable-entry-point.jsx'),
-        content.replace(REPLACE_TOKEN, imports)
-    );
+  const imports = filesList
+    .map(
+      ([fileName, filePath]) =>
+        `\t${fileName}: React.lazy(() => import('./${path.relative(
+          ctx.client.rootDir,
+          filePath,
+        )}'))`,
+    )
+    .join(",\n");
+
+  const content = await fs.readFile(
+    path.resolve(
+      ctx.plugin.templatesDir,
+      `${ctx.outputOptions.componentsEntryPointFilename}.template`,
+    ),
+    "utf8",
+  );
+
+  await fs.writeFile(
+    path.resolve(ctx.client.rootDir, ctx.outputOptions.componentsEntryPointFilename),
+    content.replace(REPLACE_TOKEN, imports),
+  );
 }

package/scripts/generateProcess.js

@@ -0,0 +1,14 @@
+const { generate } = require("./generate");
+const { cleanup } = require("./cleanup");
+
+process.on("message", async ({ ctx }) => {
+    try {
+        await generate(ctx);
+        await cleanup(ctx);
+    } catch (error) {
+        process.send({ error });
+        process.exit(1);
+    }
+
+    process.exit();
+});

package/scripts/prepare.js

@@ -1,13 +1,12 @@
 const fsSync = require("fs");
 const fs = require("fs/promises");
 
-async function prepare (ctx) {
-    await removeIfExists(ctx.client.buildDir);
+async function prepare(ctx) {
+  await removeIfExists(ctx.client.buildDir);
 }
 
-module.exports = { prepare }
+module.exports = { prepare };
 
 async function removeIfExists(buildDir) {
-    if (fsSync.existsSync(buildDir)) await fs.rm(buildDir, { recursive: true });
+  if (fsSync.existsSync(buildDir)) await fs.rm(buildDir, { recursive: true });
 }
-