@embeddable.com/sdk-react 3.11.6-next.0 → 3.11.7-next.0

package/lib/generate.d.ts

@@ -1,5 +1,34 @@
 import * as vite from "vite";
+import { WatcherOptions } from "rollup";
 import { ResolvedEmbeddableConfig } from "@embeddable.com/sdk-core";
+import { LogLevel } from "vite";
 export declare const EMB_FILE_REGEX: RegExp;
 declare const _default: (ctx: ResolvedEmbeddableConfig) => Promise<vite.Rollup.RollupOutput | vite.Rollup.RollupOutput[] | vite.Rollup.RollupWatcher>;
 export default _default;
+export declare function getViteConfig(ctx: ResolvedEmbeddableConfig, watch: WatcherOptions | null, plugins: any[]): {
+    logLevel: LogLevel;
+    resolve: {
+        alias?: Record<string, string>;
+        extensions: string[];
+    };
+    plugins: any[];
+    build: {
+        sourcemap: boolean | "inline";
+        watch: {
+            include: string[];
+            exclude: string[];
+        } | undefined;
+        minify: boolean;
+        rollupOptions: vite.Rollup.RollupOptions;
+        lib: {
+            entry: string;
+            formats: vite.LibraryFormats[];
+            fileName: string;
+        };
+        outDir: string;
+    };
+    define: {
+        "process.env.NODE_ENV": string;
+    };
+};
+export declare function runViteBuild(ctx: ResolvedEmbeddableConfig, watch?: WatcherOptions | null): Promise<vite.Rollup.RollupOutput | vite.Rollup.RollupOutput[] | vite.Rollup.RollupWatcher>;

package/lib/generate.test.d.ts

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

package/lib/index.esm.js

