@adhese/sdk-react 1.3.2 → 1.4.0-nightly-20241118121055

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @adhese/sdk-react
 
+## 1.4.0-nightly-20241118121055
+
+### Minor Changes
+
+- 556744b: Add useWatch hook that will allow you to observer if a value of reactive object changes within an Adhese slot. The value that is watched is converted into a proper React state that will trigger a re-render when it changes.
+
+### Patch Changes
+
+- 556744b: Make sure that the slot state is not updated every time a internal value changes
+- Updated dependencies [556744b]
+- Updated dependencies [236883d]
+  - @adhese/sdk-shared@1.3.0-nightly-20241118121055
+  - @adhese/sdk@1.4.0-nightly-20241118121055
+
 ## 1.3.2
 
 ### Patch Changes

package/dist/AdheseSlot.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { watch } from "@adhese/sdk-shared";
 import { useId, useCallback } from "react";
-import { useAdheseSlot } from "./useAdheseSlot.js";
+import { useAdheseSlot, useWatch } from "./useAdheseSlot.js";
 function AdheseSlot({
   onChange,
   width,
@@ -41,7 +41,9 @@ function AdheseSlot({
       }, { immediate: true, deep: true });
     }, [setup, onChange])
   });
-  const { status, name, format: slotFormat } = slotState ?? {};
+  const status = useWatch(slotState ? () => slotState.status : void 0);
+  const slotFormat = useWatch(slotState ? () => slotState.format : void 0);
+  const name = useWatch(slotState ? () => slotState.name : void 0);
   if (["error", "empty"].includes(status ?? "")) {
     return null;
   }

