@embeddable.com/sdk-react 0.1.3 → 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,161 +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 UPDATE_PROPS_EVENT_NAME = 'embeddable-event:update-props';
-var RELOAD_DATASET_EVENT_NAME = 'embeddable-event:reload-dataset';
-var ReducerActionTypes = {
-    loading: 'loading',
-    error: 'error',
-    data: 'data',
+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");
 };
-var reducer = function (state, action) {
-    var _a, _b, _c;
-    switch (action.type) {
-        case (ReducerActionTypes.loading): {
-            return __assign(__assign({}, state), (_a = {}, _a[action.inputName] = { isLoading: true }, _a));
-        }
-        case (ReducerActionTypes.data): {
-            return __assign(__assign({}, state), (_b = {}, _b[action.inputName] = { isLoading: false, data: action.payload.data }, _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 latestVariables = {};
-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 componentId = props.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 extendedProps = React__namespace.useMemo(function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.extendedProps) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy); }, [propsProxy, config === null || config === void 0 ? void 0 : config.extendedProps]);
-        var dataLoaders = React__namespace.useMemo(function () { var _a, _b; return (_b = (_a = config === null || config === void 0 ? void 0 : config.dataLoaders) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy)) !== null && _b !== void 0 ? _b : {}; }, [propsProxy, config === null || config === void 0 ? void 0 : config.dataLoaders]);
-        var _c = React__namespace.useReducer(reducer, dataLoaders, createInitialLoadersState), loadersState = _c[0], dispatch = _c[1];
-        var handleDataLoaded = function (inputName) { return function (res) { return dispatch({ type: ReducerActionTypes.data, inputName: inputName, payload: res.data }); }; };
-        var handleError = function (inputName) { return function (error) { return dispatch({ type: ReducerActionTypes.error, inputName: inputName, payload: error }); }; };
-        var reloadDataset = function (inputName, params) {
-            dispatch({ type: ReducerActionTypes.loading, inputName: inputName });
-            params.dataLoader(params.requestParams, latestVariables)
-                .then(handleDataLoaded(inputName))
-                .catch(handleError(inputName));
-        };
-        var variableChangedEventHandler = function (_a) {
-            var detail = _a.detail;
-            latestVariables = detail.variableValues;
-            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);
-            return function () { return window.removeEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler); };
-        }, [JSON.stringify(Object.values(dataLoaders).map(function (loader) { return loader.requestParams; }))]);
-        var createEvent = function (value, eventName) { return sdkCore.setValue(value, componentId, eventName); };
-        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(InnerComponent, __assign({}, propsProxy, extendedProps, eventProps, loadersState));
-    }
-    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Component', ")");
-    return EmbeddableWrapper;
+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"' },
+    });
 }
-
-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;
+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));
 }
 
-exports.embedComponent = embedComponent;
-exports.embedControl = embedControl;
+var build = async (ctx) => {
+    createContext(path__namespace$1.resolve(__dirname, ".."), ctx);
+    await generate(ctx);
+};
+
+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,
+    };
+};
+
+module.exports = index;

package/lib/index.esm.js

@@ -1,158 +1,93 @@
-import * as React from 'react';
-import { 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 UPDATE_PROPS_EVENT_NAME = 'embeddable-event:update-props';
-var RELOAD_DATASET_EVENT_NAME = 'embeddable-event:reload-dataset';
-var ReducerActionTypes = {
-    loading: 'loading',
-    error: 'error',
-    data: 'data',
+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");
 };
-var reducer = function (state, action) {
-    var _a, _b, _c;
-    switch (action.type) {
-        case (ReducerActionTypes.loading): {
-            return __assign(__assign({}, state), (_a = {}, _a[action.inputName] = { isLoading: true }, _a));
-        }
-        case (ReducerActionTypes.data): {
-            return __assign(__assign({}, state), (_b = {}, _b[action.inputName] = { isLoading: false, data: action.payload.data }, _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 latestVariables = {};
-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 componentId = props.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 extendedProps = React.useMemo(function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.extendedProps) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy); }, [propsProxy, config === null || config === void 0 ? void 0 : config.extendedProps]);
-        var dataLoaders = React.useMemo(function () { var _a, _b; return (_b = (_a = config === null || config === void 0 ? void 0 : config.dataLoaders) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy)) !== null && _b !== void 0 ? _b : {}; }, [propsProxy, config === null || config === void 0 ? void 0 : config.dataLoaders]);
-        var _c = React.useReducer(reducer, dataLoaders, createInitialLoadersState), loadersState = _c[0], dispatch = _c[1];
-        var handleDataLoaded = function (inputName) { return function (res) { return dispatch({ type: ReducerActionTypes.data, inputName: inputName, payload: res.data }); }; };
-        var handleError = function (inputName) { return function (error) { return dispatch({ type: ReducerActionTypes.error, inputName: inputName, payload: error }); }; };
-        var reloadDataset = function (inputName, params) {
-            dispatch({ type: ReducerActionTypes.loading, inputName: inputName });
-            params.dataLoader(params.requestParams, latestVariables)
-                .then(handleDataLoaded(inputName))
-                .catch(handleError(inputName));
-        };
-        var variableChangedEventHandler = function (_a) {
-            var detail = _a.detail;
-            latestVariables = detail.variableValues;
-            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);
-            return function () { return window.removeEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler); };
-        }, [JSON.stringify(Object.values(dataLoaders).map(function (loader) { return loader.requestParams; }))]);
-        var createEvent = function (value, eventName) { return setValue(value, componentId, eventName); };
-        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(InnerComponent, __assign({}, propsProxy, extendedProps, eventProps, loadersState));
-    }
-    EmbeddableWrapper.displayName = "embedded(".concat((_a = InnerComponent.displayName) !== null && _a !== void 0 ? _a : 'Component', ")");
-    return EmbeddableWrapper;
+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"' },
+    });
 }
