@embeddable.com/sdk-core 3.4.1 → 3.5.0

package/package.json

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

package/src/cleanup.ts

@@ -68,6 +68,7 @@ export async function createManifest({
     metadata: {
       nodeVersion: process.version,
       platform: process.platform,
+      bundleHash: ctx.client.bundleHash,
       sdkVersions,
       packageManager,
       packageManagerVersion,

package/src/defineConfig.ts

@@ -77,6 +77,7 @@ export default ({
       errorFallbackComponent: errorFallbackComponent
         ? path.resolve(clientRoot, errorFallbackComponent)
         : undefined,
+      bundleHash: undefined, // This will be set by the build process
     },
     outputOptions: {
       typesEntryPointFilename: "embeddable-types-entry-point.js",

package/src/defineConfit.test.ts

@@ -0,0 +1,77 @@
+import defineConfig from "./defineConfig";
+import * as path from "node:path";
+import { existsSync } from "node:fs";
+
+vi.mock("node:path", async () => {
+  const actual = await vi.importActual("node:path");
+  return {
+    ...actual,
+    resolve: vi.fn(),
+  };
+});
+
+vi.mock("node:fs", () => ({
+  existsSync: vi.fn(),
+}));
+
+const baseConfigArgs = {
+  plugins: [],
+  pushBaseUrl: "pushBaseUrl",
+  audienceUrl: "audienceUrl",
+  authDomain: "authDomain",
+  authClientId: "authClientId",
+  errorFallbackComponent: "errorFallbackComponent",
+  applicationEnvironment: "applicationEnvironment",
+  rollbarAccessToken: "rollbarAccessToken",
+  previewBaseUrl: "previewBaseUrl",
+  modelsSrc: "modelsSrc",
+};
+
+describe("defineConfig", () => {
+  beforeEach(() => {
+    vi.mocked(existsSync).mockReturnValue(true);
+    const coreRoot = "/embeddable-sdk/packages/core-sdk";
+    vi.mocked(path.resolve).mockReturnValue(coreRoot);
+
+    vi.spyOn(process, "cwd").mockReturnValue(
+      "/embeddable-sdk/packages/core-sdk",
+    );
+  });
+
+  it("should return a config object", async () => {
+    const config = await defineConfig(baseConfigArgs);
+
+    expect(config).toMatchInlineSnapshot(`
+      {
+        "applicationEnvironment": "applicationEnvironment",
+        "audienceUrl": "audienceUrl",
+        "authClientId": "authClientId",
+        "authDomain": "authDomain",
+        "client": {
+          "archiveFile": "/embeddable-sdk/packages/core-sdk",
+          "buildDir": "/embeddable-sdk/packages/core-sdk",
+          "bundleHash": undefined,
+          "componentDir": "/embeddable-sdk/packages/core-sdk",
+          "errorFallbackComponent": "/embeddable-sdk/packages/core-sdk",
+          "modelsSrc": "/embeddable-sdk/packages/core-sdk",
+          "rootDir": "/embeddable-sdk/packages/core-sdk",
+          "srcDir": "/embeddable-sdk/packages/core-sdk",
+          "stencilBuild": "/embeddable-sdk/packages/core-sdk",
+          "tmpDir": "/embeddable-sdk/packages/core-sdk",
+        },
+        "core": {
+          "configsDir": "/embeddable-sdk/packages/core-sdk",
+          "rootDir": "/embeddable-sdk/packages/core-sdk",
+          "templatesDir": "/embeddable-sdk/packages/core-sdk",
+        },
+        "outputOptions": {
+          "typesEntryPointFilename": "embeddable-types-entry-point.js",
+        },
+        "plugins": [],
+        "previewBaseUrl": "previewBaseUrl",
+        "pushBaseUrl": "pushBaseUrl",
+        "rollbarAccessToken": "rollbarAccessToken",
+      }
+    `);
+  });
+});

package/src/dev.ts

@@ -233,7 +233,10 @@ const sendDataModelsAndSecurityContextsChanges = async (ctx: any) => {
     const sending = ora(
       "Synchronising data models and/or security contexts...",
     ).start();
-    const filesList = await findFiles(ctx.client.srcDir, YAML_OR_JS_FILES);
+    const filesList = await findFiles(
+      ctx.client.modelsSrc || ctx.client.srcDir,
+      YAML_OR_JS_FILES,
+    );
     await archive(ctx, filesList, false);
     await sendBuild(ctx, { workspaceId: previewWorkspace, token });
     sending.succeed(`Data models and/or security context synchronized`);

package/src/generate.test.ts

@@ -0,0 +1,115 @@
+import generate from "./generate";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+import { checkNodeVersion } from "./utils";
+import { loadConfig, createCompiler } from "@stencil/core/compiler";
+import { findFiles, getContentHash } from "@embeddable.com/sdk-utils";
+
+const config = {
+  client: {
+    rootDir: "rootDir",
+    srcDir: "srcDir",
+    buildDir: "buildDir",
+    tmpDir: "tmpDir",
+    stencilBuild: "stencilBuild",
+    componentDir: "componentDir",
+  },
+  core: {
+    rootDir: "rootDir",
+    templatesDir: "templatesDir",
+    configsDir: "configsDir",
+  },
+  "sdk-react": {
+    rootDir: "rootDir",
+    templatesDir: "templatesDir",
+    configsDir: "configsDir",
+    outputOptions: {
+      buildName: "buildName",
+    },
+  },
+};
+
+vi.mock("@embeddable.com/sdk-utils", () => ({
+  getContentHash: vi.fn(),
+  findFiles: vi.fn(),
+}));
+
+vi.mock("./utils", () => ({
+  checkNodeVersion: vi.fn(),
+}));
+
+vi.mock("./provideConfig", () => ({
+  provideConfig: vi.fn().mockResolvedValue(config),
+}));
+
+vi.mock("node:fs/promises", () => ({
+  writeFile: vi.fn(),
+  readdir: vi.fn(),
+  readFile: vi.fn(),
+  rename: vi.fn(),
+  cp: vi.fn(),
+  rm: vi.fn(),
+}));
+
+vi.mock("node:path", async () => {
+  const actual = await vi.importActual("node:path");
+  return {
+    ...actual,
+    resolve: vi.fn(),
+    join: vi.fn(),
+  };
+});
+
+vi.mock("@stencil/core/compiler", () => ({
+  createCompiler: vi.fn(),
+  loadConfig: vi.fn(),
+}));
+
+describe("generate", () => {
+  beforeEach(() => {
+    vi.mocked(checkNodeVersion).mockResolvedValue(true);
+    vi.mocked(fs.readdir).mockResolvedValue([
+      "embeddable-wrapper.esm.js",
+      "embeddable-wrapper.esm.js.map",
+      "styles.css",
+    ] as any);
+    vi.mocked(path.resolve).mockImplementation((...args) => args.join("/"));
+    vi.mocked(fs.readFile).mockResolvedValue("");
+    vi.mocked(loadConfig).mockResolvedValue({
+      config: {},
+    } as any);
+    vi.mocked(createCompiler).mockResolvedValue({
+      build: vi.fn(),
+      destroy: vi.fn(),
+    } as any);
+
+    vi.mocked(getContentHash).mockReturnValue("hash");
+    vi.mocked(findFiles).mockResolvedValue([["", ""]]);
+
+    Object.defineProperties(process, {
+      chdir: {
+        value: vi.fn(),
+      },
+    });
+  });
+
+  it("should generate bundle", async () => {
+    await generate(config, "sdk-react");
+
+    // should inject css
+    expect(fs.writeFile).toHaveBeenCalledWith("componentDir/style.css", "");
+
+    // should inject bundle renderer
+    expect(fs.writeFile).toHaveBeenCalledWith("componentDir/component.tsx", "");
+
+    expect(loadConfig).toHaveBeenCalled();
+
+    expect(createCompiler).toHaveBeenCalledWith({});
+
+    // check if the file is renamed
+    expect(fs.rename).toHaveBeenCalledWith(
+      "stencilBuild/embeddable-wrapper.esm.js",
+      "stencilBuild/embeddable-wrapper.esm-hash.js",
+    );
+  });
+});

package/src/generate.ts

@@ -2,13 +2,16 @@ import * as fs from "node:fs/promises";
 import * as path from "node:path";
 import { createNodeLogger, createNodeSys } from "@stencil/core/sys/node";
 import { createCompiler, loadConfig } from "@stencil/core/compiler";
-import { getContentHash } from "@embeddable.com/sdk-utils";
+import { findFiles, getContentHash } from "@embeddable.com/sdk-utils";
 
 const sorcery = require("sorcery");
 
 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";
+
 export default async (ctx: any, pluginName: string) => {
   await injectCSS(ctx, pluginName);
 
@@ -48,17 +51,51 @@ async function injectCSS(ctx: any, pluginName: string) {
 async function injectBundleRender(ctx: any, pluginName: string) {
   const importStr = `import render from '../${ctx[pluginName].outputOptions.buildName}/${ctx[pluginName].outputOptions.fileName}';`;
 
-  const content = await fs.readFile(
+  let content = await fs.readFile(
     path.resolve(ctx.core.templatesDir, "component.tsx.template"),
     "utf8",
   );
 
+  if (!!ctx.dev) {
+    content = content.replace(COMPONENT_TAG_TOKEN, "embeddable-component");
+  }
+
   await fs.writeFile(
     path.resolve(ctx.client.componentDir, "component.tsx"),
     content.replace(RENDER_IMPORT_TOKEN, importStr),
   );
 }
 
+async function addComponentTagName(filePath: string, bundleHash: string) {
+  // find entry file with a name *.entry.js
+  const entryFiles = await findFiles(path.dirname(filePath), /.*\.entry\.js/);
+
+  if (!entryFiles.length) {
+    return;
+  }
+
+  const entryFileName = entryFiles[0];
+  const [entryFileContent, fileContent] = await Promise.all([
+    fs.readFile(entryFileName[1], "utf8"),
+    fs.readFile(filePath, "utf8"),
+  ]);
+
+  const newFileContent = fileContent.replace(
+    COMPONENT_TAG_TOKEN,
+    `embeddable-component-${bundleHash}`,
+  );
+
+  const newEntryFileContent = entryFileContent.replace(
+    COMPONENT_TAG_TOKEN.replaceAll("-", "_"),
+    `embeddable_component_${bundleHash}`,
+  );
+
+  await Promise.all([
+    fs.writeFile(filePath, newFileContent),
+    fs.writeFile(entryFileName[1], newEntryFileContent),
+  ]);
+}
+
 async function runStencil(ctx: any) {
   const logger = ctx.dev?.logger || createNodeLogger({ process });
   const sys = ctx.dev?.sys || createNodeSys({ process });
@@ -95,12 +132,17 @@ async function runStencil(ctx: any) {
   );
 
   let fileName = "embeddable-wrapper.esm.js";
+
   if (!ctx.dev?.watch) {
     const entryFileContent = await fs.readFile(entryFilePath, "utf8");
 
     const fileHash = getContentHash(entryFileContent);
 
     fileName = `embeddable-wrapper.esm-${fileHash}.js`;
+
+    ctx.client.bundleHash = fileHash;
+
+    await addComponentTagName(entryFilePath, ctx.client.bundleHash);
   }
 
   await fs.rename(

package/src/rollbar.mjs

@@ -1,10 +1,9 @@
-import * as path from "path";
-import Rollbar from 'rollbar';
+import * as path from "node:path";
+import Rollbar from "rollbar";
 import provideConfig from "./provideConfig";
-import fs from "node:fs/promises";
-import {CREDENTIALS_FILE} from "./credentials";
-import {jwtDecode} from "jwt-decode";
-
+import * as fs from "node:fs/promises";
+import { CREDENTIALS_FILE } from "./credentials";
+import { jwtDecode } from "jwt-decode";
 
 const reportErrorToRollbar = async (error) => {
   const config = await provideConfig();
@@ -19,31 +18,33 @@ const reportErrorToRollbar = async (error) => {
     },
   });
 
-  const userData = await getUserData()
+  const userData = await getUserData();
+
+  const sdkPackageVersion = await getSdkPackageVersionInfo(config);
 
   rollbar.configure({
     payload: {
-        person: {
-            id: userData.globalUserId
-        }
-    }
-  })
+      person: {
+        id: userData.globalUserId,
+      },
+    },
+  });
 
-  rollbar.error(error, {
+  return rollbar.error(error, {
     custom: {
-      code_version: getSdkPackageVersionInfo(config)
+      code_version: sdkPackageVersion,
     },
   });
 };
 
-const getSdkPackageVersionInfo = (config) => {
+const getSdkPackageVersionInfo = async (config) => {
   try {
     const packageJsonFilePath = path.resolve(
       config.client.rootDir,
       "package.json",
     );
 
-    const packageJson = require(packageJsonFilePath);
+    const packageJson = await import(packageJsonFilePath);
     const devDependencies = packageJson.devDependencies;
     const dependencies = packageJson.dependencies;
 
@@ -52,15 +53,31 @@ const getSdkPackageVersionInfo = (config) => {
     };
 
     const packageVersionInfo = {
-      core: getDependencyVersion("@embeddable.com/core", dependencies, devDependencies),
-      sdk_core: getDependencyVersion("@embeddable.com/sdk-core", dependencies, devDependencies),
-      react: getDependencyVersion("@embeddable.com/react", dependencies, devDependencies),
-      sdk_react: getDependencyVersion("@embeddable.com/sdk-react", dependencies, devDependencies),
+      core: getDependencyVersion(
+        "@embeddable.com/core",
+        dependencies,
+        devDependencies,
+      ),
+      sdk_core: getDependencyVersion(
+        "@embeddable.com/sdk-core",
+        dependencies,
+        devDependencies,
+      ),
+      react: getDependencyVersion(
+        "@embeddable.com/react",
+        dependencies,
+        devDependencies,
+      ),
+      sdk_react: getDependencyVersion(
+        "@embeddable.com/sdk-react",
+        dependencies,
+        devDependencies,
+      ),
     };
 
     return JSON.stringify(packageVersionInfo);
   } catch (e) {
-    console.warn("Could not get SDK package version info", e)
+    console.warn("Could not get SDK package version info", e);
     return "unknown";
   }
 };
@@ -68,8 +85,8 @@ const getSdkPackageVersionInfo = (config) => {
 export async function getUserData() {
   try {
     const token = await fs
-        .readFile(CREDENTIALS_FILE)
-        .then((data) => JSON.parse(data.toString()));
+      .readFile(CREDENTIALS_FILE)
+      .then((data) => JSON.parse(data.toString()));
 
     const decodedToken = jwtDecode(token.access_token);
 

package/src/rollbar.test.ts

@@ -0,0 +1,87 @@
+//  @ts-ignore
+import reportErrorToRollbar from "./rollbar.mjs";
+import provideConfig from "./provideConfig";
+import Rollbar from "rollbar";
+import * as path from "node:path";
+import * as fs from "node:fs/promises";
+import { jwtDecode } from "jwt-decode";
+import { readFile } from "node:fs";
+
+const config = {
+  applicationEnvironment: "test",
+  client: {
+    rootDir: "rootDir",
+  },
+};
+
+vi.mock("node:fs/promises", () => ({
+  writeFile: vi.fn(),
+  readFile: vi.fn(),
+}));
+
+vi.mock("./provideConfig", () => ({
+  default: vi.fn(),
+}));
+
+vi.mock("jwt-decode", () => ({
+  jwtDecode: vi.fn(),
+}));
+
+vi.mock("node:path", async () => {
+  const actual = await vi.importActual("path");
+  return {
+    ...actual,
+    resolve: vi.fn(),
+  };
+});
+
+// mock rollback constructor
+vi.mock("rollbar", () => ({
+  default: vi.fn(),
+}));
+
+vi.mock("resolvedPath", () => ({
+  default: vi.fn(),
+  devDependencies: {
+    "@embeddable.com/sdk-utils": "0.1.2",
+  },
+  dependencies: {
+    "@embeddable.com/core": "1.0.0",
+    "@embeddable.com/sdk-core": "1.2.3",
+  },
+}));
+
+const rollbarInstanceMock = {
+  error: vi.fn(),
+  configure: vi.fn(),
+};
+
+describe("rollbar", () => {
+  beforeEach(() => {
+    vi.mocked(provideConfig).mockResolvedValue(config);
+    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" });
+  });
+
+  it("should call Rollbar.error with the error", async () => {
+    const error = new Error("test error");
+    await reportErrorToRollbar(error);
+
+    expect(rollbarInstanceMock.configure).toHaveBeenCalledWith({
+      payload: {
+        person: {
+          id: "iss@test",
+        },
+      },
+    });
+
+    expect(rollbarInstanceMock.error).toHaveBeenCalledWith(error, {
+      custom: {
+        code_version: '{"core":"1.0.0","sdk_core":"1.2.3"}',
+      },
+    });
+  });
+});

package/templates/component.tsx.template

@@ -2,7 +2,7 @@ import { Component, Watch, Host, Prop, Event, EventEmitter, h, Listen } from '@s
 {{RENDER_IMPORT}}
 
 @Component({
-  tag: 'embeddable-component',
+  tag: 'replace-this-with-component-name', 
   styleUrl: './style.css',
   shadow: true,
 })