package/dist/AdheseSlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdheseSlot.js","sources":["../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { type HTMLAttributes, type ReactNode, useCallback, useId } from 'react';\nimport { useAdheseSlot } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Placeholder to be shown when the slot is not rendered yet.\n   */\n  placeholder?: ReactNode;\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n  /**\n   * Inject custom React elements into the slot when it's rendered.\n   */\n  render?(slot: Slot): ReactNode;\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  id,\n  render,\n  placeholder,\n  style,\n  ...props\n}: AdheseSlotProps): ReactNode {\n  const reactId = useId().replaceAll(':', '');\n  const componentId = id ?? `slot-${reactId}`;\n\n  const slotState = useAdheseSlot(componentId, {\n    width,\n    height,\n    lazyLoading,\n    lazyLoadingOptions,\n    slot,\n    pluginOptions,\n    renderMode: render ? 'none' : 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 { status, name, format: slotFormat } = slotState ?? {};\n\n  if (['error', 'empty'].includes(status ?? '')) {\n    return null;\n  }\n\n  return (\n    <div\n      data-name={name}\n      data-status={status}\n      data-format={slotFormat}\n      data-slot={slot}\n      id={componentId}\n      style={{\n        width,\n        height,\n        ...style,\n      }}\n      {...props}\n    >\n      {slotState?.data ? render?.(slotState) : placeholder}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AA8BO,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;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,QAAM,UAAU,MAAQ,EAAA,WAAW,KAAK,EAAE;AACpC,QAAA,cAAc,MAAM,QAAQ,OAAO;AAEnC,QAAA,YAAY,cAAc,aAAa;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,SAAS,SAAS;AAAA,IAC9B;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,EAAE,QAAQ,MAAM,QAAQ,WAAW,IAAI,aAAa;AAE1D,MAAI,CAAC,SAAS,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG;AACtC,WAAA;AAAA,EACT;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa;AAAA,MACb,eAAa;AAAA,MACb,aAAW;AAAA,MACX,IAAI;AAAA,MACJ,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,WAAW,uCAAA,QAAO,iCAAS,aAAa;AAAA,IAAA;AAAA,EAAA;AAG/C;"}
+{"version":3,"file":"AdheseSlot.js","sources":["../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { type HTMLAttributes, type ReactNode, useCallback, useId } from 'react';\nimport { useAdheseSlot, useWatch } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Placeholder to be shown when the slot is not rendered yet.\n   */\n  placeholder?: ReactNode;\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n  /**\n   * Inject custom React elements into the slot when it's rendered.\n   */\n  render?(slot: Slot): ReactNode;\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  id,\n  render,\n  placeholder,\n  style,\n  ...props\n}: AdheseSlotProps): ReactNode {\n  const reactId = useId().replaceAll(':', '');\n  const componentId = id ?? `slot-${reactId}`;\n\n  const slotState = useAdheseSlot(componentId, {\n    width,\n    height,\n    lazyLoading,\n    lazyLoadingOptions,\n    slot,\n    pluginOptions,\n    renderMode: render ? 'none' : 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 status = useWatch(slotState ? (): Slot['status'] => slotState.status : undefined);\n  const slotFormat = useWatch(slotState ? (): Slot['format'] => slotState.format : undefined);\n  const name = useWatch(slotState ? (): Slot['name'] => slotState.name : undefined);\n\n  if (['error', 'empty'].includes(status ?? '')) {\n    return null;\n  }\n\n  return (\n    <div\n      data-name={name}\n      data-status={status}\n      data-format={slotFormat}\n      data-slot={slot}\n      id={componentId}\n      style={{\n        width,\n        height,\n        ...style,\n      }}\n      {...props}\n    >\n      {slotState?.data ? render?.(slotState) : placeholder}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AA8BO,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;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,QAAM,UAAU,MAAQ,EAAA,WAAW,KAAK,EAAE;AACpC,QAAA,cAAc,MAAM,QAAQ,OAAO;AAEnC,QAAA,YAAY,cAAc,aAAa;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,SAAS,SAAS;AAAA,IAC9B;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,SAAS,SAAS,YAAY,MAAsB,UAAU,SAAS,MAAS;AACtF,QAAM,aAAa,SAAS,YAAY,MAAsB,UAAU,SAAS,MAAS;AAC1F,QAAM,OAAO,SAAS,YAAY,MAAoB,UAAU,OAAO,MAAS;AAEhF,MAAI,CAAC,SAAS,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG;AACtC,WAAA;AAAA,EACT;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa;AAAA,MACb,eAAa;AAAA,MACb,aAAW;AAAA,MACX,IAAI;AAAA,MACJ,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,WAAW,uCAAA,QAAO,iCAAS,aAAa;AAAA,IAAA;AAAA,EAAA;AAG/C;"}

package/dist/cjs/AdheseSlot.cjs

@@ -43,7 +43,9 @@ function AdheseSlot({
       }, { immediate: true, deep: true });
     }, [setup, onChange])
   });
-  const { status, name, format: slotFormat } = slotState ?? {};
+  const status = useAdheseSlot.useWatch(slotState ? () => slotState.status : void 0);
+  const slotFormat = useAdheseSlot.useWatch(slotState ? () => slotState.format : void 0);
+  const name = useAdheseSlot.useWatch(slotState ? () => slotState.name : void 0);
   if (["error", "empty"].includes(status ?? "")) {
     return null;
   }

package/dist/cjs/AdheseSlot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AdheseSlot.cjs","sources":["../../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { type HTMLAttributes, type ReactNode, useCallback, useId } from 'react';\nimport { useAdheseSlot } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Placeholder to be shown when the slot is not rendered yet.\n   */\n  placeholder?: ReactNode;\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n  /**\n   * Inject custom React elements into the slot when it's rendered.\n   */\n  render?(slot: Slot): ReactNode;\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  id,\n  render,\n  placeholder,\n  style,\n  ...props\n}: AdheseSlotProps): ReactNode {\n  const reactId = useId().replaceAll(':', '');\n  const componentId = id ?? `slot-${reactId}`;\n\n  const slotState = useAdheseSlot(componentId, {\n    width,\n    height,\n    lazyLoading,\n    lazyLoadingOptions,\n    slot,\n    pluginOptions,\n    renderMode: render ? 'none' : 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 { status, name, format: slotFormat } = slotState ?? {};\n\n  if (['error', 'empty'].includes(status ?? '')) {\n    return null;\n  }\n\n  return (\n    <div\n      data-name={name}\n      data-status={status}\n      data-format={slotFormat}\n      data-slot={slot}\n      id={componentId}\n      style={{\n        width,\n        height,\n        ...style,\n      }}\n      {...props}\n    >\n      {slotState?.data ? render?.(slotState) : placeholder}\n    </div>\n  );\n}\n"],"names":["useId","useAdheseSlot","useCallback","watch","jsx"],"mappings":";;;;;;AA8BO,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;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,QAAM,UAAUA,MAAAA,MAAQ,EAAA,WAAW,KAAK,EAAE;AACpC,QAAA,cAAc,MAAM,QAAQ,OAAO;AAEnC,QAAA,YAAYC,4BAAc,aAAa;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,SAAS,SAAS;AAAA,IAC9B;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,EAAE,QAAQ,MAAM,QAAQ,WAAW,IAAI,aAAa;AAE1D,MAAI,CAAC,SAAS,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG;AACtC,WAAA;AAAA,EACT;AAGE,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa;AAAA,MACb,eAAa;AAAA,MACb,aAAW;AAAA,MACX,IAAI;AAAA,MACJ,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,WAAW,uCAAA,QAAO,iCAAS,aAAa;AAAA,IAAA;AAAA,EAAA;AAG/C;;"}
+{"version":3,"file":"AdheseSlot.cjs","sources":["../../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport type { AdheseSlotOptions, AdheseSlot as Slot } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { type HTMLAttributes, type ReactNode, useCallback, useId } from 'react';\nimport { useAdheseSlot, useWatch } from './useAdheseSlot';\n\nexport type AdheseSlotProps = {\n  /**\n   * Placeholder to be shown when the slot is not rendered yet.\n   */\n  placeholder?: ReactNode;\n  /**\n   * Callback to be called when the slot is created or disposed\n   */\n  onChange?(slot: Slot | null): void;\n  /**\n   * Inject custom React elements into the slot when it's rendered.\n   */\n  render?(slot: Slot): ReactNode;\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  id,\n  render,\n  placeholder,\n  style,\n  ...props\n}: AdheseSlotProps): ReactNode {\n  const reactId = useId().replaceAll(':', '');\n  const componentId = id ?? `slot-${reactId}`;\n\n  const slotState = useAdheseSlot(componentId, {\n    width,\n    height,\n    lazyLoading,\n    lazyLoadingOptions,\n    slot,\n    pluginOptions,\n    renderMode: render ? 'none' : 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 status = useWatch(slotState ? (): Slot['status'] => slotState.status : undefined);\n  const slotFormat = useWatch(slotState ? (): Slot['format'] => slotState.format : undefined);\n  const name = useWatch(slotState ? (): Slot['name'] => slotState.name : undefined);\n\n  if (['error', 'empty'].includes(status ?? '')) {\n    return null;\n  }\n\n  return (\n    <div\n      data-name={name}\n      data-status={status}\n      data-format={slotFormat}\n      data-slot={slot}\n      id={componentId}\n      style={{\n        width,\n        height,\n        ...style,\n      }}\n      {...props}\n    >\n      {slotState?.data ? render?.(slotState) : placeholder}\n    </div>\n  );\n}\n"],"names":["useId","useAdheseSlot","useCallback","watch","useWatch","jsx"],"mappings":";;;;;;AA8BO,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;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,QAAM,UAAUA,MAAAA,MAAQ,EAAA,WAAW,KAAK,EAAE;AACpC,QAAA,cAAc,MAAM,QAAQ,OAAO;AAEnC,QAAA,YAAYC,4BAAc,aAAa;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,SAAS,SAAS;AAAA,IAC9B;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,SAASC,cAAAA,SAAS,YAAY,MAAsB,UAAU,SAAS,MAAS;AACtF,QAAM,aAAaA,cAAAA,SAAS,YAAY,MAAsB,UAAU,SAAS,MAAS;AAC1F,QAAM,OAAOA,cAAAA,SAAS,YAAY,MAAoB,UAAU,OAAO,MAAS;AAEhF,MAAI,CAAC,SAAS,OAAO,EAAE,SAAS,UAAU,EAAE,GAAG;AACtC,WAAA;AAAA,EACT;AAGE,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa;AAAA,MACb,eAAa;AAAA,MACb,aAAW;AAAA,MACX,IAAI;AAAA,MACJ,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,WAAW,uCAAA,QAAO,iCAAS,aAAa;AAAA,IAAA;AAAA,EAAA;AAG/C;;"}

package/dist/cjs/sdkReact.cjs

@@ -7,4 +7,5 @@ exports.AdheseProvider = adheseContext.AdheseProvider;
 exports.useAdhese = adheseContext.useAdhese;
 exports.AdheseSlot = AdheseSlot.AdheseSlot;
 exports.useAdheseSlot = useAdheseSlot.useAdheseSlot;
+exports.useWatch = useAdheseSlot.useWatch;
 //# sourceMappingURL=sdkReact.cjs.map

package/dist/cjs/sdkReact.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sdkReact.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"sdkReact.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/cjs/useAdheseSlot.cjs

@@ -12,21 +12,13 @@ function useAdheseSlot(elementRef, options) {
     slot: options.slot
   }), [adhese == null ? void 0 : adhese.location, options.format, options.slot]);
   const [slot, setSlot] = react.useState(null);
