@embeddable.com/sdk-react 2.2.8 → 2.2.10

package/lib/utils/EntrypointModifier.d.ts

@@ -0,0 +1,6 @@
+export interface EntrypointModifier {
+    needToModify: (ctx: any) => boolean;
+    getContentBegin: (ctx: any) => string;
+    getContentEnd: (ctx: any) => string;
+    getImports: (ctx: any) => string;
+}

package/lib/utils/entrypointModifiers.d.ts

@@ -0,0 +1,2 @@
+import { EntrypointModifier } from "./EntrypointModifier";
+export declare const entrypointModifiers: EntrypointModifier[];

package/lib/utils/styledComponentsEntrypointModifier.d.ts

@@ -0,0 +1,8 @@
+import { EntrypointModifier } from "./EntrypointModifier";
+/**
+ * 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
+ */
+export declare const styledComponentsEntrypointModifier: EntrypointModifier;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddable.com/sdk-react",
-  "version": "2.2.8",
+  "version": "2.2.10",
   "description": "Embeddable SDK React plugin responsible for React components bundling.",
   "keywords": [
     "embeddable",

package/templates/embeddable-entry-point.jsx.template

@@ -1,5 +1,6 @@
 import 'vite/modulepreload-polyfill';
 {{ERROR_FALLBACK_COMPONENT_IMPORT}}
+{{ADDITIONAL_CONTENT_IMPORT}}
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -18,7 +19,9 @@ export default (rootEl, componentName, props) => {
     root.render(
     <ErrorBoundary fallback={{{ERROR_FALLBACK_COMPONENT}}}>
         <React.Suspense fallback={<div/>}>
-            <Component {...props} propsUpdateListener={rootEl} />
+            {{ADDITIONAL_CONTENT_BEGIN}}
+                <Component {...props} propsUpdateListener={rootEl} />
+            {{ADDITIONAL_CONTENT_END}}
         </React.Suspense>
     </ErrorBoundary>
     );