@embeddable.com/sdk-core 3.2.0-next.8 → 3.2.0

package/lib/push.d.ts

@@ -2,6 +2,11 @@ export declare const YAML_OR_JS_FILES: RegExp;
 declare const _default: () => Promise<void>;
 export default _default;
 export declare function archive(ctx: any, yamlFiles: [string, string][], includeBuild?: boolean): Promise<unknown>;
+export declare function sendBuildByApiKey(ctx: any, { apiKey, email, message }: any): Promise<{
+    bundleId: any;
+    email: any;
+    message: any;
+}>;
 export declare function sendBuild(ctx: any, { workspaceId, token }: {
     workspaceId: string;
     token: string;

package/lib/utils.d.ts

@@ -1 +1,8 @@
 export declare const checkNodeVersion: () => Promise<void>;
+/**
+ *  Get the value of a process argument by key
+ *  Example: getArgumentByKey("--email") or getArgumentByKey(["--email", "-e"])
+ * @param key  The key to search for in the process arguments
+ * @returns
+ */
+export declare const getArgumentByKey: (key: string | string[]) => string | undefined;

package/loader/custom-esm-loader.mjs

@@ -69,7 +69,7 @@ export const resolve = async (specifier, context, nextResolve) => {
   const isPackageImport =
     !specifier.startsWith(".") &&
     !specifier.startsWith("/") &&
-    !specifier.startsWith("C:");
+    !/^[A-Z]:/.test(specifier); // windows path
   // import/require from external library
   if (
     (context.parentURL.includes("/node_modules/") || isPackageImport) &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddable.com/sdk-core",
-  "version": "3.2.0-next.8",
+  "version": "3.2.0",
   "description": "Core Embeddable SDK module responsible for web-components bundling and publishing.",
   "keywords": [
     "embeddable",
@@ -40,7 +40,7 @@
     "@stencil/core": "^4.6.0",
     "@swc-node/register": "^1.9.0",
     "archiver": "^5.3.1",
-    "axios": "^1.4.0",
+    "axios": "^1.7.2",
     "chokidar": "^3.5.3",
     "finalhandler": "^1.2.0",
     "formdata-node": "^6.0.3",
@@ -50,7 +50,7 @@
     "serve-static": "^1.15.0",
     "sorcery": "^0.11.0",
     "vite": "^4.5.0",
-    "ws": "^8.16.0",
+    "ws": "^8.17.0",
     "yaml": "^2.3.3"
   },
   "lint-staged": {

package/src/buildTypes.ts

@@ -57,6 +57,11 @@ async function build(ctx: any) {
         formats: ["es"],
         fileName: "embeddable-types",
       },
+      rollupOptions: {
+        output: {
+          entryFileNames: "embeddable-types-[hash].js",
+        },
+      },
       outDir: ctx.client.buildDir,
     },
   });

package/src/cleanup.ts

@@ -1,3 +1,4 @@
+import { findFiles } from "@embeddable.com/sdk-utils";
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
 
@@ -10,24 +11,55 @@ export default async (ctx: any) => {
 };
 
 async function extractBuild(ctx: any) {
+  const [[, stencilWrapperFilePath]] = await findFiles(
+    ctx.client.stencilBuild,
+    /embeddable-wrapper.esm-[a-z0-9]+\.js/,
+  );
+
+  const stencilWrapperFileName = path.basename(stencilWrapperFilePath);
   await fs.rename(
     path.resolve(ctx.client.buildDir, ctx.client.stencilBuild),
     ctx.client.tmpDir,
   );
 
-  await fs.rename(
-    path.resolve(ctx.client.buildDir, "embeddable-types.js"),
-    path.join(ctx.client.tmpDir, "embeddable-types.js"),
+  const [[, typesFilePath]] = await findFiles(
+    ctx.client.buildDir,
+    /embeddable-types-[a-z0-9]+\.js/,
   );
 
-  await fs.rename(
-    path.resolve(ctx.client.buildDir, "embeddable-components-meta.js"),
-    path.join(ctx.client.tmpDir, "embeddable-components-meta.js"),
+  const typesFileName = path.basename(typesFilePath);
+  await fs.rename(typesFilePath, path.join(ctx.client.tmpDir, typesFileName));
+
+  const [[, metaFilePath]] = await findFiles(
+    ctx.client.buildDir,
+    /embeddable-components-meta-[a-z0-9]+\.js/,
   );
+  const metaFileName = path.basename(metaFilePath);
+  await fs.rename(metaFilePath, path.join(ctx.client.tmpDir, metaFileName));
 
+  const [[, editorsMetaFilePath]] = await findFiles(
+    ctx.client.buildDir,
+    /embeddable-editors-meta-[a-z0-9]+\.js/,
+  );
+  const editorsMetaFileName = path.basename(editorsMetaFilePath);
   await fs.rename(
-    path.resolve(ctx.client.buildDir, "embeddable-editors-meta.js"),
-    path.join(ctx.client.tmpDir, "embeddable-editors-meta.js"),
+    editorsMetaFilePath,
+    path.join(ctx.client.tmpDir, editorsMetaFileName),
+  );
+
+  // write manifest file with files with hash
+  const manifest = {
+    entryFiles: {
+      "embeddable-types.js": typesFileName,
+      "embeddable-components-meta.js": metaFileName,
+      "embeddable-editors-meta.js": editorsMetaFileName,
+      "embeddable-wrapper.esm.js": stencilWrapperFileName,
+    },
+  };
+
+  await fs.writeFile(
+    path.join(ctx.client.tmpDir, "embeddable-manifest.json"),
+    JSON.stringify(manifest),
   );
 }
 

package/src/defineConfig.ts

@@ -1,4 +1,5 @@
 import * as path from "node:path";
+import { existsSync } from "node:fs";
 
 export type EmbeddableConfig = {
   plugins: (() => {
@@ -15,6 +16,8 @@ export type EmbeddableConfig = {
   applicationEnvironment?: string;
   rollbarAccessToken?: string;
   previewBaseUrl?: string;
+  componentsSrc?: string;
+  modelsSrc?: string;
 };
 
 export default ({
@@ -27,10 +30,30 @@ export default ({
   applicationEnvironment,
   rollbarAccessToken,
   previewBaseUrl,
+  modelsSrc,
+  componentsSrc = "src",
 }: EmbeddableConfig) => {
   const coreRoot = path.resolve(__dirname, "..");
   const clientRoot = process.cwd();
 
+  if (!path.isAbsolute(componentsSrc)) {
+    componentsSrc = path.resolve(clientRoot, componentsSrc);
+
+    if (!existsSync(componentsSrc)) {
+      throw new Error(
+        `componentsSrc directory ${componentsSrc} does not exist`,
+      );
+    }
+  }
+
+  if (modelsSrc && !path.isAbsolute(modelsSrc)) {
+    modelsSrc = path.resolve(clientRoot, modelsSrc);
+
+    if (!existsSync(modelsSrc)) {
+      throw new Error(`modelsSrc directory ${modelsSrc} does not exist`);
+    }
+  }
+
   return {
     core: {
       rootDir: coreRoot,
@@ -39,8 +62,9 @@ export default ({
     },
     client: {
       rootDir: clientRoot,
+      srcDir: path.resolve(clientRoot, componentsSrc),
+      modelsSrc: modelsSrc ? path.resolve(clientRoot, modelsSrc) : undefined,
       buildDir: path.resolve(clientRoot, ".embeddable-build"),
-      srcDir: path.resolve(clientRoot, "src"),
       tmpDir: path.resolve(clientRoot, ".embeddable-tmp"),
       componentDir: path.resolve(clientRoot, ".embeddable-build", "component"),
       stencilBuild: path.resolve(

package/src/entryPoint.js

@@ -0,0 +1,12 @@
+const COMMANDS_MAP = require("../lib/index.js");
+
+async function main() {
+  const command = process.argv[2];
+  const runScript = COMMANDS_MAP[command];
+
+  if (!runScript) process.exit(1);
+
+  await runScript();
+}
+
+main();

package/src/generate.ts

@@ -2,6 +2,7 @@ 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";
 
 const sorcery = require("sorcery");
 
@@ -63,12 +64,15 @@ async function runStencil(ctx: any) {
   const sys = ctx.dev?.sys || createNodeSys({ process });
   const devMode = !!ctx.dev;
 
+  const isWindows = process.platform === "win32";
+
   const validated = await loadConfig({
     initTsConfig: true,
     logger,
     sys,
     config: {
       devMode,
+      maxConcurrentWorkers: isWindows ? 0 : 8, // workers break on windows
       rootDir: ctx.client.buildDir,
       configPath: path.resolve(ctx.client.buildDir, "stencil.config.ts"),
       tsconfig: path.resolve(ctx.client.buildDir, "tsconfig.json"),
@@ -85,6 +89,19 @@ async function runStencil(ctx: any) {
   const compiler = await createCompiler(validated.config);
 
   await compiler.build();
+  const entryFilePath = path.resolve(
+    ctx.client.stencilBuild,
+    "embeddable-wrapper.esm.js",
+  );
+  const entryFileContent = await fs.readFile(entryFilePath, "utf8");
+
+  const fileHash = getContentHash(entryFileContent);
+
+  const newFileName = `embeddable-wrapper.esm-${fileHash}.js`;
+  await fs.rename(
+    entryFilePath,
+    path.resolve(ctx.client.stencilBuild, newFileName),
+  );
 
   await compiler.destroy();
   process.chdir(ctx.client.rootDir);

package/src/prepare.ts

@@ -12,6 +12,8 @@ export default async (ctx: any) => {
 export async function removeIfExists(ctx: any) {
   if (fsSync.existsSync(ctx.client.buildDir))
     await fs.rm(ctx.client.buildDir, { recursive: true });
+  if (fsSync.existsSync(ctx.client.tmpDir))
+    await fs.rm(ctx.client.tmpDir, { recursive: true });
 }
 
 async function copyStencilConfigsToClient(ctx: any) {

package/src/push.ts

@@ -10,7 +10,7 @@ import reportErrorToRollbar from "./rollbar.mjs";
 
 import { findFiles } from "@embeddable.com/sdk-utils";
 import { getToken } from "./login";
-import { checkNodeVersion } from "./utils";
+import { checkNodeVersion, getArgumentByKey } from "./utils";
 
 // grab .cube.yml|js and .sc.yml|js files
 export const YAML_OR_JS_FILES = /^(.*)\.(cube|sc)\.(ya?ml|js)$/;
@@ -25,6 +25,15 @@ export default async () => {
 
     const config = await provideConfig();
 
+    if (process.argv.includes("--api-key") || process.argv.includes("-k")) {
+      spinnerPushing = ora("Using API key...").start();
+      await pushByApiKey(config, spinnerPushing);
+
+      spinnerPushing.succeed("Published using API key");
+
+      return;
+    }
+
     const token = await verify(config);
 
     const { workspaceId, name: workspaceName } = await selectWorkspace(
@@ -32,29 +41,59 @@ export default async () => {
       token,
     );
 
-    const spinnerArchive = ora("Building...").start();
-
-    const filesList = await findFiles(config.client.srcDir, YAML_OR_JS_FILES);
-
-    await archive(config, filesList);
-    spinnerArchive.succeed("Bundling completed");
+    const workspacePreviewUrl = `${config.previewBaseUrl}/workspace/${workspaceId}`;
 
+    await buildArchive(config);
     spinnerPushing = ora(
-      `Publishing to ${workspaceName} using ${config.pushBaseUrl}...`,
+      `Publishing to ${workspaceName} using ${workspacePreviewUrl}...`,
     ).start();
 
     await sendBuild(config, { workspaceId, token });
     spinnerPushing.succeed(
-      `Published to ${workspaceName} using ${config.pushBaseUrl}`,
+      `Published to ${workspaceName} using ${workspacePreviewUrl}`,
     );
   } catch (error: any) {
     spinnerPushing?.fail("Publishing failed");
-    console.error(error.response?.data || error?.message || error);
+    if (error.response?.statusText === "Unauthorized") {
+      console.error("Unauthorized. Please check your credentials.");
+    } else {
+      console.error(error.response?.data || error?.message || error);
+    }
+
     await reportErrorToRollbar(error);
     process.exit(1);
   }
 };
 
+async function pushByApiKey(config: any, spinner: any) {
+  const apiKey = getArgumentByKey(["--api-key", "-k"]);
+
+  if (!apiKey) {
+    spinner.fail("No API key provided");
+    process.exit(1);
+  }
+
+  const email = getArgumentByKey(["--email", "-e"]);
+
+  if (!email || !/\S+@\S+\.\S+/.test(email)) {
+    spinner.fail(
+      "Invalid email provided. Please provide a valid email using --email (-e) flag",
+    );
+    process.exit(1);
+  }
+
+  // message is optional
+  const message = getArgumentByKey(["--message", "-m"]);
+
+  await buildArchive(config);
+
+  return sendBuildByApiKey(config, {
+    apiKey,
+    email,
+    message,
+  });
+}
+
 async function selectWorkspace(ctx: any, token: string) {
   const workspaceSpinner = ora({
     text: `Fetching workspaces using ${ctx.pushBaseUrl}...`,
@@ -112,6 +151,18 @@ async function verify(ctx: any) {
   return token;
 }
 
+async function buildArchive(config: any) {
+  const spinnerArchive = ora("Building...").start();
+
+  const filesList = await findFiles(
+    config.client.modelsSrc || config.client.srcDir,
+    YAML_OR_JS_FILES,
+  );
+
+  await archive(config, filesList);
+  return spinnerArchive.succeed("Bundling completed");
+}
+
 export async function archive(
   ctx: any,
   yamlFiles: [string, string][],
@@ -143,6 +194,37 @@ export async function archive(
   });
 }
 
+export async function sendBuildByApiKey(
+  ctx: any,
+  { apiKey, email, message }: any,
+) {
+  const { FormData, Blob } = await import("formdata-node");
+  const { fileFromPath } = await import("formdata-node/file-from-path");
+
+  const file = await fileFromPath(
+    ctx.client.archiveFile,
+    "embeddable-build.zip",
+  );
+
+  const form = new FormData();
+  form.set("file", file, "embeddable-build.zip");
+
+  const metadataBlob = new Blob(
+    [JSON.stringify({ authorEmail: email, description: message })],
+    { type: "application/json" },
+  );
+  form.set("metadata", metadataBlob, "metadata.json");
+
+  const response = await uploadFile(
+    form,
+    `${ctx.pushBaseUrl}/api/v1/bundle/upload`,
+    apiKey,
+  );
+  await fs.rm(ctx.client.archiveFile);
+
+  return { bundleId: response.data?.bundleId, email, message };
+}
+
 export async function sendBuild(
   ctx: any,
   { workspaceId, token }: { workspaceId: string; token: string },
@@ -158,7 +240,17 @@ export async function sendBuild(
   const form = new FormData();
   form.set("file", file, "embeddable-build.zip");
 
-  await axios.post(`${ctx.pushBaseUrl}/bundle/${workspaceId}/upload`, form, {
+  await uploadFile(
+    form,
+    `${ctx.pushBaseUrl}/bundle/${workspaceId}/upload`,
+    token,
+  );
+
+  await fs.rm(ctx.client.archiveFile);
+}
+
+async function uploadFile(formData: any, url: string, token: string) {
+  return axios.post(url, formData, {
     headers: {
       "Content-Type": "multipart/form-data",
       Authorization: `Bearer ${token}`,
@@ -166,8 +258,6 @@ export async function sendBuild(
     maxContentLength: Infinity,
     maxBodyLength: Infinity,
   });
-
-  await fs.rm(ctx.client.archiveFile);
 }
 
 async function getWorkspaces(ctx: any, token: string, workspaceSpinner: any) {

package/src/utils.ts

@@ -22,3 +22,25 @@ export const checkNodeVersion = async () => {
     process.exit(1);
   }
 };
+
+/**
+ *  Get the value of a process argument by key
+ *  Example: getArgumentByKey("--email") or getArgumentByKey(["--email", "-e"])
+ * @param key  The key to search for in the process arguments
+ * @returns
+ */
+export const getArgumentByKey = (key: string | string[]) => {
+  if (Array.isArray(key)) {
+    for (const k of key) {
+      if (process.argv.includes(k)) {
+        const index = process.argv.indexOf(k);
+        return index !== -1 ? process.argv[index + 1] : undefined;
+      }
+    }
+
+    return undefined;
+  }
+
+  const index = process.argv.indexOf(key);
+  return index !== -1 ? process.argv[index + 1] : undefined;
+};

package/src/validate.ts

@@ -28,7 +28,7 @@ export default async (ctx: any, exitIfInvalid = true) => {
 
   const filesList = await findFiles(ctx.client.srcDir, CUBE_YAML_FILE_REGEX);
   const securityContextFilesList = await findFiles(
-    ctx.client.srcDir,
+    ctx.client.modelsSrc || ctx.client.srcDir,
     SECURITY_CONTEXT_FILE_REGEX,
   );
 
@@ -75,9 +75,21 @@ export async function dataModelsValidation(filesList: [string, string][]) {
 
     const cube = YAML.parse(fileContentRaw);
 
-    const safeParse = cubeModelSchema.safeParse(cube);
-    if (!safeParse.success) {
-      errorFormatter(safeParse.error.issues).forEach((error) => {
+    if (!cube?.cubes && !cube?.views) {
+      return [`${filePath}: At least one cubes or views must be defined`];
+    }
+
+    const cubeModelSafeParse = cubeModelSchema.safeParse(cube);
+    const viewModelSafeParse = viewModelSchema.safeParse(cube);
+
+    if (cube.cubes && !cubeModelSafeParse.success) {
+      errorFormatter(cubeModelSafeParse.error.issues).forEach((error) => {
+        errors.push(`${filePath}: ${error}`);
+      });
+    }
+
+    if (cube.views && !viewModelSafeParse.success) {
+      errorFormatter(viewModelSafeParse.error.issues).forEach((error) => {
         errors.push(`${filePath}: ${error}`);
       });
     }
@@ -172,6 +184,20 @@ const cubeModelSchema = z
     },
   );
 
+const viewModelSchema = z.object({
+  views: z
+    .object({
+      name: z.string(),
+      cubes: z
+        .object({
+          join_path: z.string(),
+        })
+        .array(),
+    })
+    .array()
+    .min(1),
+});
+
 const securityContextSchema = z.array(
   z.object({
     name: z.string(),

package/templates/component.tsx.template

@@ -1,4 +1,4 @@
-import { Component, Watch, Host, Prop, Event, EventEmitter, h } from '@stencil/core';
+import { Component, Watch, Host, Prop, Event, EventEmitter, h, Listen } from '@stencil/core';
 {{RENDER_IMPORT}}
 
 @Component({
@@ -9,6 +9,7 @@ import { Component, Watch, Host, Prop, Event, EventEmitter, h } from '@stencil/c
 export class EmbeddableComponent {
 
   private rootElement?: HTMLDivElement;
+  private updatePropsEventDispatched?: boolean;
 
   @Prop() componentName: string;
   @Prop() props: string = '{}';
@@ -44,6 +45,21 @@ export class EmbeddableComponent {
       detail: JSON.parse(this.props),
     });
     this.rootElement.dispatchEvent(event);
+    this.updatePropsEventDispatched = true;
+  }
+
+  @Listen('embeddable-event:update-props-listen', {target: 'window'})
+  handleUpdatePropsListen(e) {
+    const componentId = e.detail.componentId;
+    const props = JSON.parse(this.props);
+
+    if(this.updatePropsEventDispatched && componentId === props.componentId) {
+      const event = new CustomEvent('embeddable-event:update-props', {
+        bubbles: false,
+        detail: props,
+      });
+      this.rootElement.dispatchEvent(event);
+   } 
   }
 
   render() {

package/lib/entryPoint.d.ts

@@ -1 +0,0 @@
-export {};

package/src/entryPoint.ts

@@ -1,16 +0,0 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const COMMANDS_MAP = await import(path.join(__dirname, "../lib/index.js"));
-
-async function main() {
-  const command = process.argv[2];
-  const runScript = COMMANDS_MAP[command];
-
-  if (!runScript) process.exit(1);
-
-  await runScript();
-}
-
-main();