@embeddable.com/sdk-core 3.13.7-next.0 → 3.14.0-next.2

package/src/buildTypes.ts

@@ -2,8 +2,14 @@ import * as fs from "node:fs/promises";
 import * as path from "node:path";
 import * as vite from "vite";
 import ora from "ora";
-import { findFiles, getContentHash } from "@embeddable.com/sdk-utils";
 import { ResolvedEmbeddableConfig } from "./defineConfig";
+import {
+  findFiles,
+  getComponentLibraryConfig,
+  getContentHash,
+} from "@embeddable.com/sdk-utils";
+import fg from "fast-glob";
+
 export const EMB_TYPE_FILE_REGEX = /^(.*)\.type\.emb\.[jt]s$/;
 export const EMB_OPTIONS_FILE_REGEX = /^(.*)\.options\.emb\.[jt]s$/;
 
@@ -26,7 +32,10 @@ async function generate(ctx: ResolvedEmbeddableConfig) {
     EMB_OPTIONS_FILE_REGEX,
   );
 
-  const typeImports = typeFiles
+  const additionalImports =
+    await getAdditionalImportsFromInstalledLibraries(ctx);
+
+  const repositoryTypeImports = typeFiles
     .concat(optionsFiles)
     .map(
       ([_fileName, filePath]) =>
@@ -36,6 +45,8 @@ async function generate(ctx: ResolvedEmbeddableConfig) {
     )
     .join("\n");
 
+  const typeImports = additionalImports.join("\n") + repositoryTypeImports;
+
   await fs.writeFile(
     path.resolve(
       ctx.client.buildDir,
@@ -83,3 +94,31 @@ async function cleanup(ctx: ResolvedEmbeddableConfig) {
     path.resolve(ctx.client.buildDir, "embeddable-types-entry-point.js"),
   );
 }
+
+async function getAdditionalImportsFromInstalledLibraries(
+  ctx: ResolvedEmbeddableConfig,
+) {
+  const componentLibraries = ctx.client.componentLibraries;
+  const additionalImports: string[] = [];
+  for (const componentLibrary of componentLibraries) {
+    const { libraryName } = getComponentLibraryConfig(componentLibrary);
+    try {
+      fg.sync(
+        path.resolve(
+          ctx.client.rootDir,
+          "node_modules",
+          libraryName,
+          "dist",
+          "embeddable-types-*.js",
+        ),
+      ).forEach((file: string) => {
+        const fileName = path.basename(file);
+        additionalImports.push(`import '${libraryName}/dist/${fileName}';`);
+      });
+    } catch (e) {
+      console.error(`Can't load component library: ${libraryName}`, e);
+      throw e;
+    }
+  }
+  return additionalImports;
+}

package/src/cleanup.test.ts

@@ -1,7 +1,7 @@
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
 import { createManifest } from "./cleanup";
-import { findFiles } from "@embeddable.com/sdk-utils";
+import { findFiles, loadJson } from "@embeddable.com/sdk-utils";
 import { ResolvedEmbeddableConfig } from "./defineConfig";
 const ctx = {
   client: {
@@ -20,6 +20,7 @@ vi.mock("node:fs/promises", () => ({
 
 vi.mock("@embeddable.com/sdk-utils", () => ({
   findFiles: vi.fn(),
+  loadJson: vi.fn(),
 }));
 
 vi.mock("node:path", async () => {
@@ -38,6 +39,9 @@ describe("cleanup", () => {
       vi.mocked(fs.writeFile).mockImplementation(async () => undefined);
       vi.mocked(fs.rename).mockImplementation(async () => undefined);
       vi.mocked(findFiles).mockResolvedValue([["", ""]]);
+      vi.mocked(loadJson).mockResolvedValue({
+        test: "test_value",
+      });
       vi.mocked(path.basename).mockReturnValue("basename");
       vi.mocked(path.join).mockImplementation((...args) => args.join("/"));
 
@@ -79,6 +83,9 @@ describe("cleanup", () => {
             sdkVersions: {},
             packageManager: "npm",
             packageManagerVersion: "10.7.0",
+            globalHooks: {
+              test: "test_value",
+            },
             metrics: {
               buildTime: "PT1M20.001S",
             },

package/src/cleanup.ts

@@ -1,4 +1,4 @@
-import { findFiles } from "@embeddable.com/sdk-utils";
+import { findFiles, loadJson } from "@embeddable.com/sdk-utils";
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
 import { getSDKVersions, hrtimeToISO8601 } from "./utils";
@@ -41,6 +41,10 @@ export async function createManifest({
     process.env.npm_config_user_agent?.match(/(\d+\.\d+\.\d+)/)?.[0] ||
     "unknown";
 
+  const globalHooks = await loadJson(
+    path.resolve(ctx.client.buildDir, "globalHooks.json"),
+  );
+
   // write manifest file with files with hash
   const manifest = {
     entryFiles: {
@@ -56,6 +60,7 @@ export async function createManifest({
       sdkVersions,
       packageManager,
       packageManagerVersion,
+      globalHooks,
       metrics: {
         buildTime: hrtimeToISO8601(ctx.buildTime),
       },
@@ -114,6 +119,32 @@ async function extractBuild(ctx: ResolvedEmbeddableConfig) {
     path.join(ctx.client.tmpDir, editorsMetaFileName),
   );
 
+  const themeFile =
+    (await findFiles(ctx.client.buildDir, /embeddable-theme-[0-9a-f]+\.js/)) ||
+    [];
+
+  for (const [, themeFilePath] of themeFile) {
+    const themeFilePathFileName = path.basename(themeFilePath);
+    await fs.rename(
+      themeFilePath,
+      path.join(ctx.client.tmpDir, themeFilePathFileName),
+    );
+  }
+
+  const lifecycleFiles =
+    (await findFiles(
+      ctx.client.buildDir,
+      /embeddable-lifecycle(?:-[0-9a-f]+)?\.js/,
+    )) || [];
+
+  for (const [, lifecycleFilePath] of lifecycleFiles) {
+    const lifecycleFilePathFileName = path.basename(lifecycleFilePath);
+    await fs.rename(
+      lifecycleFilePath,
+      path.join(ctx.client.tmpDir, lifecycleFilePathFileName),
+    );
+  }
+
   await createManifest({
     ctx,
     typesFileName,

package/src/defineConfig.test.ts

@@ -54,8 +54,11 @@ describe("defineConfig", () => {
           "buildDir": "/embeddable-sdk/packages/core-sdk",
           "bundleHash": undefined,
           "componentDir": "/embeddable-sdk/packages/core-sdk",
+          "componentLibraries": [],
+          "customizationFile": "/embeddable-sdk/packages/core-sdk",
           "errorFallbackComponent": "/embeddable-sdk/packages/core-sdk",
           "globalCss": "/embeddable-sdk/packages/core-sdk",
+          "lifecycleHooksFile": "/embeddable-sdk/packages/core-sdk",
           "modelsSrc": "/embeddable-sdk/packages/core-sdk",
           "presetsSrc": "/embeddable-sdk/packages/core-sdk",
           "rollupOptions": {},

package/src/defineConfig.ts

@@ -2,7 +2,10 @@ import * as path from "node:path";
 import { existsSync } from "node:fs";
 import { RollupOptions } from "rollup";
 import { z } from "zod";
-import { errorFormatter } from "@embeddable.com/sdk-utils";
+import {
+  errorFormatter,
+  ComponentLibraryConfig,
+} from "@embeddable.com/sdk-utils";
 
 export type Region = "EU" | "US" | "legacy-US";
 
@@ -12,6 +15,7 @@ export type EmbeddableConfig = {
     build: (config: EmbeddableConfig) => Promise<unknown>;
     cleanup: (config: EmbeddableConfig) => Promise<unknown>;
     validate: (config: EmbeddableConfig) => Promise<unknown>;
+    buildPackage: (config: EmbeddableConfig) => Promise<unknown>;
   })[];
   pushModels?: boolean;
   pushComponents?: boolean;
@@ -34,6 +38,9 @@ export type EmbeddableConfig = {
   };
   rollupOptions?: RollupOptions;
   region?: Region;
+  componentLibraries?: string[] | ComponentLibraryConfig[];
+  customizationFile?: string;
+  lifecycleHooksFile?: string;
 };
 
 const PLUGIN_NAME = "sdk-react" as const;
@@ -58,6 +65,9 @@ export type ResolvedEmbeddableConfig = {
     archiveFile: string;
     errorFallbackComponent?: string;
     bundleHash?: string;
+    customizationFile: string;
+    lifecycleHooksFile: string;
+    componentLibraries: string[] | ComponentLibraryConfig[];
     viteConfig: {
       resolve?: {
         alias?: Record<string, string>;
@@ -79,7 +89,7 @@ export type ResolvedEmbeddableConfig = {
   rollbarAccessToken: string;
   plugins: EmbeddableConfig["plugins"];
   buildTime: [number, number];
-  dev: {
+  dev?: {
     watch: boolean;
     logger: any;
     sys: any;
@@ -119,6 +129,12 @@ const REGION_CONFIGS = {
   },
 };
 
+const ComponentLibraryConfigSchema = z.object({
+  name: z.string(),
+  include: z.array(z.string()).optional(),
+  exclude: z.array(z.string()).optional(),
+});
+
 export const embeddableConfigSchema = z
   .object({
     plugins: z.array(z.function()),
@@ -139,6 +155,11 @@ export const embeddableConfigSchema = z
     presetsSrc: z.string().optional(),
     componentsSrc: z.string().optional(),
     globalCss: z.string().optional(),
+    customizationFile: z.string().optional(),
+    lifecycleHooksFile: z.string().optional(),
+    componentLibraries: z
+      .union([z.array(z.string()), z.array(ComponentLibraryConfigSchema)])
+      .optional(),
     viteConfig: z
       .object({
         resolve: z
@@ -185,12 +206,14 @@ export default (config: EmbeddableConfig) => {
     globalCss = "src/global.css",
     viteConfig = {},
     rollupOptions = {},
+    componentLibraries = [],
+    customizationFile = "embeddable.theme.ts",
+    lifecycleHooksFile = "lifecycle.config.ts",
   } = config;
 
   const regionConfig = REGION_CONFIGS[region];
 
   const __dirname = import.meta.dirname;
-
   const coreRoot = path.resolve(__dirname, "..");
   const clientRoot = process.cwd();
 
@@ -248,6 +271,9 @@ export default (config: EmbeddableConfig) => {
       bundleHash: undefined, // This will be set by the build process
       viteConfig,
       rollupOptions,
+      componentLibraries,
+      customizationFile: path.resolve(clientRoot, customizationFile),
+      lifecycleHooksFile: path.resolve(clientRoot, lifecycleHooksFile),
     },
     outputOptions: {
       typesEntryPointFilename: "embeddable-types-entry-point.js",

package/src/dev.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach, Mock } from "vitest";
 import * as http from "node:http";
 import axios from "axios";
 import provideConfig from "./provideConfig";
+import buildGlobalHooks from "./buildGlobalHooks";
 import { getToken } from "./login";
 import * as chokidar from "chokidar";
 import dev from "./dev";
@@ -9,10 +10,12 @@ import { checkNodeVersion } from "./utils";
 import { createManifest } from "./cleanup";
 import prepare from "./prepare";
 import { WebSocketServer } from "ws";
-import { initLogger, logError } from "./logger";
+import { logError } from "./logger";
 import { ResolvedEmbeddableConfig } from "./defineConfig";
+import { RollupWatcher } from "rollup";
 // Mock dependencies
 vi.mock("./buildTypes", () => ({ default: vi.fn() }));
+vi.mock("./buildGlobalHooks", () => ({ default: vi.fn() }));
 vi.mock("./prepare", () => ({ default: vi.fn(), removeIfExists: vi.fn() }));
 vi.mock("./generate", () => ({ default: vi.fn() }));
 vi.mock("./provideConfig", () => ({ default: vi.fn() }));
@@ -47,6 +50,7 @@ const mockConfig = {
     globalCss: "/mock/root/global.css",
     modelsSrc: "/mock/root/models",
     presetsSrc: "/mock/root/presets",
+    componentLibraries: [],
   },
   plugins: [],
   previewBaseUrl: "http://preview.example.com",
@@ -83,6 +87,13 @@ describe("dev command", () => {
     vi.mocked(axios.get).mockResolvedValue({
       data: [{ id: "mock-workspace" }],
     });
+
+    // @ts-ignore
+    const watcherMock: RollupWatcher = { on: vi.fn(), close: vi.fn() };
+    vi.mocked(buildGlobalHooks).mockResolvedValue({
+      themeWatcher: watcherMock,
+      lifecycleWatcher: watcherMock,
+    });
   });
 
   afterEach(() => {
@@ -104,6 +115,7 @@ describe("dev command", () => {
 
     // Call the listen callback to simulate the server being set up
     listenMock.mock.calls[0][1]();
+    expect(buildGlobalHooks).toHaveBeenCalled();
     expect(createManifest).toHaveBeenCalled();
 
     await expect.poll(() => chokidar.watch).toBeCalledTimes(2);

package/src/dev.ts

@@ -35,6 +35,7 @@ import ora, { Ora } from "ora";
 import finalhandler from "finalhandler";
 import serveStatic from "serve-static";
 import { ResolvedEmbeddableConfig } from "./defineConfig";
+import buildGlobalHooks from "./buildGlobalHooks";
 dotenv.config();
 
 let wss: WebSocketServer;
@@ -142,6 +143,15 @@ export default async () => {
 
     workspacePreparation.succeed("Workspace is ready");
 
+    const { themeWatcher, lifecycleWatcher } = await buildGlobalHooks(config);
+
+    if (themeWatcher) {
+      await globalHookWatcher(themeWatcher, config);
+    }
+    if (lifecycleWatcher) {
+      await globalHookWatcher(lifecycleWatcher, config);
+    }
+
     const server = http.createServer(
       async (request: IncomingMessage, res: ServerResponse) => {
         res.setHeader("Access-Control-Allow-Origin", "*");
@@ -219,6 +229,12 @@ export default async () => {
       const customGlobalCssWatch = globalCssWatcher(config);
       watchers.push(dataModelAndSecurityContextWatch);
       watchers.push(customGlobalCssWatch);
+      if (themeWatcher) {
+        watchers.push(themeWatcher);
+      }
+      if (lifecycleWatcher) {
+        watchers.push(lifecycleWatcher);
+      }
     });
   } catch (error: any) {
     await logError({ command: "dev", breadcrumbs, error });
@@ -250,8 +266,28 @@ const configureWatcher = async (
   });
 };
 
+const globalHookWatcher = async (watcher: RollupWatcher, ctx: any) => {
+  watcher.on("change", (path) => {
+    changedFiles.push(path);
+  });
+
+  watcher.on("event", async (e) => {
+    if (e.code === "BUNDLE_START") {
+      sendMessage("componentsBuildStart", { changedFiles });
+    }
+    if (e.code === "BUNDLE_END") {
+      sendMessage("componentsBuildSuccess");
+      changedFiles = [];
+    }
+    if (e.code === "ERROR") {
+      sendMessage("componentsBuildError", { error: e.error?.message });
+      changedFiles = [];
+    }
+  });
+};
+
 const sendMessage = (type: string, meta = {}) => {
-  wss.clients.forEach((ws) => {
+  wss?.clients?.forEach((ws) => {
     ws.send(JSON.stringify({ type, ...meta }));
   });
 };

package/src/generate.test.ts

@@ -13,6 +13,8 @@ const config = {
     tmpDir: "tmpDir",
     stencilBuild: "stencilBuild",
     componentDir: "componentDir",
+    bundleHash: "hash",
+    componentLibraries: [],
   },
   core: {
     rootDir: "rootDir",

package/src/generate.ts

@@ -2,8 +2,12 @@ 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 { findFiles, getContentHash } from "@embeddable.com/sdk-utils";
 import { PluginName, ResolvedEmbeddableConfig } from "./defineConfig";
+import {
+  findFiles,
+  getComponentLibraryConfig,
+} from "@embeddable.com/sdk-utils";
+
 import * as sorcery from "sorcery";
 
 const STYLE_IMPORTS_TOKEN = "{{STYLES_IMPORT}}";
@@ -35,13 +39,27 @@ async function injectCSS(
   );
   const allFiles = await fs.readdir(CUSTOMER_BUILD);
 
-  const cssFilesImportsStr = allFiles
+  const imports = allFiles
     .filter((fileName) => fileName.endsWith(".css"))
     .map(
       (fileName) =>
         `@import '../${ctx[pluginName].outputOptions.buildName}/${fileName}';`,
-    )
-    .join("\n");
+    );
+
+  const componentLibraries = ctx.client.componentLibraries;
+  for (const componentLibrary of componentLibraries) {
+    const { libraryName } = getComponentLibraryConfig(componentLibrary);
+    const allLibFiles = await fs.readdir(
+      path.resolve(ctx.client.rootDir, "node_modules", libraryName, "dist"),
+    );
+    allLibFiles
+      .filter((fileName) => fileName.endsWith(".css"))
+      .forEach((fileName) =>
+        imports.push(`@import '~${libraryName}/dist/${fileName}';`),
+      );
+  }
+
+  const cssFilesImportsStr = imports.join("\n");
 
   const content = await fs.readFile(
     path.resolve(ctx.core.templatesDir, "style.css.template"),
@@ -165,15 +183,8 @@ async function handleStencilBuildOutput(ctx: ResolvedEmbeddableConfig) {
 
   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;
-
+  if (!ctx.dev?.watch && ctx.client.bundleHash) {
+    fileName = `embeddable-wrapper.esm-${ctx.client.bundleHash}.js`;
     await addComponentTagName(entryFilePath, ctx.client.bundleHash);
   }
 

package/src/index.ts

@@ -3,4 +3,5 @@ export { default as login } from "./login";
 export { default as push } from "./push";
 export { default as dev } from "./dev";
 export { default as defineConfig } from "./defineConfig";
-export type { ResolvedEmbeddableConfig } from "./defineConfig";
+export { default as buildPackage } from "./buildPackage";
+export type { ResolvedEmbeddableConfig } from "./defineConfig";

package/src/push.ts

@@ -33,7 +33,7 @@ export default async () => {
     const isBuildSuccess = await checkBuildSuccess();
     if (!isBuildSuccess) {
       console.error(
-        "Build failed or not completed. Please run `embeddable:build` first."
+        "Build failed or not completed. Please run `embeddable:build` first.",
       );
       process.exit(1);
     }
@@ -61,7 +61,7 @@ export default async () => {
     const { workspaceId, name: workspaceName } = await selectWorkspace(
       ora,
       config,
-      token
+      token,
     );
 
     const workspacePreviewUrl = `${config.previewBaseUrl}/workspace/${workspaceId}`;
@@ -70,7 +70,7 @@ export default async () => {
     breadcrumbs.push("build archive");
     await buildArchive(config);
     spinnerPushing.info(
-      `Publishing to ${workspaceName} using ${workspacePreviewUrl}...`
+      `Publishing to ${workspaceName} using ${workspacePreviewUrl}...`,
     );
 
     breadcrumbs.push("send build");
@@ -78,7 +78,7 @@ export default async () => {
 
     publishedSectionFeedback(config, spinnerPushing);
     spinnerPushing.succeed(
-      `Published to ${workspaceName} using ${workspacePreviewUrl}`
+      `Published to ${workspaceName} using ${workspacePreviewUrl}`,
     );
   } catch (error: any) {
     spinnerPushing?.fail("Publishing failed");
@@ -91,7 +91,7 @@ export default async () => {
 
 const publishedSectionFeedback = (
   config: ResolvedEmbeddableConfig,
-  spinnerPushing: Ora
+  spinnerPushing: Ora,
 ) => {
   config.pushModels && spinnerPushing.succeed("Models published");
   config.pushComponents && spinnerPushing.succeed("Components published");
@@ -109,7 +109,7 @@ async function pushByApiKey(config: ResolvedEmbeddableConfig, spinner: any) {
 
   if (!email || !/\S+@\S+\.\S+/.test(email)) {
     spinner.fail(
-      "Invalid email provided. Please provide a valid email using --email (-e) flag"
+      "Invalid email provided. Please provide a valid email using --email (-e) flag",
     );
     process.exit(1);
   }
@@ -150,7 +150,7 @@ export async function buildArchive(config: ResolvedEmbeddableConfig) {
 
   if (!config.pushModels && !config.pushComponents) {
     spinnerArchive.fail(
-      "Cannot push: both pushModels and pushComponents are disabled"
+      "Cannot push: both pushModels and pushComponents are disabled",
     );
     process.exit(1);
   }
@@ -160,11 +160,11 @@ export async function buildArchive(config: ResolvedEmbeddableConfig) {
   if (config.pushModels) {
     const cubeFilesList = await findFiles(
       config.client.modelsSrc || config.client.srcDir,
-      CUBE_FILES
+      CUBE_FILES,
     );
     const contextFilesList = await findFiles(
       config.client.presetsSrc || config.client.srcDir,
-      PRESET_FILES
+      PRESET_FILES,
     );
     filesList.push(
       ...cubeFilesList.map((entry): [string, string] => [
@@ -174,7 +174,7 @@ export async function buildArchive(config: ResolvedEmbeddableConfig) {
       ...contextFilesList.map((entry): [string, string] => [
         path.basename(entry[1]),
         entry[1],
-      ])
+      ]),
     );
   }
 
@@ -214,14 +214,14 @@ export async function archive(args: {
 
   await archive.finalize();
 
-  return new Promise((resolve, _reject) => {
-    output.on("close", resolve);
+  return new Promise<void>((resolve: any, _reject) => {
+    output.on("close", () => resolve());
   });
 }
 
 export async function createFormData(
   filePath: string,
-  metadata: Record<string, any>
+  metadata: Record<string, any>,
 ) {
   const { FormData, Blob } = await import("formdata-node");
   const { fileFromPath } = await import("formdata-node/file-from-path");
@@ -244,7 +244,7 @@ export async function sendBuildByApiKey(
     apiKey,
     email,
     message,
-  }: { apiKey: string; email: string; message?: string }
+  }: { apiKey: string; email: string; message?: string },
 ) {
   const form = await createFormData(ctx.client.archiveFile, {
     pushModels: ctx.pushModels,
@@ -256,7 +256,7 @@ export async function sendBuildByApiKey(
   const response = await uploadFile(
     form,
     `${ctx.pushBaseUrl}/api/v1/bundle/upload`,
-    apiKey
+    apiKey,
   );
   await fs.rm(ctx.client.archiveFile);
 
@@ -269,7 +269,7 @@ export async function sendBuild(
     workspaceId,
     token,
     message,
-  }: { workspaceId: string; token: string; message?: string }
+  }: { workspaceId: string; token: string; message?: string },
 ) {
   const form = await createFormData(ctx.client.archiveFile, {
     pushModels: ctx.pushModels,
@@ -281,7 +281,7 @@ export async function sendBuild(
   await uploadFile(
     form,
     `${ctx.pushBaseUrl}/bundle/${workspaceId}/upload`,
-    token
+    token,
   );
 
   await fs.rm(ctx.client.archiveFile);

package/templates/component.tsx.template

@@ -14,6 +14,7 @@ export class EmbeddableComponent {
   @Prop() componentName: string;
   @Prop() props: string = '{}';
   @Prop() clientContext: string = '{}';
+  @Prop() theme: any = {};
 
   @Event({
     eventName: 'componentLoaded',
@@ -100,7 +101,8 @@ export class EmbeddableComponent {
       this.rootElement,
       this.componentName,
       JSON.parse(this.props),
-      JSON.parse(this.clientContext)
+      JSON.parse(this.clientContext),
+      this.theme
     );
   }
 }

package/templates/embeddableThemeHook.js.template

@@ -0,0 +1,28 @@
+{{LIBRARY_THEME_IMPORTS}}
+{{LOCAL_THEME_IMPORT}}
+
+import {mergician} from 'mergician';
+
+const parentProviders = [
+  {{ARRAY_OF_LIBRARY_THEME_PROVIDERS}}
+];
+
+export default function combinedThemeProvider(clientContext) {
+  let parentTheme = {};
+
+  // 1. Sequentially call each library's theme, merging the result
+  for (const provider of parentProviders) {
+    if (typeof provider === 'function') {
+      const partial = provider(clientContext, parentTheme);
+
+      // Merge into parentTheme
+      parentTheme = mergician(parentTheme, partial);
+    }
+  }
+
+  if (typeof localThemeProvider === 'function') {
+    return localThemeProvider(clientContext, parentTheme);
+  }
+
+  return parentTheme;
+}