@pexip-engage-public/plugin-react 2.1.34 → 2.1.36

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @pexip-engage-public/plugin-react
 
+## 2.1.36
+
+### Patch Changes
+
+- 9fe91c2: chore: memoize onInstanceChange, remove useState
+
+## 2.1.35
+
+### Patch Changes
+
+- fcd64ea: chore: fix auto init disable
+
 ## 2.1.34
 
 ### Patch Changes

package/dist/PexipEngagePlugin.d.ts

@@ -7,6 +7,6 @@ interface PexipEngagePluginProps extends PexipEngagePluginContextProps {
     id?: string;
     style?: React.CSSProperties;
 }
-export declare function PexipEngagePlugin({ className, fallback, id, onInstanceChange, scriptSrc, style, ...config }: PexipEngagePluginProps): import("react/jsx-runtime").JSX.Element;
+export declare function PexipEngagePlugin({ className, fallback, id, onInstanceChange: _onInstanceChange, scriptSrc, style, children, ...config }: React.PropsWithChildren<PexipEngagePluginProps>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=PexipEngagePlugin.d.ts.map

package/dist/PexipEngagePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PexipEngagePlugin.d.ts","sourceRoot":"","sources":["../src/PexipEngagePlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAG3E,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AAI7E,UAAU,sBAAuB,SAAQ,6BAA6B;IACpE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,KAAK,OAAO,CAAC;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,EAAE,EACF,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,MAAM,EACV,EAAE,sBAAsB,2CAmCxB"}
+{"version":3,"file":"PexipEngagePlugin.d.ts","sourceRoot":"","sources":["../src/PexipEngagePlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAI3E,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AAI7E,UAAU,sBAAuB,SAAQ,6BAA6B;IACpE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,KAAK,OAAO,CAAC;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAGD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,EAAE,EACF,gBAAgB,EAAE,iBAAwB,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,MAAM,EACV,EAAE,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,2CAiCjD"}

package/dist/PexipEngagePlugin.js

@@ -1,28 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isValidElement, useEffect, useRef, useState } from "react";
+import { useEffectEvent } from "@pexip-engage-public/utils";
+import { isValidElement, useEffect, useRef } from "react";
 import { usePexipEngagePlugin } from "./usePexipEngagePlugin.js";
 import { usePluginConfiguration } from "./usePluginConfiguration.js";
-export function PexipEngagePlugin({ className, fallback, id, onInstanceChange, scriptSrc, style, ...config }) {
+function NOOP() { }
+export function PexipEngagePlugin({ className, fallback, id, onInstanceChange: _onInstanceChange = NOOP, scriptSrc, style, children, ...config }) {
     const { Plugin, status } = usePexipEngagePlugin(scriptSrc);
     const options = usePluginConfiguration(config);
     const containerRef = useRef(null);
-    const [instance, setInstance] = useState(null);
+    const onInstanceChange = useEffectEvent(_onInstanceChange);
     useEffect(() => {
         if (Plugin && containerRef.current) {
             const instance = new Plugin(containerRef.current, { config: options });
-            setInstance(instance);
+            onInstanceChange(instance);
             return () => {
                 instance.dispose();
-                setInstance(null);
+                onInstanceChange(null);
             };
         }
-    }, [Plugin, options]);
-    useEffect(() => {
-        onInstanceChange?.(instance);
-    }, [instance, onInstanceChange]);
+    }, [Plugin, options, onInstanceChange]);
     if (status === "failed" && isValidElement(fallback)) {
         return fallback;
     }
-    return (_jsx("div", { className: className, "data-pexip-auto-init": "false", id: id, ref: containerRef, style: style }));
+    return (_jsx("div", { className: className, "data-pexip-auto-init": "false", id: id, ref: containerRef, style: style, children: children }));
 }
 //# sourceMappingURL=PexipEngagePlugin.js.map

