@embeddable.com/sdk-react 2.2.8 → 2.2.10

package/lib/index.esm.js

@@ -613,13 +613,41 @@ var validateComponentMetaPlugin = (componentFileRegex) => {
     };
 };
 
+/**
+ * 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".
+ * That will force styled-components to add classes to the customers web-component
+ * see https://styled-components.com/docs/api#stylesheetmanager
+ */
+const styledComponentsEntrypointModifier = {
+    getContentBegin() {
+        return "<StyleSheetManager target={rootEl.getRootNode()}>";
+    },
+    getContentEnd() {
+        return "</StyleSheetManager>";
+    },
+    getImports() {
+        return "import {StyleSheetManager} from 'styled-components'";
+    },
+    needToModify(ctx) {
+        var _a;
+        const packageJsonFilePath = path.resolve(ctx.client.rootDir, "package.json");
+        const packageJson = require(packageJsonFilePath);
+        return !!((_a = packageJson.dependencies) === null || _a === void 0 ? void 0 : _a["styled-components"]);
+    },
+};
+
+const entrypointModifiers = [
+    styledComponentsEntrypointModifier,
+];
+
 const oraP = import('ora');
 const EMB_FILE_REGEX = /^(.*)(?<!\.type|\.options)\.emb\.[jt]s$/;
 var generate = async (ctx) => {
     const ora = (await oraP).default;
     const progress = ora("React: building components...").start();
     const filesList = await findFiles(ctx.client.srcDir, EMB_FILE_REGEX);
-    await injectImports(ctx, filesList);
+    await prepareEntrypoint(ctx, filesList);
     await runViteBuild(ctx);
     progress.succeed("React: components built completed");
 };
@@ -661,7 +689,10 @@ const IMPORT_REPLACE_TOKEN = "{{LAZY_IMPORTS}}";
 const ERROR_FALLBACK_COMPONENT_IMPORT_TOKEN = "{{ERROR_FALLBACK_COMPONENT_IMPORT}}";
 const ERROR_FALLBACK_COMPONENT_TOKEN = "{{ERROR_FALLBACK_COMPONENT}}";
 const ERROR_FALLBACK_COMPONENT_DEFAULT_NAME = "ErrorFallbackComponent";
-async function injectImports(ctx, filesList) {
+const ADDITIONAL_CONTENT_IMPORT_TOKEN = "{{ADDITIONAL_CONTENT_IMPORT}}";
+const ADDITIONAL_CONTENT_BEGIN_TOKEN = "{{ADDITIONAL_CONTENT_BEGIN}}";
+const ADDITIONAL_CONTENT_END_TOKEN = "{{ADDITIONAL_CONTENT_END}}";
+async function prepareEntrypoint(ctx, filesList) {
     const imports = filesList
         .map(([fileName, filePath]) => `\t${fileName}: React.lazy(() => import('./${path.relative(ctx.client.rootDir, filePath)}'))`)
         .join(",\n");
@@ -671,11 +702,24 @@ async function injectImports(ctx, filesList) {
         errorBoundaryImport = `import ${ERROR_FALLBACK_COMPONENT_DEFAULT_NAME} from './${path.relative(ctx.client.rootDir, ctx.client.errorFallbackComponent)}';`;
         errorFallbackComponent = ERROR_FALLBACK_COMPONENT_DEFAULT_NAME;
     }
+    const additionalContentImport = [];
+    let additionalContentBegin = [];
+    let additionalContentEnd = [];
+    for (const entrypointModifier of entrypointModifiers) {
+        if (entrypointModifier.needToModify(ctx)) {
+            additionalContentImport.push(entrypointModifier.getImports(ctx));
+            additionalContentBegin.push(entrypointModifier.getContentBegin(ctx));
+            additionalContentEnd.unshift(entrypointModifier.getContentEnd(ctx));
+        }
+    }
     const content = await fs$1.readFile(path.resolve(ctx["sdk-react"].templatesDir, `${ctx["sdk-react"].outputOptions.componentsEntryPointFilename}.template`), "utf8");
     await fs$1.writeFile(path.resolve(ctx.client.rootDir, ctx["sdk-react"].outputOptions.componentsEntryPointFilename), content
         .replace(IMPORT_REPLACE_TOKEN, imports)
         .replace(ERROR_FALLBACK_COMPONENT_IMPORT_TOKEN, errorBoundaryImport)
-        .replace(ERROR_FALLBACK_COMPONENT_TOKEN, errorFallbackComponent));
+        .replace(ERROR_FALLBACK_COMPONENT_TOKEN, errorFallbackComponent)
+        .replace(ADDITIONAL_CONTENT_IMPORT_TOKEN, additionalContentImport.join("\n"))
+        .replace(ADDITIONAL_CONTENT_BEGIN_TOKEN, additionalContentBegin.join("\n"))
+        .replace(ADDITIONAL_CONTENT_END_TOKEN, additionalContentEnd.join("\n")));
 }
 
 var build = async (ctx) => {