@adhese/sdk-react 1.5.1 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const sdkShared = require("@adhese/sdk-shared");
|
|
4
4
|
const react = require("react");
|
|
5
5
|
const adheseContext = require("./adheseContext.cjs");
|
|
6
|
+
const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
|
|
6
7
|
function useAdheseSlot(elementRef, options) {
|
|
7
8
|
const adhese = adheseContext.useAdhese();
|
|
8
9
|
const slotSignature = react.useMemo(() => (adhese == null ? void 0 : adhese.location) && sdkShared.generateSlotSignature({
|
|
@@ -12,7 +13,7 @@ function useAdheseSlot(elementRef, options) {
|
|
|
12
13
|
slot: options.slot
|
|
13
14
|
}), [adhese == null ? void 0 : adhese.location, options.format, options.slot]);
|
|
14
15
|
const [slot, setSlot] = react.useState(null);
|
|
15
|
-
|
|
16
|
+
useIsomorphicLayoutEffect(() => {
|
|
16
17
|
const element = typeof elementRef === "string" ? elementRef : elementRef.current;
|
|
17
18
|
if (adhese && element) {
|
|
18
19
|
setSlot(adhese == null ? void 0 : adhese.addSlot({
|
|
@@ -28,7 +29,7 @@ function useAdheseSlot(elementRef, options) {
|
|
|
28
29
|
}
|
|
29
30
|
function useWatch(value, options) {
|
|
30
31
|
const [state, setState] = react.useState(typeof value === "function" ? value() : value);
|
|
31
|
-
|
|
32
|
+
useIsomorphicLayoutEffect(() => {
|
|
32
33
|
let handle;
|
|
33
34
|
if (value) {
|
|
34
35
|
handle = sdkShared.watch(value, (newValue) => {
|
|
@@ -1 +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 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
|
|
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 useLayoutEffect,\n useMemo,\n useState,\n} from 'react';\nimport { useAdhese } from './adheseContext';\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\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 useIsomorphicLayoutEffect(() => {\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 useIsomorphicLayoutEffect(() => {\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":["useEffect","useLayoutEffect","useAdhese","useMemo","generateSlotSignature","useState","watch"],"mappings":";;;;;AAWA,MAAM,4BAA4B,OAAO,WAAW,cAAcA,MAAY,YAAAC,MAAA;AAW9D,SAAA,cAAc,YAA6C,SAAsF;AAC/J,QAAM,SAASC,cAAAA,UAAU;AAEzB,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,MAAAA,SAA4B,IAAI;AAExD,4BAA0B,MAAM;AAC9B,UAAM,UAAU,OAAO,eAAe,WAAW,aAAa,WAAW;AAEzE,QAAI,UAAU,SAAS;AACrB,cAAQ,iCAAQ,QAAQ;AAAA,QACtB,GAAG;AAAA,QACH,mBAAmB;AAAA,MAAA,EACnB;AAAA,IAAA;AAGJ,WAAO,MAAY;AACjB,cAAQ,IAAI;AAAA,IACd;AAAA,EAAA,GACC,CAAC,QAAQ,GAAG,OAAO,OAAO,OAAO,GAAG,aAAa,CAAC;AAE9C,SAAA;AACT;AAKgB,SAAA,SAGd,OAAe,SAAmD;AAC5D,QAAA,CAAC,OAAO,QAAQ,IAAIA,MAAA,SAAiB,OAAO,UAAU,aAAa,MAAM,IAAI,KAAK;AAExF,4BAA0B,MAAM;AAC1B,QAAA;AAEJ,QAAI,OAAO;AACA,eAAAC,UAAA,MAAM,OAAO,CAAC,aAAa;AAClC,iBAAS,QAAkB;AAAA,SAC1B,EAAE,WAAW,MAAM,GAAG,SAAS;AAAA,IAAA;AAGpC,WAAO,MAAY;AACjB,uCAAQ;AAAA,IACV;AAAA,EAAA,GACC,CAAC,KAAK,CAAC;AAEH,SAAA;AACT;;;"}
|
package/dist/useAdheseSlot.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { generateSlotSignature, watch } from "@adhese/sdk-shared";
|
|
2
|
-
import { useMemo, useState, useLayoutEffect } from "react";
|
|
2
|
+
import { useMemo, useState, useEffect, useLayoutEffect } from "react";
|
|
3
3
|
import { useAdhese } from "./adheseContext.js";
|
|
4
|
+
const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
|
|
4
5
|
function useAdheseSlot(elementRef, options) {
|
|
5
6
|
const adhese = useAdhese();
|
|
6
7
|
const slotSignature = useMemo(() => (adhese == null ? void 0 : adhese.location) && generateSlotSignature({
|
|
@@ -10,7 +11,7 @@ function useAdheseSlot(elementRef, options) {
|
|
|
10
11
|
slot: options.slot
|
|
11
12
|
}), [adhese == null ? void 0 : adhese.location, options.format, options.slot]);
|
|
12
13
|
const [slot, setSlot] = useState(null);
|
|
13
|
-
|
|
14
|
+
useIsomorphicLayoutEffect(() => {
|
|
14
15
|
const element = typeof elementRef === "string" ? elementRef : elementRef.current;
|
|
15
16
|
if (adhese && element) {
|
|
16
17
|
setSlot(adhese == null ? void 0 : adhese.addSlot({
|
|
@@ -26,7 +27,7 @@ function useAdheseSlot(elementRef, options) {
|
|
|
26
27
|
}
|
|
27
28
|
function useWatch(value, options) {
|
|
28
29
|
const [state, setState] = useState(typeof value === "function" ? value() : value);
|
|
29
|
-
|
|
30
|
+
useIsomorphicLayoutEffect(() => {
|
|
30
31
|
let handle;
|
|
31
32
|
if (value) {
|
|
32
33
|
handle = watch(value, (newValue) => {
|
|
@@ -1 +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 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
|
|
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 useLayoutEffect,\n useMemo,\n useState,\n} from 'react';\nimport { useAdhese } from './adheseContext';\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\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 useIsomorphicLayoutEffect(() => {\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 useIsomorphicLayoutEffect(() => {\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":";;;AAWA,MAAM,4BAA4B,OAAO,WAAW,cAAc,YAAY;AAW9D,SAAA,cAAc,YAA6C,SAAsF;AAC/J,QAAM,SAAS,UAAU;AAEzB,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,4BAA0B,MAAM;AAC9B,UAAM,UAAU,OAAO,eAAe,WAAW,aAAa,WAAW;AAEzE,QAAI,UAAU,SAAS;AACrB,cAAQ,iCAAQ,QAAQ;AAAA,QACtB,GAAG;AAAA,QACH,mBAAmB;AAAA,MAAA,EACnB;AAAA,IAAA;AAGJ,WAAO,MAAY;AACjB,cAAQ,IAAI;AAAA,IACd;AAAA,EAAA,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,MAAM,IAAI,KAAK;AAExF,4BAA0B,MAAM;AAC1B,QAAA;AAEJ,QAAI,OAAO;AACA,eAAA,MAAM,OAAO,CAAC,aAAa;AAClC,iBAAS,QAAkB;AAAA,SAC1B,EAAE,WAAW,MAAM,GAAG,SAAS;AAAA,IAAA;AAGpC,WAAO,MAAY;AACjB,uCAAQ;AAAA,IACV;AAAA,EAAA,GACC,CAAC,KAAK,CAAC;AAEH,SAAA;AACT;"}
|