package/dist/PexipEngagePlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"PexipEngagePlugin.js","sourceRoot":"","sources":["../src/PexipEngagePlugin.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAUrE,MAAM,UAAU,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,EAAE,EACF,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,MAAM,EACc;IACvB,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC;IAC/C,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACnC,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;YACvE,WAAW,CAAC,QAAQ,CAAC,CAAC;YAEtB,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACnB,WAAW,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,EAAE,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEjC,IAAI,MAAM,KAAK,QAAQ,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACpD,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,OAAO,CACL,cACE,SAAS,EAAE,SAAS,0BACC,OAAO,EAC5B,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"PexipEngagePlugin.js","sourceRoot":"","sources":["../src/PexipEngagePlugin.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAUrE,SAAS,IAAI,KAAI,CAAC;AAClB,MAAM,UAAU,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,EAAE,EACF,gBAAgB,EAAE,iBAAiB,GAAG,IAAI,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,MAAM,EACuC;IAChD,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC;IAC/C,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,gBAAgB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACnC,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;YACvE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAE3B,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACzB,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAExC,IAAI,MAAM,KAAK,QAAQ,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACpD,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,OAAO,CACL,cACE,SAAS,EAAE,SAAS,0BACC,OAAO,EAC5B,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,KAAK,YAEX,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pexip-engage-public/plugin-react",
-  "version": "2.1.34",
+  "version": "2.1.36",
   "description": "React wrapper component for the Pexip Engage Plugin",
   "homepage": "https://github.com/skedify/frontend-mono/tree/develop/apps/booking-plugin/packages/plugin-react#readme",
   "bugs": {
@@ -29,7 +29,8 @@
   ],
   "dependencies": {
     "deepmerge": "^4.3.1",
-    "@pexip-engage-public/plugin": "1.1.22"
+    "@pexip-engage-public/plugin": "1.1.22",
+    "@pexip-engage-public/utils": "0.1.46"
   },
   "devDependencies": {
     "@pexip-engage/tsconfig": "0.1.1",

package/src/PexipEngagePlugin.tsx

@@ -1,5 +1,6 @@
 import type { PluginInstance } from "@pexip-engage-public/plugin/instance";
-import { isValidElement, useEffect, useRef, useState } from "react";
+import { useEffectEvent } from "@pexip-engage-public/utils";
+import { isValidElement, useEffect, useRef } from "react";
 
 import type { PexipEngagePluginContextProps } from "./PexipEngageContext.js";
 import { usePexipEngagePlugin } from "./usePexipEngagePlugin.js";
@@ -13,35 +14,33 @@ interface PexipEngagePluginProps extends PexipEngagePluginContextProps {
   style?: React.CSSProperties;
 }
 
+function NOOP() {}
 export function PexipEngagePlugin({
   className,
   fallback,
   id,
-  onInstanceChange,
+  onInstanceChange: _onInstanceChange = NOOP,
   scriptSrc,
   style,
+  children,
   ...config
-}: PexipEngagePluginProps) {
+}: React.PropsWithChildren<PexipEngagePluginProps>) {
   const { Plugin, status } = usePexipEngagePlugin(scriptSrc);
   const options = usePluginConfiguration(config);
   const containerRef = useRef<HTMLDivElement>(null);
-  const [instance, setInstance] = useState<PluginInstance | null>(null);
+  const onInstanceChange = useEffectEvent(_onInstanceChange);
 
   useEffect(() => {
     if (Plugin && containerRef.current) {
       const instance = new Plugin(containerRef.current, { config: options });
-      setInstance(instance);
+      onInstanceChange(instance);
 
       return () => {
         instance.dispose();
-        setInstance(null);
+        onInstanceChange(null);
       };
     }
-  }, [Plugin, options]);
-
-  useEffect(() => {
-    onInstanceChange?.(instance);
-  }, [instance, onInstanceChange]);
+  }, [Plugin, options, onInstanceChange]);
 
   if (status === "failed" && isValidElement(fallback)) {
     return fallback;
@@ -54,6 +53,8 @@ export function PexipEngagePlugin({
       id={id}
       ref={containerRef}
       style={style}
-    />
+    >
+      {children}
+    </div>
   );
 }