@embeddable.com/sdk-react 1.0.0 → 2.0.0

package/lib/index.cjs.js

@@ -1,7 +1,13 @@
 'use strict';
 
-var React = require('react');
-var sdkCore = require('@embeddable.com/sdk-core');
+var path = require('node:path');
+var fs = require('fs/promises');
+var path$1 = require('path');
+var vite = require('vite');
+var viteReactPlugin = require('@vitejs/plugin-react');
+var extractComponentsConfigPlugin = require('@embeddable.com/extract-components-config');
+var sdkUtils = require('@embeddable.com/sdk-utils');
+var promises = require('node:fs/promises');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -20,218 +26,91 @@ function _interopNamespaceDefault(e) {
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var path__namespace$1 = /*#__PURE__*/_interopNamespaceDefault(path);
+var fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
+var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path$1);
+var vite__namespace = /*#__PURE__*/_interopNamespaceDefault(vite);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+var createContext = (pluginRoot, coreCtx) => {
+    coreCtx["sdk-react"] = {
+        rootDir: pluginRoot,
+        templatesDir: path.resolve(pluginRoot, "templates"),
+        outputOptions: {
+            fileName: "embeddable-prepared",
+            buildName: "embeddable-prepared-build",
+            componentsEntryPointFilename: "embeddable-entry-point.jsx",
+        },
+    };
 };
 
-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;
+const oraP = import('ora');
+const EMB_FILE_REGEX = /^(.*)(?<!\.type|\.options)\.emb\.[jt]s$/;
+const EMB_TYPE_FILE_REGEX = /^(.*)\.type\.emb\.[jt]s$/;
+var generate = async (ctx) => {
+    const ora = (await oraP).default;
+    const progress = ora("React: building components...").start();
+    const filesList = await sdkUtils.findFiles(ctx.client.srcDir, EMB_FILE_REGEX);
+    await injectImports(ctx, filesList);
+    await runViteBuild(ctx);
+    progress.succeed("React: components built completed");
 };
+async function runViteBuild(ctx) {
+    process.chdir(ctx.client.rootDir);
+    await vite__namespace.build({
+        logLevel: "error",
+        plugins: [
+            viteReactPlugin(),
+            extractComponentsConfigPlugin({
+                globalKey: "componentsMeta",
+                fileName: "embeddable-components-meta.js",
+                outputDir: ".embeddable-build",
+                componentFileRegex: EMB_FILE_REGEX,
+                typeFileRegex: EMB_TYPE_FILE_REGEX,
+                searchEntry: "embedComponent",
+            }),
+            extractComponentsConfigPlugin({
+                globalKey: "editorsMeta",
+                fileName: "embeddable-editors-meta.js",
+                outputDir: ".embeddable-build",
+                componentFileRegex: EMB_FILE_REGEX,
+                typeFileRegex: EMB_TYPE_FILE_REGEX,
+                searchEntry: "embedControl",
+            }),
+        ],
+        build: {
+            lib: {
+                entry: `./${ctx["sdk-react"].outputOptions.componentsEntryPointFilename}`,
+                formats: ["es"],
+                fileName: ctx["sdk-react"].outputOptions.fileName,
+            },
+            outDir: `.embeddable-build/${ctx["sdk-react"].outputOptions.buildName}`,
+        },
+        define: { "process.env.NODE_ENV": '"production"' },
+    });
+}
+const REPLACE_TOKEN = "{{LAZY_IMPORTS}}";
+async function injectImports(ctx, filesList) {
+    const imports = filesList
+        .map(([fileName, filePath]) => `\t${fileName}: React.lazy(() => import('./${path__namespace.relative(ctx.client.rootDir, filePath)}'))`)
+        .join(",\n");
+    const content = await fs__namespace.readFile(path__namespace.resolve(ctx["sdk-react"].templatesDir, `${ctx["sdk-react"].outputOptions.componentsEntryPointFilename}.template`), "utf8");
+    await fs__namespace.writeFile(path__namespace.resolve(ctx.client.rootDir, ctx["sdk-react"].outputOptions.componentsEntryPointFilename), content.replace(REPLACE_TOKEN, imports));
+}
 
-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",
-};
-var reducer = function (state, action) {
-    var _a, _b, _c;
-    switch (action.type) {
-        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 }, _b));
-        }
-        case ReducerActionTypes.error: {
-            return __assign(__assign({}, state), (_c = {}, _c[action.inputName] = {
-                isLoading: false,
-                error: action.payload.message || action.payload,
-            }, _c));
-        }
-    }
-    return state;
+var build = async (ctx) => {
+    createContext(path__namespace$1.resolve(__dirname, ".."), ctx);
+    await generate(ctx);
 };
