@embeddable.com/sdk-core 4.2.0-next.0 → 4.3.0-next.0

package/lib/dev.d.ts

@@ -1,10 +1,15 @@
+import { CompilerBuildResults } from "@stencil/core/compiler";
 import { RollupWatcher } from "rollup";
 import { ChildProcess } from "node:child_process";
 import { ResolvedEmbeddableConfig } from "./defineConfig";
+import { BuildResultsComponentGraph } from "@stencil/core/internal";
 export declare const buildWebComponent: (config: any) => Promise<void>;
 declare const _default: () => Promise<void>;
 export default _default;
 export declare const configureWatcher: (watcher: RollupWatcher, ctx: ResolvedEmbeddableConfig) => Promise<void>;
-export declare const globalHookWatcher: (watcher: RollupWatcher) => Promise<void>;
+export declare const globalHookWatcher: (watcher: RollupWatcher, key: string) => Promise<void>;
 export declare const openDevWorkspacePage: (previewBaseUrl: string, workspaceId: string) => Promise<ChildProcess>;
 export declare const sendBuildChanges: (ctx: ResolvedEmbeddableConfig) => Promise<void>;
+export declare function onWebComponentBuildFinish(e: CompilerBuildResults, config: ResolvedEmbeddableConfig): Promise<void>;
+export declare function waitForStableHmrFiles(componentGraph: BuildResultsComponentGraph | undefined, config: ResolvedEmbeddableConfig): Promise<void>;
+export declare function resetStateForTesting(): void;

package/lib/generate.d.ts

@@ -1,3 +1,32 @@
+import { CompilerWatcher } from "@stencil/core/compiler";
 import { PluginName, ResolvedEmbeddableConfig } from "./defineConfig";
-declare const _default: (ctx: ResolvedEmbeddableConfig, pluginName: PluginName) => Promise<void>;
+/**
+ * Stencil watcher doesnt react on file metadata changes,
+ * so we have to change the file content to trigger a rebuild by appending a space character.
+ * This constant defines how many times the space character can be appended before the file is truncated back to its original size.
+ */
+export declare const TRIGGER_BUILD_ITERATION_LIMIT = 5;
+export declare function resetForTesting(): void;
+/**
+ * Triggers a rebuild of a Stencil web component by modifying the `component.tsx` file.
+ *
+ * This function works by appending a space character to the file, which causes Stencil's watcher
+ * to detect a change and rebuild the component. After every TRIGGER_BUILD_ITERATION_LIMIT rebuilds, the file is truncated back
+ * to its original size to prevent indefinite growth and reset the internal rebuild counter.
+ *
+ *  Append and truncate are used instead of rewriting the file to ensure minimal I/O overhead and preserve file metadata.
+ */
+export declare function triggerWebComponentRebuild(ctx: ResolvedEmbeddableConfig): Promise<void>;
+declare const _default: (ctx: ResolvedEmbeddableConfig, pluginName: PluginName) => Promise<void | CompilerWatcher>;
 export default _default;
+/**
+ * Generates only the d.ts type declaration files using Stencil, without performing a full build.
+ * Used in dev mode to pre-generate types before the watcher starts, avoiding a double-build
+ * triggered by the watcher reacting to freshly generated d.ts files.
+ *
+ * Key differences from the default generate function:
+ * - Writes an empty style.css stub (no real CSS injection needed for type generation)
+ * - Injects a no-op render stub instead of the real render import
+ * - Always creates a fresh sys (never reuses ctx.dev?.sys) to avoid watcher interference
+ */
+export declare function generateDTS(ctx: ResolvedEmbeddableConfig): Promise<void>;

package/lib/index.esm.js

@@ -10,7 +10,7 @@ import * as path from 'path';
 import path__default$1, { basename } from 'path';
 import fg from 'fast-glob';
 import * as fsSync from 'node:fs';
-import { existsSync } from 'node:fs';
+import { existsSync, createReadStream } from 'node:fs';
 import { createNodeLogger, createNodeSys } from '@stencil/core/sys/node';
 import { loadConfig, createCompiler } from '@stencil/core/compiler';
 import * as sorcery from 'sorcery';
@@ -23,7 +23,7 @@ import require$$1 from 'os';
 import require$$3 from 'http';
 import require$$4 from 'https';
 import require$$0$1 from 'url';
-import require$$2$1, { createReadStream } from 'fs';
+import require$$2$1, { createReadStream as createReadStream$1 } from 'fs';
 import axios from 'axios';
 import yazl from 'yazl';
 import { select } from '@inquirer/prompts';
