@embeddable.com/sdk-core 4.4.0-next.0 → 4.4.0-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddable.com/sdk-core",
-  "version": "4.4.0-next.0",
+  "version": "4.4.0-next.1",
   "description": "Core Embeddable SDK module responsible for web-components bundling and publishing.",
   "keywords": [
     "embeddable",

package/src/defineConfig.ts

@@ -109,9 +109,14 @@ export type ResolvedEmbeddableConfig = {
       buildName: string;
       componentsEntryPointFilename: string;
     };
+    pluginFlags?: PluginFlags;
   };
 };
 
+export type PluginFlags = {
+  supportsOnComponentReadyHook: boolean;
+}
+
 const REGION_CONFIGS = {
   EU: {
     pushBaseUrl: "https://api.eu.embeddable.com",

package/src/dev.test.ts

@@ -1103,6 +1103,34 @@ describe("dev command", () => {
 
       process.argv = originalArgv;
     });
+
+    it("should include pushEmbeddables in the dev-workspace request body when true", async () => {
+      vi.mocked(provideConfig).mockResolvedValue({
+        ...mockConfig,
+        pushEmbeddables: true,
+      } as unknown as ResolvedEmbeddableConfig);
+
+      await dev();
+
+      const devWorkspaceCall = vi.mocked(axios.post).mock.calls.find(
+        (call) => String(call[0]).includes("dev-workspace"),
+      );
+      expect(devWorkspaceCall?.[1]).toMatchObject({ pushEmbeddables: true });
+    });
+
+    it("should include pushEmbeddables in the dev-workspace request body when false", async () => {
+      vi.mocked(provideConfig).mockResolvedValue({
+        ...mockConfig,
+        pushEmbeddables: false,
+      } as unknown as ResolvedEmbeddableConfig);
+
+      await dev();
+
+      const devWorkspaceCall = vi.mocked(axios.post).mock.calls.find(
+        (call) => String(call[0]).includes("dev-workspace"),
+      );
+      expect(devWorkspaceCall?.[1]).toMatchObject({ pushEmbeddables: false });
+    });
   });
 
   describe("addToGitignore", () => {

package/src/dev.ts

@@ -661,6 +661,7 @@ const getPreviewWorkspace = async (
         instanceUrl,
         pushModels: ctx.pushModels,
         pushComponents: ctx.pushComponents,
+        pushEmbeddables: ctx.pushEmbeddables,
       },
       {
         headers: {

package/src/generate.test.ts

@@ -254,9 +254,9 @@ describe("generateDTS", () => {
       "embeddable-wrapper.esm.js",
     ] as any);
     vi.mocked(path.resolve).mockImplementation((...args) => args.join("/"));
-    // Template contains both tokens so we can verify replacement
+    // Template contains all tokens so we can verify replacement
     vi.mocked(fs.readFile).mockResolvedValue(
-      "replace-this-with-component-name {{RENDER_IMPORT}}",
+      "replace-this-with-component-name {{RENDER_IMPORT}} {{PLUGIN_FLAGS}}",
     );
     vi.mocked(loadConfig).mockResolvedValue({ config: {} } as any);
     vi.mocked(createCompiler).mockResolvedValue({
@@ -290,6 +290,19 @@ describe("generateDTS", () => {
     );
   });
 
+  it("should replace {{PLUGIN_FLAGS}} token with empty pluginFlags", async () => {
+    await generateDTS(config as unknown as ResolvedEmbeddableConfig);
+
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      "componentDir/component.tsx",
+      expect.stringContaining("const pluginFlags: Partial<PluginFlags> = {}"),
+    );
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      "componentDir/component.tsx",
+      expect.not.stringContaining("{{PLUGIN_FLAGS}}"),
+    );
+  });
+
   it("should call loadConfig with devMode=false and sourceMap=false", async () => {
     await generateDTS(config as unknown as ResolvedEmbeddableConfig);
 
@@ -333,7 +346,7 @@ describe("injectBundleRender cross-platform paths", () => {
 
   beforeEach(() => {
     vi.mocked(path.resolve).mockImplementation((...args) => args.join("/"));
-    vi.mocked(fs.readFile).mockResolvedValue("{{RENDER_IMPORT}}");
+    vi.mocked(fs.readFile).mockResolvedValue("{{RENDER_IMPORT}}\n{{PLUGIN_FLAGS}}");
   });
 
   it("should use forward slashes in import when path.relative returns unix path", async () => {
@@ -363,6 +376,55 @@ describe("injectBundleRender cross-platform paths", () => {
       expect.stringContaining("import render from '../../buildDir/buildName/render.js'"),
     );
   });
+
+  it("should inject pluginFlags from config into component.tsx", async () => {
+    vi.mocked(path.relative).mockReturnValue("../../buildDir/buildName");
+    const ctxWithPluginFlags = {
+      ...ctxWithFileName,
+      "sdk-react": {
+        ...ctxWithFileName["sdk-react"],
+        pluginFlags: { supportsOnComponentReadyHook: true },
+      },
+    };
+
+    await injectBundleRender(
+      ctxWithPluginFlags as unknown as ResolvedEmbeddableConfig,
+      "sdk-react",
+    );
+
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.stringContaining('const pluginFlags: Partial<PluginFlags> = {"supportsOnComponentReadyHook":true}'),
+    );
+  });
+
+  it("should inject empty pluginFlags when not present in config", async () => {
+    vi.mocked(path.relative).mockReturnValue("../../buildDir/buildName");
+
+    await injectBundleRender(
+      ctxWithFileName as unknown as ResolvedEmbeddableConfig,
+      "sdk-react",
+    );
+
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.stringContaining("const pluginFlags: Partial<PluginFlags> = {}"),
+    );
+  });
+
+  it("should not leave {{PLUGIN_FLAGS}} token in output", async () => {
+    vi.mocked(path.relative).mockReturnValue("../../buildDir/buildName");
+
+    await injectBundleRender(
+      ctxWithFileName as unknown as ResolvedEmbeddableConfig,
+      "sdk-react",
+    );
+
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.not.stringContaining("{{PLUGIN_FLAGS}}"),
+    );
+  });
 });
 
 describe("injectCSS cross-platform paths", () => {

package/src/generate.ts

@@ -18,6 +18,7 @@ import type { Logger } from "@stencil/core/internal";
 
 const STYLE_IMPORTS_TOKEN = "{{STYLES_IMPORT}}";
 const RENDER_IMPORT_TOKEN = "{{RENDER_IMPORT}}";
+const PLUGIN_FLAGS_TOKEN = "{{PLUGIN_FLAGS}}";
 
 // stencil doesn't support dynamic component tag name, so we need to replace it manually
 const COMPONENT_TAG_TOKEN = "replace-this-with-component-name";
@@ -166,6 +167,8 @@ export async function injectBundleRender(
     )
     .replaceAll("\\", "/");
   const importStr = `import render from '${importFilePath}/${ctx[pluginName].outputOptions.fileName}';`;
+  const pluginFlags = ctx[pluginName].pluginFlags ?? {};
+  const pluginFlagsStr = `const pluginFlags: Partial<PluginFlags> = ${JSON.stringify(pluginFlags)}`;
 
   let content = await fs.readFile(
     path.resolve(ctx.core.templatesDir, "component.tsx.template"),
@@ -178,7 +181,7 @@ export async function injectBundleRender(
 
   await fs.writeFile(
     path.resolve(ctx.client.componentDir, "component.tsx"),
-    content.replace(RENDER_IMPORT_TOKEN, importStr),
+    content.replace(RENDER_IMPORT_TOKEN, importStr).replace(PLUGIN_FLAGS_TOKEN, pluginFlagsStr),
   );
 }
 
@@ -199,7 +202,7 @@ async function injectBundleRenderStub(
   content = content.replace(COMPONENT_TAG_TOKEN, "embeddable-component");
   await fs.writeFile(
     path.resolve(ctx.client.componentDir, "component.tsx"),
-    content.replace(RENDER_IMPORT_TOKEN, stubStr),
+    content.replace(RENDER_IMPORT_TOKEN, stubStr).replace(PLUGIN_FLAGS_TOKEN, "const pluginFlags: Partial<PluginFlags> = {}"),
   );
 }
 

package/src/index.ts

@@ -4,4 +4,4 @@ export { default as push } from "./push";
 export { default as dev } from "./dev";
 export { default as defineConfig } from "./defineConfig";
 export { default as buildPackage } from "./buildPackage";
-export type { ResolvedEmbeddableConfig } from "./defineConfig";
+export type { ResolvedEmbeddableConfig, PluginFlags } from "./defineConfig";

package/src/push.test.ts

@@ -1,4 +1,4 @@
-import push, { buildArchive, EMBEDDABLE_FILES } from "./push";
+import push, { buildArchive, EMBEDDABLE_FILES, sendBuild, sendBuildByApiKey } from "./push";
 import provideConfig from "./provideConfig";
 import { fileFromPath } from "formdata-node/file-from-path";
 import * as path from "path";
@@ -239,7 +239,6 @@ describe("push", () => {
       expect(process.exit).toHaveBeenCalledWith(1);
     });
 
-
     it("should only include component files when pushModels is false", async () => {
       const localZipMock = {
         addFile: vi.fn(),
@@ -747,4 +746,52 @@ describe("push", () => {
       expect(EMBEDDABLE_FILES.test("my-dashboard.embeddable.ts")).toBe(false);
     });
   });
+
+  describe.each([
+    {
+      label: "sendBuild",
+      endpoint: "**/bundle/:workspaceId/upload",
+      invoke: (testConfig: ResolvedEmbeddableConfig) =>
+        sendBuild(testConfig, { workspaceId: "test-workspace", token: "test-token" }),
+    },
+    {
+      label: "sendBuildByApiKey",
+      endpoint: "**/bundle/upload",
+      invoke: (testConfig: ResolvedEmbeddableConfig) =>
+        sendBuildByApiKey(testConfig, { apiKey: "test-api-key", email: "test@example.com" }),
+    },
+  ])("$label", ({ endpoint, invoke }) => {
+    async function captureMetadata(pushEmbeddables: boolean) {
+      let capturedMetadata: Record<string, any> | undefined;
+
+      server.use(
+        http.post(endpoint, async ({ request }) => {
+          const formData = await request.formData();
+          const requestBlob = formData.get("request") as Blob;
+          capturedMetadata = JSON.parse(await requestBlob.text());
+          return HttpResponse.json({ bundleId: "mocked-bundle-id" });
+        }),
+      );
+
+      const testConfig = {
+        ...config,
+        pushEmbeddables,
+        region: "us",
+        starterEmbeddables: {},
+      } as unknown as ResolvedEmbeddableConfig;
+
+      await invoke(testConfig);
+      return capturedMetadata;
+    }
+
+    it("should include pushEmbeddables in form data metadata when true", async () => {
+      const metadata = await captureMetadata(true);
+      expect(metadata?.pushEmbeddables).toBe(true);
+    });
+
+    it("should include pushEmbeddables in form data metadata when false", async () => {
+      const metadata = await captureMetadata(false);
+      expect(metadata?.pushEmbeddables).toBe(false);
+    });
+  });
 });

package/src/push.ts

@@ -313,6 +313,7 @@ export async function sendBuildByApiKey(
   const form = await createFormData(ctx.client.archiveFile, {
     pushModels: ctx.pushModels,
     pushComponents: ctx.pushComponents,
+    pushEmbeddables: ctx.pushEmbeddables,
     starterEmbeddableIds: ctx.starterEmbeddables?.[ctx.region],
     authorEmail: email,
     description: message,
@@ -347,6 +348,7 @@ export async function sendBuild(
   const form = await createFormData(ctx.client.archiveFile, {
     pushModels: ctx.pushModels,
     pushComponents: ctx.pushComponents,
+    pushEmbeddables: ctx.pushEmbeddables,
     starterEmbeddableIds: ctx.starterEmbeddables?.[ctx.region],
     authorEmail: "",
     description: message,

package/templates/component.tsx.template

@@ -1,5 +1,7 @@
 import { Component, Watch, Host, Prop, Event, EventEmitter, h, Listen } from '@stencil/core';
+import type { PluginFlags } from '@embeddable.com/sdk-core';
 {{RENDER_IMPORT}}
+{{PLUGIN_FLAGS}}
 
 @Component({
   tag: 'replace-this-with-component-name', 
@@ -40,11 +42,13 @@ export class EmbeddableComponent {
 
   componentDidLoad() {
     this.handlePops();
-    const props = JSON.parse(this.props);
-    this.componentDidLoadEvent.emit({
+    if (!pluginFlags.supportsOnComponentReadyHook) {
+      const props = JSON.parse(this.props);
+      this.componentDidLoadEvent.emit({
         componentId: props.componentId,
         componentName: this.componentName
-    })
+      })
+    }
   }
 
   disconnectedCallback() {
@@ -113,7 +117,12 @@ export class EmbeddableComponent {
       this.componentName,
       props,
       JSON.parse(this.clientContext),
-      this.theme
+      this.theme,
+      () =>
+        this.componentDidLoadEvent.emit({
+          componentId: props.componentId,
+          componentName: this.componentName
+        })
     );
   }
 }