-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);
-            };
-        }, []);
-        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 });
-            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;
-            Object.entries(dataLoaders)
-                .filter(function (_a) {
-                _a[0]; var params = _a[1];
-                return params.requestParams.from.datasetId === detail.datasetId;
-            })
-                .forEach(function (_a) {
-                var inputName = _a[0], params = _a[1];
-                return reloadDataset(inputName, params);
-            });
-        };
-        React__namespace.useEffect(function () {
-            Object.entries(dataLoaders).forEach(function (_a) {
-                var inputName = _a[0], params = _a[1];
-                return reloadDataset(inputName, params);
-            });
-            window.addEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler);
-            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);
-                    };
-                }
-            };
-            for (var event_1 in events) {
-                _loop_1(event_1);
-            }
-        }
-        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", ")");
-    return EmbeddableWrapper;
-}
 
-function embedControl(InnerComponent, config) {
-    var _a;
-    function EmbeddableWrapper(props) {
-        var _a, _b;
-        var componentId = props.componentId, initialValue = props.initialValue;
-        var _c = React__namespace.useState(initialValue), componentState = _c[0], setComponentState = _c[1];
-        var setter = function (value) {
-            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 : {}))));
-    }
-    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : "Editor", ")");
-    return EmbeddableWrapper;
-}
+var cleanup = async (ctx) => await promises.rm(path.resolve(ctx.client.rootDir, ctx["sdk-react"].outputOptions.componentsEntryPointFilename));
+
+var index = (coreCtx) => {
+    return {
+        pluginName: "sdk-react",
+        validate: async () => { },
+        build,
+        cleanup,
+    };
+};
 
-exports.embedComponent = embedComponent;
-exports.embedControl = embedControl;
-exports.useEmbeddableState = useEmbeddableState;
+module.exports = index;

package/lib/index.esm.js

@@ -1,214 +1,93 @@
-import * as React from 'react';
-import { isLoadDataParams, setValue } from '@embeddable.com/sdk-core';
+import * as path$1 from 'node:path';
+import { resolve } from 'node:path';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import * as vite from 'vite';
+import viteReactPlugin from '@vitejs/plugin-react';
+import extractComponentsConfigPlugin from '@embeddable.com/extract-components-config';
+import { findFiles } from '@embeddable.com/sdk-utils';
+import { rm } from 'node:fs/promises';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+var createContext = (pluginRoot, coreCtx) => {
+    coreCtx["sdk-react"] = {
+        rootDir: pluginRoot,
+        templatesDir: resolve(pluginRoot, "templates"),
+        outputOptions: {
+            fileName: "embeddable-prepared",
+            buildName: "embeddable-prepared-build",
+            componentsEntryPointFilename: "embeddable-entry-point.jsx",
+        },
+    };
 };
 
-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;
+const oraP = import('ora');
+const EMB_FILE_REGEX = /^(.*)(?<!\.type|\.options)\.emb\.[jt]s$/;
+const EMB_TYPE_FILE_REGEX = /^(.*)\.type\.emb\.[jt]s$/;
+var generate = async (ctx) => {
+    const ora = (await oraP).default;
+    const progress = ora("React: building components...").start();
+    const filesList = await findFiles(ctx.client.srcDir, EMB_FILE_REGEX);
+    await injectImports(ctx, filesList);
+    await runViteBuild(ctx);
+    progress.succeed("React: components built completed");
 };
+async function runViteBuild(ctx) {
+    process.chdir(ctx.client.rootDir);
+    await vite.build({
+        logLevel: "error",
+        plugins: [
+            viteReactPlugin(),
+            extractComponentsConfigPlugin({
+                globalKey: "componentsMeta",
+                fileName: "embeddable-components-meta.js",
+                outputDir: ".embeddable-build",
+                componentFileRegex: EMB_FILE_REGEX,
+                typeFileRegex: EMB_TYPE_FILE_REGEX,
+                searchEntry: "embedComponent",
+            }),
+            extractComponentsConfigPlugin({
+                globalKey: "editorsMeta",
+                fileName: "embeddable-editors-meta.js",
+                outputDir: ".embeddable-build",
+                componentFileRegex: EMB_FILE_REGEX,
+                typeFileRegex: EMB_TYPE_FILE_REGEX,
+                searchEntry: "embedControl",
+            }),
+        ],
+        build: {
+            lib: {
+                entry: `./${ctx["sdk-react"].outputOptions.componentsEntryPointFilename}`,
+                formats: ["es"],
+                fileName: ctx["sdk-react"].outputOptions.fileName,
+            },
+            outDir: `.embeddable-build/${ctx["sdk-react"].outputOptions.buildName}`,
+        },
+        define: { "process.env.NODE_ENV": '"production"' },
+    });
+}
+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["sdk-react"].templatesDir, `${ctx["sdk-react"].outputOptions.componentsEntryPointFilename}.template`), "utf8");
+    await fs.writeFile(path.resolve(ctx.client.rootDir, ctx["sdk-react"].outputOptions.componentsEntryPointFilename), content.replace(REPLACE_TOKEN, imports));
+}
 