@@ -449,12 +449,12 @@ const loadJson = async (filePath) => {
 
 const getComponentLibraryConfig = (componentLibrary) => {
     let libraryName = componentLibrary;
-    const include = [];
+    let include;
     const exclude = [];
     if (typeof componentLibrary === "object" && componentLibrary !== null) {
         libraryName = componentLibrary.name;
         if (componentLibrary.include) {
-            include.push(...componentLibrary.include);
+            include = [...componentLibrary.include];
         }
         if (componentLibrary.exclude) {
             exclude.push(...componentLibrary.exclude);
@@ -468,7 +468,7 @@ const getComponentLibraryMeta = async (ctx, componentLibrary) => {
     const libraryMeta = (await loadJson(getLibraryPath(ctx, libraryName, EXTERNAL_LIBRARY_META_FILE_NAME)));
     const filterItems = (items) => {
         let result = items;
-        if (include.length > 0) {
+        if (include) {
             result = result.filter((item) => include.includes(item));
         }
         return result.filter((item) => !exclude.includes(item));
@@ -1063,6 +1063,49 @@ var validateComponentMetaPlugin = (componentFileRegex) => {
     };
 };
 
+/**
+ * Checks if a given package exists in dependencies or devDependencies of a package.json object.
+ * @param packageJson The parsed package.json object.
+ * @param packageName The name of the package to check.
+ * @returns True if the package exists, false otherwise.
+ */
+function hasPackage(packageJson, packageName) {
+    var _a, _b, _c;
+    return !!((_b = (_a = packageJson.dependencies) === null || _a === void 0 ? void 0 : _a[packageName]) !== null && _b !== void 0 ? _b : (_c = packageJson.devDependencies) === null || _c === void 0 ? void 0 : _c[packageName]);
+}
+
+/**
+ * Modifies entry point only if Emotion is installed in the client's package.json.
+ * Wraps the app with CacheProvider and creates a custom cache to inject Emotion styles
+ * into the Shadow DOM or desired container.
+ */
+const emotionReactEntrypointModifier = {
+    getContentBegin() {
+        return `<EmbeddableEmotionCacheProvider value={createCache({ key: 'css', container: rootEl.getRootNode() })}>`;
+    },
+    getContentEnd() {
+        return `</EmbeddableEmotionCacheProvider>`;
+    },
+    getImports() {
+        return `
+      import { CacheProvider as EmbeddableEmotionCacheProvider } from '@emotion/react';
+      import createCache from '@emotion/cache';
+    `;
+    },
+    async needToModify(ctx) {
+        const packageJsonFilePath = path.resolve(ctx.client.rootDir, "package.json");
+        try {
+            const packageJson = JSON.parse(await fs.readFile(packageJsonFilePath, "utf-8"));
+            return !!(hasPackage(packageJson, "@emotion/react") ||
+                hasPackage(packageJson, "react-select"));
+        }
+        catch (error) {
+            console.error("emotionReactEntrypointModifier: Error reading package.json", error);
+            return false;
+        }
+    },
+};
+
 /**
  * Modifies entry point only if there is 'styled-components' in the client's package.json.
  * Imports StyleSheetManager from styled-components and adds shadow root as "target".
@@ -1080,12 +1123,10 @@ const styledComponentsEntrypointModifier = {
         return "import {StyleSheetManager} from 'styled-components'";
     },
     async needToModify(ctx) {
-        var _a, _b;
         const packageJsonFilePath = path.resolve(ctx.client.rootDir, "package.json");
         try {
             const packageJson = JSON.parse(await fs.readFile(packageJsonFilePath, "utf-8"));
-            return !!(((_a = packageJson.dependencies) === null || _a === void 0 ? void 0 : _a["styled-components"]) ||
-                ((_b = packageJson.devDependencies) === null || _b === void 0 ? void 0 : _b["styled-components"]));
+            return !!hasPackage(packageJson, "styled-components");
         }
         catch (error) {
             console.error("styledComponentsEntrypointModifier: Error reading package.json", error);
@@ -1096,6 +1137,7 @@ const styledComponentsEntrypointModifier = {
 
 const entrypointModifiers = [
     styledComponentsEntrypointModifier,
+    emotionReactEntrypointModifier,
 ];
 
 function findFilesWithWrongUsage(directory, pattern, mustEndWith = []) {
@@ -1291,7 +1333,7 @@ function getViteConfig(ctx, watch, plugins) {
         },
         plugins,
         build: {
-            sourcemap: true,
+            sourcemap: watch ? "inline" : true, // Inline sourcemaps are faster in dev
             watch: watch
                 ? {
                     include: [ctx.client.srcDir + "/**"],
@@ -1302,6 +1344,7 @@ function getViteConfig(ctx, watch, plugins) {
             rollupOptions: watch
                 ? {
                     cache: true,
+                    treeshake: false, // Faster builds in dev
                     ...ctx.client.rollupOptions,
                     output: {
                         sourcemapPathTransform: (relativeSourcePath, sourcemapPath) => {
@@ -1333,38 +1376,66 @@ async function calculateBundleHash(ctx) {
     ctx.client.bundleHash = getContentHash(contentString);
 }
 async function runViteBuild(ctx, watch = null) {
+    // In watch mode (development), combine both builds into one to avoid duplication
+    if (watch) {
+        const { externalComponents, externalEditors } = await findExternalComponents(ctx);
+        return await vite.build(getViteConfig(ctx, watch, [
+            viteReactPlugin(),
+            validateComponentMetaPlugin(EMB_FILE_REGEX),
+            extractComponentsConfigPlugin({
+                isDev: true,
+                globalKey: "componentsMeta",
+                fileName: "embeddable-components-meta.js",
+                outputDir: ctx.client.buildDir,
+                componentFileRegex: EMB_FILE_REGEX,
+                searchEntry: "defineComponent",
+                useBundleHash: false,
+                ctx,
+                externalComponents: externalComponents,
+            }),
+            extractComponentsConfigPlugin({
+                isDev: true,
+                globalKey: "editorsMeta",
+                fileName: "embeddable-editors-meta.js",
+                outputDir: ctx.client.buildDir,
+                componentFileRegex: EMB_FILE_REGEX,
+                searchEntry: "defineEditor",
+                useBundleHash: false,
+                ctx,
+                externalComponents: externalEditors,
+            }),
+        ]));
+    }
     // Step 1: Initial build without extractComponentsConfigPlugin
     await vite.build(getViteConfig(ctx, watch, [
         viteReactPlugin(),
         validateComponentMetaPlugin(EMB_FILE_REGEX),
     ]));
     // Step 2: Calculate bundleHash in production mode
-    if (!watch) {
-        await calculateBundleHash(ctx);
-    }
+    await calculateBundleHash(ctx);
     const { externalComponents, externalEditors } = await findExternalComponents(ctx);
     // Step 3: Final build with extractComponentsConfigPlugin
     return await vite.build(getViteConfig(ctx, watch, [
         viteReactPlugin(),
         extractComponentsConfigPlugin({
-            isDev: !!watch,
+            isDev: false,
             globalKey: "componentsMeta",
             fileName: "embeddable-components-meta.js",
             outputDir: ctx.client.buildDir,
             componentFileRegex: EMB_FILE_REGEX,
             searchEntry: "defineComponent",
-            useBundleHash: !watch,
+            useBundleHash: true,
             ctx,
             externalComponents: externalComponents,
         }),
         extractComponentsConfigPlugin({
-            isDev: !!watch,
+            isDev: false,
             globalKey: "editorsMeta",
             fileName: "embeddable-editors-meta.js",
             outputDir: ctx.client.buildDir,
             componentFileRegex: EMB_FILE_REGEX,
             searchEntry: "defineEditor",
-            useBundleHash: !watch,
+            useBundleHash: true,
             ctx,
             externalComponents: externalEditors,
         }),
@@ -1429,7 +1500,7 @@ const findExternalComponents = async (ctx) => {
     const externalComponents = [];
     const externalEditors = [];
     for (const componentLibrary of componentLibraries) {
-        const { libraryName} = getComponentLibraryConfig(componentLibrary);
+        const { libraryName } = getComponentLibraryConfig(componentLibrary);
         try {
             const libMeta = await getComponentLibraryMeta(ctx, componentLibrary);
             if (libMeta.plugin !== "react") {