@adhese/sdk-react 1.4.0 → 1.4.1-nightly-20241119103417

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @adhese/sdk-react
 
+## 1.4.1-nightly-20241119103417
+
+### Patch Changes
+
+- f7ea508: Optimise React rendering by using `useLayoutEffect` to prevent layout jumping during slot creation
+- Updated dependencies [718bbab]
+- Updated dependencies [718bbab]
+- Updated dependencies [718bbab]
+  - @adhese/sdk@1.4.1-nightly-20241119103417
+  - @adhese/sdk-shared@1.3.1-nightly-20241119103417
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/cjs/useAdheseSlot.cjs

@@ -12,7 +12,7 @@ function useAdheseSlot(elementRef, options) {
     slot: options.slot
   }), [adhese == null ? void 0 : adhese.location, options.format, options.slot]);
   const [slot, setSlot] = react.useState(null);
-  react.useEffect(() => {
+  react.useLayoutEffect(() => {
     const element = typeof elementRef === "string" ? elementRef : elementRef.current;
     if (adhese && element) {
       setSlot(adhese == null ? void 0 : adhese.addSlot({
@@ -28,7 +28,7 @@ function useAdheseSlot(elementRef, options) {
 }
 function useWatch(value, options) {
   const [state, setState] = react.useState(typeof value === "function" ? value() : value);
-  react.useEffect(() => {
+  react.useLayoutEffect(() => {
     let handle;
     if (value) {
       handle = sdkShared.watch(value, (newValue) => {

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, 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;;;"}
+{"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  useLayoutEffect,\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  useLayoutEffect(() => {\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  useLayoutEffect(() => {\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","useLayoutEffect","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,gBAAgB,MAAM;AACpB,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,gBAAgB,MAAM;AAChB,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/useAdheseSlot.js

@@ -1,5 +1,5 @@
 import { generateSlotSignature, watch } from "@adhese/sdk-shared";
-import { useMemo, useState, useEffect } from "react";
+import { useMemo, useState, useLayoutEffect } from "react";
 import { useAdhese } from "./adheseContext.js";
 function useAdheseSlot(elementRef, options) {
   const adhese = useAdhese();
@@ -10,7 +10,7 @@ function useAdheseSlot(elementRef, options) {
     slot: options.slot
   }), [adhese == null ? void 0 : adhese.location, options.format, options.slot]);
   const [slot, setSlot] = useState(null);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const element = typeof elementRef === "string" ? elementRef : elementRef.current;
     if (adhese && element) {
       setSlot(adhese == null ? void 0 : adhese.addSlot({
@@ -26,7 +26,7 @@ function useAdheseSlot(elementRef, options) {
 }
 function useWatch(value, options) {
   const [state, setState] = useState(typeof value === "function" ? value() : value);
-  useEffect(() => {
+  useLayoutEffect(() => {
     let handle;
     if (value) {
       handle = watch(value, (newValue) => {

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, 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;"}
+{"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  useLayoutEffect,\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  useLayoutEffect(() => {\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  useLayoutEffect(() => {\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,kBAAgB,MAAM;AACpB,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,kBAAgB,MAAM;AAChB,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.4.0",
+  "version": "1.4.1-nightly-20241119103417",
   "description": "Adhese SDK",
   "license": "GPL-3.0",
   "repository": {
@@ -51,7 +51,7 @@
     "react-dom": ">=16.13"
   },
   "dependencies": {
-    "@adhese/sdk": "1.4.0",
-    "@adhese/sdk-shared": "1.3.0"
+    "@adhese/sdk": "1.4.1-nightly-20241119103417",
+    "@adhese/sdk-shared": "1.3.1-nightly-20241119103417"
   }
 }