-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",
-};
-var reducer = function (state, action) {
-    var _a, _b, _c;
-    switch (action.type) {
-        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 }, _b));
-        }
-        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 build = async (ctx) => {
+    createContext(path$1.resolve(__dirname, ".."), ctx);
+    await generate(ctx);
 };
-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);
-            };
-        }, []);
-        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 });
-            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;
-            Object.entries(dataLoaders)
-                .filter(function (_a) {
-                _a[0]; var params = _a[1];
-                return params.requestParams.from.datasetId === detail.datasetId;
-            })
-                .forEach(function (_a) {
-                var inputName = _a[0], params = _a[1];
-                return reloadDataset(inputName, params);
-            });
-        };
-        React.useEffect(function () {
-            Object.entries(dataLoaders).forEach(function (_a) {
-                var inputName = _a[0], params = _a[1];
-                return reloadDataset(inputName, params);
-            });
-            window.addEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler);
-            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);
-                    };
-                }
-            };
-            for (var event_1 in events) {
-                _loop_1(event_1);
-            }
-        }
-        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", ")");
-    return EmbeddableWrapper;
-}
 
-function embedControl(InnerComponent, config) {
-    var _a;
-    function EmbeddableWrapper(props) {
-        var _a, _b;
-        var componentId = props.componentId, initialValue = props.initialValue;
-        var _c = React.useState(initialValue), componentState = _c[0], setComponentState = _c[1];
-        var setter = function (value) {
-            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 : {}))));
-    }
-    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : "Editor", ")");
-    return EmbeddableWrapper;
-}
+var cleanup = async (ctx) => await rm(resolve(ctx.client.rootDir, ctx["sdk-react"].outputOptions.componentsEntryPointFilename));
+
+var index = (coreCtx) => {
+    return {
+        pluginName: "sdk-react",
+        validate: async () => { },
+        build,
+        cleanup,
+    };
+};
 
-export { embedComponent, embedControl, useEmbeddableState };
+export { index as default };

package/lib/plugin/build.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (ctx: any) => Promise<void>;
+export default _default;

package/lib/plugin/cleanup.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (ctx: any) => Promise<void>;
+export default _default;

package/lib/plugin/createContext.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (pluginRoot: string, coreCtx: any) => void;
+export default _default;

package/lib/plugin/generate.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (ctx: any) => Promise<void>;
+export default _default;

package/lib/plugin/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: (coreCtx: any) => {
+    pluginName: string;
+    validate: () => Promise<void>;
+    build: (ctx: any) => Promise<void>;
+    cleanup: (ctx: any) => Promise<void>;
+};
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@embeddable.com/sdk-react",
-  "version": "1.0.0",
-  "description": "Embeddable SDK React plugin/module responsible for React components bundling.",
+  "version": "2.0.0",
+  "description": "Embeddable SDK React plugin responsible for React components bundling.",
   "keywords": [
     "embeddable",
     "sdk",
@@ -9,19 +9,15 @@
   ],
   "main": "lib/index.cjs.js",
   "module": "lib/index.esm.js",
-  "browser": "lib/index.umd.js",
   "types": "lib/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/embeddable-hq/embeddable-sdk.git",
-    "directory": "packages/react"
+    "directory": "packages/react-plugin"
   },
   "scripts": {
     "build": "rollup -c"
   },
-  "bin": {
-    "embeddable-react": "bin/embeddable-react"
-  },
   "author": "Oleg Kapustin <oleg@trevor.io>",
   "files": [
     "lib/",
@@ -29,18 +25,11 @@
     "templates/"
   ],
   "license": "MIT",
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.14",
-    "react": "^18.2.0"
-  },
   "dependencies": {
+    "@embeddable.com/extract-components-config": "*",
     "@embeddable.com/sdk-core": "*",
-    "@vitejs/plugin-react": "^4.0.2",
-    "vite": "^4.4.2",
-    "ora": "^6.3.1"
+    "@embeddable.com/sdk-utils": "*",
+    "@vitejs/plugin-react": "^4.0.2"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx,json}": [

