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

package/lib/index.esm.js

@@ -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 = []) {