@adhese/sdk-react 1.1.4 → 1.2.0-nightly-20240625081726

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @adhese/sdk-react
 
+## 1.2.0-nightly-20240625081726
+
+### Minor Changes
+
+- 407322d: Allow passing of all HTMLAttributes props to AdheseSlot to allow more customizing of the rendered element
+- 1ea0633: Set width and height on passed element from the passed options to prevent content jumping in your page if the size of the slot is already known
+
+### Patch Changes
+
+- Updated dependencies [1ea0633]
+  - @adhese/sdk@1.1.4-nightly-20240625081726
+
 ## 1.1.4
 
 ### Patch Changes

package/dist/AdheseSlot.js

@@ -4,21 +4,55 @@ import { watch } from "@adhese/sdk-shared";
 import { useAdheseSlot } from "./useAdheseSlot.js";
 function AdheseSlot({
   onChange,
-  ...options
+  width,
+  height,
+  lazyLoading,
+  lazyLoadingOptions,
+  slot,
+  pluginOptions,
+  renderMode,
+  type,
+  setup,
+  parameters,
+  format,
+  style,
+  id,
+  ...props
 }) {
   const element = useRef(null);
-  const slot = useAdheseSlot(element, {
-    ...options,
+  const slotState = useAdheseSlot(element, {
+    width,
+    height,
+    lazyLoading,
+    lazyLoadingOptions,
+    slot,
+    pluginOptions,
+    renderMode,
+    type,
+    parameters,
+    format,
     setup: useCallback((context, hooks) => {
-      var _a;
-      (_a = options.setup) == null ? void 0 : _a.call(options, context, hooks);
+      setup == null ? void 0 : setup(context, hooks);
       watch(context, (newSlot) => {
         onChange == null ? void 0 : onChange(newSlot);
       }, { immediate: true, deep: true });
-    }, [options.setup, onChange])
+    }, [setup, onChange])
   });
-  const id = useId();
-  return /* @__PURE__ */ jsx("div", { ref: element, id: `${id}${slot == null ? void 0 : slot.id}`, "data-name": slot == null ? void 0 : slot.name });
+  const componentId = useId();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: element,
+      id: id && `${componentId}${slotState == null ? void 0 : slotState.id}`,
+      "data-name": slotState == null ? void 0 : slotState.name,
+      style: {
+        width: slotState == null ? void 0 : slotState.options.width,
+        height: slotState == null ? void 0 : slotState.options.height,
+        ...style
+      },
+      ...props
+    }
+  );
 }
 export {
   AdheseSlot

package/dist/AdheseSlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdheseSlot.js","sources":["../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, useId, useRef } from 'react';\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { useAdheseSlot } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n} & Omit<AdheseSlotOptions, 'containingElement' | 'context'>;\n\n/**\n * Component to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be\n * created when the containing element is available and the Adhese instance is available.\n *\n * @warning Make sure to wrap your `setup` function in a `useCallback` as it can trigger an infinite loop if it's not\n * memoized.\n */\n// eslint-disable-next-line ts/naming-convention\nexport function AdheseSlot({\n  onChange,\n  ...options\n}: AdheseSlotProps): ReactElement {\n  const element = useRef<HTMLDivElement | null>(null);\n\n  const slot = useAdheseSlot(element, {\n    ...options,\n    setup: useCallback(((context, hooks): void => {\n      options.setup?.(context, hooks);\n\n      watch(context, (newSlot) => {\n        onChange?.(newSlot);\n      }, { immediate: true, deep: true });\n    }) satisfies AdheseSlotOptions['setup'], [options.setup, onChange]),\n  });\n\n  const id = useId();\n\n  return (\n    <div ref={element} id={`${id}${slot?.id}`} data-name={slot?.name} />\n  );\n}\n"],"names":[],"mappings":";;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAU,OAA8B,IAAI;AAE5C,QAAA,OAAO,cAAc,SAAS;AAAA,IAClC,GAAG;AAAA,IACH,OAAO,YAAa,CAAC,SAAS,UAAgB;;AACpC,oBAAA,UAAA,iCAAQ,SAAS;AAEnB,YAAA,SAAS,CAAC,YAAY;AAC1B,6CAAW;AAAA,SACV,EAAE,WAAW,MAAM,MAAM,KAAM,CAAA;AAAA,IACK,GAAA,CAAC,QAAQ,OAAO,QAAQ,CAAC;AAAA,EAAA,CACnE;AAED,QAAM,KAAK;AAEX,SACG,oBAAA,OAAA,EAAI,KAAK,SAAS,IAAI,GAAG,EAAE,GAAG,6BAAM,EAAE,IAAI,aAAW,6BAAM,KAAM,CAAA;AAEtE;"}
+{"version":3,"file":"AdheseSlot.js","sources":["../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type HTMLAttributes, type ReactElement, useCallback, useId, useRef } from 'react';\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { useAdheseSlot } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n} & Omit<AdheseSlotOptions, 'containingElement' | 'context'> & HTMLAttributes<HTMLDivElement>;\n\n/**\n * Component to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be\n * created when the containing element is available and the Adhese instance is available.\n *\n * @warning Make sure to wrap your `setup` function in a `useCallback` as it can trigger an infinite loop if it's not\n * memoized.\n */\n// eslint-disable-next-line ts/naming-convention\nexport function AdheseSlot({\n  onChange,\n  width,\n  height,\n  lazyLoading,\n  lazyLoadingOptions,\n  slot,\n  pluginOptions,\n  renderMode,\n  type,\n  setup,\n  parameters,\n  format,\n  style,\n  id,\n  ...props\n}: AdheseSlotProps): ReactElement {\n  const element = useRef<HTMLDivElement | null>(null);\n\n  const slotState = useAdheseSlot(element, {\n    width,\n    height,\n    lazyLoading,\n    lazyLoadingOptions,\n    slot,\n    pluginOptions,\n    renderMode,\n    type,\n    parameters,\n    format,\n    setup: useCallback(((context, hooks): void => {\n      setup?.(context, hooks);\n\n      watch(context, (newSlot) => {\n        onChange?.(newSlot);\n      }, { immediate: true, deep: true });\n    }) satisfies AdheseSlotOptions['setup'], [setup, onChange]),\n  });\n\n  const componentId = useId();\n\n  return (\n    <div\n      ref={element}\n      id={id && `${componentId}${slotState?.id}`}\n      data-name={slotState?.name}\n      style={{\n        width: slotState?.options.width,\n        height: slotState?.options.height,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAU,OAA8B,IAAI;AAE5C,QAAA,YAAY,cAAc,SAAS;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,YAAa,CAAC,SAAS,UAAgB;AAC5C,qCAAQ,SAAS;AAEX,YAAA,SAAS,CAAC,YAAY;AAC1B,6CAAW;AAAA,SACV,EAAE,WAAW,MAAM,MAAM,KAAM,CAAA;AAAA,IAAA,GACK,CAAC,OAAO,QAAQ,CAAC;AAAA,EAAA,CAC3D;AAED,QAAM,cAAc;AAGlB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI,MAAM,GAAG,WAAW,GAAG,uCAAW,EAAE;AAAA,MACxC,aAAW,uCAAW;AAAA,MACtB,OAAO;AAAA,QACL,OAAO,uCAAW,QAAQ;AAAA,QAC1B,QAAQ,uCAAW,QAAQ;AAAA,QAC3B,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/cjs/AdheseSlot.cjs

@@ -6,21 +6,55 @@ const sdkShared = require("@adhese/sdk-shared");
 const useAdheseSlot = require("./useAdheseSlot.cjs");
 function AdheseSlot({
   onChange,
-  ...options
+  width,
+  height,
+  lazyLoading,
+  lazyLoadingOptions,
+  slot,
+  pluginOptions,
+  renderMode,
+  type,
+  setup,
+  parameters,
+  format,
+  style,
+  id,
+  ...props
 }) {
   const element = react.useRef(null);
-  const slot = useAdheseSlot.useAdheseSlot(element, {
-    ...options,
+  const slotState = useAdheseSlot.useAdheseSlot(element, {
+    width,
+    height,
+    lazyLoading,
+    lazyLoadingOptions,
+    slot,
+    pluginOptions,
+    renderMode,
+    type,
+    parameters,
+    format,
     setup: react.useCallback((context, hooks) => {
-      var _a;
-      (_a = options.setup) == null ? void 0 : _a.call(options, context, hooks);
+      setup == null ? void 0 : setup(context, hooks);
       sdkShared.watch(context, (newSlot) => {
         onChange == null ? void 0 : onChange(newSlot);
       }, { immediate: true, deep: true });
-    }, [options.setup, onChange])
+    }, [setup, onChange])
   });
-  const id = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: element, id: `${id}${slot == null ? void 0 : slot.id}`, "data-name": slot == null ? void 0 : slot.name });
+  const componentId = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: element,
+      id: id && `${componentId}${slotState == null ? void 0 : slotState.id}`,
+      "data-name": slotState == null ? void 0 : slotState.name,
+      style: {
+        width: slotState == null ? void 0 : slotState.options.width,
+        height: slotState == null ? void 0 : slotState.options.height,
+        ...style
+      },
+      ...props
+    }
+  );
 }
 exports.AdheseSlot = AdheseSlot;
 //# sourceMappingURL=AdheseSlot.cjs.map

