@embeddable.com/sdk-react 3.10.13 → 3.11.0-next.1

package/lib/index.esm.js

@@ -6,7 +6,7 @@ import * as vite from 'vite';
 import ora from 'ora';
 import viteReactPlugin from '@vitejs/plugin-react';
 import * as fs from 'node:fs/promises';
-import { readdir, lstat, rm } from 'node:fs/promises';
+import { readdir, lstat, readFile, rm } from 'node:fs/promises';
 import * as url from 'node:url';
 import { GlobalRegistrator } from '@happy-dom/global-registrator';
 import 'node:child_process';
@@ -15,6 +15,8 @@ import { z } from 'zod';
 import { parse } from '@babel/parser';
 import traverse from '@babel/traverse';
 import * as fs$1 from 'fs';
+import { existsSync } from 'node:fs';
+import dts from 'vite-plugin-dts';
 
 var createContext = (pluginRoot, coreCtx) => {
     coreCtx["sdk-react"] = {
@@ -38,6 +40,72 @@ const loadComponentMeta = async (moduleId) => {
     return module.meta;
 };
 
+/**
+ * TODO: for some reason code from @embeddable.com/extract-components-config
+ * is being cached. Thus we use this code duplication in place. Please investigate and fix.
+ */
+var extractComponentsConfigPlugin = ({ globalKey, outputDir, fileName, componentFileRegex, isDev = false, searchEntry = "", useBundleHash = true, ctx, externalComponents = [], }) => {
+    let 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))) {
+                try {
+                    const meta = await loadComponentMeta(moduleInfo.id);
+                    const configJSON = buildConfigJson(meta);
+                    configs.push(configJSON);
+                }
+                catch (error) {
+                    console.log("Error parsing component meta: ", moduleInfo.id);
+                    console.error(error);
+                }
+            }
+        },
+        buildEnd: async () => {
+            for (const [_, externalComponent] of externalComponents) {
+                const meta = await loadComponentMeta(externalComponent);
+                configs.push(buildConfigJson(meta));
+            }
+            configs.sort((a, b) => a.localeCompare(b));
+            const contentString = configs.filter(Boolean).join(",\n");
+            let newFileName = fileName;
+            const bundleHash = ctx.client.bundleHash;
+            if (!isDev && bundleHash) {
+                const fileHashExtension = `-${bundleHash}.js`;
+                newFileName = `${fileName.replace(".js", fileHashExtension)}`;
+            }
+            let template;
+            if (useBundleHash && bundleHash) {
+                template = `
+globalThis.__EMBEDDABLE__ = globalThis.__EMBEDDABLE__ || {};
+globalThis.__EMBEDDABLE__["${bundleHash}"] = globalThis.__EMBEDDABLE__["${bundleHash}"] || {};
+globalThis.__EMBEDDABLE__["${bundleHash}"].${globalKey} = globalThis.__EMBEDDABLE__["${bundleHash}"].${globalKey} || [
+  __PLACEHOLDER__
+];
+globalThis.__EMBEDDABLE_BUNDLE_HASH__ = "${bundleHash}";
+        `;
+            }
+            else {
+                template = `
+globalThis.__EMBEDDABLE__ = globalThis.__EMBEDDABLE__ || {};
+globalThis.__EMBEDDABLE__.${globalKey} = globalThis.__EMBEDDABLE__.${globalKey} || [
+  __PLACEHOLDER__
+];
+        `;
+            }
+            await fs.writeFile(`${outputDir}/${newFileName}`, template.replace("__PLACEHOLDER__", contentString));
+            configs = [];
+        },
+    };
+};
+const buildConfigJson = (meta) => {
+    return JSON.stringify(meta, (_key, value) => typeof value === "object" && value !== null && "__embeddableType" in value
+        ? value.toString()
+        : value);
+};
+
 var findFiles = async (initialSrcDir, regex) => {
     const filesList = [];
     async function findFilesRec(srcDir) {
@@ -289,7 +357,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 var errorUtil;
 (function (errorUtil) {
     errorUtil.errToObj = (message) => typeof message === "string" ? { message } : message || {};
-    errorUtil.toString = (message) => typeof message === "string" ? message : message === null || message === undefined ? undefined : message.message;
+    errorUtil.toString = (message) => typeof message === "string" ? message : message === null || message === void 0 ? void 0 : message.message;
 })(errorUtil || (errorUtil = {}));
 var ZodFirstPartyTypeKind;
 (function (ZodFirstPartyTypeKind) {
@@ -374,54 +442,44 @@ const getContentHash = (contentString) => {
         .substring(0, 5);
 };
 
-/**
- * TODO: for some reason code from @embeddable.com/extract-components-config
- * is being cached. Thus we use this code duplication in place. Please investigate and fix.
- */
-var extractComponentsConfigPlugin = ({ globalKey, outputDir, fileName, componentFileRegex, isDev = false, searchEntry = "", }) => {
-    let configs = [];
+const loadJson = async (filePath) => {
+    const data = await readFile(filePath, "utf-8");
+    return JSON.parse(data);
+};
+
+const getComponentLibraryConfig = (componentLibrary) => {
+    let libraryName = componentLibrary;
+    const include = [];
+    const exclude = [];
+    if (typeof componentLibrary === "object" && componentLibrary !== null) {
+        libraryName = componentLibrary.name;
+        if (componentLibrary.include) {
+            include.push(...componentLibrary.include);
+        }
+        if (componentLibrary.exclude) {
+            exclude.push(...componentLibrary.exclude);
+        }
+    }
+    return { libraryName, include, exclude };
+};
+const EXTERNAL_LIBRARY_META_FILE_NAME = "embeddable-components.json";
+const getComponentLibraryMeta = async (ctx, componentLibrary) => {
+    const { libraryName, include, exclude } = getComponentLibraryConfig(componentLibrary);
+    const libraryMeta = (await loadJson(getLibraryPath(ctx, libraryName, EXTERNAL_LIBRARY_META_FILE_NAME)));
+    const filterItems = (items) => {
+        let result = items;
+        if (include.length > 0) {
+            result = result.filter((item) => include.includes(item));
+        }
+        return result.filter((item) => !exclude.includes(item));
+    };
     return {
-        name: "extract-components-config",
-        moduleParsed: async (moduleInfo) => {
-            var _a;
-            if (componentFileRegex.test(moduleInfo.id) &&
-                ((_a = moduleInfo.code) === null || _a === undefined ? undefined : _a.includes(searchEntry))) {
-                try {
-                    const meta = await loadComponentMeta(moduleInfo.id);
-                    const configJSON = JSON.stringify(meta, (_key, value) => typeof value === "object" &&
-                        value !== null &&
-                        "__embeddableType" in value
-                        ? value.toString()
-                        : value);
-                    configs.push(configJSON);
-                }
-                catch (error) {
-                    console.log("Error parsing component meta: ", moduleInfo.id);
-                    console.error(error);
-                }
-            }
-        },
-        buildEnd: async () => {
-            const template = `
-globalThis.__EMBEDDABLE__ = globalThis.__EMBEDDABLE__ || {};
-globalThis.__EMBEDDABLE__.${globalKey} = globalThis.__EMBEDDABLE__.${globalKey} || [
-  __PLACEHOLDER__
-];
-      `;
-            // sort to make sure the hash is consistent
-            configs.sort((a, b) => a.localeCompare(b));
-            const contentString = configs.filter(Boolean).join(",\n");
-            let newFileName = fileName;
-            if (!isDev) {
-                const fileHash = getContentHash(contentString);
-                const fileHashExtention = `-${fileHash}.js`;
-                newFileName = `${fileName.replace(".js", fileHashExtention)}`;
-            }
-            await fs.writeFile(`${outputDir}/${newFileName}`, template.replace("__PLACEHOLDER__", contentString));
-            configs = [];
-        },
+        ...libraryMeta,
+        components: filterItems(libraryMeta.components),
+        editors: filterItems(libraryMeta.editors),
     };
 };
+const getLibraryPath = (ctx, libraryName, fileName) => path.resolve(ctx.client.rootDir, "node_modules", libraryName, "dist", fileName);
 
 const DEFAULT_LOCALE = "en-US";
 const createBuiltInType = (name, typeConfig = {}) => ({
@@ -660,7 +718,7 @@ const validateComponentProps = (metaInfo) => {
             var _a;
             const componentConfig = path.node.declaration
                 .arguments[2];
-            const propsNode = (_a = componentConfig.properties) === null || _a === undefined ? undefined : _a.find((x) => { var _a; return ((_a = x.key) === null || _a === undefined ? undefined : _a.name) === "props"; });
+            const propsNode = (_a = componentConfig.properties) === null || _a === void 0 ? void 0 : _a.find((x) => { var _a; return ((_a = x.key) === null || _a === void 0 ? void 0 : _a.name) === "props"; });
             // There is no props defined
             if (!propsNode)
                 return;
@@ -689,7 +747,7 @@ const validateComponentProps = (metaInfo) => {
 };
 const validateComponentEvents = (metaInfo) => {
     var _a, _b;
-    const definedEvents = (_b = (_a = metaInfo.meta.events) === null || _a === undefined ? undefined : _a.map((e) => e.name)) !== null && _b !== undefined ? _b : [];
+    const definedEvents = (_b = (_a = metaInfo.meta.events) === null || _a === void 0 ? void 0 : _a.map((e) => e.name)) !== null && _b !== void 0 ? _b : [];
     let implementedEvents = [];
     const errors = [];
     parseAndTraverse(metaInfo.moduleInfo.code, {
@@ -697,9 +755,9 @@ const validateComponentEvents = (metaInfo) => {
             var _a, _b, _c, _d;
             const componentConfig = path.node.declaration
                 .arguments[2];
-            const eventsNode = (_a = componentConfig.properties) === null || _a === undefined ? undefined : _a.find((p) => { var _a; return ((_a = p.key) === null || _a === undefined ? undefined : _a.name) === "events"; });
+            const eventsNode = (_a = componentConfig.properties) === null || _a === void 0 ? void 0 : _a.find((p) => { var _a; return ((_a = p.key) === null || _a === void 0 ? void 0 : _a.name) === "events"; });
             implementedEvents =
-                (_d = (_c = (_b = eventsNode === null || eventsNode === undefined ? undefined : eventsNode.value) === null || _b === undefined ? undefined : _b.properties) === null || _c === undefined ? undefined : _c.map((p) => p.key.name)) !== null && _d !== undefined ? _d : [];
+                (_d = (_c = (_b = eventsNode === null || eventsNode === void 0 ? void 0 : eventsNode.value) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.map((p) => p.key.name)) !== null && _d !== void 0 ? _d : [];
         },
     });
     const definedEventsSet = new Set(definedEvents);
@@ -746,7 +804,7 @@ const validateVariableInputs = (meta) => {
         const inputs = variableConfig.inputs;
         if (inputs) {
             inputs.forEach((input, inputIdx) => {
-                const definedInput = definedInputs === null || definedInputs === undefined ? undefined : definedInputs.find((d) => d.name === input);
+                const definedInput = definedInputs === null || definedInputs === void 0 ? void 0 : definedInputs.find((d) => d.name === input);
                 if (!definedInput) {
                     const path = formatErrorPath(["variables", idx, "inputs", inputIdx]);
                     errors.push(`${path}: input "${input}" is not defined`);
@@ -766,7 +824,7 @@ const validateVariableEvents = (meta) => {
         const events = variableConfig.events;
         if (events) {
             events.forEach((event, eventIdx) => {
-                const definedEvent = definedEvents === null || definedEvents === undefined ? undefined : definedEvents.find((d) => d.name === event.name);
+                const definedEvent = definedEvents === null || definedEvents === void 0 ? void 0 : definedEvents.find((d) => d.name === event.name);
                 if (!definedEvent) {
                     const path = formatErrorPath([
                         "variables",
@@ -779,7 +837,7 @@ const validateVariableEvents = (meta) => {
                     return;
                 }
                 const definedProperties = definedEvent.properties;
-                const definedProperty = definedProperties === null || definedProperties === undefined ? undefined : definedProperties.find((p) => p.name === event.property);
+                const definedProperty = definedProperties === null || definedProperties === void 0 ? void 0 : definedProperties.find((p) => p.name === event.property);
                 if (!definedProperty) {
                     const path = formatErrorPath([
                         "variables",
@@ -812,10 +870,10 @@ const validators = {
 };
 const getModuleType = (moduleInfo) => {
     var _a, _b;
-    if ((_a = moduleInfo.code) === null || _a === undefined ? undefined : _a.includes("defineComponent")) {
+    if ((_a = moduleInfo.code) === null || _a === void 0 ? void 0 : _a.includes("defineComponent")) {
         return COMPONENT;
     }
-    else if ((_b = moduleInfo.code) === null || _b === undefined ? undefined : _b.includes("defineEditor")) {
+    else if ((_b = moduleInfo.code) === null || _b === void 0 ? void 0 : _b.includes("defineEditor")) {
         return EDITOR;
     }
     else {
@@ -879,7 +937,8 @@ const styledComponentsEntrypointModifier = {
         const packageJsonFilePath = path.resolve(ctx.client.rootDir, "package.json");
         try {
             const packageJson = JSON.parse(await fs.readFile(packageJsonFilePath, "utf-8"));
-            return !!(((_a = packageJson.dependencies) === null || _a === void 0 ? void 0 : _a["styled-components"]) || ((_b = packageJson.devDependencies) === null || _b === void 0 ? void 0 : _b["styled-components"]));
+            return !!(((_a = packageJson.dependencies) === null || _a === void 0 ? void 0 : _a["styled-components"]) ||
+                ((_b = packageJson.devDependencies) === null || _b === void 0 ? void 0 : _b["styled-components"]));
         }
         catch (error) {
             console.error("styledComponentsEntrypointModifier: Error reading package.json", error);
@@ -936,7 +995,7 @@ const regexDefineTypeFunction = /defineType\(/;
 const regexDefineOptionFunction = /defineOption\(/;
 const regexCubeFunction = /cube\(/;
 const regexCubes = /cubes:/;
-const usageValidator = async (directory) => {
+const usageValidator = async (directory, validateCube = true) => {
     let isValid = true;
     const progress = ora("React: function usage validating...").start();
     // defineComponent function
@@ -960,19 +1019,21 @@ const usageValidator = async (directory) => {
         progress.fail("React: defineOption() usage is only allowed inside files with the extension .type.emb.(js|ts) files.\nFix the following files:\n" +
             filesWithWrongDefineOptionFunctionUsage.join("\n"));
     }
-    // cube function
-    const filesWithWrongCubeFunctionUsage = findFilesWithWrongUsage(directory, regexCubeFunction, [".cube.js", ".cube.ts"]);
-    if (filesWithWrongCubeFunctionUsage.length) {
-        isValid = false;
-        progress.fail("React: cube() usage is only allowed inside files with the extension .cube.(ts|js) files.\nFix the following files:\n" +
-            filesWithWrongCubeFunctionUsage.join("\n"));
-    }
-    // cube in yml or yaml files
-    const filesWithWrongCubeUsage = findFilesWithWrongUsage(directory, regexCubes, [".cube.yml", ".cube.yaml"]);
-    if (filesWithWrongCubeUsage.length) {
-        isValid = false;
-        progress.fail("React: cubes: usage is only allowed inside files with the extension .cube.(yml|yaml) files.\nFix the following files:\n" +
-            filesWithWrongCubeUsage.join("\n"));
+    if (validateCube) {
+        // cube function
+        const filesWithWrongCubeFunctionUsage = findFilesWithWrongUsage(directory, regexCubeFunction, [".cube.js", ".cube.ts"]);
+        if (filesWithWrongCubeFunctionUsage.length) {
+            isValid = false;
+            progress.fail("React: cube() usage is only allowed inside files with the extension .cube.(ts|js) files.\nFix the following files:\n" +
+                filesWithWrongCubeFunctionUsage.join("\n"));
+        }
+        // cube in yml or yaml files
+        const filesWithWrongCubeUsage = findFilesWithWrongUsage(directory, regexCubes, [".cube.yml", ".cube.yaml"]);
+        if (filesWithWrongCubeUsage.length) {
+            isValid = false;
+            progress.fail("React: cubes: usage is only allowed inside files with the extension .cube.(yml|yaml) files.\nFix the following files:\n" +
+                filesWithWrongCubeUsage.join("\n"));
+        }
     }
     const typeNames = findTypeNames(directory);
     // check for definedTypes using a native typeNames
@@ -1005,14 +1066,65 @@ const usageValidator = async (directory) => {
         : process.exit(1);
 };
 
+const validateComponentDuplicates = (filesList, additionalComponents, ora) => {
+    const progress = ora("React: validating component names...").start();
+    const errors = [];
+    // Ensure filesList components are unique
+    const filesSet = new Set();
+    for (const [componentName] of filesList) {
+        if (filesSet.has(componentName)) {
+            errors.push(`Error: Component '${componentName}' must be unique.`);
+        }
+        else {
+            filesSet.add(componentName);
+        }
+    }
+    // Ensure no filesList component exists in additionalComponents values
+    for (const [componentName] of filesList) {
+        for (const [library, components] of Object.entries(additionalComponents)) {
+            if (components.includes(componentName)) {
+                errors.push(`Error: Component '${componentName}' must be unique but is already present in library '${library}'.`);
+            }
+        }
+    }
+    // Ensure additionalComponents values are unique across different keys
+    const componentToLibraries = {};
+    for (const [library, components] of Object.entries(additionalComponents)) {
+        for (const component of components) {
+            if (!componentToLibraries[component]) {
+                componentToLibraries[component] = [];
+            }
+            componentToLibraries[component].push(library);
+        }
+    }
+    for (const [component, libraries] of Object.entries(componentToLibraries)) {
+        if (libraries.length > 1) {
+            errors.push(`Error: Component '${component}' is declared in multiple libraries: ${libraries.join(", ")}.`);
+        }
+    }
+    if (errors.length > 0) {
+        progress.fail("Validation errors found:\n");
+        console.error(errors.join("\n"));
+    }
+    else {
+        progress.succeed("Validation completed successfully. No issues found.");
+    }
+    return errors;
+};
+
 const EMB_FILE_REGEX = /^(.*)(?<!\.type|\.options)\.emb\.[jt]s$/;
 var generate = async (ctx) => {
     var _a;
     await usageValidator(ctx.client.srcDir);
     const filesList = await findFiles(ctx.client.srcDir, EMB_FILE_REGEX);
-    await prepareEntrypoint(ctx, filesList);
+    const additionalComponents = await getAdditionalComponents$1(ctx);
+    const errors = validateComponentDuplicates(filesList, additionalComponents, ora);
+    if (errors.length) {
+        process.exit(1);
+    }
+    await prepareEntrypoint(ctx, filesList, additionalComponents);
     let result;
-    if ((_a = ctx.dev) === null || _a === undefined ? undefined : _a.watch) {
+    if ((_a = ctx.dev) === null || _a === void 0 ? void 0 : _a.watch) {
         result = await runViteWatch(ctx);
     }
     else {
@@ -1022,34 +1134,15 @@ var generate = async (ctx) => {
     }
     return result;
 };
-async function runViteBuild(ctx, watch = null) {
+function getViteConfig(ctx, watch, plugins) {
     var _a;
-    return await vite.build({
-        logLevel: !!watch ? "info" : "error",
+    return {
+        logLevel: (!!watch ? "info" : "error"),
         resolve: {
             extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
-            ...(_a = ctx.client.viteConfig) === null || _a === undefined ? undefined : _a.resolve,
+            ...(_a = ctx.client.viteConfig) === null || _a === void 0 ? void 0 : _a.resolve,
         },
-        plugins: [
-            viteReactPlugin(),
-            extractComponentsConfigPlugin({
-                isDev: !!watch,
-                globalKey: "componentsMeta",
-                fileName: "embeddable-components-meta.js",
-                outputDir: ctx.client.buildDir,
-                componentFileRegex: EMB_FILE_REGEX,
-                searchEntry: "defineComponent",
-            }),
-            extractComponentsConfigPlugin({
-                isDev: !!watch,
-                globalKey: "editorsMeta",
-                fileName: "embeddable-editors-meta.js",
-                outputDir: ctx.client.buildDir,
-                componentFileRegex: EMB_FILE_REGEX,
-                searchEntry: "defineEditor",
-            }),
-            validateComponentMetaPlugin(EMB_FILE_REGEX),
-        ],
+        plugins,
         build: {
             sourcemap: true,
             watch: watch
@@ -1065,7 +1158,6 @@ async function runViteBuild(ctx, watch = null) {
                     ...ctx.client.rollupOptions,
                     output: {
                         sourcemapPathTransform: (relativeSourcePath, sourcemapPath) => {
-                            // will replace relative paths with absolute paths
                             return path.resolve(path.dirname(sourcemapPath), relativeSourcePath);
                         },
                     },
@@ -1081,14 +1173,60 @@ async function runViteBuild(ctx, watch = null) {
         define: {
             "process.env.NODE_ENV": `${watch ? '"development"' : '"production"'}`,
         },
-    });
+    };
+}
+async function calculateBundleHash(ctx) {
+    const componentBuildDir = path.resolve(ctx.client.buildDir, ctx["sdk-react"].outputOptions.buildName);
+    const files = await findFiles(componentBuildDir, /\.(js|ts|tsx|jsx|css)$/);
+    let contentString = "";
+    for (const [, filePath] of files) {
+        const content = await fs$2.readFile(filePath, "utf8");
+        contentString += content;
+    }
+    ctx.client.bundleHash = getContentHash(contentString);
+}
+async function runViteBuild(ctx, watch = null) {
+    // Step 1: Initial build without extractComponentsConfigPlugin
+    await vite.build(getViteConfig(ctx, watch, [
+        viteReactPlugin(),
+        validateComponentMetaPlugin(EMB_FILE_REGEX),
+    ]));
+    // Step 2: Calculate bundleHash in production mode
+    if (!watch) {
+        await calculateBundleHash(ctx);
+    }
+    const { externalComponents, externalEditors } = await findExternalComponents(ctx);
+    // Step 3: Final build with extractComponentsConfigPlugin
+    return await vite.build(getViteConfig(ctx, watch, [
+        viteReactPlugin(),
+        extractComponentsConfigPlugin({
+            isDev: !!watch,
+            globalKey: "componentsMeta",
+            fileName: "embeddable-components-meta.js",
+            outputDir: ctx.client.buildDir,
+            componentFileRegex: EMB_FILE_REGEX,
+            searchEntry: "defineComponent",
+            useBundleHash: !watch,
+            ctx,
+            externalComponents: externalComponents,
+        }),
+        extractComponentsConfigPlugin({
+            isDev: !!watch,
+            globalKey: "editorsMeta",
+            fileName: "embeddable-editors-meta.js",
+            outputDir: ctx.client.buildDir,
+            componentFileRegex: EMB_FILE_REGEX,
+            searchEntry: "defineEditor",
+            useBundleHash: !watch,
+            ctx,
+            externalComponents: externalEditors,
+        }),
+        validateComponentMetaPlugin(EMB_FILE_REGEX),
+    ]));
 }
 async function runViteWatch(ctx) {
     const watch = {
-        chokidar: {
-            ignored: ["**/node_modules/**", /.*\.emb-temp.js$/, /.*\.cube.js$/],
-        },
-    };
+        };
     return (await runViteBuild(ctx, watch));
 }
 const IMPORT_REPLACE_TOKEN = "{{LAZY_IMPORTS}}";
@@ -1105,10 +1243,14 @@ function getRelativeFileNameForImport(ctx, fileName) {
         // but for imports it must be '.src/something/something'
         .replaceAll("\\", "/")}`;
 }
-async function prepareEntrypoint(ctx, filesList) {
-    const imports = filesList
+async function prepareEntrypoint(ctx, filesList, additionalComponents) {
+    const additionalComponentsImports = getAdditionalEntryPointImports(additionalComponents);
+    const repositoryImports = filesList
         .map(([fileName, filePath]) => `\t${fileName}: React.lazy(() => import('${getRelativeFileNameForImport(ctx, filePath)}'))`)
         .join(",\n");
+    const imports = [additionalComponentsImports, repositoryImports]
+        .filter(Boolean)
+        .join(",\n");
     let errorBoundaryImport = "";
     let errorFallbackComponent = "null";
     if (ctx.client.errorFallbackComponent) {
@@ -1134,12 +1276,262 @@ async function prepareEntrypoint(ctx, filesList) {
         .replace(ADDITIONAL_CONTENT_BEGIN_TOKEN, additionalContentBegin.join("\n"))
         .replace(ADDITIONAL_CONTENT_END_TOKEN, additionalContentEnd.join("\n")));
 }
+const findExternalComponents = async (ctx) => {
+    var _a;
+    const componentLibraries = ctx.client.componentLibraries || [];
+    const externalComponents = [];
+    const externalEditors = [];
+    for (const componentLibrary of componentLibraries) {
+        const { libraryName} = getComponentLibraryConfig(componentLibrary);
+        try {
+            const libMeta = await getComponentLibraryMeta(ctx, componentLibrary);
+            if (libMeta.plugin !== "react") {
+                continue;
+            }
+            const components = libMeta.components.map((component) => {
+                return [
+                    component,
+                    path.resolve(ctx.client.rootDir, "node_modules", libraryName, "dist", `${component}.js`),
+                ];
+            });
+            const editors = ((_a = libMeta.editors) === null || _a === void 0 ? void 0 : _a.map((component) => {
+                return [
+                    component,
+                    path.resolve(ctx.client.rootDir, "node_modules", libraryName, "dist", `${component}.js`),
+                ];
+            })) || [];
+            externalComponents.push(...components);
+            externalEditors.push(...editors);
+        }
+        catch (e) {
+            console.error(`Can't load component library: ${libraryName}`, e);
+            throw e;
+        }
+    }
+    return { externalComponents, externalEditors };
+};
+const getAdditionalComponents$1 = async (ctx) => {
+    const componentLibraries = ctx.client.componentLibraries || [];
+    let additionalComponents = {};
+    for (const componentLibrary of componentLibraries) {
+        const { libraryName} = getComponentLibraryConfig(componentLibrary);
+        try {
+            const libMeta = await getComponentLibraryMeta(ctx, componentLibrary);
+            if (libMeta.plugin !== "react") {
+                continue;
+            }
+            additionalComponents[libraryName] = [
+                ...libMeta.components,
+                ...libMeta.editors,
+            ];
+        }
+        catch (e) {
+            console.error(`Can't load component library: ${libraryName}`, e);
+            throw e;
+        }
+    }
+    return additionalComponents;
+};
+const getAdditionalEntryPointImports = (additionalComponents) => {
+    return Object.entries(additionalComponents)
+        .map(([library, components]) => {
+        return components
+            .map((component) => {
+            return `\t${component}: React.lazy(() => import('${library}/dist/${component}'))`;
+        })
+            .join(",\n");
+    })
+        .join(",\n");
+};
+
+const oraP = import('ora');
+async function buildPackage$1(ctx) {
+    var _a;
+    const ora = (await oraP).default;
+    const progress = ora("React: building library...").start();
+    await prepareComponentLibraries(ctx);
+    await usageValidator(ctx.client.srcDir, false);
+    const filesList = await findFiles(ctx.client.srcDir, EMB_FILE_REGEX);
+    const additionalComponents = await getAdditionalComponents(ctx);
+    const errors = validateComponentDuplicates(filesList, additionalComponents.allAdditionalComponents, ora);
+    if (errors.length) {
+        process.exit(1);
+    }
+    const inputEntries = Object.fromEntries(filesList);
+    const indexFiles = ["index.ts", "index.js"]
+        .map((file) => path.resolve(ctx.client.srcDir, file))
+        .filter(fs$1.existsSync);
+    const tsConfigClientPath = path.resolve(ctx.client.rootDir, "tsconfig.json");
+    const tsconfigPath = existsSync(tsConfigClientPath)
+        ? tsConfigClientPath
+        : undefined;
+    const componentFiles = {};
+    const editorFiles = {};
+    if (indexFiles.length > 0) {
+        inputEntries["index"] = indexFiles[0];
+    }
+    if (Object.keys(inputEntries).length === 0) {
+        progress.fail("No components found");
+        return;
+    }
+    Object.entries(additionalComponents.allAdditionalComponents).forEach(([libraryName, components]) => {
+        components.forEach((component) => {
+            inputEntries[component] = path.resolve(ctx.client.rootDir, "node_modules", libraryName, "dist", `${component}.js`);
+        });
+    });
+    await vite.build({
+        logLevel: "error",
+        resolve: {
+            extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
+            ...(_a = ctx.client.viteConfig) === null || _a === void 0 ? void 0 : _a.resolve,
+        },
+        plugins: [
+            viteReactPlugin(),
+            validateComponentMetaPlugin(EMB_FILE_REGEX),
+            dts({
+                tsconfigPath,
+                compilerOptions: {
+                    rootDir: ctx.client.srcDir,
+                },
+                exclude: ["**/node_modules/**", "**/*.emb.{ts,js}"],
+            }),
+            {
+                name: "generate-embeddable-components-json",
+                generateBundle(_, __) {
+                    const libMeta = {
+                        components: Object.keys(componentFiles).concat(additionalComponents.components),
+                        editors: Object.keys(editorFiles).concat(additionalComponents.editors),
+                        plugin: "react",
+                    };
+                    const jsonContent = JSON.stringify(libMeta, null, 2);
+                    this.emitFile({
+                        type: "asset",
+                        fileName: EXTERNAL_LIBRARY_META_FILE_NAME,
+                        source: jsonContent,
+                    });
+                },
+            },
+            groupComponents(componentFiles, editorFiles),
+        ],
+        build: {
+            sourcemap: true,
+            minify: true,
+            emptyOutDir: false,
+            rollupOptions: {
+                ...ctx.client.rollupOptions,
+                external: ["react", "react-dom", "@embeddable.com/react"],
+            },
+            lib: {
+                entry: inputEntries,
+                formats: ["es"],
+            },
+        },
+        define: {
+            "process.env.NODE_ENV": '"production"',
+        },
+    });
+    progress.succeed("Building React library completed");
+}
+const groupComponents = (components, editors) => ({
+    name: "group-components",
+    moduleParsed(moduleInfo) {
+        if (!moduleInfo ||
+            !moduleInfo.ast ||
+            !moduleInfo.id ||
+            !moduleInfo.id.match(EMB_FILE_REGEX))
+            return;
+        try {
+            moduleInfo.ast.body.forEach((node) => {
+                if (node.type === "ExportDefaultDeclaration") {
+                    const calleeName = node.declaration.type === "CallExpression" &&
+                        node.declaration.callee.type === "Identifier"
+                        ? node.declaration.callee.name
+                        : null;
+                    const isTs = moduleInfo.id.endsWith(".ts");
+                    const basename = path.basename(moduleInfo.id, `.emb.${isTs ? "ts" : "js"}`);
+                    if (calleeName === "defineComponent") {
+                        components[basename] = moduleInfo.id;
+                    }
+                    else if (calleeName === "defineEditor") {
+                        editors[basename] = moduleInfo.id;
+                    }
+                }
+            });
+        }
+        catch (error) {
+            console.warn(`Failed to process AST for module: ${moduleInfo.id}`, error);
+        }
+    },
+});
+const prepareComponentLibraries = async (ctx) => {
+    const componentLibraries = ctx.client.componentLibraries;
+    for (const componentLibrary of componentLibraries) {
+        const { libraryName } = getComponentLibraryConfig(componentLibrary);
+        const libPath = path.resolve(ctx.client.rootDir, "node_modules", libraryName, "dist");
+        const libMeta = await getComponentLibraryMeta(ctx, componentLibrary);
+        if (libMeta.plugin !== "react") {
+            continue;
+        }
+        copyFilesWithExtensions(libPath, ctx.client.buildDir, [".css"], (file) => !file.startsWith("embeddable-types"), (file) => file.endsWith(".css")
+            ? `${libraryName.replace(/[@/]/g, "_")}-${file}`
+            : file);
+    }
+};
+function copyFilesWithExtensions(srcDir, destDir, exts, filter, nameMapper) {
+    if (!fs$1.existsSync(destDir)) {
+        fs$1.mkdirSync(destDir, { recursive: true });
+    }
+    const entries = fs$1.readdirSync(srcDir, { withFileTypes: true });
+    for (const entry of entries) {
+        const srcPath = path.join(srcDir, entry.name);
+        const destPath = path.join(destDir, nameMapper(entry.name));
+        if (entry.isDirectory()) {
+            copyFilesWithExtensions(srcPath, destPath, exts, filter, nameMapper);
+        }
+        else if (entry.isFile() &&
+            exts.includes(path.extname(entry.name)) &&
+            (!filter || filter(entry.name))) {
+            fs$1.copyFileSync(srcPath, destPath);
+        }
+    }
+}
+const getAdditionalComponents = async (ctx) => {
+    const componentLibraries = ctx.client.componentLibraries || [];
+    const allAdditionalComponents = {};
+    const components = [];
+    const editors = [];
+    for (const componentLibrary of componentLibraries) {
+        const { libraryName } = getComponentLibraryConfig(componentLibrary);
+        try {
+            const libMeta = await getComponentLibraryMeta(ctx, componentLibrary);
+            if (libMeta.plugin !== "react") {
+                continue;
+            }
+            allAdditionalComponents[libraryName] = [
+                ...libMeta.components,
+                ...libMeta.editors,
+            ];
+            components.push(...libMeta.components);
+            editors.push(...libMeta.editors);
+        }
+        catch (e) {
+            console.error(`Can't load component library: ${libraryName}`, e);
+            throw e;
+        }
+    }
+    return { components, editors, allAdditionalComponents };
+};
 
 var build = async (ctx) => {
     const __dirname = import.meta.dirname;
     createContext(path$1.resolve(__dirname, ".."), ctx);
     return generate(ctx);
 };
+const buildPackage = async (ctx) => {
+    const __dirname = import.meta.dirname;
+    createContext(path$1.resolve(__dirname, ".."), ctx);
+    return buildPackage$1(ctx);
+};
 
 var cleanup = async (ctx) => {
     await rm(resolve(ctx.client.buildDir, ctx["sdk-react"].outputOptions.componentsEntryPointFilename));
@@ -1150,6 +1542,7 @@ var index = () => {
         pluginName: "sdk-react",
         validate: async () => { },
         build,
+        buildPackage,
         cleanup,
     };
 };