@embeddable.com/sdk-core 3.9.4 → 3.9.6

package/lib/push.d.ts

@@ -1,4 +1,5 @@
-export declare const YAML_OR_JS_FILES: RegExp;
+export declare const CUBE_FILES: RegExp;
+export declare const PRESET_FILES: RegExp;
 declare const _default: () => Promise<void>;
 export default _default;
 export declare function archive(ctx: any, yamlFiles: [string, string][], isDev?: boolean): Promise<unknown>;

package/lib/validate.d.ts

@@ -2,3 +2,4 @@ declare const _default: (ctx: any, exitIfInvalid?: boolean) => Promise<boolean>;
 export default _default;
 export declare function dataModelsValidation(filesList: [string, string][]): Promise<string[]>;
 export declare function securityContextValidation(filesList: [string, string][]): Promise<string[]>;
+export declare function clientContextValidation(filesList: [string, string][]): Promise<string[]>;

package/package.json

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

package/src/defineConfig.test.ts

@@ -25,6 +25,7 @@ const baseConfigArgs = {
   rollbarAccessToken: "rollbarAccessToken",
   previewBaseUrl: "previewBaseUrl",
   modelsSrc: "modelsSrc",
+  presetsSrc: "presetsSrc",
 };
 
 describe("defineConfig", () => {
@@ -55,6 +56,7 @@ describe("defineConfig", () => {
           "errorFallbackComponent": "/embeddable-sdk/packages/core-sdk",
           "globalCss": "/embeddable-sdk/packages/core-sdk",
           "modelsSrc": "/embeddable-sdk/packages/core-sdk",
+          "presetsSrc": "/embeddable-sdk/packages/core-sdk",
           "rollupOptions": {},
           "rootDir": "/embeddable-sdk/packages/core-sdk",
           "srcDir": "/embeddable-sdk/packages/core-sdk",

package/src/defineConfig.ts

@@ -19,6 +19,7 @@ export type EmbeddableConfig = {
   previewBaseUrl?: string;
   componentsSrc?: string;
   modelsSrc?: string;
+  presetsSrc?: string;
   globalCss?: string;
   viteConfig?: {
     resolve?: {
@@ -39,6 +40,7 @@ export default ({
   rollbarAccessToken,
   previewBaseUrl,
   modelsSrc = "src",
+  presetsSrc = "src",
   componentsSrc = "src",
   globalCss = "src/global.css",
   viteConfig = {},
@@ -65,6 +67,14 @@ export default ({
     }
   }
 
+  if (presetsSrc && !path.isAbsolute(presetsSrc)) {
+    presetsSrc = path.resolve(clientRoot, presetsSrc);
+
+    if (!existsSync(presetsSrc)) {
+      throw new Error(`presetsSrc directory ${presetsSrc} does not exist`);
+    }
+  }
+
   return {
     core: {
       rootDir: coreRoot,
@@ -75,6 +85,7 @@ export default ({
       rootDir: clientRoot,
       srcDir: path.resolve(clientRoot, componentsSrc),
       modelsSrc: modelsSrc ? path.resolve(clientRoot, modelsSrc) : undefined,
+      presetsSrc: presetsSrc ? path.resolve(clientRoot, presetsSrc) : undefined,
       buildDir: path.resolve(clientRoot, ".embeddable-build"),
       tmpDir: path.resolve(clientRoot, ".embeddable-tmp"),
       globalCss: path.resolve(clientRoot, globalCss),

package/src/dev.test.ts

@@ -46,6 +46,7 @@ const mockConfig = {
     tmpDir: "/mock/root/.embeddable-dev-tmp",
     globalCss: "/mock/root/global.css",
     modelsSrc: "/mock/root/models",
+    presetsSrc: "/mock/root/presets",
   },
   plugins: [],
   previewBaseUrl: "http://preview.example.com",

package/src/dev.ts

@@ -21,7 +21,7 @@ import { FSWatcher } from "chokidar";
 import { getToken, default as login } from "./login";
 import axios from "axios";
 import { findFiles } from "@embeddable.com/sdk-utils";
-import { archive, YAML_OR_JS_FILES, sendBuild } from "./push";
+import { archive, PRESET_FILES, CUBE_FILES, sendBuild } from "./push";
 import validate from "./validate";
 import { checkNodeVersion } from "./utils";
 import { createManifest } from "./cleanup";
@@ -191,7 +191,7 @@ export default async () => {
         editorsMetaFileName: "embeddable-editors-meta.js",
       });
 
-      await sendDataModelsAndSecurityContextsChanges(config);
+      await sendDataModelsAndContextsChanges(config);
 
       for (const getPlugin of config.plugins) {
         const plugin = getPlugin();
@@ -274,11 +274,14 @@ const onBundleBuildEnd = async (ctx: any) => {
 
 const dataModelAndSecurityContextWatcher = (ctx: any): FSWatcher => {
   const fsWatcher = chokidar.watch(
-    [path.resolve(ctx.client.modelsSrc, "**/*.{cube,sc}.{yaml,yml,js}")],
+    [
+      path.resolve(ctx.client.modelsSrc, "**/*.{cube}.{yaml,yml,js}"),
+      path.resolve(ctx.client.presetsSrc, "**/*.{sc,cc}.{yaml,yml}"),
+    ],
     chokidarWatchOptions,
   );
   fsWatcher.on("all", async () => {
-    await sendDataModelsAndSecurityContextsChanges(ctx);
+    await sendDataModelsAndContextsChanges(ctx);
   });
 
   return fsWatcher;
@@ -294,7 +297,7 @@ const globalCssWatcher = (ctx: any): FSWatcher => {
   return fsWatcher;
 };
 
-const sendDataModelsAndSecurityContextsChanges = async (ctx: any) => {
+const sendDataModelsAndContextsChanges = async (ctx: any) => {
   sendMessage("dataModelsAndOrSecurityContextUpdateStart");
   const isValid = await validate(ctx, false);
   if (isValid) {
@@ -302,7 +305,13 @@ const sendDataModelsAndSecurityContextsChanges = async (ctx: any) => {
     const sending = ora(
       "Synchronising data models and/or security contexts...",
     ).start();
-    const filesList = await findFiles(ctx.client.modelsSrc, YAML_OR_JS_FILES);
+    const cubeFilesList = await findFiles(ctx.client.modelsSrc, CUBE_FILES);
+    const contextFilesList = await findFiles(
+      ctx.client.presetsSrc,
+      PRESET_FILES,
+    );
+
+    const filesList = [...cubeFilesList, ...contextFilesList];
 
     // add manifest to the archive
     filesList.push([

package/src/push.ts

@@ -15,8 +15,11 @@ import { getToken } from "./login";
 import { checkBuildSuccess, checkNodeVersion, getArgumentByKey } from "./utils";
 import { selectWorkspace } from "./workspaceUtils";
 
-// grab .cube.yml|js and .sc.yml|js files
-export const YAML_OR_JS_FILES = /^(.*)\.(cube|sc)\.(ya?ml|js)$/;
+// grab cube files
+export const CUBE_FILES = /^(.*)\.cube\.(ya?ml|js)$/;
+
+// grab security context and client context files
+export const PRESET_FILES = /^(.*)\.(sc|cc)\.ya?ml$/;
 
 let ora: any;
 export default async () => {
@@ -134,12 +137,17 @@ async function verify(ctx: any) {
 async function buildArchive(config: any) {
   const spinnerArchive = ora("Building...").start();
 
-  const filesList = await findFiles(
+  const cubeFilesList = await findFiles(
     config.client.modelsSrc || config.client.srcDir,
-    YAML_OR_JS_FILES,
+    CUBE_FILES,
+  );
+
+  const contextFilesList = await findFiles(
+    config.client.presetsSrc || config.client.srcDir,
+    PRESET_FILES,
   );
 
-  await archive(config, filesList);
+  await archive(config, [...cubeFilesList, ...contextFilesList]);
   return spinnerArchive.succeed("Bundling completed");
 }
 

package/src/validate.test.ts

@@ -1,4 +1,8 @@
-import { dataModelsValidation, securityContextValidation } from "./validate";
+import {
+  clientContextValidation,
+  dataModelsValidation,
+  securityContextValidation,
+} from "./validate";
 import * as fs from "node:fs/promises";
 
 const startMock = {
@@ -35,6 +39,11 @@ const securityContextYaml = `
     country: United States
   environment: default`;
 
+const clientContextYaml = `
+- name: blue
+  clientContext:
+    color: blue`;
+
 vi.mock("ora", () => ({
   default: () => ({
     start: vi.fn().mockImplementation(() => startMock),
@@ -121,4 +130,30 @@ describe("validate", () => {
       ]);
     });
   });
+
+  describe("clientContextValidation", () => {
+    it("should return an empty array if the client context is valid", async () => {
+      vi.mocked(fs.readFile).mockImplementation(async () => {
+        return clientContextYaml;
+      });
+      const filesList: [string, string][] = [
+        ["valid-client-context.json", "path/to/file"],
+      ];
+      const result = await clientContextValidation(filesList);
+      expect(result).toEqual([]);
+    });
+
+    it("should return an array of error messages if the client context is invalid", async () => {
+      vi.mocked(fs.readFile).mockImplementation(async () => {
+        return `${clientContextYaml} ${clientContextYaml}`;
+      });
+      const filesList: [string, string][] = [
+        ["invalid-client-context.json", "path/to/file"],
+      ];
+      const result = await clientContextValidation(filesList);
+      expect(result).toEqual([
+        'path/to/file: client context with name "blue" already exists',
+      ]);
+    });
+  });
 });

package/src/validate.ts

@@ -6,6 +6,7 @@ import { checkNodeVersion } from "./utils";
 
 const CUBE_YAML_FILE_REGEX = /^(.*)\.cube\.ya?ml$/;
 const SECURITY_CONTEXT_FILE_REGEX = /^(.*)\.sc\.ya?ml$/;
+const CLIENT_CONTEXT_FILE_REGEX = /^(.*)\.cc\.ya?ml$/;
 
 export default async (ctx: any, exitIfInvalid = true) => {
   checkNodeVersion();
@@ -13,13 +14,20 @@ export default async (ctx: any, exitIfInvalid = true) => {
 
   const spinnerValidate = ora("Data model validation...").start();
 
-  const filesList = await findFiles(ctx.client.srcDir, CUBE_YAML_FILE_REGEX);
-  const securityContextFilesList = await findFiles(
+  const cubeFilesList = await findFiles(
     ctx.client.modelsSrc || ctx.client.srcDir,
+    CUBE_YAML_FILE_REGEX,
+  );
+  const securityContextFilesList = await findFiles(
+    ctx.client.presetsSrc || ctx.client.srcDir,
     SECURITY_CONTEXT_FILE_REGEX,
   );
+  const clientContextFilesList = await findFiles(
+    ctx.client.presetsSrc || ctx.client.srcDir,
+    CLIENT_CONTEXT_FILE_REGEX,
+  );
 
-  const dataModelErrors = await dataModelsValidation(filesList);
+  const dataModelErrors = await dataModelsValidation(cubeFilesList);
 
   if (dataModelErrors.length) {
     spinnerValidate.fail("One or more cube.yaml files are invalid:");
@@ -39,6 +47,10 @@ export default async (ctx: any, exitIfInvalid = true) => {
     securityContextFilesList,
   );
 
+  const clientContextErrors = await clientContextValidation(
+    clientContextFilesList,
+  );
+
   if (securityContextErrors.length) {
     spinnerValidate.fail("One or more security context files are invalid:");
 
@@ -51,7 +63,23 @@ export default async (ctx: any, exitIfInvalid = true) => {
     }
   }
 
-  return dataModelErrors.length === 0 && securityContextErrors.length === 0;
+  if (clientContextErrors.length) {
+    spinnerValidate.fail("One or more client context files are invalid:");
+
+    clientContextErrors.forEach((errorMessage) =>
+      spinnerValidate.info(errorMessage),
+    );
+
+    if (exitIfInvalid) {
+      process.exit(1);
+    }
+  }
+
+  return (
+    dataModelErrors.length === 0 &&
+    securityContextErrors.length === 0 &&
+    clientContextErrors.length === 0
+  );
 };
 
 export async function dataModelsValidation(filesList: [string, string][]) {
@@ -118,6 +146,36 @@ export async function securityContextValidation(filesList: [string, string][]) {
   return errors;
 }
 
+export async function clientContextValidation(filesList: [string, string][]) {
+  const errors: string[] = [];
+
+  const nameSet = new Set<string>();
+  for (const [_, filePath] of filesList) {
+    const fileContentRaw = await fs.readFile(filePath, "utf8");
+
+    const cube = YAML.parse(fileContentRaw);
+
+    cube.forEach((item: { name: string }) => {
+      if (nameSet.has(item.name)) {
+        errors.push(
+          `${filePath}: client context with name "${item.name}" already exists`,
+        );
+      } else {
+        nameSet.add(item.name);
+      }
+    });
+
+    const safeParse = clientContextSchema.safeParse(cube);
+    if (!safeParse.success) {
+      errorFormatter(safeParse.error.issues).forEach((error) => {
+        errors.push(`${filePath}: ${error}`);
+      });
+    }
+  }
+
+  return errors;
+}
+
 enum MeasureTypeEnum {
   string = "string",
   time = "time",
@@ -194,3 +252,10 @@ const securityContextSchema = z.array(
     securityContext: z.object({}), // can be any object
   }),
 );
+
+const clientContextSchema = z.array(
+  z.object({
+    name: z.string(),
+    clientContext: z.object({}), // can be any object
+  }),
+);

package/templates/component.tsx.template

@@ -13,6 +13,7 @@ export class EmbeddableComponent {
 
   @Prop() componentName: string;
   @Prop() props: string = '{}';
+  @Prop() clientContext: string = '{}';
 
   @Event({
     eventName: 'componentLoaded',
@@ -21,6 +22,7 @@ export class EmbeddableComponent {
     bubbles: true,
   }) componentDidLoadEvent: EventEmitter<any>;
 
+  @Watch('clientContext')
   @Watch('componentName')
   watchComponentName() {
     this.handlePops();
@@ -77,7 +79,8 @@ export class EmbeddableComponent {
     render(
       this.rootElement,
       this.componentName,
-      JSON.parse(this.props)
+      JSON.parse(this.props),
+      JSON.parse(this.clientContext)
     );
   }
 }