-
-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 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));
 }
 
-export { embedComponent, embedControl };
+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 { 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": "0.1.3",
-  "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,17 +25,15 @@
     "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}": [
+      "prettier --write"
+    ]
   }
 }

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/embedComponent.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { LoadDataParams } from "@embeddable.com/sdk-core";
-type WrapperProps = {
-    propsUpdateListener: HTMLElement;
-    componentId: string;
-};
-export type Config = {
-    extendedProps?: (props: any) => any;
-    events: Record<string, EmbeddableEventHandler>;
-    dataLoaders: (props: any) => Record<string, LoadDataParams>;
-};
-export type EmbeddableEventHandler = (value: any) => any;
-export type DataResponse = {
-    isLoading: boolean;
-    data?: any;
-    error?: string;
-};
-export declare function embedComponent(InnerComponent: React.ComponentType, config: Config): {
-    ({ 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,2 +0,0 @@
-export { embedComponent } from './embedComponent';
-export { embedControl } from './embedControl';

package/lib/index.umd.js

@@ -1,219 +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 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 UPDATE_PROPS_EVENT_NAME = 'embeddable-event:update-props';
-    var RELOAD_DATASET_EVENT_NAME = 'embeddable-event:reload-dataset';
-    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] = { isLoading: true }, _a));
-            }
-            case (ReducerActionTypes.data): {
-                return __assign(__assign({}, state), (_b = {}, _b[action.inputName] = { isLoading: false, data: action.payload.data }, _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 latestVariables = {};
-    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 componentId = props.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 extendedProps = reactExports.useMemo(function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.extendedProps) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy); }, [propsProxy, config === null || config === void 0 ? void 0 : config.extendedProps]);
-            var dataLoaders = reactExports.useMemo(function () { var _a, _b; return (_b = (_a = config === null || config === void 0 ? void 0 : config.dataLoaders) === null || _a === void 0 ? void 0 : _a.call(config, propsProxy)) !== null && _b !== void 0 ? _b : {}; }, [propsProxy, config === null || config === void 0 ? void 0 : config.dataLoaders]);
-            var _c = reactExports.useReducer(reducer, dataLoaders, createInitialLoadersState), loadersState = _c[0], dispatch = _c[1];
-            var handleDataLoaded = function (inputName) { return function (res) { return dispatch({ type: ReducerActionTypes.data, inputName: inputName, payload: res.data }); }; };
-            var handleError = function (inputName) { return function (error) { return dispatch({ type: ReducerActionTypes.error, inputName: inputName, payload: error }); }; };
-            var reloadDataset = function (inputName, params) {
-                dispatch({ type: ReducerActionTypes.loading, inputName: inputName });
-                params.dataLoader(params.requestParams, latestVariables)
-                    .then(handleDataLoaded(inputName))
-                    .catch(handleError(inputName));
-            };
-            var variableChangedEventHandler = function (_a) {
-                var detail = _a.detail;
-                latestVariables = detail.variableValues;
-                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);
-                return function () { return window.removeEventListener(RELOAD_DATASET_EVENT_NAME, variableChangedEventHandler); };
-            }, [JSON.stringify(Object.values(dataLoaders).map(function (loader) { return loader.requestParams; }))]);
-            var createEvent = function (value, eventName) { return setValue(value, componentId, eventName); };
-            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(InnerComponent, __assign({}, propsProxy, 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;
-
-}));

package/scripts/build.js

@@ -1,47 +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");
-const {cleanup} = require("./cleanup");
-
-const generateFork = fork(
-    path.resolve(__dirname, 'generate.js'),
-    [],
-    process.env.NODE_ENV === 'dev' ? undefined : { silent: true }
-);
-
-async function build() {
-    const ora = (await oraP).default;
-
-    const spinnerPrepare = ora("preparing...").start();
-
-    const ctx = createContext(path.resolve(__dirname, '..'), process.cwd());
-
-    await validationEmulation();
-    await prepare(ctx);
-    spinnerPrepare.succeed("preparation competed");
-
-    const spinnerBuild = ora("building...").start();
-
-    generateFork.send({ ctx });
-
-    generateFork.on('exit', async () => {
-        await cleanup(ctx);
-        spinnerBuild.succeed("build completed");
-
-        await core.buildTypes(ctx);
-    })
-
-}
-
-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

@@ -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, 'embeddable-entry-point.jsx'));
-}
-
-module.exports = { cleanup };

package/scripts/createContext.js

@@ -1,22 +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',
-            typesEntryPointFilename: 'embeddable-types-entry-point.js',
-        },
-    };
-}
-
-module.exports = { createContext };

package/scripts/generate.js

@@ -1,69 +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");
-
-process.on('message', async ({ ctx }) => {
-    await generate(ctx);
-
-    process.exit();
-});
-
-const EMB_FILE_REGEX = /^(.*)(?<!\.type|\.options)\.emb\.[jt]s$/;
-
-async function generate(ctx) {
-    const filesList = await core.findEmbFiles(ctx.client.srcDir, EMB_FILE_REGEX);
-
-    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)
-    );
-}

package/scripts/prepare.js

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