@embeddable.com/sdk-react 1.0.0 → 2.0.1

package/lib/index.esm.js

@@ -1,214 +1,166 @@
-import * as React from 'react';
-import { isLoadDataParams, setValue } from '@embeddable.com/sdk-core';
+import * as path$1 from 'node:path';
+import { resolve, join } from 'node:path';
+import * as fs$1 from 'fs/promises';
+import * as path from 'path';
+import * as vite from 'vite';
+import viteReactPlugin from '@vitejs/plugin-react';
+import * as fs from 'node:fs/promises';
+import { readdir, lstat, rm } from 'node:fs/promises';
+import { parse } from '@babel/parser';
+import generator from '@babel/generator';
+import traverse from '@babel/traverse';
+import 'node:child_process';
 
-/******************************************************************************
-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;
+// @ts-ignore
+const babelTraverse = traverse.default;
+// @ts-ignore
+const babelGenerate = generator.default;
+var index$1 = ({ globalKey, outputDir, fileName, componentFileRegex, typeFileRegex, searchEntry = "", }) => {
+    const configs = [];
+    return {
+        name: "extract-components-config",
+        moduleParsed: async (moduleInfo) => {
+            var _a;
+            if (componentFileRegex.test(moduleInfo.id) &&
+                ((_a = moduleInfo.code) === null || _a === void 0 ? void 0 : _a.includes(searchEntry))) {
+                const ast = parse(moduleInfo.code, {
+                    sourceType: "module",
+                });
+                babelTraverse(ast, {
+                    ImportDeclaration: (path) => {
+                        if (!typeFileRegex.test(path.node.source.value)) {
+                            path.remove();
+                        }
+                    },
+                    ExportDefaultDeclaration: (path) => {
+                        path.remove();
+                    },
+                });
+                const tempFilePath = moduleInfo.id
+                    .replace(".emb.", ".emb-temp.")
+                    .replace(/\.ts$/, ".js");
+                await fs.writeFile(tempFilePath, babelGenerate(ast).code);
+                const module = await import(tempFilePath);
+                const configJSON = JSON.stringify(module.meta, (_key, value) => typeof value === "object" && "typeConfig" in value
+                    ? value.toString()
+                    : value);
+                await fs.rm(tempFilePath);
+                configs.push(configJSON);
+            }
+        },
+        buildEnd: async () => {
+            const template = `
+globalThis.__EMBEDDABLE__ = globalThis.__EMBEDDABLE__ || {};
+globalThis.__EMBEDDABLE__.${globalKey} = globalThis.__EMBEDDABLE__.${globalKey} || [
+  __PLACEHOLDER__
+];
+      `;
+            await fs.writeFile(`${outputDir}/${fileName}`, template.replace("__PLACEHOLDER__", configs.filter(Boolean).join(",\n")));
+        },
+    };
 };
 
-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 = 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);
+var findFiles = async (initialSrcDir, regex) => {
+    const filesList = [];
+    async function findFilesRec(srcDir) {
+        const allFiles = await readdir(srcDir);
+        for (const file of allFiles) {
+            const filePath = join(srcDir, file);
+            const status = await lstat(filePath);
+            if (status.isDirectory()) {
+                await findFilesRec(filePath);
             }
-            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);
+            const fileName = file.match(regex);
+            if (fileName) {
+                filesList.push([fileName[1], filePath]);
             }
         }
-        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;
-}
+    await findFilesRec(initialSrcDir);
+    return filesList;
+};
 
-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;
+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(),
+            index$1({
+                globalKey: "componentsMeta",
+                fileName: "embeddable-components-meta.js",
+                outputDir: ".embeddable-build",
+                componentFileRegex: EMB_FILE_REGEX,
+                typeFileRegex: EMB_TYPE_FILE_REGEX,
+                searchEntry: "embedComponent",
+            }),
+            index$1({
+                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$1.readFile(path.resolve(ctx["sdk-react"].templatesDir, `${ctx["sdk-react"].outputOptions.componentsEntryPointFilename}.template`), "utf8");
+    await fs$1.writeFile(path.resolve(ctx.client.rootDir, ctx["sdk-react"].outputOptions.componentsEntryPointFilename), content.replace(REPLACE_TOKEN, imports));
+}
+
+var build = async (ctx) => {
+    createContext(path$1.resolve(__dirname, ".."), ctx);
+    await generate(ctx);
+};
+
+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 };
+//# sourceMappingURL=index.esm.js.map

package/lib/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../src/createContext.ts","../../extract-components-config/lib/index.esm.js","../../utils/lib/index.esm.js","../../src/generate.ts","../../src/build.ts","../../src/cleanup.ts","../../src/index.ts"],"sourcesContent":[null,"import * as fs from 'node:fs/promises';\nimport { parse } from '@babel/parser';\nimport generator from '@babel/generator';\nimport traverse from '@babel/traverse';\n\n// @ts-ignore\nconst babelTraverse = traverse.default;\n// @ts-ignore\nconst babelGenerate = generator.default;\nvar index = ({ globalKey, outputDir, fileName, componentFileRegex, typeFileRegex, searchEntry = \"\", }) => {\n    const configs = [];\n    return {\n        name: \"extract-components-config\",\n        moduleParsed: async (moduleInfo) => {\n            var _a;\n            if (componentFileRegex.test(moduleInfo.id) &&\n                ((_a = moduleInfo.code) === null || _a === void 0 ? void 0 : _a.includes(searchEntry))) {\n                const ast = parse(moduleInfo.code, {\n                    sourceType: \"module\",\n                });\n                babelTraverse(ast, {\n                    ImportDeclaration: (path) => {\n                        if (!typeFileRegex.test(path.node.source.value)) {\n                            path.remove();\n                        }\n                    },\n                    ExportDefaultDeclaration: (path) => {\n                        path.remove();\n                    },\n                });\n                const tempFilePath = moduleInfo.id\n                    .replace(\".emb.\", \".emb-temp.\")\n                    .replace(/\\.ts$/, \".js\");\n                await fs.writeFile(tempFilePath, babelGenerate(ast).code);\n                const module = await import(tempFilePath);\n                const configJSON = JSON.stringify(module.meta, (_key, value) => typeof value === \"object\" && \"typeConfig\" in value\n                    ? value.toString()\n                    : value);\n                await fs.rm(tempFilePath);\n                configs.push(configJSON);\n            }\n        },\n        buildEnd: async () => {\n            const template = `\nglobalThis.__EMBEDDABLE__ = globalThis.__EMBEDDABLE__ || {};\nglobalThis.__EMBEDDABLE__.${globalKey} = globalThis.__EMBEDDABLE__.${globalKey} || [\n  __PLACEHOLDER__\n];\n      `;\n            await fs.writeFile(`${outputDir}/${fileName}`, template.replace(\"__PLACEHOLDER__\", configs.filter(Boolean).join(\",\\n\")));\n        },\n    };\n};\n\nexport { index as default };\n//# sourceMappingURL=index.esm.js.map\n","import { readdir, lstat } from 'node:fs/promises';\nimport { join } from 'node:path';\nimport { fork } from 'node:child_process';\n\nvar findFiles = async (initialSrcDir, regex) => {\n    const filesList = [];\n    async function findFilesRec(srcDir) {\n        const allFiles = await readdir(srcDir);\n        for (const file of allFiles) {\n            const filePath = join(srcDir, file);\n            const status = await lstat(filePath);\n            if (status.isDirectory()) {\n                await findFilesRec(filePath);\n            }\n            const fileName = file.match(regex);\n            if (fileName) {\n                filesList.push([fileName[1], filePath]);\n            }\n        }\n    }\n    await findFilesRec(initialSrcDir);\n    return filesList;\n};\n\nvar runProcess = async ({ processFile, ctx, initMessage, successMessage, failMessage, }) => {\n    const ora = (await import('ora')).default;\n    const spinner = ora(initMessage).start();\n    try {\n        await promisifyForkedProcess(processFile, ctx);\n        spinner.succeed(successMessage);\n    }\n    catch (error) {\n        spinner.fail(failMessage);\n        console.error(error);\n        // await core.globalCleanup(ctx);\n        process.exit(1);\n    }\n};\nfunction promisifyForkedProcess(filePath, ctx) {\n    const forkedProcess = fork(filePath, [], process.env.NODE_ENV === \"dev\" ? undefined : { silent: true });\n    forkedProcess.send({ ctx });\n    return new Promise((resolve, reject) => {\n        forkedProcess.on(\"exit\", (code) => {\n            if (code === 0)\n                resolve();\n        });\n        // @ts-ignore\n        forkedProcess.on(\"message\", ({ error }) => {\n            if (!error)\n                return;\n            reject(error);\n        });\n    });\n}\n\nexport { findFiles, runProcess };\n//# sourceMappingURL=index.esm.js.map\n",null,null,null,null],"names":["index","extractComponentsConfigPlugin","fs","path"],"mappings":"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"}

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.1",
+  "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-sdk"
   },
   "scripts": {
     "build": "rollup -c"
   },
-  "bin": {
-    "embeddable-react": "bin/embeddable-react"
-  },
   "author": "Oleg Kapustin <oleg@trevor.io>",
   "files": [
     "lib/",
@@ -29,18 +25,13 @@
     "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": "*",
+    "@embeddable.com/sdk-utils": "*",
     "@vitejs/plugin-react": "^4.0.2",
-    "vite": "^4.4.2",
-    "ora": "^6.3.1"
+    "ora": "^7.0.1",
+    "vite": "^4.5.0"
   },
   "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";