-  const setup = react.useCallback((context, hooks) => {
-    var _a;
-    (_a = options.setup) == null ? void 0 : _a.call(options, context, hooks);
-    sdkShared.watch(context, (newSlot) => {
-      setSlot(newSlot && { ...newSlot });
-    }, { deep: true, immediate: true });
-  }, [options.setup]);
   react.useEffect(() => {
     const element = typeof elementRef === "string" ? elementRef : elementRef.current;
     if (adhese && element) {
-      adhese == null ? void 0 : adhese.addSlot({
+      setSlot(adhese == null ? void 0 : adhese.addSlot({
         ...options,
-        containingElement: element,
-        setup
-      });
+        containingElement: element
+      }));
     }
     return () => {
       setSlot(null);
@@ -34,5 +26,21 @@ function useAdheseSlot(elementRef, options) {
   }, [adhese, ...Object.values(options), slotSignature]);
   return slot;
 }
+function useWatch(value, options) {
+  const [state, setState] = react.useState(typeof value === "function" ? value() : value);
+  react.useEffect(() => {
+    let handle;
+    if (value) {
+      handle = sdkShared.watch(value, (newValue) => {
+        setState(newValue);
+      }, { immediate: true, ...options });
+    }
+    return () => {
+      handle == null ? void 0 : handle.stop();
+    };
+  }, [value]);
+  return state;
+}
 exports.useAdheseSlot = useAdheseSlot;
+exports.useWatch = useWatch;
 //# sourceMappingURL=useAdheseSlot.cjs.map

package/dist/cjs/useAdheseSlot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAdheseSlot.cjs","sources":["../../src/useAdheseSlot.ts"],"sourcesContent":["import type { AdheseSlot, AdheseSlotOptions } from '@adhese/sdk';\nimport { generateSlotSignature, watch } from '@adhese/sdk-shared';\nimport {\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useAdhese } from './adheseContext';\n\n/**\n * Hook to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be created\n * when the containing element is available and the Adhese instance is available.\n * @param elementRef The ref to the containing element\n * @param options The options to create the slot\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 */\nexport function useAdheseSlot(elementRef: RefObject<HTMLElement> | string, options: Omit<AdheseSlotOptions, 'containingElement' | 'context'>): AdheseSlot | null {\n  const adhese = useAdhese();\n\n  const slotSignature = useMemo(() => (adhese?.location) && generateSlotSignature({\n    location: adhese.location,\n    format: options.format,\n    parameters: options.parameters,\n    slot: options.slot,\n  }), [adhese?.location, options.format, options.slot]);\n\n  const [slot, setSlot] = useState<AdheseSlot | null>(null);\n\n  const setup = useCallback(((context, hooks): void => {\n    options.setup?.(context, hooks);\n\n    watch(context, (newSlot) => {\n      setSlot(newSlot && { ...newSlot });\n    }, { deep: true, immediate: true });\n  }) satisfies AdheseSlotOptions['setup'], [options.setup]);\n\n  useEffect(() => {\n    const element = typeof elementRef === 'string' ? elementRef : elementRef.current;\n\n    if (adhese && element) {\n      adhese?.addSlot({\n        ...options,\n        containingElement: element,\n        setup,\n      });\n    }\n\n    return (): void => {\n      setSlot(null);\n    };\n  }, [adhese, ...Object.values(options), slotSignature]);\n\n  return slot;\n}\n"],"names":["useAdhese","useMemo","generateSlotSignature","useState","useCallback","watch","useEffect"],"mappings":";;;;;AAoBgB,SAAA,cAAc,YAA6C,SAAsF;AAC/J,QAAM,SAASA,cAAAA;AAEf,QAAM,gBAAgBC,MAAA,QAAQ,OAAO,iCAAQ,aAAaC,UAAAA,sBAAsB;AAAA,IAC9E,UAAU,OAAO;AAAA,IACjB,QAAQ,QAAQ;AAAA,IAChB,YAAY,QAAQ;AAAA,IACpB,MAAM,QAAQ;AAAA,EAAA,CACf,GAAG,CAAC,iCAAQ,UAAU,QAAQ,QAAQ,QAAQ,IAAI,CAAC;AAEpD,QAAM,CAAC,MAAM,OAAO,IAAIC,eAA4B,IAAI;AAExD,QAAM,QAAQC,MAAAA,YAAa,CAAC,SAAS,UAAgB;;AAC3C,kBAAA,UAAA,iCAAQ,SAAS;AAEnBC,oBAAA,SAAS,CAAC,YAAY;AAC1B,cAAQ,WAAW,EAAE,GAAG,QAAS,CAAA;AAAA,OAChC,EAAE,MAAM,MAAM,WAAW,KAAM,CAAA;AAAA,EAAA,GACK,CAAC,QAAQ,KAAK,CAAC;AAExDC,QAAAA,UAAU,MAAM;AACd,UAAM,UAAU,OAAO,eAAe,WAAW,aAAa,WAAW;AAEzE,QAAI,UAAU,SAAS;AACrB,uCAAQ,QAAQ;AAAA,QACd,GAAG;AAAA,QACH,mBAAmB;AAAA,QACnB;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO,MAAY;AACjB,cAAQ,IAAI;AAAA,IAAA;AAAA,EACd,GACC,CAAC,QAAQ,GAAG,OAAO,OAAO,OAAO,GAAG,aAAa,CAAC;AAE9C,SAAA;AACT;;"}
+{"version":3,"file":"useAdheseSlot.cjs","sources":["../../src/useAdheseSlot.ts"],"sourcesContent":["import type { AdheseSlot, AdheseSlotOptions } from '@adhese/sdk';\nimport { generateSlotSignature, watch, type WatchHandle, type WatchOptions } from '@adhese/sdk-shared';\nimport {\n  type RefObject,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useAdhese } from './adheseContext';\n\n/**\n * Hook to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be created\n * when the containing element is available and the Adhese instance is available.\n * @param elementRef The ref to the containing element\n * @param options The options to create the slot\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 */\nexport function useAdheseSlot(elementRef: RefObject<HTMLElement> | string, options: Omit<AdheseSlotOptions, 'containingElement' | 'context'>): AdheseSlot | null {\n  const adhese = useAdhese();\n\n  const slotSignature = useMemo(() => (adhese?.location) && generateSlotSignature({\n    location: adhese.location,\n    format: options.format,\n    parameters: options.parameters,\n    slot: options.slot,\n  }), [adhese?.location, options.format, options.slot]);\n\n  const [slot, setSlot] = useState<AdheseSlot | null>(null);\n\n  useEffect(() => {\n    const element = typeof elementRef === 'string' ? elementRef : elementRef.current;\n\n    if (adhese && element) {\n      setSlot(adhese?.addSlot({\n        ...options,\n        containingElement: element,\n      }));\n    }\n\n    return (): void => {\n      setSlot(null);\n    };\n  }, [adhese, ...Object.values(options), slotSignature]);\n\n  return slot;\n}\n\n/**\n * Hook that will observe a value on a reactive object and convert to React state\n */\nexport function useWatch<\n  Input,\n  Output = Input extends () => unknown ? ReturnType<Input> | undefined : Input | undefined,\n>(value?: Input, options?: Omit<WatchOptions, 'immediate'>): Output {\n  const [state, setState] = useState<Output>(typeof value === 'function' ? value() : value);\n\n  useEffect(() => {\n    let handle: WatchHandle | undefined;\n\n    if (value) {\n      handle = watch(value, (newValue) => {\n        setState(newValue as Output);\n      }, { immediate: true, ...options });\n    }\n\n    return (): void => {\n      handle?.stop();\n    };\n  }, [value]);\n\n  return state;\n}\n"],"names":["useAdhese","useMemo","generateSlotSignature","useState","useEffect","watch"],"mappings":";;;;;AAmBgB,SAAA,cAAc,YAA6C,SAAsF;AAC/J,QAAM,SAASA,cAAAA;AAEf,QAAM,gBAAgBC,MAAA,QAAQ,OAAO,iCAAQ,aAAaC,UAAAA,sBAAsB;AAAA,IAC9E,UAAU,OAAO;AAAA,IACjB,QAAQ,QAAQ;AAAA,IAChB,YAAY,QAAQ;AAAA,IACpB,MAAM,QAAQ;AAAA,EAAA,CACf,GAAG,CAAC,iCAAQ,UAAU,QAAQ,QAAQ,QAAQ,IAAI,CAAC;AAEpD,QAAM,CAAC,MAAM,OAAO,IAAIC,eAA4B,IAAI;AAExDC,QAAAA,UAAU,MAAM;AACd,UAAM,UAAU,OAAO,eAAe,WAAW,aAAa,WAAW;AAEzE,QAAI,UAAU,SAAS;AACrB,cAAQ,iCAAQ,QAAQ;AAAA,QACtB,GAAG;AAAA,QACH,mBAAmB;AAAA,MACpB,EAAC;AAAA,IACJ;AAEA,WAAO,MAAY;AACjB,cAAQ,IAAI;AAAA,IAAA;AAAA,EACd,GACC,CAAC,QAAQ,GAAG,OAAO,OAAO,OAAO,GAAG,aAAa,CAAC;AAE9C,SAAA;AACT;AAKgB,SAAA,SAGd,OAAe,SAAmD;AAC5D,QAAA,CAAC,OAAO,QAAQ,IAAID,MAAA,SAAiB,OAAO,UAAU,aAAa,UAAU,KAAK;AAExFC,QAAAA,UAAU,MAAM;AACV,QAAA;AAEJ,QAAI,OAAO;AACA,eAAAC,UAAA,MAAM,OAAO,CAAC,aAAa;AAClC,iBAAS,QAAkB;AAAA,SAC1B,EAAE,WAAW,MAAM,GAAG,QAAS,CAAA;AAAA,IACpC;AAEA,WAAO,MAAY;AACjB,uCAAQ;AAAA,IAAK;AAAA,EACf,GACC,CAAC,KAAK,CAAC;AAEH,SAAA;AACT;;;"}

package/dist/sdkReact.d.ts

@@ -1,5 +1,6 @@
 import { AdheseOptions, Adhese, AdheseSlot as AdheseSlot$1, AdheseSlotOptions } from '@adhese/sdk';
 import { PropsWithChildren, ReactElement, ReactNode, HTMLAttributes, RefObject } from 'react';
+import { WatchOptions } from '@adhese/sdk-shared';
 
 /**
  * Provider to create an Adhese instance with the given options. Via the `useAdhese` hook, the Adhese instance can be
@@ -47,5 +48,9 @@ declare function AdheseSlot({ onChange, width, height, lazyLoading, lazyLoadingO
  * memoized.
  */
 declare function useAdheseSlot(elementRef: RefObject<HTMLElement> | string, options: Omit<AdheseSlotOptions, 'containingElement' | 'context'>): AdheseSlot$1 | null;
+/**
+ * Hook that will observe a value on a reactive object and convert to React state
+ */
+declare function useWatch<Input, Output = Input extends () => unknown ? ReturnType<Input> | undefined : Input | undefined>(value?: Input, options?: Omit<WatchOptions, 'immediate'>): Output;
 
-export { AdheseProvider, AdheseSlot, useAdhese, useAdheseSlot };
+export { AdheseProvider, AdheseSlot, useAdhese, useAdheseSlot, useWatch };

package/dist/sdkReact.js

@@ -1,10 +1,11 @@
 import { AdheseProvider, useAdhese } from "./adheseContext.js";
 import { AdheseSlot } from "./AdheseSlot.js";
-import { useAdheseSlot } from "./useAdheseSlot.js";
+import { useAdheseSlot, useWatch } from "./useAdheseSlot.js";
 export {
   AdheseProvider,
   AdheseSlot,
   useAdhese,
-  useAdheseSlot
+  useAdheseSlot,
+  useWatch
 };
 //# sourceMappingURL=sdkReact.js.map

package/dist/useAdheseSlot.js

@@ -1,5 +1,5 @@
 import { generateSlotSignature, watch } from "@adhese/sdk-shared";
-import { useMemo, useState, useCallback, useEffect } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { useAdhese } from "./adheseContext.js";
 function useAdheseSlot(elementRef, options) {
   const adhese = useAdhese();
@@ -10,21 +10,13 @@ function useAdheseSlot(elementRef, options) {
     slot: options.slot
   }), [adhese == null ? void 0 : adhese.location, options.format, options.slot]);
   const [slot, setSlot] = useState(null);
