@embeddable.com/sdk-core 3.14.6 → 3.14.7-next.1

package/src/dev.ts

@@ -53,14 +53,65 @@ let browserWindow: ChildProcess | null = null;
 
 let previewWorkspace: string;
 
+// Build coordination to prevent duplicate plugin builds
+let pluginBuildInProgress = false;
+let pendingPluginBuilds: (() => Promise<void>)[] = [];
+
 const SERVER_PORT = 8926;
 const BUILD_DEV_DIR = ".embeddable-dev-build";
-const GLOBAL_CSS = "/global.css";
+// NOTE: for backward compatibility, keep the file name as global.css
+const CUSTOM_CANVAS_CSS = "/global.css";
 
 export const buildWebComponent = async (config: any) => {
   await generate(config, "sdk-react");
 };
 
+const executePluginBuilds = async (
+  config: ResolvedEmbeddableConfig,
+  watchers: Array<RollupWatcher | FSWatcher>,
+) => {
+  if (pluginBuildInProgress) {
+    // If a plugin build is already in progress, queue this one
+    return new Promise<void>((resolve) => {
+      pendingPluginBuilds.push(async () => {
+        await doPluginBuilds(config, watchers);
+        resolve();
+      });
+    });
+  } else {
+    // Start the plugin build immediately
+    await doPluginBuilds(config, watchers);
+  }
+};
+
+const doPluginBuilds = async (
+  config: ResolvedEmbeddableConfig,
+  watchers: Array<RollupWatcher | FSWatcher>,
+) => {
+  pluginBuildInProgress = true;
+
+  try {
+    for (const getPlugin of config.plugins) {
+      const plugin = getPlugin();
+
+      await plugin.validate(config);
+      const watcher = await plugin.build(config);
+      await configureWatcher(watcher as RollupWatcher, config);
+      watchers.push(watcher as RollupWatcher);
+    }
+  } finally {
+    pluginBuildInProgress = false;
+
+    // Process any pending builds
+    if (pendingPluginBuilds.length > 0) {
+      const nextBuild = pendingPluginBuilds.shift();
+      if (nextBuild) {
+        await nextBuild();
+      }
+    }
+  }
+};
+
 const addToGitingore = async () => {
   try {
     const gitignorePath = path.resolve(process.cwd(), ".gitignore");
@@ -174,9 +225,9 @@ export default async () => {
         const done = finalhandler(request, res);
 
         try {
-          if (request.url?.endsWith(GLOBAL_CSS)) {
+          if (request.url?.endsWith(CUSTOM_CANVAS_CSS)) {
             res.writeHead(200, { "Content-Type": "text/css" });
-            res.end(await fs.readFile(config.client.globalCss));
+            res.end(await fs.readFile(config.client.customCanvasCss));
             return;
           }
         } catch {}
@@ -214,20 +265,11 @@ export default async () => {
       await sendBuildChanges(config);
 
       if (config.pushComponents) {
-        for (const getPlugin of config.plugins) {
-          const plugin = getPlugin();
-
-          breadcrumbs.push("validate plugin");
-          await plugin.validate(config);
-          breadcrumbs.push("build plugin");
-          const watcher = await plugin.build(config);
-          breadcrumbs.push("configure watcher");
-          await configureWatcher(watcher as RollupWatcher, config);
-          watchers.push(watcher as RollupWatcher);
-        }
+        breadcrumbs.push("build plugins with coordination");
+        await executePluginBuilds(config, watchers);
 
-        const customGlobalCssWatch = globalCssWatcher(config);
-        watchers.push(customGlobalCssWatch);
+        const customCanvasCssWatch = globalCustomCanvasWatcher(config);
+        watchers.push(customCanvasCssWatch);
 
         if (themeWatcher) {
           await globalHookWatcher(themeWatcher);
@@ -373,8 +415,13 @@ const cubeSecurityContextAndClientContextWatcher = async (
   return fsWatcher;
 };
 
-const globalCssWatcher = (ctx: ResolvedEmbeddableConfig): FSWatcher => {
-  const fsWatcher = chokidar.watch(ctx.client.globalCss, chokidarWatchOptions);
+const globalCustomCanvasWatcher = (
+  ctx: ResolvedEmbeddableConfig,
+): FSWatcher => {
+  const fsWatcher = chokidar.watch(
+    ctx.client.customCanvasCss,
+    chokidarWatchOptions,
+  );
 
   fsWatcher.on("all", async () => {
     sendMessage("globalCssUpdateSuccess");

package/src/push.test.ts

@@ -88,7 +88,7 @@ const config = {
     rootDir: "rootDir",
     buildDir: "buildDir",
     archiveFile: "embeddable-build.zip",
-    globalCss: "src/global.css",
+    customCanvasCss: "src/custom-canvas.css",
   },
   pushBaseUrl: "http://localhost:3000",
   previewBaseUrl: "http://localhost:3000",
@@ -108,18 +108,18 @@ describe("push", () => {
     vi.mocked(checkBuildSuccess).mockResolvedValue(true);
     vi.mocked(getArgumentByKey).mockReturnValue(undefined);
     vi.mocked(provideConfig).mockResolvedValue(
-      config as ResolvedEmbeddableConfig,
+      config as ResolvedEmbeddableConfig
     );
     vi.mocked(fs.access).mockResolvedValue(undefined);
     vi.mocked(fs.readFile).mockImplementation(async () =>
-      Buffer.from(`{"access_token":"mocked-token"}`),
+      Buffer.from(`{"access_token":"mocked-token"}`)
     );
     vi.mocked(fs.stat).mockResolvedValue({
       size: 100,
     } as any);
     vi.mocked(findFiles).mockResolvedValue([["fileName", "filePath"]]);
     vi.mocked(fileFromPath).mockReturnValue(
-      new Blob([new ArrayBuffer(8)]) as any,
+      new Blob([new ArrayBuffer(8)]) as any
     );
     vi.mocked(archiver.create).mockReturnValue(archiveMock as any);
 
@@ -146,11 +146,11 @@ describe("push", () => {
       zlib: { level: 9 },
     });
     expect(fsSync.createWriteStream).toHaveBeenCalledWith(
-      config.client.archiveFile,
+      config.client.archiveFile
     );
 
     expect(archiveMock.pipe).toHaveBeenCalled();
-    expect(archiveMock.file).toHaveBeenCalledWith("src/global.css", {
+    expect(archiveMock.file).toHaveBeenCalledWith("src/custom-canvas.css", {
       name: "global.css",
     });
     expect(archiveMock.directory).toHaveBeenCalledWith("buildDir", false);
@@ -159,10 +159,10 @@ describe("push", () => {
     expect(fs.rm).toHaveBeenCalledWith(config.client.archiveFile);
 
     expect(infoMock.info).toHaveBeenCalledWith(
-      "Publishing to mocked-workspace-name using http://localhost:3000/workspace/mocked-workspace-id...",
+      "Publishing to mocked-workspace-name using http://localhost:3000/workspace/mocked-workspace-id..."
     );
     expect(infoMock.succeed).toHaveBeenCalledWith(
-      "Published to mocked-workspace-name using http://localhost:3000/workspace/mocked-workspace-id",
+      "Published to mocked-workspace-name using http://localhost:3000/workspace/mocked-workspace-id"
     );
   });
 
@@ -171,7 +171,7 @@ describe("push", () => {
     server.use(
       http.get("**/workspace", () => {
         return HttpResponse.json([]);
-      }),
+      })
     );
 
     await push();
@@ -190,7 +190,7 @@ describe("push", () => {
     expect(process.exit).toHaveBeenCalledWith(1);
 
     expect(console.error).toHaveBeenCalledWith(
-      "Build failed or not completed. Please run `embeddable:build` first.",
+      "Build failed or not completed. Please run `embeddable:build` first."
     );
   });
 
@@ -224,7 +224,7 @@ describe("push", () => {
       await push();
 
       expect(startMock.fail).toHaveBeenCalledWith(
-        "Cannot push: both pushModels and pushComponents are disabled",
+        "Cannot push: both pushModels and pushComponents are disabled"
       );
       expect(process.exit).toHaveBeenCalledWith(1);
     });
@@ -286,7 +286,7 @@ describe("push", () => {
       await push();
 
       expect(startMock.fail).toHaveBeenCalledWith(
-        "Invalid email provided. Please provide a valid email using --email (-e) flag",
+        "Invalid email provided. Please provide a valid email using --email (-e) flag"
       );
       expect(process.exit).toHaveBeenCalledWith(1);
     });
@@ -305,7 +305,7 @@ describe("push", () => {
       await push();
 
       expect(startMock.fail).toHaveBeenCalledWith(
-        "Invalid email provided. Please provide a valid email using --email (-e) flag",
+        "Invalid email provided. Please provide a valid email using --email (-e) flag"
       );
       expect(process.exit).toHaveBeenCalledWith(1);
     });
@@ -355,13 +355,13 @@ describe("push", () => {
       vi.spyOn(console, "error").mockImplementation(() => undefined);
       vi.mocked(fs.access).mockRejectedValue(new Error("No such directory"));
       vi.mocked(provideConfig).mockResolvedValue(
-        config as ResolvedEmbeddableConfig,
+        config as ResolvedEmbeddableConfig
       );
 
       await push();
 
       expect(console.error).toHaveBeenCalledWith(
-        "No embeddable build was produced.",
+        "No embeddable build was produced."
       );
       expect(process.exit).toHaveBeenCalledWith(1);
     });
@@ -371,13 +371,13 @@ describe("push", () => {
       vi.mocked(fs.access).mockResolvedValue(undefined);
       vi.mocked(fs.readFile).mockResolvedValue(Buffer.from("{}"));
       vi.mocked(provideConfig).mockResolvedValue(
-        config as ResolvedEmbeddableConfig,
+        config as ResolvedEmbeddableConfig
       );
 
       await push();
 
       expect(console.error).toHaveBeenCalledWith(
-        "Expired token. Please login again.",
+        "Expired token. Please login again."
       );
       expect(process.exit).toHaveBeenCalledWith(1);
     });
@@ -387,7 +387,7 @@ describe("push", () => {
       vi.mocked(provideConfig).mockRejectedValue(testError);
       vi.mocked(fs.access).mockResolvedValue(undefined);
       vi.mocked(fs.readFile).mockImplementation(async () =>
-        Buffer.from(`{"access_token":"mocked-token"}`),
+        Buffer.from(`{"access_token":"mocked-token"}`)
       );
 
       await push();
@@ -450,40 +450,40 @@ describe("push", () => {
       // Should include component build directory
       expect(mockArchiver.directory).toHaveBeenCalledWith(
         testConfig.client.buildDir,
-        false,
+        false
       );
       // Should include global.css
       expect(mockArchiver.file).toHaveBeenCalledWith(
-        testConfig.client.globalCss,
+        testConfig.client.customCanvasCss,
         {
           name: "global.css",
-        },
+        }
       );
       // Should include all model files
       expect(mockArchiver.file).toHaveBeenCalledWith(
         "/path/to/model1.cube.yml",
         {
           name: "model1.cube.yml",
-        },
+        }
       );
       expect(mockArchiver.file).toHaveBeenCalledWith(
         "/path/to/model2.cube.yaml",
         {
           name: "model2.cube.yaml",
-        },
+        }
       );
       // Should include all preset files
       expect(mockArchiver.file).toHaveBeenCalledWith(
         "/path/to/context1.sc.yml",
         {
           name: "context1.sc.yml",
-        },
+        }
       );
       expect(mockArchiver.file).toHaveBeenCalledWith(
         "/path/to/context2.cc.yml",
         {
           name: "context2.cc.yml",
-        },
+        }
       );
     });
 
@@ -503,14 +503,14 @@ describe("push", () => {
       // Should include component build directory
       expect(mockArchiver.directory).toHaveBeenCalledWith(
         testConfig.client.buildDir,
-        false,
+        false
       );
       // Should include global.css
       expect(mockArchiver.file).toHaveBeenCalledWith(
-        testConfig.client.globalCss,
+        testConfig.client.customCanvasCss,
         {
           name: "global.css",
-        },
+        }
       );
       // Should only find client context files
       expect(findFiles).toHaveBeenCalledOnce();
@@ -533,11 +533,11 @@ describe("push", () => {
 
       expect(findFiles).toHaveBeenCalledWith(
         "/custom/models/path",
-        expect.any(RegExp),
+        expect.any(RegExp)
       );
       expect(findFiles).toHaveBeenCalledWith(
         "/custom/presets/path",
-        expect.any(RegExp),
+        expect.any(RegExp)
       );
     });
 

package/src/push.ts

@@ -240,7 +240,8 @@ export async function archive(args: {
   archive.pipe(output);
   if (!isDev) {
     archive.directory(ctx.client.buildDir, false);
-    archive.file(ctx.client.globalCss, {
+    // NOTE: for backward compatibility, keep the file name as global.css
+    archive.file(ctx.client.customCanvasCss, {
       name: "global.css",
     });
   }