@@ -611,18 +611,77 @@ const STYLE_IMPORTS_TOKEN = "{{STYLES_IMPORT}}";
 const RENDER_IMPORT_TOKEN = "{{RENDER_IMPORT}}";
 // stencil doesn't support dynamic component tag name, so we need to replace it manually
 const COMPONENT_TAG_TOKEN = "replace-this-with-component-name";
+let triggeredBuildCount = 0;
+/**
+ * Stencil watcher doesnt react on file metadata changes,
+ * so we have to change the file content to trigger a rebuild by appending a space character.
+ * This constant defines how many times the space character can be appended before the file is truncated back to its original size.
+ */
+const TRIGGER_BUILD_ITERATION_LIMIT = 5;
+let originalFileStats = null;
+/**
+ * Triggers a rebuild of a Stencil web component by modifying the `component.tsx` file.
+ *
+ * This function works by appending a space character to the file, which causes Stencil's watcher
+ * to detect a change and rebuild the component. After every TRIGGER_BUILD_ITERATION_LIMIT rebuilds, the file is truncated back
+ * to its original size to prevent indefinite growth and reset the internal rebuild counter.
+ *
+ *  Append and truncate are used instead of rewriting the file to ensure minimal I/O overhead and preserve file metadata.
+ */
+async function triggerWebComponentRebuild(ctx) {
+    const filePath = path$1.resolve(ctx.client.componentDir, "component.tsx");
+    if (triggeredBuildCount === 0) {
+        // store original file stats on the first build
+        originalFileStats = await fs.stat(filePath);
+    }
+    if (triggeredBuildCount === TRIGGER_BUILD_ITERATION_LIMIT && originalFileStats) {
+        await fs.truncate(filePath, originalFileStats.size);
+        triggeredBuildCount = 0; // reset the counter after resetting the file
+    }
+    else {
+        await fs.appendFile(filePath, " ");
+        triggeredBuildCount++;
+    }
+}
 var generate = async (ctx, pluginName) => {
     await injectCSS(ctx, pluginName);
     await injectBundleRender(ctx, pluginName);
-    await runStencil(ctx);
-    await generateSourceMap(ctx, pluginName);
+    const watcher = await runStencil(ctx);
+    if (watcher) {
+        watcher.on("buildFinish", () => {
+            // stencil always changes the working directory to the root of the web component.
+            // We need to change it back to the client root directory
+            process.chdir(ctx.client.rootDir);
+            generateSourceMap(ctx, pluginName);
+        });
+    }
+    else {
+        await generateSourceMap(ctx, pluginName);
+    }
+    return watcher;
 };