package/dist/cjs/AdheseSlot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AdheseSlot.cjs","sources":["../../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, useId, useRef } from 'react';\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { useAdheseSlot } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n} & Omit<AdheseSlotOptions, 'containingElement' | 'context'>;\n\n/**\n * Component to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be\n * created when the containing element is available and the Adhese instance is available.\n *\n * @warning Make sure to wrap your `setup` function in a `useCallback` as it can trigger an infinite loop if it's not\n * memoized.\n */\n// eslint-disable-next-line ts/naming-convention\nexport function AdheseSlot({\n  onChange,\n  ...options\n}: AdheseSlotProps): ReactElement {\n  const element = useRef<HTMLDivElement | null>(null);\n\n  const slot = useAdheseSlot(element, {\n    ...options,\n    setup: useCallback(((context, hooks): void => {\n      options.setup?.(context, hooks);\n\n      watch(context, (newSlot) => {\n        onChange?.(newSlot);\n      }, { immediate: true, deep: true });\n    }) satisfies AdheseSlotOptions['setup'], [options.setup, onChange]),\n  });\n\n  const id = useId();\n\n  return (\n    <div ref={element} id={`${id}${slot?.id}`} data-name={slot?.name} />\n  );\n}\n"],"names":["useRef","useAdheseSlot","useCallback","watch","useId","jsx"],"mappings":";;;;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAUA,aAA8B,IAAI;AAE5C,QAAA,OAAOC,4BAAc,SAAS;AAAA,IAClC,GAAG;AAAA,IACH,OAAOC,MAAA,YAAa,CAAC,SAAS,UAAgB;;AACpC,oBAAA,UAAA,iCAAQ,SAAS;AAEnBC,sBAAA,SAAS,CAAC,YAAY;AAC1B,6CAAW;AAAA,SACV,EAAE,WAAW,MAAM,MAAM,KAAM,CAAA;AAAA,IACK,GAAA,CAAC,QAAQ,OAAO,QAAQ,CAAC;AAAA,EAAA,CACnE;AAED,QAAM,KAAKC,MAAAA;AAEX,SACGC,2BAAAA,IAAA,OAAA,EAAI,KAAK,SAAS,IAAI,GAAG,EAAE,GAAG,6BAAM,EAAE,IAAI,aAAW,6BAAM,KAAM,CAAA;AAEtE;;"}
+{"version":3,"file":"AdheseSlot.cjs","sources":["../../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type HTMLAttributes, type ReactElement, useCallback, useId, useRef } from 'react';\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { useAdheseSlot } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n} & Omit<AdheseSlotOptions, 'containingElement' | 'context'> & HTMLAttributes<HTMLDivElement>;\n\n/**\n * Component to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be\n * created when the containing element is available and the Adhese instance is available.\n *\n * @warning Make sure to wrap your `setup` function in a `useCallback` as it can trigger an infinite loop if it's not\n * memoized.\n */\n// eslint-disable-next-line ts/naming-convention\nexport function AdheseSlot({\n  onChange,\n  width,\n  height,\n  lazyLoading,\n  lazyLoadingOptions,\n  slot,\n  pluginOptions,\n  renderMode,\n  type,\n  setup,\n  parameters,\n  format,\n  style,\n  id,\n  ...props\n}: AdheseSlotProps): ReactElement {\n  const element = useRef<HTMLDivElement | null>(null);\n\n  const slotState = useAdheseSlot(element, {\n    width,\n    height,\n    lazyLoading,\n    lazyLoadingOptions,\n    slot,\n    pluginOptions,\n    renderMode,\n    type,\n    parameters,\n    format,\n    setup: useCallback(((context, hooks): void => {\n      setup?.(context, hooks);\n\n      watch(context, (newSlot) => {\n        onChange?.(newSlot);\n      }, { immediate: true, deep: true });\n    }) satisfies AdheseSlotOptions['setup'], [setup, onChange]),\n  });\n\n  const componentId = useId();\n\n  return (\n    <div\n      ref={element}\n      id={id && `${componentId}${slotState?.id}`}\n      data-name={slotState?.name}\n      style={{\n        width: slotState?.options.width,\n        height: slotState?.options.height,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n"],"names":["useRef","useAdheseSlot","useCallback","watch","useId","jsx"],"mappings":";;;;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAUA,aAA8B,IAAI;AAE5C,QAAA,YAAYC,4BAAc,SAAS;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAOC,MAAA,YAAa,CAAC,SAAS,UAAgB;AAC5C,qCAAQ,SAAS;AAEXC,sBAAA,SAAS,CAAC,YAAY;AAC1B,6CAAW;AAAA,SACV,EAAE,WAAW,MAAM,MAAM,KAAM,CAAA;AAAA,IAAA,GACK,CAAC,OAAO,QAAQ,CAAC;AAAA,EAAA,CAC3D;AAED,QAAM,cAAcC,MAAAA;AAGlB,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI,MAAM,GAAG,WAAW,GAAG,uCAAW,EAAE;AAAA,MACxC,aAAW,uCAAW;AAAA,MACtB,OAAO;AAAA,QACL,OAAO,uCAAW,QAAQ;AAAA,QAC1B,QAAQ,uCAAW,QAAQ;AAAA,QAC3B,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;"}

