@embeddable.com/sdk-core 3.13.6 → 3.14.0-next.1

package/lib/push.d.ts

@@ -9,7 +9,7 @@ export declare function archive(args: {
     ctx: ResolvedEmbeddableConfig;
     filesList: [string, string][];
     isDev: boolean;
-}): Promise<unknown>;
+}): Promise<void>;
 export declare function createFormData(filePath: string, metadata: Record<string, any>): Promise<import("formdata-node").FormData>;
 export declare function sendBuildByApiKey(ctx: ResolvedEmbeddableConfig, { apiKey, email, message, }: {
     apiKey: string;

package/loader/entryPoint.js

@@ -1,4 +1,11 @@
-import { build, defineConfig, dev, login, push } from "../lib/index.esm.js";
+import {
+  build,
+  buildPackage,
+  defineConfig,
+  dev,
+  login,
+  push,
+} from "../lib/index.esm.js";
 import { spawn } from "child_process";
 import path from "path";
 import fs from "fs";
@@ -9,6 +16,7 @@ const COMMANDS_MAP = {
   push,
   dev,
   defineConfig,
+  buildPackage,
 };
 
 export async function main() {

package/loader/entryPoint.test.js

@@ -13,6 +13,7 @@ vi.mock("../lib/index.esm.js", () => ({
   push: vi.fn().mockResolvedValue(undefined),
   dev: vi.fn().mockResolvedValue(undefined),
   defineConfig: vi.fn().mockResolvedValue(undefined),
+  buildPackage: vi.fn().mockResolvedValue(undefined),
 }));
 
 describe("entryPoint", () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddable.com/sdk-core",
-  "version": "3.13.6",
+  "version": "3.14.0-next.1",
   "description": "Core Embeddable SDK module responsible for web-components bundling and publishing.",
   "keywords": [
     "embeddable",
@@ -40,7 +40,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@embeddable.com/sdk-utils": "0.7.4",
+    "@embeddable.com/sdk-utils": "0.8.0-next.0",
     "@inquirer/prompts": "^7.2.1",
     "@stencil/core": "^4.23.0",
     "@swc-node/register": "^1.10.9",
@@ -51,12 +51,13 @@
     "fast-glob": "^3.3.2",
     "finalhandler": "^1.3.1",
     "formdata-node": "^6.0.3",
+    "mergician": "^2.0.2",
     "minimist": "^1.2.8",
     "open": "^9.1.0",
     "ora": "^8.1.1",
     "serve-static": "^1.16.2",
     "sorcery": "^1.0.0",
-    "vite": "^6.2.1",
+    "vite": "^6.2.2",
     "ws": "^8.18.0",
     "yaml": "^2.6.1"
   },

package/src/build.test.ts

@@ -5,6 +5,7 @@ import buildTypes from "./buildTypes";
 import provideConfig from "./provideConfig";
 import generate from "./generate";
 import cleanup from "./cleanup";
+import buildGlobalHooks from "./buildGlobalHooks";
 
 // @ts-ignore
 import reportErrorToRollbar from "./rollbar.mjs";
@@ -26,6 +27,10 @@ vi.mock("./provideConfig", () => ({
   default: vi.fn(),
 }));
 
+vi.mock("./buildGlobalHooks", () => ({
+  default: vi.fn(),
+}));
+
 vi.mock("./buildTypes", () => ({
   default: vi.fn(),
 }));
@@ -75,6 +80,7 @@ describe("build", () => {
     expect(validate).toHaveBeenCalledWith(config);
     expect(prepare).toHaveBeenCalledWith(config);
     expect(buildTypes).toHaveBeenCalledWith(config);
+    expect(buildGlobalHooks).toHaveBeenCalledWith(config);
 
     // Plugin
     expect(mockPlugin.validate).toHaveBeenCalledWith(config);

package/src/build.ts

@@ -1,4 +1,5 @@
 import buildTypes from "./buildTypes";
+import buildGlobalHooks from "./buildGlobalHooks";
 import prepare from "./prepare";
 import generate from "./generate";
 import cleanup from "./cleanup";
@@ -29,6 +30,7 @@ export default async () => {
     await prepare(config);
 
     await buildTypes(config);
+    await buildGlobalHooks(config);
 
     for (const getPlugin of config.plugins) {
       const plugin = getPlugin();

package/src/buildGlobalHooks.int.test.ts

@@ -0,0 +1,215 @@
+// buildGlobalHooks.int.test.ts
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import * as fs from "node:fs/promises";
+import * as fsSync from "node:fs";
+import * as vite from "vite";
+import {
+  getGlobalHooksMeta,
+  getComponentLibraryConfig,
+  getContentHash,
+} from "@embeddable.com/sdk-utils";
+
+import buildGlobalHooks from "../src/buildGlobalHooks";
+import type { ResolvedEmbeddableConfig } from "./defineConfig";
+import path from "node:path";
+
+const rootDir = path.resolve("fake", "root");
+const buildDir = path.resolve("fake", "build");
+const srcDir = path.resolve("fake", "src");
+const lifecycleFile = path.resolve("fake", "root", "embeddable.lifecycle.ts");
+const themFile = path.resolve("fake", "root", "embeddable.theme.ts");
+
+// Potential partial mocks, or we can let some logic run real
+vi.mock("node:fs/promises");
+vi.mock("node:fs");
+vi.mock("vite");
+vi.mock("@embeddable.com/sdk-utils", async () => {
+  const actual = await vi.importActual<
+    typeof import("@embeddable.com/sdk-utils")
+  >("@embeddable.com/sdk-utils");
+  return {
+    ...actual,
+    getGlobalHooksMeta: vi.fn(),
+    getComponentLibraryConfig: vi.fn(),
+    getContentHash: vi.fn(),
+  };
+});
+
+describe("buildGlobalHooks (Integration Tests)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("builds aggregator and lifecycle for multiple libraries, then saves meta", async () => {
+    // We pretend that the lifecycle file does exist
+    vi.spyOn(fsSync, "existsSync").mockImplementation((p: any) => {
+      // We'll say yes for lifecycle + local theme
+      if (p === lifecycleFile) return true;
+      if (p === themFile) return true;
+      return false;
+    });
+
+    // aggregator template or any read
+    (fs.readFile as any).mockResolvedValueOnce(
+      "{{LIBRARY_THEME_IMPORTS}}{{LOCAL_THEME_IMPORT}}",
+    );
+    // Suppose subsequent reads for the entry files also return "some content"
+    (fs.readFile as any).mockResolvedValue("some content");
+    // We hash them all
+    (getContentHash as any).mockReturnValue("123abc");
+    // Suppose vite.build calls are successful
+    (vite.build as any).mockResolvedValue(undefined);
+
+    // For each library
+    (getComponentLibraryConfig as any).mockImplementation((cfg: any) => ({
+      libraryName: cfg.name,
+    }));
+
+    (getGlobalHooksMeta as any)
+      // aggregator calls for library #1
+      .mockResolvedValueOnce({
+        themeProvider: "libA-theme.js",
+        lifecycleHooks: ["libA-lifecycle.js"],
+      })
+      // aggregator calls for library #2
+      .mockResolvedValueOnce({
+        themeProvider: "libB-theme.js",
+        lifecycleHooks: [],
+      })
+      // lifecycle calls for library #1
+      .mockResolvedValueOnce({
+        themeProvider: "libA-theme.js",
+        lifecycleHooks: ["libA-lifecycle.js"],
+      })
+      // lifecycle calls for library #2
+      .mockResolvedValueOnce({
+        themeProvider: "libB-theme.js",
+        lifecycleHooks: ["libB-lifecycle.js"],
+      });
+
+    const ctx: ResolvedEmbeddableConfig = {
+      client: {
+        srcDir,
+        buildDir,
+        rootDir,
+        lifecycleHooksFile: lifecycleFile,
+        customizationFile: themFile,
+        componentLibraries: [{ name: "libA" }, { name: "libB" }],
+      },
+      core: {
+        templatesDir: "/fake/templates",
+      },
+      dev: {
+        watch: false, // so we do hashing, no watchers
+      },
+    } as any;
+
+    await buildGlobalHooks(ctx);
+
+    // aggregator => built with "embeddable-theme-123abc"
+    expect(vite.build).toHaveBeenCalledWith(
+      expect.objectContaining({
+        build: expect.objectContaining({
+          lib: expect.objectContaining({
+            entry: expect.stringContaining("embeddableThemeHook.js"),
+            fileName: "embeddable-theme-123abc",
+          }),
+        }),
+      }),
+    );
+
+    // We also expect the lifecycle for the repo => "embeddable.lifecycle.ts"
+    expect(vite.build).toHaveBeenCalledWith(
+      expect.objectContaining({
+        build: expect.objectContaining({
+          lib: expect.objectContaining({
+            entry: lifecycleFile,
+            fileName: "embeddable-lifecycle", // or with hash if code does that
+          }),
+        }),
+      }),
+    );
+
+    // library #1 => has "libA-lifecycle.js"
+    // library #2 => has "libB-lifecycle.js"
+    // so we expect them to build also
+    expect(vite.build).toHaveBeenCalledWith(
+      expect.objectContaining({
+        build: expect.objectContaining({
+          lib: expect.objectContaining({
+            entry: path.resolve(
+              rootDir,
+              "node_modules",
+              "libA",
+              "dist",
+              "libA-lifecycle.js",
+            ),
+          }),
+        }),
+      }),
+    );
+    expect(vite.build).toHaveBeenCalledWith(
+      expect.objectContaining({
+        build: expect.objectContaining({
+          lib: expect.objectContaining({
+            entry: path.resolve(
+              rootDir,
+              "node_modules",
+              "libB",
+              "dist",
+              "libB-lifecycle.js",
+            ),
+          }),
+        }),
+      }),
+    );
+
+    // You might also check the final "saveGlobalHooksMeta" by reading the file or checking fsSync calls
+    // ...
+  });
+
+  it("skips aggregator if no library has themeProvider, no local theme", async () => {
+    vi.spyOn(fsSync, "existsSync").mockImplementation((p: any) => false);
+    (fs.readFile as any).mockResolvedValueOnce("{{LIBRARY_THEME_IMPORTS}}");
+    (getContentHash as any).mockReturnValue("someHash");
+    (vite.build as any).mockResolvedValue(undefined);
+
+    (getGlobalHooksMeta as any)
+      // aggregator calls:
+      .mockResolvedValueOnce({ themeProvider: null, lifecycleHooks: [] })
+      // lifecycle calls:
+      .mockResolvedValueOnce({ themeProvider: null, lifecycleHooks: [] });
+
+    (getComponentLibraryConfig as any).mockImplementation((cfg: any) => ({
+      libraryName: cfg.name,
+    }));
+
+    const ctx: ResolvedEmbeddableConfig = {
+      client: {
+        srcDir,
+        buildDir,
+        rootDir,
+        lifecycleHooksFile: lifecycleFile,
+        customizationFile: themFile,
+        componentLibraries: [{ name: "libA" }],
+      },
+      core: {
+        templatesDir: "/fake/templates",
+      },
+      dev: { watch: false },
+    } as any;
+
+    await buildGlobalHooks(ctx);
+
+    // aggregator not built
+    expect(vite.build).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        build: expect.objectContaining({
+          lib: expect.objectContaining({
+            entry: expect.stringContaining("embeddableThemeHook.js"),
+          }),
+        }),
+      }),
+    );
+  });
+});

package/src/buildGlobalHooks.ts

@@ -0,0 +1,252 @@
+import * as fsSync from "node:fs";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+import * as vite from "vite";
+import { existsSync } from "node:fs";
+import ora from "ora";
+import {
+  EXTERNAL_LIBRARY_GLOBAL_HOOKS_META_NAME,
+  getComponentLibraryConfig,
+  getContentHash,
+  getGlobalHooksMeta,
+} from "@embeddable.com/sdk-utils";
+
+import { ResolvedEmbeddableConfig } from "./defineConfig";
+import { RollupWatcher, RollupWatcherEvent } from "rollup";
+
+const TEMP_JS_HOOK_FILE = "embeddableThemeHook.js";
+const LIFECYCLE_OUTPUT_NAME = "embeddable-lifecycle";
+const THEME_PROVIDER_OUTPUT_NAME = "embeddable-theme";
+
+export default async (ctx: ResolvedEmbeddableConfig) => {
+  const watch = ctx.dev?.watch;
+  const progress = watch ? undefined : ora("Building global hooks...").start();
+
+  try {
+    const { fileName: themeProvider, watcher: themeWatcher } =
+      await buildThemeHook(ctx);
+    const { lifecycleHooks, watcher: lifecycleWatcher } =
+      await buildLifecycleHooks(ctx);
+
+    await saveGlobalHooksMeta(ctx, themeProvider, lifecycleHooks);
+
+    progress?.succeed("Global hooks build completed");
+
+    return { themeWatcher, lifecycleWatcher };
+  } catch (error) {
+    progress?.fail("Global hooks build failed");
+    throw error;
+  }
+};
+
+/**
+ * Build theme hooks for a given component library.
+ */
+async function buildThemeHook(ctx: ResolvedEmbeddableConfig) {
+  const componentLibraries = ctx.client.componentLibraries;
+  const repoThemeHookExists = existsSync(ctx.client.customizationFile);
+  const imports = [];
+  const functionNames = [];
+  for (let i = 0; i < componentLibraries.length; i++) {
+    const libraryConfig = componentLibraries[i];
+    const { libraryName } = getComponentLibraryConfig(libraryConfig);
+    const libMeta = await getGlobalHooksMeta(ctx, libraryName);
+
+    const themeProvider = libMeta.themeProvider;
+
+    if (!themeProvider) continue;
+
+    // Prepare imports: library theme + repo theme (if exists)
+    const functionName = `libraryThemeProvider${i}`;
+    const libraryThemeImport = `import ${functionName} from '${libraryName}/dist/${themeProvider}'`;
+    functionNames.push(functionName);
+    imports.push(libraryThemeImport);
+  }
+
+  if (!imports.length && !repoThemeHookExists) {
+    return { fileName: undefined, watcher: undefined };
+  }
+
+  const repoThemeImport = repoThemeHookExists
+    ? `import localThemeProvider from '${ctx.client.customizationFile}';`
+    : "const localThemeProvider = () => {};";
+
+  // Generate a temporary file that imports both library and repo theme
+  await generateTemporaryHookFile(ctx, imports, functionNames, repoThemeImport);
+
+  // Build the temporary file with Vite
+  const buildResults = await buildWithVite(
+    ctx,
+    getTempHookFilePath(ctx),
+    THEME_PROVIDER_OUTPUT_NAME,
+    ctx.dev?.watch,
+    !ctx.dev?.watch,
+  );
+  // Cleanup temporary file
+  if (!ctx.dev?.watch) {
+    await cleanupTemporaryHookFile(ctx);
+  }
+
+  return buildResults;
+}
+
+/**
+ * Build theme hooks for a given component library.
+ */
+async function buildLifecycleHooks(ctx: ResolvedEmbeddableConfig) {
+  const componentLibraries = ctx.client.componentLibraries;
+  const builtLifecycleHooks: string[] = [];
+  const repoLifecycleExist = existsSync(ctx.client.lifecycleHooksFile);
+
+  let lifecycleWatcher: RollupWatcher | undefined = undefined;
+
+  // If lifecycle exists, build it right away to get the hashed output
+  if (repoLifecycleExist) {
+    const { fileName: repoLifecycleFileName, watcher } = await buildWithVite(
+      ctx,
+      ctx.client.lifecycleHooksFile,
+      LIFECYCLE_OUTPUT_NAME,
+      ctx.dev?.watch,
+      false,
+    );
+    if (ctx.dev?.watch) {
+      lifecycleWatcher = watcher;
+    }
+    builtLifecycleHooks.push(repoLifecycleFileName);
+  }
+  for (const libraryConfig of componentLibraries) {
+    const { libraryName } = getComponentLibraryConfig(libraryConfig);
+    const libMeta = await getGlobalHooksMeta(ctx, libraryName);
+
+    const lifecycleHooks = libMeta.lifecycleHooks;
+
+    for (const lifecycleHook of lifecycleHooks) {
+      const libLifecycleHook = path.resolve(
+        ctx.client.rootDir,
+        "node_modules",
+        libraryName,
+        "dist",
+        lifecycleHook,
+      );
+      const { fileName: lifecycleHookFileName } = await buildWithVite(
+        ctx,
+        libLifecycleHook,
+        LIFECYCLE_OUTPUT_NAME,
+      );
+
+      builtLifecycleHooks.push(lifecycleHookFileName);
+    }
+  }
+
+  return { lifecycleHooks: builtLifecycleHooks, watcher: lifecycleWatcher };
+}
+
+/**
+ * Write the final global hooks metadata to disk (themeHooksMeta, lifecycleHookMeta).
+ */
+async function saveGlobalHooksMeta(
+  ctx: ResolvedEmbeddableConfig,
+  themeProvider?: string,
+  lifecycleHooks?: string[],
+) {
+  const metaFilePath = path.resolve(
+    ctx.client.buildDir,
+    EXTERNAL_LIBRARY_GLOBAL_HOOKS_META_NAME,
+  );
+  const data = JSON.stringify({ themeProvider, lifecycleHooks }, null, 2);
+  fsSync.writeFileSync(metaFilePath, data);
+}
+
+/**
+ * Generate a temporary file which imports the library theme and repository theme,
+ * replacing template placeholders.
+ */
+async function generateTemporaryHookFile(
+  ctx: ResolvedEmbeddableConfig,
+  libraryThemeImports: string[],
+  functionNames: string[],
+  repoThemeImport: string,
+) {
+  const templatePath = path.resolve(
+    ctx.core.templatesDir,
+    "embeddableThemeHook.js.template",
+  );
+  const templateContent = await fs.readFile(templatePath, "utf8");
+
+  const newContent = templateContent
+    .replace("{{LIBRARY_THEME_IMPORTS}}", libraryThemeImports.join("\n"))
+    .replace("{{ARRAY_OF_LIBRARY_THEME_PROVIDERS}}", functionNames.join("\n"))
+    .replace("{{LOCAL_THEME_IMPORT}}", repoThemeImport);
+
+  // Write to temporary hook file
+  await fs.writeFile(getTempHookFilePath(ctx), newContent, "utf8");
+}
+
+/**
+ * Build a file with Vite and return the hashed output file name (e.g., embeddable-theme-xxxx.js).
+ */
+async function buildWithVite(
+  ctx: ResolvedEmbeddableConfig,
+  entryFile: string,
+  outputFile: string,
+  watch = false,
+  useHash = true,
+) {
+  const fileContent = await fs.readFile(entryFile, "utf8");
+  const fileHash = getContentHash(fileContent);
+  // Bundle using Vite
+  const fileName = useHash ? `${outputFile}-${fileHash}` : outputFile;
+  const fileWatcher = await vite.build({
+    logLevel: watch ? "info" : "error",
+    build: {
+      emptyOutDir: false,
+      lib: {
+        entry: entryFile,
+        formats: ["es"],
+        fileName: fileName,
+      },
+      outDir: ctx.client.buildDir,
+      watch: watch ? {} : undefined,
+    },
+  });
+
+  if (watch) {
+    await waitForInitialBuild(fileWatcher as RollupWatcher);
+  }
+
+  const watcher: RollupWatcher | undefined = watch
+    ? (fileWatcher as RollupWatcher)
+    : undefined;
+
+  return { fileName: `${fileName}.js`, watcher };
+}
+
+/**
+ * Remove the temporary hook file after building.
+ */
+async function cleanupTemporaryHookFile(ctx: ResolvedEmbeddableConfig) {
+  await fs.rm(getTempHookFilePath(ctx), { force: true });
+}
+
+/**
+ * Get the path to the temporary hook file in the build directory.
+ */
+function getTempHookFilePath(ctx: ResolvedEmbeddableConfig): string {
+  return path.resolve(ctx.client.buildDir, TEMP_JS_HOOK_FILE);
+}
+
+function waitForInitialBuild(watcher: RollupWatcher): Promise<void> {
+  return new Promise((resolve, reject) => {
+    function onEvent(event: RollupWatcherEvent) {
+      if (event.code === "END") {
+        watcher.off("event", onEvent);
+        resolve();
+      } else if (event.code === "ERROR") {
+        watcher.off("event", onEvent);
+        reject(event.error);
+      }
+    }
+
+    watcher.on("event", onEvent);
+  });
+}