package/templates/embeddable-entry-point.jsx.template

@@ -8,10 +8,16 @@ const COMPONENT_MAP = {
 };
 
 export default (rootEl, componentName, props) => {
-    const Component = COMPONENT_MAP[componentName]
-    ReactDOM.createRoot(rootEl).render(
+    const Component = COMPONENT_MAP[componentName];
+    const root = ReactDOM.createRoot(rootEl);
+    const unmountHandler = () => {
+        root.unmount();
+        rootEl.removeEventListener('EMBEDDABLE_COMPONENT:UNMOUNT', unmountHandler);
+    };
+    root.render(
         <React.Suspense fallback={<div/>}>
             <Component {...props} propsUpdateListener={rootEl} />
         </React.Suspense>
-    )
+    );
+    rootEl.addEventListener('EMBEDDABLE_COMPONENT:UNMOUNT', unmountHandler);
 }

package/bin/embeddable-react

@@ -1,10 +0,0 @@
-#!/usr/bin/env node
-'use strict';
-
-const { build } = require("../scripts/build");
-
-async function main() {
-    await build();
-}
-
-main();

package/lib/EmbeddableStateContext.d.ts

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

package/lib/embedComponent.d.ts

@@ -1,21 +0,0 @@
-import * as React from "react";
-import { LoadDataParams } from "@embeddable.com/sdk-core";
-type WrapperProps = {
-    propsUpdateListener: HTMLElement;
-    componentId: string;
-};
-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 = {
-    isLoading: boolean;
-    data?: any;
-    error?: string;
-};
-export declare function embedComponent<ES>(InnerComponent: React.ComponentType<any>, config?: Config<ES>): {
-    ({ propsUpdateListener, ...props }: WrapperProps): React.JSX.Element;
-    displayName: string;
-};
-export {};

package/lib/embedControl.d.ts

@@ -1,13 +0,0 @@
-import * as React from "react";
-export type Config<T> = {
-    inputs: (value: any, setter: Setter<T>) => any;
-    events: Record<string, EmbeddableEventHandler<T>>;
-    mapProps?: (_: any) => any;
-};
-export type EmbeddableEventHandler<T> = (value: T) => T;
-type Setter<T> = (value: T) => void;
-export declare function embedControl<T>(InnerComponent: React.ComponentType, config: Config<T>): {
-    (props: any): React.JSX.Element;
-    displayName: string;
-};
-export {};

package/lib/index.d.ts

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

package/lib/index.umd.js