package/dist/sdkReact.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactElement, RefObject } from 'react';
+import { PropsWithChildren, ReactElement, RefObject, HTMLAttributes } from 'react';
 import { AdheseOptions, Adhese, AdheseSlotOptions, AdheseSlot as AdheseSlot$1 } from '@adhese/sdk';
 
 /**
@@ -30,7 +30,7 @@ type AdheseSlotProps = {
      * Callback to be called when the slot is created or disposed
      */
     onChange?(slot: AdheseSlot$1 | null): void;
-} & Omit<AdheseSlotOptions, 'containingElement' | 'context'>;
+} & Omit<AdheseSlotOptions, 'containingElement' | 'context'> & HTMLAttributes<HTMLDivElement>;
 /**
  * Component to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be
  * created when the containing element is available and the Adhese instance is available.
@@ -38,6 +38,6 @@ type AdheseSlotProps = {
  * @warning Make sure to wrap your `setup` function in a `useCallback` as it can trigger an infinite loop if it's not
  * memoized.
  */
-declare function AdheseSlot({ onChange, ...options }: AdheseSlotProps): ReactElement;
+declare function AdheseSlot({ onChange, width, height, lazyLoading, lazyLoadingOptions, slot, pluginOptions, renderMode, type, setup, parameters, format, style, id, ...props }: AdheseSlotProps): ReactElement;
 
 export { AdheseProvider, AdheseSlot, useAdhese, useAdheseSlot };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adhese/sdk-react",
   "type": "module",
-  "version": "1.1.4",
+  "version": "1.2.0-nightly-20240625081726",
   "description": "Adhese SDK",
   "repository": {
     "type": "git",
@@ -44,7 +44,7 @@
     "react-dom": ">=16.13"
   },
   "dependencies": {
-    "@adhese/sdk": "^1.1.3",
+    "@adhese/sdk": "1.1.4-nightly-20240625081726",
     "@adhese/sdk-shared": "^1.1.0"
   }
 }