-  const setup = useCallback((context, hooks) => {
-    var _a;
-    (_a = options.setup) == null ? void 0 : _a.call(options, context, hooks);
-    watch(context, (newSlot) => {
-      setSlot(newSlot && { ...newSlot });
-    }, { deep: true, immediate: true });
-  }, [options.setup]);
   useEffect(() => {
     const element = typeof elementRef === "string" ? elementRef : elementRef.current;
     if (adhese && element) {
-      adhese == null ? void 0 : adhese.addSlot({
+      setSlot(adhese == null ? void 0 : adhese.addSlot({
         ...options,
-        containingElement: element,
-        setup
-      });
+        containingElement: element
+      }));
     }
     return () => {
       setSlot(null);
@@ -32,7 +24,23 @@ function useAdheseSlot(elementRef, options) {
   }, [adhese, ...Object.values(options), slotSignature]);
   return slot;
 }
+function useWatch(value, options) {
+  const [state, setState] = useState(typeof value === "function" ? value() : value);
+  useEffect(() => {
+    let handle;
+    if (value) {
+      handle = watch(value, (newValue) => {
+        setState(newValue);
+      }, { immediate: true, ...options });
+    }
+    return () => {
+      handle == null ? void 0 : handle.stop();
+    };
+  }, [value]);
+  return state;
+}
 export {
-  useAdheseSlot
+  useAdheseSlot,
+  useWatch
 };
 //# sourceMappingURL=useAdheseSlot.js.map

package/dist/useAdheseSlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAdheseSlot.js","sources":["../src/useAdheseSlot.ts"],"sourcesContent":["import type { AdheseSlot, AdheseSlotOptions } from '@adhese/sdk';\nimport { generateSlotSignature, watch } from '@adhese/sdk-shared';\nimport {\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useAdhese } from './adheseContext';\n\n/**\n * Hook to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be created\n * when the containing element is available and the Adhese instance is available.\n * @param elementRef The ref to the containing element\n * @param options The options to create the slot\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 */\nexport function useAdheseSlot(elementRef: RefObject<HTMLElement> | string, options: Omit<AdheseSlotOptions, 'containingElement' | 'context'>): AdheseSlot | null {\n  const adhese = useAdhese();\n\n  const slotSignature = useMemo(() => (adhese?.location) && generateSlotSignature({\n    location: adhese.location,\n    format: options.format,\n    parameters: options.parameters,\n    slot: options.slot,\n  }), [adhese?.location, options.format, options.slot]);\n\n  const [slot, setSlot] = useState<AdheseSlot | null>(null);\n\n  const setup = useCallback(((context, hooks): void => {\n    options.setup?.(context, hooks);\n\n    watch(context, (newSlot) => {\n      setSlot(newSlot && { ...newSlot });\n    }, { deep: true, immediate: true });\n  }) satisfies AdheseSlotOptions['setup'], [options.setup]);\n\n  useEffect(() => {\n    const element = typeof elementRef === 'string' ? elementRef : elementRef.current;\n\n    if (adhese && element) {\n      adhese?.addSlot({\n        ...options,\n        containingElement: element,\n        setup,\n      });\n    }\n\n    return (): void => {\n      setSlot(null);\n    };\n  }, [adhese, ...Object.values(options), slotSignature]);\n\n  return slot;\n}\n"],"names":[],"mappings":";;;AAoBgB,SAAA,cAAc,YAA6C,SAAsF;AAC/J,QAAM,SAAS;AAEf,QAAM,gBAAgB,QAAQ,OAAO,iCAAQ,aAAa,sBAAsB;AAAA,IAC9E,UAAU,OAAO;AAAA,IACjB,QAAQ,QAAQ;AAAA,IAChB,YAAY,QAAQ;AAAA,IACpB,MAAM,QAAQ;AAAA,EAAA,CACf,GAAG,CAAC,iCAAQ,UAAU,QAAQ,QAAQ,QAAQ,IAAI,CAAC;AAEpD,QAAM,CAAC,MAAM,OAAO,IAAI,SAA4B,IAAI;AAExD,QAAM,QAAQ,YAAa,CAAC,SAAS,UAAgB;;AAC3C,kBAAA,UAAA,iCAAQ,SAAS;AAEnB,UAAA,SAAS,CAAC,YAAY;AAC1B,cAAQ,WAAW,EAAE,GAAG,QAAS,CAAA;AAAA,OAChC,EAAE,MAAM,MAAM,WAAW,KAAM,CAAA;AAAA,EAAA,GACK,CAAC,QAAQ,KAAK,CAAC;AAExD,YAAU,MAAM;AACd,UAAM,UAAU,OAAO,eAAe,WAAW,aAAa,WAAW;AAEzE,QAAI,UAAU,SAAS;AACrB,uCAAQ,QAAQ;AAAA,QACd,GAAG;AAAA,QACH,mBAAmB;AAAA,QACnB;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO,MAAY;AACjB,cAAQ,IAAI;AAAA,IAAA;AAAA,EACd,GACC,CAAC,QAAQ,GAAG,OAAO,OAAO,OAAO,GAAG,aAAa,CAAC;AAE9C,SAAA;AACT;"}
+{"version":3,"file":"useAdheseSlot.js","sources":["../src/useAdheseSlot.ts"],"sourcesContent":["import type { AdheseSlot, AdheseSlotOptions } from '@adhese/sdk';\nimport { generateSlotSignature, watch, type WatchHandle, type WatchOptions } from '@adhese/sdk-shared';\nimport {\n  type RefObject,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useAdhese } from './adheseContext';\n\n/**\n * Hook to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be created\n * when the containing element is available and the Adhese instance is available.\n * @param elementRef The ref to the containing element\n * @param options The options to create the slot\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 */\nexport function useAdheseSlot(elementRef: RefObject<HTMLElement> | string, options: Omit<AdheseSlotOptions, 'containingElement' | 'context'>): AdheseSlot | null {\n  const adhese = useAdhese();\n\n  const slotSignature = useMemo(() => (adhese?.location) && generateSlotSignature({\n    location: adhese.location,\n    format: options.format,\n    parameters: options.parameters,\n    slot: options.slot,\n  }), [adhese?.location, options.format, options.slot]);\n\n  const [slot, setSlot] = useState<AdheseSlot | null>(null);\n\n  useEffect(() => {\n    const element = typeof elementRef === 'string' ? elementRef : elementRef.current;\n\n    if (adhese && element) {\n      setSlot(adhese?.addSlot({\n        ...options,\n        containingElement: element,\n      }));\n    }\n\n    return (): void => {\n      setSlot(null);\n    };\n  }, [adhese, ...Object.values(options), slotSignature]);\n\n  return slot;\n}\n\n/**\n * Hook that will observe a value on a reactive object and convert to React state\n */\nexport function useWatch<\n  Input,\n  Output = Input extends () => unknown ? ReturnType<Input> | undefined : Input | undefined,\n>(value?: Input, options?: Omit<WatchOptions, 'immediate'>): Output {\n  const [state, setState] = useState<Output>(typeof value === 'function' ? value() : value);\n\n  useEffect(() => {\n    let handle: WatchHandle | undefined;\n\n    if (value) {\n      handle = watch(value, (newValue) => {\n        setState(newValue as Output);\n      }, { immediate: true, ...options });\n    }\n\n    return (): void => {\n      handle?.stop();\n    };\n  }, [value]);\n\n  return state;\n}\n"],"names":[],"mappings":";;;AAmBgB,SAAA,cAAc,YAA6C,SAAsF;AAC/J,QAAM,SAAS;AAEf,QAAM,gBAAgB,QAAQ,OAAO,iCAAQ,aAAa,sBAAsB;AAAA,IAC9E,UAAU,OAAO;AAAA,IACjB,QAAQ,QAAQ;AAAA,IAChB,YAAY,QAAQ;AAAA,IACpB,MAAM,QAAQ;AAAA,EAAA,CACf,GAAG,CAAC,iCAAQ,UAAU,QAAQ,QAAQ,QAAQ,IAAI,CAAC;AAEpD,QAAM,CAAC,MAAM,OAAO,IAAI,SAA4B,IAAI;AAExD,YAAU,MAAM;AACd,UAAM,UAAU,OAAO,eAAe,WAAW,aAAa,WAAW;AAEzE,QAAI,UAAU,SAAS;AACrB,cAAQ,iCAAQ,QAAQ;AAAA,QACtB,GAAG;AAAA,QACH,mBAAmB;AAAA,MACpB,EAAC;AAAA,IACJ;AAEA,WAAO,MAAY;AACjB,cAAQ,IAAI;AAAA,IAAA;AAAA,EACd,GACC,CAAC,QAAQ,GAAG,OAAO,OAAO,OAAO,GAAG,aAAa,CAAC;AAE9C,SAAA;AACT;AAKgB,SAAA,SAGd,OAAe,SAAmD;AAC5D,QAAA,CAAC,OAAO,QAAQ,IAAI,SAAiB,OAAO,UAAU,aAAa,UAAU,KAAK;AAExF,YAAU,MAAM;AACV,QAAA;AAEJ,QAAI,OAAO;AACA,eAAA,MAAM,OAAO,CAAC,aAAa;AAClC,iBAAS,QAAkB;AAAA,SAC1B,EAAE,WAAW,MAAM,GAAG,QAAS,CAAA;AAAA,IACpC;AAEA,WAAO,MAAY;AACjB,uCAAQ;AAAA,IAAK;AAAA,EACf,GACC,CAAC,KAAK,CAAC;AAEH,SAAA;AACT;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adhese/sdk-react",
   "type": "module",
-  "version": "1.3.2",
+  "version": "1.4.0-nightly-20241118121055",
   "description": "Adhese SDK",
   "license": "GPL-3.0",
   "repository": {
@@ -45,7 +45,7 @@
     "react-dom": ">=16.13"
   },
   "dependencies": {
-    "@adhese/sdk": "1.3.2",
-    "@adhese/sdk-shared": "1.2.0"
+    "@adhese/sdk": "1.4.0-nightly-20241118121055",
+    "@adhese/sdk-shared": "1.3.0-nightly-20241118121055"
   }
 }