@embeddable.com/sdk-core 4.1.9 → 4.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddable.com/sdk-core",
-  "version": "4.1.9",
+  "version": "4.1.10",
   "description": "Core Embeddable SDK module responsible for web-components bundling and publishing.",
   "keywords": [
     "embeddable",
@@ -40,7 +40,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@embeddable.com/core": "2.13.5",
+    "@embeddable.com/core": "2.13.6",
     "@embeddable.com/sdk-utils": "0.9.0",
     "@inquirer/prompts": "^7.2.1",
     "@stencil/core": "^4.23.0",

package/src/dev.test.ts

@@ -48,7 +48,11 @@ vi.mock("@stencil/core/sys/node", () => ({
   createNodeSys: vi.fn(),
 }));
 vi.mock("open", () => ({ default: vi.fn() }));
-vi.mock("ws", () => ({ WebSocketServer: vi.fn() }));
+vi.mock("ws", () => ({ 
+  WebSocketServer: class WebSocketServer {
+    constructor() {}
+  }
+}));
 vi.mock("chokidar", () => ({ watch: vi.fn((_) => ({ on: vi.fn() })) }));
 vi.mock("./login", () => ({ getToken: vi.fn(), default: vi.fn() }));
 vi.mock("axios", () => ({ default: { get: vi.fn(), post: vi.fn() } }));
@@ -135,7 +139,7 @@ describe("dev command", () => {
   let oraMock: any;
   let mockServer: any;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     listenMock = vi.fn();
     wsMock = {
       send: vi.fn(),
@@ -155,12 +159,14 @@ describe("dev command", () => {
     };
 
     vi.mocked(http.createServer).mockImplementation(() => mockServer as any);
-    vi.mocked(WebSocketServer).mockImplementation(() => {
+    // Mock WebSocketServer constructor to return our mock instance
+    const wsModule = await import("ws");
+    vi.spyOn(wsModule, "WebSocketServer").mockImplementation(function() {
       return {
         clients: [wsMock],
         on: vi.fn(),
       } as any;
-    });
+    } as any);
 
     vi.mocked(ora).mockImplementation(() => oraMock);
 
@@ -398,7 +404,10 @@ describe("dev command", () => {
         on: vi.fn(),
         close: vi.fn(),
       };
-      vi.mocked(WebSocketServer).mockImplementation(() => mockWss as any);
+      const wsModule = await import("ws");
+      vi.spyOn(wsModule, "WebSocketServer").mockImplementation(function() {
+        return mockWss as any;
+      } as any);
       vi.mocked(validate).mockResolvedValue(true);
       const error = new Error("Archive failed");
       vi.mocked(archive).mockRejectedValue(error);
@@ -1002,7 +1011,10 @@ describe("dev command", () => {
         close: vi.fn(),
       };
 
-      vi.mocked(WebSocketServer).mockImplementation(() => mockWss as any);
+      const wsModule = await import("ws");
+      vi.spyOn(wsModule, "WebSocketServer").mockImplementation(function() {
+        return mockWss as any;
+      } as any);
 
       await dev();
 
@@ -1040,7 +1052,10 @@ describe("dev command", () => {
         close: vi.fn(),
       };
 
-      vi.mocked(WebSocketServer).mockImplementation(() => mockWss as any);
+      const wsModule = await import("ws");
+      vi.spyOn(wsModule, "WebSocketServer").mockImplementation(function() {
+        return mockWss as any;
+      } as any);
 
       await dev();
 
@@ -1100,7 +1115,10 @@ describe("dev command", () => {
         close: vi.fn(),
       };
 
-      vi.mocked(WebSocketServer).mockImplementation(() => mockWss as any);
+      const wsModule = await import("ws");
+      vi.spyOn(wsModule, "WebSocketServer").mockImplementation(function() {
+        return mockWss as any;
+      } as any);
       vi.mocked(validate).mockResolvedValue(false);
 
       await dev();
@@ -1268,7 +1286,10 @@ describe("dev command", () => {
         close: vi.fn(),
       };
 
-      vi.mocked(WebSocketServer).mockImplementation(() => mockWss as any);
+      const wsModule = await import("ws");
+      vi.spyOn(wsModule, "WebSocketServer").mockImplementation(function() {
+        return mockWss as any;
+      } as any);
 
       await dev();
 
@@ -1404,7 +1425,10 @@ describe("dev command", () => {
         close: vi.fn(),
       };
 
-      vi.mocked(WebSocketServer).mockImplementation(() => mockWss as any);
+      const wsModule = await import("ws");
+      vi.spyOn(wsModule, "WebSocketServer").mockImplementation(function() {
+        return mockWss as any;
+      } as any);
 
       await dev();
 
@@ -1456,7 +1480,10 @@ describe("dev command", () => {
         close: vi.fn(),
       };
 
-      vi.mocked(WebSocketServer).mockImplementation(() => mockWss as any);
+      const wsModule = await import("ws");
+      vi.spyOn(wsModule, "WebSocketServer").mockImplementation(function() {
+        return mockWss as any;
+      } as any);
 
       vi.mocked(provideConfig).mockResolvedValue({
         ...mockConfig,
@@ -1569,12 +1596,14 @@ describe("dev command", () => {
       };
 
       // Make sure WebSocketServer returns undefined clients
-      vi.mocked(WebSocketServer).mockImplementation(
-        () =>
-          ({
+      const wsModule = await import("ws");
+      vi.spyOn(wsModule, "WebSocketServer").mockImplementation(
+        function() {
+          return {
             clients: undefined,
             close: vi.fn(),
-          }) as any,
+          } as any;
+        } as any,
       );
 
       await configureWatcher(mockWatcher as any, mockConfig as any);

package/src/login.test.ts

@@ -1,9 +1,5 @@
 import { server } from "./../../../mocks/server";
-import login, { resolveFiles, getToken } from "./login";
 import { vi } from "vitest";
-import { pathToFileURL } from "node:url";
-import { existsSync } from "node:fs";
-import { PathLike } from "node:fs";
 import { mkdir, access, writeFile, readFile } from "fs/promises";
 import { CREDENTIALS_DIR, CREDENTIALS_FILE } from "./credentials";
 import { http, HttpResponse } from "msw";
@@ -45,25 +41,30 @@ vi.mock("node:fs", () => ({
   existsSync: vi.fn(),
 }));
 
-vi.mock("node:url", () => ({
-  pathToFileURL: vi.fn(),
-}));
-
-// Create a mock module factory
-const mockConfigModule = {
-  default: {
+// Mock provideConfig directly to avoid file:// URL mocking issues
+vi.mock("./provideConfig", () => ({
+  default: vi.fn().mockResolvedValue({
     authDomain: "test-domain.com",
-  },
-};
+    authClientId: "test-client-id",
+    audienceUrl: "test-audience-url",
+  }),
+}));
 
-// Mock both possible config paths
-vi.mock(`${process.cwd()}/embeddable.config.js`, () => mockConfigModule);
-vi.mock(`${process.cwd()}/embeddable.config.ts`, () => mockConfigModule);
+// Import after mocks are set up
+import login, { resolveFiles, getToken } from "./login";
 
 describe("login", () => {
   beforeEach(async () => {
     vi.resetModules();
 
+    // Re-mock provideConfig after resetModules
+    const provideConfigModule = await import("./provideConfig");
+    vi.mocked(provideConfigModule.default).mockResolvedValue({
+      authDomain: "test-domain.com",
+      authClientId: "test-client-id",
+      audienceUrl: "test-audience-url",
+    } as any);
+
     vi.mocked(readFile).mockImplementation(async () =>
       Buffer.from(`{"access_token":"mocked-token"}`),
     );
@@ -75,16 +76,6 @@ describe("login", () => {
     vi.mocked(mkdir).mockImplementation(async () => "mocked");
 
     vi.mocked(writeFile).mockImplementation(async () => undefined);
-
-    // Mock that only the TS config exists
-    vi.mocked(existsSync).mockImplementation((path: PathLike) =>
-      path.toString().endsWith("embeddable.config.ts"),
-    );
-
-    // Mock URL creation
-    vi.mocked(pathToFileURL).mockImplementation(
-      (path) => new URL(`file://${path}`),
-    );
   });
 
   vi.mock("./reportErrorToRollbar", () => vi.fn());

package/src/provideConfig.test.ts

@@ -1,43 +1,60 @@
-import { pathToFileURL } from "node:url";
-import { existsSync } from "node:fs";
+import { existsSync, writeFileSync, unlinkSync } from "node:fs";
 import { PathLike } from "node:fs";
-import provideConfig from "./provideConfig";
 import { vi } from "vitest";
+import { join } from "node:path";
 
-// Mock fs module
-vi.mock("node:fs", () => ({
-  existsSync: vi.fn(),
-}));
-
-// Mock url module
-vi.mock("node:url", () => ({
-  pathToFileURL: vi.fn(),
-}));
-
-// Create a mock module factory
-const mockConfigModule = {
-  default: "mocked-config",
-};
-
-// Mock both possible config paths
-vi.mock(`${process.cwd()}/embeddable.config.js`, () => mockConfigModule);
-vi.mock(`${process.cwd()}/embeddable.config.ts`, () => mockConfigModule);
+// Mock fs module for existsSync (but allow real writeFileSync/unlinkSync for temp file)
+vi.mock("node:fs", async () => {
+  const actual = await vi.importActual<typeof import("node:fs")>("node:fs");
+  return {
+    ...actual,
+    existsSync: vi.fn(),
+  };
+});
 
 describe("provideConfig", () => {
+  const configPath = join(process.cwd(), "embeddable.config.ts");
+  const mockConfig = { default: "mocked-config" };
+
   beforeEach(() => {
-    vi.resetModules();
     // Mock that only the TS config exists
     vi.mocked(existsSync).mockImplementation((path: PathLike) =>
       path.toString().endsWith("embeddable.config.ts"),
     );
-    // Mock URL creation
-    vi.mocked(pathToFileURL).mockImplementation(
-      (path) => new URL(`file://${path}`),
-    );
+  });
+
+  afterEach(() => {
+    // Clean up temp file if it exists
+    try {
+      if (existsSync(configPath)) {
+        unlinkSync(configPath);
+      }
+    } catch {
+      // Ignore cleanup errors
+    }
   });
 
   it("should return the default config when the config file exists", async () => {
+    vi.resetModules();
+    
+    // Create a temporary actual config file (more reliable than mocking file:// URLs on Windows)
+    writeFileSync(
+      configPath,
+      `export default ${JSON.stringify(mockConfig.default)};`,
+      "utf-8",
+    );
+    
+    // Re-mock fs.existsSync after resetModules
+    vi.mocked(existsSync).mockImplementation((path: PathLike) =>
+      path.toString().endsWith("embeddable.config.ts"),
+    );
+    
+    // Dynamically import provideConfig after file is created
+    const { default: provideConfig } = await import("./provideConfig");
     const result = await provideConfig();
     expect(result).toEqual("mocked-config");
+    
+    // Clean up
+    unlinkSync(configPath);
   });
 });

package/src/push.test.ts

@@ -377,7 +377,7 @@ describe("push", () => {
       await push();
 
       expect(console.error).toHaveBeenCalledWith(
-        "Expired token. Please login again."
+        'Unauthorized. Please login using "npm run embeddable:login"'
       );
       expect(process.exit).toHaveBeenCalledWith(1);
     });

package/src/push.ts

@@ -160,7 +160,7 @@ async function verify(ctx: ResolvedEmbeddableConfig) {
   const token = await getToken();
 
   if (!token) {
-    console.error("Expired token. Please login again.");
+    console.error('Unauthorized. Please login using "npm run embeddable:login"');
     process.exit(1);
   }
 

package/src/rollbar.test.ts

@@ -35,11 +35,6 @@ vi.mock("node:path", async () => {
   };
 });
 
-// mock rollback constructor
-vi.mock("rollbar", () => ({
-  default: vi.fn(),
-}));
-
 vi.mock("resolvedPath", () => ({
   default: vi.fn(),
   devDependencies: {
@@ -51,28 +46,48 @@ vi.mock("resolvedPath", () => ({
   },
 }));
 
-const rollbarInstanceMock = {
-  error: vi.fn(),
-  configure: vi.fn(),
-};
+// Mock rollbar - define everything inside factory to avoid hoisting issues
+vi.mock("rollbar", () => {
+  const mockInstance = {
+    error: vi.fn(),
+    configure: vi.fn(),
+  };
+  // Store on globalThis so tests can access it
+  (globalThis as any).__rollbarMockInstance = mockInstance;
+  
+  // Return a constructor function that returns the same instance
+  function RollbarMock() {
+    return mockInstance;
+  }
+  
+  return {
+    default: RollbarMock,
+  };
+});
 
 describe("rollbar", () => {
+  let rollbarInstance: any;
+
   beforeEach(() => {
     vi.mocked(provideConfig).mockResolvedValue(
       config as ResolvedEmbeddableConfig,
     );
-    vi.mocked(Rollbar).mockReturnValue(rollbarInstanceMock as any);
     vi.mocked(path.resolve).mockReturnValue("resolvedPath");
 
     vi.mocked(fs.readFile).mockResolvedValue("{}");
     vi.mocked(jwtDecode).mockReturnValue({ sub: "test", iss: "iss" });
+    
+    // Get the mock instance that will be returned by constructor
+    rollbarInstance = (globalThis as any).__rollbarMockInstance;
+    rollbarInstance.error.mockClear();
+    rollbarInstance.configure.mockClear();
   });
 
   it("should call Rollbar.error with the error", async () => {
     const error = new Error("test error");
     await reportErrorToRollbar(error);
 
-    expect(rollbarInstanceMock.configure).toHaveBeenCalledWith({
+    expect(rollbarInstance.configure).toHaveBeenCalledWith({
       payload: {
         person: {
           id: "iss@test",
@@ -80,7 +95,7 @@ describe("rollbar", () => {
       },
     });
 
-    expect(rollbarInstanceMock.error).toHaveBeenCalledWith(error, {
+    expect(rollbarInstance.error).toHaveBeenCalledWith(error, {
       custom: {
         code_version: '{"core":"1.0.0","sdk_core":"1.2.3"}',
       },

package/src/workspaceUtils.test.ts

@@ -46,7 +46,7 @@ describe("workspaceUtils", () => {
         getWorkspaces(ctx as ResolvedEmbeddableConfig, token, workspaceSpinner),
       ).rejects.toThrow();
       expect(workspaceSpinner.fail).toHaveBeenCalledWith(
-        'Unauthorized. Please login using "embeddable login" command.',
+        'Unauthorized. Please login using "npm run embeddable:login"',
       );
     });
 

package/src/workspaceUtils.ts

@@ -23,7 +23,7 @@ export async function getWorkspaces(
     }
     if (e.response?.status === 401) {
       workspaceSpinner.fail(
-        'Unauthorized. Please login using "embeddable login" command.',
+        'Unauthorized. Please login using "npm run embeddable:login"',
       );
     } else {
       workspaceSpinner.fail("Failed to fetch workspaces");

package/templates/component.tsx.template

@@ -30,6 +30,7 @@ export class EmbeddableComponent {
 
   @Watch('theme')
   watchTheme() {
+    if (!this.rootElement) return;
     const eventClientContext = new CustomEvent('embeddable-event:update-theme', {
       bubbles: false,
       detail: this.theme,
@@ -106,10 +107,11 @@ export class EmbeddableComponent {
   }
 
   private handlePops() {
+    const props = JSON.parse(this.props);
     render(
       this.rootElement,
       this.componentName,
-      JSON.parse(this.props),
+      props,
       JSON.parse(this.clientContext),
       this.theme
     );