@@ -1,280 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.embeddableSdkReact = {}));
-})(this, (function (exports) { 'use strict';
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol */
-
-
-    var __assign = function() {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-
-    var react = {exports: {}};
-
-    var react_production_min = {};
-
-    /**
-     * @license React
-     * react.production.min.js
-     *
-     * Copyright (c) Facebook, Inc. and its affiliates.
-     *
-     * This source code is licensed under the MIT license found in the
-     * LICENSE file in the root directory of this source tree.
-     */
-    var l=Symbol.for("react.element"),n=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),r=Symbol.for("react.profiler"),t=Symbol.for("react.provider"),u=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),z=Symbol.iterator;function A(a){if(null===a||"object"!==typeof a)return null;a=z&&a[z]||a["@@iterator"];return "function"===typeof a?a:null}
-    var B={isMounted:function(){return !1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}E.prototype.isReactComponent={};
-    E.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,a,b,"setState");};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate");};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}var H=G.prototype=new F;
-    H.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};
-    function M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=""+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f;}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return {$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}
-    function N(a,b){return {$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return "object"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={"=":"=0",":":"=2"};return "$"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\/+/g;function Q(a,b){return "object"===typeof a&&null!==a&&null!=a.key?escape(""+a.key):b.toString(36)}
-    function R(a,b,e,d,c){var k=typeof a;if("undefined"===k||"boolean"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case l:case n:h=!0;}}if(h)return h=a,c=c(h),a=""===d?"."+Q(h,0):d,I(c)?(e="",null!=a&&(e=a.replace(P,"$&/")+"/"),R(c,b,e,"",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?"":(""+c.key).replace(P,"$&/")+"/")+a)),b.push(c)),1;h=0;d=""===d?".":d+":";if(I(a))for(var g=0;g<a.length;g++){k=
-    a[g];var f=d+Q(k,g);h+=R(k,b,e,f,c);}else if(f=A(a),"function"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if("object"===k)throw b=String(a),Error("Objects are not valid as a React child (found: "+("[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b)+"). If you meant to render a collection of children, use an array instead.");return h}
-    function S(a,b,e){if(null==a)return a;var d=[],c=0;R(a,d,"","",function(a){return b.call(e,a,c++)});return d}function T(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b;},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b;});-1===a._status&&(a._status=0,a._result=b);}if(1===a._status)return a._result.default;throw a._result;}
-    var U={current:null},V={transition:null},W={ReactCurrentDispatcher:U,ReactCurrentBatchConfig:V,ReactCurrentOwner:K};react_production_min.Children={map:S,forEach:function(a,b,e){S(a,function(){b.apply(this,arguments);},e);},count:function(a){var b=0;S(a,function(){b++;});return b},toArray:function(a){return S(a,function(a){return a})||[]},only:function(a){if(!O(a))throw Error("React.Children.only expected to receive a single React element child.");return a}};react_production_min.Component=E;react_production_min.Fragment=p;
-    react_production_min.Profiler=r;react_production_min.PureComponent=G;react_production_min.StrictMode=q;react_production_min.Suspense=w;react_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=W;
-    react_production_min.cloneElement=function(a,b,e){if(null===a||void 0===a)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+a+".");var d=C({},a.props),c=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=K.current);void 0!==b.key&&(c=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)J.call(b,f)&&!L.hasOwnProperty(f)&&(d[f]=void 0===b[f]&&void 0!==g?g[f]:b[f]);}var f=arguments.length-2;if(1===f)d.children=e;else if(1<f){g=Array(f);
-    for(var m=0;m<f;m++)g[m]=arguments[m+2];d.children=g;}return {$$typeof:l,type:a.type,key:c,ref:k,props:d,_owner:h}};react_production_min.createContext=function(a){a={$$typeof:u,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null};a.Provider={$$typeof:t,_context:a};return a.Consumer=a};react_production_min.createElement=M;react_production_min.createFactory=function(a){var b=M.bind(null,a);b.type=a;return b};react_production_min.createRef=function(){return {current:null}};
-    react_production_min.forwardRef=function(a){return {$$typeof:v,render:a}};react_production_min.isValidElement=O;react_production_min.lazy=function(a){return {$$typeof:y,_payload:{_status:-1,_result:a},_init:T}};react_production_min.memo=function(a,b){return {$$typeof:x,type:a,compare:void 0===b?null:b}};react_production_min.startTransition=function(a){var b=V.transition;V.transition={};try{a();}finally{V.transition=b;}};react_production_min.unstable_act=function(){throw Error("act(...) is not supported in production builds of React.");};
-    react_production_min.useCallback=function(a,b){return U.current.useCallback(a,b)};react_production_min.useContext=function(a){return U.current.useContext(a)};react_production_min.useDebugValue=function(){};react_production_min.useDeferredValue=function(a){return U.current.useDeferredValue(a)};react_production_min.useEffect=function(a,b){return U.current.useEffect(a,b)};react_production_min.useId=function(){return U.current.useId()};react_production_min.useImperativeHandle=function(a,b,e){return U.current.useImperativeHandle(a,b,e)};
-    react_production_min.useInsertionEffect=function(a,b){return U.current.useInsertionEffect(a,b)};react_production_min.useLayoutEffect=function(a,b){return U.current.useLayoutEffect(a,b)};react_production_min.useMemo=function(a,b){return U.current.useMemo(a,b)};react_production_min.useReducer=function(a,b,e){return U.current.useReducer(a,b,e)};react_production_min.useRef=function(a){return U.current.useRef(a)};react_production_min.useState=function(a){return U.current.useState(a)};react_production_min.useSyncExternalStore=function(a,b,e){return U.current.useSyncExternalStore(a,b,e)};
-    react_production_min.useTransition=function(){return U.current.useTransition()};react_production_min.version="18.2.0";
-
-    {
-      react.exports = react_production_min;
-    }
-
-    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, {
-            bubbles: false,
-            detail: {
-                componentId: componentId,
-                value: value,
-                eventName: eventName,
-            },
-        });
-        window.dispatchEvent(event);
-    };
-
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-
-    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",
-    };
-    var reducer = function (state, action) {
-        var _a, _b, _c;
-        switch (action.type) {
-            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 }, _b));
-            }
-            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)));
-        }, {});
-    };
-    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);
-                };
-            }, []);
-            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 });
-                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;
-                Object.entries(dataLoaders)
-                    .filter(function (_a) {
-                    _a[0]; var params = _a[1];
-                    return params.requestParams.from.datasetId === detail.datasetId;
-                })
-                    .forEach(function (_a) {
-                    var inputName = _a[0], params = _a[1];
-                    return reloadDataset(inputName, params);
-                });
-            };
-            reactExports.useEffect(function () {
-                Object.entries(dataLoaders).forEach(function (_a) {
-                    var inputName = _a[0], params = _a[1];
-                    return reloadDataset(inputName, params);
-                });
-                window.addEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler);
-                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);
-                        };
-                    }
-                };
-                for (var event_1 in events) {
-                    _loop_1(event_1);
-                }
-            }
-            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", ")");
-        return EmbeddableWrapper;
-    }
-
-    function embedControl(InnerComponent, config) {
-        var _a;
-        function EmbeddableWrapper(props) {
-            var _a, _b;
-            var componentId = props.componentId, initialValue = props.initialValue;
-            var _c = reactExports.useState(initialValue), componentState = _c[0], setComponentState = _c[1];
-            var setter = function (value) {
-                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 : {}))));
-        }
-        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/scripts/build.js