+/**
+ * Generates only the d.ts type declaration files using Stencil, without performing a full build.
+ * Used in dev mode to pre-generate types before the watcher starts, avoiding a double-build
+ * triggered by the watcher reacting to freshly generated d.ts files.
+ *
+ * Key differences from the default generate function:
+ * - Writes an empty style.css stub (no real CSS injection needed for type generation)
+ * - Injects a no-op render stub instead of the real render import
+ * - Always creates a fresh sys (never reuses ctx.dev?.sys) to avoid watcher interference
+ */
+async function generateDTS(ctx) {
+    await injectEmptyCSS(ctx);
+    await injectBundleRenderStub(ctx);
+    await runStencil(ctx, { dtsOnly: true });
+}
 async function injectCSS(ctx, pluginName) {
     const CUSTOMER_BUILD = path$1.resolve(ctx.client.buildDir, ctx[pluginName].outputOptions.buildName);
     const allFiles = await fs.readdir(CUSTOMER_BUILD);
+    const importFilePath = path$1.relative(ctx.client.componentDir, path$1.resolve(ctx.client.buildDir, ctx[pluginName].outputOptions.buildName));
     const imports = allFiles
         .filter((fileName) => fileName.endsWith(".css"))
-        .map((fileName) => `@import '../../${ctx[pluginName].outputOptions.buildName}/${fileName}';`);
+        .map((fileName) => `@import '${importFilePath}/${fileName}';`);
     const componentLibraries = ctx.client.componentLibraries;
     for (const componentLibrary of componentLibraries) {
         const { libraryName } = getComponentLibraryConfig(componentLibrary);
@@ -637,13 +696,23 @@ async function injectCSS(ctx, pluginName) {
 }
 async function injectBundleRender(ctx, pluginName) {
     var _a;
-    const importStr = `import render from '../../${ctx[pluginName].outputOptions.buildName}/${ctx[pluginName].outputOptions.fileName}';`;
+    const importFilePath = path$1.relative(ctx.client.componentDir, path$1.resolve(ctx.client.buildDir, ctx[pluginName].outputOptions.buildName));
+    const importStr = `import render from '${importFilePath}/${ctx[pluginName].outputOptions.fileName}';`;
     let content = await fs.readFile(path$1.resolve(ctx.core.templatesDir, "component.tsx.template"), "utf8");
     if (!!((_a = ctx.dev) === null || _a === void 0 ? void 0 : _a.watch)) {
         content = content.replace(COMPONENT_TAG_TOKEN, "embeddable-component");
     }
     await fs.writeFile(path$1.resolve(ctx.client.componentDir, "component.tsx"), content.replace(RENDER_IMPORT_TOKEN, importStr));
 }
+async function injectEmptyCSS(ctx) {
+    await fs.writeFile(path$1.resolve(ctx.client.componentDir, "style.css"), "");
+}
+async function injectBundleRenderStub(ctx) {
+    const stubStr = `const render = () => {};`;
+    let content = await fs.readFile(path$1.resolve(ctx.core.templatesDir, "component.tsx.template"), "utf8");
+    content = content.replace(COMPONENT_TAG_TOKEN, "embeddable-component");
+    await fs.writeFile(path$1.resolve(ctx.client.componentDir, "component.tsx"), content.replace(RENDER_IMPORT_TOKEN, stubStr));
+}
 async function addComponentTagName(filePath, bundleHash) {
     // find entry file with a name *.entry.js
     const entryFiles = await findFiles(path$1.dirname(filePath), /.*\.entry\.js/);
@@ -662,11 +731,18 @@ async function addComponentTagName(filePath, bundleHash) {
         fs.writeFile(entryFileName[1], newEntryFileContent),
     ]);
 }
-async function runStencil(ctx) {
+async function runStencil(ctx, options) {
     var _a, _b, _c;
-    const logger = ((_a = ctx.dev) === null || _a === void 0 ? void 0 : _a.logger) || createNodeLogger();
-    const sys = ((_b = ctx.dev) === null || _b === void 0 ? void 0 : _b.sys) || createNodeSys({ process });
-    const devMode = !!((_c = ctx.dev) === null || _c === void 0 ? void 0 : _c.watch);
+    const logger = ((options === null || options === void 0 ? void 0 : options.dtsOnly) ? createNodeLogger() : ((_a = ctx.dev) === null || _a === void 0 ? void 0 : _a.logger) || createNodeLogger());
+    const sys = (options === null || options === void 0 ? void 0 : options.dtsOnly) ? createNodeSys({ process }) : (((_b = ctx.dev) === null || _b === void 0 ? void 0 : _b.sys) || createNodeSys({ process }));
+    const devMode = !!((_c = ctx.dev) === null || _c === void 0 ? void 0 : _c.watch) && !(options === null || options === void 0 ? void 0 : options.dtsOnly);
+    if (options === null || options === void 0 ? void 0 : options.dtsOnly) {
+        logger.setLevel("error");
+        logger.createTimeSpan = () => ({
+            duration: () => 0,
+            finish: () => 0,
+        });
+    }
     const isWindows = process.platform === "win32";
     const validated = await loadConfig({
         initTsConfig: true,
@@ -675,14 +751,16 @@ async function runStencil(ctx) {
         config: {
             devMode,
             maxConcurrentWorkers: isWindows ? 0 : 8, // workers break on windows
+            // we will trigger a rebuild by updating the component.tsx file (see triggerBuild function)
+            watchIgnoredRegex: [/\.css$/, /\.d\.ts$/, /\.js$/],
             rootDir: ctx.client.webComponentRoot,
             configPath: path$1.resolve(ctx.client.webComponentRoot, "stencil.config.ts"),
             tsconfig: path$1.resolve(ctx.client.webComponentRoot, "tsconfig.json"),
             namespace: "embeddable-wrapper",
             srcDir: ctx.client.componentDir,
-            sourceMap: true, // always generate source maps in both dev and prod
-            minifyJs: !devMode,
-            minifyCss: !devMode,
+            sourceMap: !(options === null || options === void 0 ? void 0 : options.dtsOnly), // always generate source maps in both dev and prod
+            minifyJs: !devMode && !(options === null || options === void 0 ? void 0 : options.dtsOnly),
+            minifyCss: !devMode && !(options === null || options === void 0 ? void 0 : options.dtsOnly),
             outputTargets: [
                 {
                     type: "dist",
@@ -692,17 +770,21 @@ async function runStencil(ctx) {
         },
     });
     const compiler = await createCompiler(validated.config);
+    if (devMode) {
+        sys.onProcessInterrupt(() => {
+            compiler.destroy();
+        });
+        return await compiler.createWatcher();
+    }
     const buildResults = await compiler.build();
-    if (!devMode) {
-        if (buildResults.hasError) {
-            console.error("Stencil build error:", buildResults.diagnostics);
-            throw new Error("Stencil build error");
-        }
-        else {
-            await handleStencilBuildOutput(ctx);
-        }
-        await compiler.destroy();
+    if (buildResults.hasError) {
+        console.error("Stencil build error:", buildResults.diagnostics);
+        throw new Error("Stencil build error");
     }
+    else {
+        await handleStencilBuildOutput(ctx);
+    }
+    await compiler.destroy();
     process.chdir(ctx.client.rootDir);
 }
 async function handleStencilBuildOutput(ctx) {
@@ -21587,6 +21669,95 @@ function checkAndLogWarnings(response) {
     }
 }
 
+/**
+ * Wraps a ServerResponse object to prevent setting the Content-Length header.
+ */
+function preventContentLength(res) {
+    const originalSetHeader = res.setHeader.bind(res);
+    res.setHeader = function (key, value) {
+        if (key.toLowerCase() === "content-length") {
+            return this;
+        }
+        return originalSetHeader(key, value);
+    };
+}
+function createWatcherLock() {
+    let locked = false;
+    let waiters = [];
+    return {
+        lock() {
+            if (!locked) {
+                locked = true;
+            }
+        },
+        unlock() {
+            if (locked) {
+                locked = false;
+                waiters.forEach((fn) => fn());
+                waiters = [];
+            }
+        },
+        async waitUntilFree() {
+            if (!locked)
+                return;
+            await new Promise((resolve) => {
+                waiters.push(resolve);
+            });
+        },
+    };
+}
+const delay = (ms) => new Promise((res) => setTimeout(res, ms));
+/**
+ * This function waits until a file stabilizes, meaning its size does not change for a certain number of attempts
+ * and the content ends with a specific expected tail.
+ * It uses stream reading to check the file's content, the same wait serve-static uses.
+ * This will help to prevent when serve-static serves a file that is still being written to.
+ * One of the issues, related to this, is "Constructor for "embeddable-component#undefined" was not found", that we saw quite often in the past.
+ * @param filePath
+ * @param expectedTail
+ * @param maxAttempts
+ * @param stableCount
+ */
+async function waitUntilFileStable(filePath, expectedTail, { maxAttempts = 100, requiredStableCount = 2, } = {}) {
+    let lastSize = -1;
+    let stableCounter = 0;
+    for (let i = 0; i < maxAttempts; i++) {
+        try {
+            const { size, tailMatches } = await checkFileTail(filePath, expectedTail);
+            if (size === lastSize && size > 0 && tailMatches) {
+                stableCounter++;
+                if (stableCounter >= requiredStableCount) {
+                    return;
+                }
+            }
+            else {
+                stableCounter = 0;
+            }
+            lastSize = size;
+        }
+        catch (_a) {
+        }
+        await delay(50);
+    }
+    throw new Error("File did not stabilize");
+}
+async function checkFileTail(filePath, expectedTail, tailLength = 500) {
+    const stats = await fs.stat(filePath);
+    const size = stats.size;
+    const start = Math.max(0, size - tailLength);
+    return new Promise((resolve, reject) => {
+        let tailBuffer = "";
+        createReadStream(filePath, { encoding: "utf-8", start })
+            .on("data", (chunk) => {
+            tailBuffer += chunk;
+        })
+            .on("end", () => {
+            resolve({ size, tailMatches: tailBuffer.includes(expectedTail) });
+        })
+            .on("error", reject);
+    });
+}
+
 dotenv.config();
 let wss;
 let changedFiles = [];
@@ -21599,8 +21770,27 @@ const SERVER_PORT = 8926;
 const BUILD_DEV_DIR = ".embeddable-dev-build";
 // NOTE: for backward compatibility, keep the file name as global.css
 const CUSTOM_CANVAS_CSS = "/global.css";
+let stencilWatcher;
+let isActiveBundleBuild = false;
+/** We use two steps compilation for embeddable components.
+ * 1. Compile *emb.ts files using plugin complier (sdk-react)
+ * 2. Compile the web component using Stencil compiler.
+ * These compilations can happen in parallel, but we need to ensure that
+ * the first step is not started until the second step is finished (if recompilation is needed).
+ * We use this lock to lock it before the second step starts and unlock it after the second step is finished.
+ * */
+const lock = createWatcherLock();
 const buildWebComponent = async (config) => {
-    await generate(config, "sdk-react");
+    // if there is no watcher, then this is the first build. We need to create a watcher
+    // otherwise we can just trigger a rebuild
+    if (!stencilWatcher) {
+        stencilWatcher = (await generate(config, "sdk-react"));
+        stencilWatcher.on("buildFinish", (e) => onWebComponentBuildFinish(e, config));
+        stencilWatcher.start();
+    }
+    else {
+        await triggerWebComponentRebuild(config);
+    }
 };
 const executePluginBuilds = async (config, watchers) => {
     if (pluginBuildInProgress) {
@@ -21690,7 +21880,14 @@ var dev = async () => {
         };
         breadcrumbs.push("prepare config");
         await prepare$1(config);
-        const serve = serveStatic(config.client.buildDir);
+        const serve = serveStatic(config.client.buildDir, {
+            setHeaders: (res, path) => {
+                if (path.includes("/dist/embeddable-wrapper/")) {
+                    // Prevent content length for HMR files
+                    preventContentLength(res);
+                }
+            },
+        });
         let workspacePreparation = ora("Preparing workspace...").start();
         breadcrumbs.push("get preview workspace");
         try {
@@ -21710,7 +21907,7 @@ var dev = async () => {
         }
         workspacePreparation.succeed("Workspace is ready");
         const server = http.createServer(async (request, res) => {
-            var _a;
+            var _a, _b;
             res.setHeader("Access-Control-Allow-Origin", "*");
             res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
             res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
@@ -21728,10 +21925,29 @@ var dev = async () => {
                     return;
                 }
             }
-            catch (_b) { }
+            catch (_c) { }
+            // Last line of defence: wait for the file to be fully written before
+            // handing it to serve-static. This catches any race condition between
+            // the WS "build success" notification and the actual HTTP request —
+            // e.g. when buildFinish fires slightly before Stencil flushes files.
+            const urlPath = ((_b = request.url) !== null && _b !== void 0 ? _b : "").split("?")[0];
+            if (urlPath.includes("/dist/embeddable-wrapper/") &&
+                urlPath.endsWith(".js")) {
+                const filePath = path.resolve(config.client.buildDir, urlPath.slice(1));
+                await waitUntilFileStable(filePath, "sourceMappingURL", {
+                    maxAttempts: 40, // up to ~2 s; fast in the happy path
+                    requiredStableCount: 2,
+                }).catch(() => {
+                    // If the check times out we still serve — better a partial file
+                    // warning in the console than a hung request.
+                });
+            }
             serve(request, res, done);
         });
         const { themeWatcher, lifecycleWatcher } = await buildGlobalHooks(config);
+        const dtsOra = ora("Generating component type files...").start();
+        await generateDTS(config);
+        dtsOra.succeed("Component type files generated");
         wss = new WebSocketServer({ server });
         server.listen(SERVER_PORT, async () => {
             const watchers = [];
@@ -21762,11 +21978,11 @@ var dev = async () => {
                 const customCanvasCssWatch = globalCustomCanvasWatcher(config);
                 watchers.push(customCanvasCssWatch);
                 if (themeWatcher) {
-                    await globalHookWatcher(themeWatcher);
+                    await globalHookWatcher(themeWatcher, "themeProvider");
                     watchers.push(themeWatcher);
                 }
                 if (lifecycleWatcher) {
-                    await globalHookWatcher(lifecycleWatcher);
+                    await globalHookWatcher(lifecycleWatcher, "lifecycleHook");
                     watchers.push(lifecycleWatcher);
                 }
             }
@@ -21789,30 +22005,46 @@ const configureWatcher = async (watcher, ctx) => {
     });
     watcher.on("event", async (e) => {
         var _a;
+        if (e.code === "START") {
+            await lock.waitUntilFree();
+        }
         if (e.code === "BUNDLE_START") {
+            isActiveBundleBuild = true;
             await onBuildStart(ctx);
         }
         if (e.code === "BUNDLE_END") {
+            lock.lock();
+            isActiveBundleBuild = false;
+            if (stencilWatcher && shouldRebuildWebComponent()) {
+                try {
+                    await fs.rm(path.resolve(ctx.client.buildDir, "dist", "embeddable-wrapper"), { recursive: true });
+                }
+                catch (error) {
+                    console.error("Error cleaning up build directory:", error);
+                }
+            }
             await onBundleBuildEnd(ctx);
             changedFiles = [];
         }
         if (e.code === "ERROR") {
+            lock.unlock();
+            isActiveBundleBuild = false;
             sendMessage("componentsBuildError", { error: (_a = e.error) === null || _a === void 0 ? void 0 : _a.message });
             changedFiles = [];
         }
     });
 };
-const globalHookWatcher = async (watcher) => {
+const globalHookWatcher = async (watcher, key) => {
     watcher.on("change", (path) => {
         changedFiles.push(path);
     });
     watcher.on("event", async (e) => {
         var _a;
         if (e.code === "BUNDLE_START") {
-            sendMessage("componentsBuildStart", { changedFiles });
+            sendMessage(`${key}BuildStart`, { changedFiles });
         }
         if (e.code === "BUNDLE_END") {
-            sendMessage("componentsBuildSuccess");
+            sendMessage(`${key}BuildSuccess`, { version: new Date().getTime() });
             changedFiles = [];
         }
         if (e.code === "ERROR") {
@@ -21841,14 +22073,15 @@ const openDevWorkspacePage = async (previewBaseUrl, workspaceId) => {
     ora(`Preview workspace is available at ${previewBaseUrl}/workspace/${workspaceId}`).info();
     return await open(`${previewBaseUrl}/workspace/${workspaceId}`);
 };
+function shouldRebuildWebComponent() {
+    return !onlyTypesChanged() || changedFiles.length === 0;
+}
 const onBundleBuildEnd = async (ctx) => {
-    if (!onlyTypesChanged() || changedFiles.length === 0) {
+    if (shouldRebuildWebComponent()) {
         await buildWebComponent(ctx);
     }
-    if (browserWindow == null) {
-        browserWindow = await openDevWorkspacePage(ctx.previewBaseUrl, previewWorkspace);
-    }
     else {
+        lock.unlock();
         sendMessage("componentsBuildSuccess");
     }
 };
@@ -21938,6 +22171,7 @@ const onClose = async (server, sys, watchers, config) => {
     server.close();
     wss.close();
     browserWindow === null || browserWindow === void 0 ? void 0 : browserWindow.unref();
+    await (stencilWatcher === null || stencilWatcher === void 0 ? void 0 : stencilWatcher.close());
     for (const watcher of watchers) {
         if (watcher.close) {
             await watcher.close();
@@ -21986,6 +22220,43 @@ const getPreviewWorkspace = async (startedOra, ctx) => {
         }
     }
 };
+async function onWebComponentBuildFinish(e, config) {
+    var _a;
+    lock.unlock();
+    if (!browserWindow) {
+        browserWindow = await openDevWorkspacePage(config.previewBaseUrl, previewWorkspace);
+        return;
+    }
+    await delay(50);
+    if (isActiveBundleBuild) {
+        return;
+    }
+    if (e.hasSuccessfulBuild &&
+        ((_a = e.hmr) === null || _a === void 0 ? void 0 : _a.componentsUpdated) &&
+        e.hmr.reloadStrategy === "hmr") {
+        try {
+            await waitForStableHmrFiles(e.componentGraph, config);
+        }
+        finally {
+            sendMessage("componentsBuildSuccessHmr", e.hmr);
+        }
+    }
+    else {
+        sendMessage("componentsBuildSuccess");
+    }
+}
+async function waitForStableHmrFiles(componentGraph, config) {
+    const promises = [];
+    for (const files of Object.values(componentGraph !== null && componentGraph !== void 0 ? componentGraph : {})) {
+        for (const file of files) {
+            if (file.startsWith("embeddable-component")) {
+                const fullPath = path.resolve(config.client.buildDir, "dist", "embeddable-wrapper", file);
+                promises.push(waitUntilFileStable(fullPath, "sourceMappingURL"));
+            }
+        }
+    }
+    await Promise.all(promises);
+}
 
 const REGION_CONFIGS = {
     EU: {
@@ -22530,7 +22801,7 @@ var _FileFromPath = class _FileFromPath {
       );
     }
     if (this.size) {
-      yield* createReadStream(__privateGet(this, _path), {
+      yield* createReadStream$1(__privateGet(this, _path), {
         start: __privateGet(this, _start),
         end: __privateGet(this, _start) + this.size - 1
       });