@embeddable.com/sdk-react 0.0.1

package/.turbo/turbo-build.log

@@ -0,0 +1,15 @@
+
+> @embeddable-sdk/react@0.0.1 build
+> rollup -c
+
+(node:41139) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
+(Use `node --trace-warnings ...` to show where the warning was created)
+(node:41139) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+
+./src/index.ts → lib/index.umd.js...
+(!) Plugin typescript: @rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
+created lib/index.umd.js in 732ms
+
+./src/index.ts → lib/index.cjs.js, lib/index.esm.js...
+(!) Plugin typescript: @rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
+created lib/index.cjs.js, lib/index.esm.js in 366ms

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @embeddable.com/sdk-react
+
+## 0.0.1
+
+### Patch Changes
+
+- First publish attempt.

package/bin/embeddable-react

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

package/lib/embedComponent.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+type WrapperProps = {
+    propsUpdateListener: HTMLElement;
+};
+export type Config = {
+    extendedProps?: (props: any) => any;
+};
+export declare function embedComponent(InnerComponent: React.ComponentType, config: Config): {
+    ({ propsUpdateListener, ...props }: WrapperProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/lib/embedEditor.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export type Config<T> = {
+    initialState: T;
+    inputs: any;
+    events: Record<string, EmbeddableEvent<T>>;
+};
+export type EmbeddableEvent<T> = (value: T, setter: Setter<T>) => void;
+type Setter<T> = (value: T) => void;
+export declare function embedEditor<T>(InnerComponent: React.ComponentType, config: Config<T>): {
+    ({ editorId }: {
+        editorId: any;
+    }): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/lib/index.cjs.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+/******************************************************************************
+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 EVENT_NAME = 'embeddable-event:update-props';
+function embedComponent(InnerComponent, config) {
+    var _a;
+    function EmbeddableWrapper(_a) {
+        var propsUpdateListener = _a.propsUpdateListener, props = __rest(_a, ["propsUpdateListener"]);
+        var _b = React__namespace.useState(props), propsProxy = _b[0], setProps = _b[1];
+        var propsUpdateEventHandler = function (_a) {
+            var detail = _a.detail;
+            return setProps(detail);
+        };
+        React__namespace.useEffect(function () {
+            propsUpdateListener.addEventListener(EVENT_NAME, propsUpdateEventHandler);
+            return function () { return propsUpdateListener.removeEventListener(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]);
+        return React__namespace.createElement(InnerComponent, __assign({}, propsProxy, extendedProps));
+    }
+    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Component', ")");
+    return EmbeddableWrapper;
+}
+
+function embedEditor(InnerComponent, config) {
+    var _a;
+    function EmbeddableWrapper(_a) {
+        var editorId = _a.editorId;
+        var _b = React__namespace.useState(config.initialState), componentState = _b[0], setComponentState = _b[1];
+        var createEvent = function (value, eventName) {
+            var event = new CustomEvent("".concat(editorId, ":").concat(eventName), {
+                bubbles: false,
+                detail: value,
+            });
+            window.dispatchEvent(event);
+        };
+        var events = config.events;
+        var eventProps = {};
+        var _loop_1 = function (event_1) {
+            if (events.hasOwnProperty(event_1)) {
+                var eventFunction_1 = events[event_1];
+                eventProps[event_1] = function (value) {
+                    eventFunction_1(value, setComponentState);
+                    createEvent(value, event_1);
+                };
+            }
+        };
+        for (var event_1 in events) {
+            _loop_1(event_1);
+        }
+        return React__namespace.createElement(InnerComponent, __assign({}, eventProps, { state: componentState }, config.inputs));
+    }
+    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Editor', ")");
+    return EmbeddableWrapper;
+}
+
+exports.embedComponent = embedComponent;
+exports.embedEditor = embedEditor;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { embedComponent } from './embedComponent';
+export { embedEditor } from './embedEditor';

package/lib/index.esm.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+
+/******************************************************************************
+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 EVENT_NAME = 'embeddable-event:update-props';
+function embedComponent(InnerComponent, config) {
+    var _a;
+    function EmbeddableWrapper(_a) {
+        var propsUpdateListener = _a.propsUpdateListener, props = __rest(_a, ["propsUpdateListener"]);
+        var _b = React.useState(props), propsProxy = _b[0], setProps = _b[1];
+        var propsUpdateEventHandler = function (_a) {
+            var detail = _a.detail;
+            return setProps(detail);
+        };
+        React.useEffect(function () {
+            propsUpdateListener.addEventListener(EVENT_NAME, propsUpdateEventHandler);
+            return function () { return propsUpdateListener.removeEventListener(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]);
+        return React.createElement(InnerComponent, __assign({}, propsProxy, extendedProps));
+    }
+    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Component', ")");
+    return EmbeddableWrapper;
+}
+
+function embedEditor(InnerComponent, config) {
+    var _a;
+    function EmbeddableWrapper(_a) {
+        var editorId = _a.editorId;
+        var _b = React.useState(config.initialState), componentState = _b[0], setComponentState = _b[1];
+        var createEvent = function (value, eventName) {
+            var event = new CustomEvent("".concat(editorId, ":").concat(eventName), {
+                bubbles: false,
+                detail: value,
+            });
+            window.dispatchEvent(event);
+        };
+        var events = config.events;
+        var eventProps = {};
+        var _loop_1 = function (event_1) {
+            if (events.hasOwnProperty(event_1)) {
+                var eventFunction_1 = events[event_1];
+                eventProps[event_1] = function (value) {
+                    eventFunction_1(value, setComponentState);
+                    createEvent(value, event_1);
+                };
+            }
+        };
+        for (var event_1 in events) {
+            _loop_1(event_1);
+        }
+        return React.createElement(InnerComponent, __assign({}, eventProps, { state: componentState }, config.inputs));
+    }
+    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Editor', ")");
+    return EmbeddableWrapper;
+}
+
+export { embedComponent, embedEditor };

package/lib/index.umd.js

@@ -0,0 +1,145 @@
+(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 EVENT_NAME = 'embeddable-event:update-props';
+    function embedComponent(InnerComponent, config) {
+        var _a;
+        function EmbeddableWrapper(_a) {
+            var propsUpdateListener = _a.propsUpdateListener, props = __rest(_a, ["propsUpdateListener"]);
+            var _b = reactExports.useState(props), propsProxy = _b[0], setProps = _b[1];
+            var propsUpdateEventHandler = function (_a) {
+                var detail = _a.detail;
+                return setProps(detail);
+            };
+            reactExports.useEffect(function () {
+                propsUpdateListener.addEventListener(EVENT_NAME, propsUpdateEventHandler);
+                return function () { return propsUpdateListener.removeEventListener(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]);
+            return reactExports.createElement(InnerComponent, __assign({}, propsProxy, extendedProps));
+        }
+        EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Component', ")");
+        return EmbeddableWrapper;
+    }
+
+    function embedEditor(InnerComponent, config) {
+        var _a;
+        function EmbeddableWrapper(_a) {
+            var editorId = _a.editorId;
+            var _b = reactExports.useState(config.initialState), componentState = _b[0], setComponentState = _b[1];
+            var createEvent = function (value, eventName) {
+                var event = new CustomEvent("".concat(editorId, ":").concat(eventName), {
+                    bubbles: false,
+                    detail: value,
+                });
+                window.dispatchEvent(event);
+            };
+            var events = config.events;
+            var eventProps = {};
+            var _loop_1 = function (event_1) {
+                if (events.hasOwnProperty(event_1)) {
+                    var eventFunction_1 = events[event_1];
+                    eventProps[event_1] = function (value) {
+                        eventFunction_1(value, setComponentState);
+                        createEvent(value, event_1);
+                    };
+                }
+            };
+            for (var event_1 in events) {
+                _loop_1(event_1);
+            }
+            return reactExports.createElement(InnerComponent, __assign({}, eventProps, { state: componentState }, config.inputs));
+        }
+        EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Editor', ")");
+        return EmbeddableWrapper;
+    }
+
+    exports.embedComponent = embedComponent;
+    exports.embedEditor = embedEditor;
+
+}));

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@embeddable.com/sdk-react",
+  "version": "0.0.1",
+  "description": "TODO.",
+  "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"
+  },
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "bin": {
+    "embeddable-react": "bin/embeddable-react"
+  },
+  "author": "Oleg Kapustin <oleg@trevor.io>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.2",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "@types/react": "^18.2.14",
+    "react": "^18.2.0",
+    "rollup": "^3.26.0",
+    "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "@embeddable-sdk/core": "*",
+    "@vitejs/plugin-react": "^4.0.2",
+    "ora": "^6.3.1",
+    "vite": "^4.4.2"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,36 @@
+import typescript from '@rollup/plugin-typescript';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import pkg from './package.json' assert { type: 'json' };
+
+export default [
+    {
+        input: './src/index.ts',
+        output: {
+            name: 'embeddableSdkReact',
+            file: pkg.browser,
+            format: 'umd'
+        },
+        plugins: [
+            replace({
+                preventAssignment: true,
+                values: {
+                    'process.env.NODE_ENV': JSON.stringify('production')
+                }
+            }),
+            resolve(),
+            commonjs(),
+            typescript()
+        ],
+    },
+    {
+        input: './src/index.ts',
+        external: Object.keys(pkg.peerDependencies),
+        output: [
+            { file: pkg.main, format: 'cjs' },
+            { file: pkg.module, format: 'es' }
+        ],
+        plugins: [typescript()]
+    }
+]

package/scripts/build.js

@@ -0,0 +1,40 @@
+const path = require("path");
+const { fork } = require('child_process');
+const oraP = import('ora');
+
+const {createContext} = require("./createContext");
+const {prepare} = require("./prepare");
+const {cleanup} = require("./cleanup");
+
+const generateFork = fork(path.resolve(__dirname, 'generate.js'), [], { silent: true });
+
+async function build() {
+    const ora = (await oraP).default; // TODO: migrate cli to modules/ts and bundle.
+
+    const spinnerPrepare = ora("preparation").start();
+
+    const ctx = createContext(path.resolve(__dirname, '..'), process.cwd());
+
+    await validationEmulation();
+    await prepare(ctx);
+    spinnerPrepare.succeed();
+
+    const spinnerBuild = ora("build").start();
+
+    generateFork.send({ ctx });
+
+    generateFork.on('exit', async () => {
+        await cleanup(ctx);
+        spinnerBuild.succeed();
+    })
+
+}
+
+module.exports = { build };
+
+// TODO: later we will validate configs e.g. yaml files with this function.
+function validationEmulation() {
+    return new Promise((res, rej) => {
+        setTimeout(res, 4000);
+    })
+}

package/scripts/cleanup.js

@@ -0,0 +1,8 @@
+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'));
+}
+
+module.exports = { cleanup };

package/scripts/createContext.js

@@ -0,0 +1,21 @@
+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',
+        },
+    };
+}
+
+module.exports = { createContext };

package/scripts/generate.js

@@ -0,0 +1,99 @@
+const fs = require("fs/promises");
+const path = require("path");
+const vite = require("vite");
+const viteReactPlugin = require('@vitejs/plugin-react');
+const core = require("@embeddable-sdk/core/src/build");
+
+process.on('message', async ({ ctx }) => {
+    await generate(ctx);
+
+    process.exit();
+});
+
+async function generate(ctx) {
+    const filesList = await findEmbFiles(ctx.client.srcDir);
+
+    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: './embeddable-entry-point.jsx',
+                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, 'embeddable-entry-point.jsx.template'),
+        'utf8'
+    );
+
+    await fs.writeFile(
+        path.resolve(ctx.client.rootDir, 'embeddable-entry-point.jsx'),
+        content.replace(REPLACE_TOKEN, imports)
+    );
+}
+
+
+const EMB_FILE_REGEX = /^(.*)\.emb\.(j|t)s$/;
+
+async function findEmbFiles (initialSrcDir) {
+    const filesList = [];
+
+    async function findEmbFilesRec(srcDir) {
+        const allFiles = await fs.readdir(srcDir);
+
+        for (const file of allFiles) {
+            const filePath = path.join(srcDir, file)
+
+            const status = await fs.lstat(filePath);
+
+            if (status.isDirectory()) {
+                await findEmbFilesRec(filePath)
+            }
+
+            const fileName = file.match(EMB_FILE_REGEX);
+
+            if (fileName) {
+                filesList.push([fileName[1], filePath]);
+            }
+        }
+    }
+
+    await findEmbFilesRec(initialSrcDir);
+
+
+    return filesList;
+}

package/scripts/prepare.js

@@ -0,0 +1,13 @@
+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 });
+}
+

package/src/embedComponent.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+type WrapperProps = {
+  propsUpdateListener: HTMLElement
+};
+
+const EVENT_NAME = 'embeddable-event:update-props';
+
+// TODO: define config type.
+export type Config = {
+  extendedProps?: (props: any) => any
+};
+
+export function embedComponent(InnerComponent: React.ComponentType, config: Config) {
+  function EmbeddableWrapper({propsUpdateListener, ...props}: WrapperProps) {
+    const [propsProxy, setProps] = React.useState(props);
+
+    const propsUpdateEventHandler = ({ detail }: CustomEvent<typeof propsProxy>) => setProps(detail);
+
+
+    React.useEffect(() => {
+      propsUpdateListener.addEventListener(EVENT_NAME, propsUpdateEventHandler);
+
+      return () => propsUpdateListener.removeEventListener(EVENT_NAME, propsUpdateEventHandler);
+    }, []);
+
+
+    const extendedProps = React.useMemo(
+      () => config?.extendedProps?.(propsProxy),
+      [propsProxy, config?.extendedProps]
+    );
+
+    return <InnerComponent {...propsProxy} {...extendedProps}/>;
+  }
+
+  EmbeddableWrapper.displayName = `embedded(${InnerComponent.displayName ?? 'Component'})`;
+
+
+  return EmbeddableWrapper;
+}

package/src/embedEditor.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+export type Config<T> = {
+  initialState: T
+  inputs: any;
+  events: Record<string, EmbeddableEvent<T>>
+};
+
+export type EmbeddableEvent<T> = (value: T, setter: Setter<T>) => void;
+
+type Setter<T> = (value: T) => void;
+
+export function embedEditor<T>(InnerComponent: React.ComponentType, config: Config<T>) {
+
+  function EmbeddableWrapper({editorId}) {
+
+    const [componentState, setComponentState] = React.useState(config.initialState);
+
+    const createEvent = (value: T, eventName) => {
+
+      const event = new CustomEvent(`${editorId}:${eventName}`, {
+        bubbles: false,
+        detail: value,
+      });
+      window.dispatchEvent(event);
+    }
+
+    const events = config.events;
+    const eventProps: Record<string, (value: T) => void> = {};
+
+    for (const event in events) {
+      if (events.hasOwnProperty(event)) {
+        let eventFunction = events[event];
+        eventProps[event] = (value: T) => {
+          eventFunction(value, setComponentState)
+          createEvent(value, event)
+        }
+      }
+    }
+
+    return <InnerComponent {...eventProps} state={componentState} {...config.inputs} />;
+  }
+
+  EmbeddableWrapper.displayName = `embedded(${InnerComponent.displayName ?? 'Editor'})`;
+
+
+  return EmbeddableWrapper;
+}

package/src/index.d.ts

@@ -0,0 +1 @@
+export { connectWidget } from './connectWidget';

package/src/index.ts

@@ -0,0 +1,2 @@
+export { embedComponent } from './embedComponent';
+export { embedEditor } from './embedEditor';

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

@@ -0,0 +1,17 @@
+import 'vite/modulepreload-polyfill';
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+const COMPONENT_MAP = {
+{{LAZY_IMPORTS}}
+};
+
+export default (rootEl, componentName, props) => {
+    const Component = COMPONENT_MAP[componentName]
+    ReactDOM.createRoot(rootEl).render(
+        <React.Suspense fallback={<div/>}>
+            <Component {...props} propsUpdateListener={rootEl} />
+        </React.Suspense>
+    )
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "es5",
+    "skipLibCheck": true,
+    "jsx": "react",
+    "sourceMap": true,
+    "declaration": true,
+    "outDir": "lib"
+  },
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}