@@ -1,79 +0,0 @@
-const path = require("path");
-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");
-
-let ora;
-
-async function build() {
-  ora = (await oraP).default;
-
-  const spinnerPrepare = ora("preparing...").start();
-
-  const ctx = createContext(path.resolve(__dirname, ".."), process.cwd());
-
-  await core.validate(ctx);
-
-  await prepare(ctx);
-  spinnerPrepare.succeed("preparation competed");
-
-  await runProcess({
-    ctx,
-    processFile: "generateProcess.js",
-    initMessage: "building components...",
-    successMessage: "components built completed",
-    failMessage: "components built failed",
-  });
-
-  await runProcess({
-    ctx,
-    processFile: "buildTypesProcess.js",
-    initMessage: "building types...",
-    successMessage: "types built completed",
-    failMessage: "types built failed",
-  });
-}
-
-
-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);
-  }
-}
-
-function promisifyForkedProcess (fileName, ctx) {
-  const forkedProcess = fork(
-      path.resolve(__dirname, fileName),
-      [],
-      process.env.NODE_ENV === "dev" ? undefined : { silent: true },
-  );
-
-  forkedProcess.send({ ctx });
-
-  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

@@ -1,12 +0,0 @@
-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

@@ -1,8 +0,0 @@
-const fs = require("fs/promises");
-const path = require("path");
-
-async function cleanup(ctx) {
-  await fs.rm(path.resolve(ctx.client.rootDir, ctx.outputOptions.componentsEntryPointFilename));
-}
-
-module.exports = { cleanup };

package/scripts/createContext.js

@@ -1,24 +0,0 @@
-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",
-      componentsEntryPointFilename: "embeddable-entry-point.jsx",
-      typesEntryPointFilename: "embeddable-types-entry-point.js",
-    },
-  };
-}
-
-module.exports = { createContext };

package/scripts/generate.js

@@ -1,70 +0,0 @@
-const fs = require("fs/promises");
-const path = require("path");
-const vite = require("vite");
-const viteReactPlugin = require("@vitejs/plugin-react");
-const core = require("@embeddable.com/sdk-core/scripts");
-
-const EMB_FILE_REGEX = /^(.*)(?<!\.type|\.options)\.emb\.[jt]s$/;
-
-async function generate(ctx) {
-  const filesList = await core.findEmbFiles(ctx.client.srcDir, EMB_FILE_REGEX);
-
-  await injectImports(ctx, filesList);
-
-  await runViteBuild(ctx);
-
-  await runCoreBuild(ctx);
-}
-
-module.exports = { generate };
-
-async function runCoreBuild(ctx) {
-  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: `./${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}}";
-
-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,
-      `${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

@@ -1,14 +0,0 @@
-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,12 +0,0 @@
-const fsSync = require("fs");
-const fs = require("fs/promises");
-
-async function prepare(ctx) {
-  await removeIfExists(ctx.client.buildDir);
-}
-
-module.exports = { prepare };
-
-async function removeIfExists(buildDir) {
-  if (fsSync.existsSync(buildDir)) await fs.rm(buildDir, { recursive: true });
-}