@adhese/sdk-react 1.2.0 → 1.2.1-nightly-20241024100326
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 +9 -0
- package/dist/AdheseSlot.js +1 -1
- package/dist/AdheseSlot.js.map +1 -1
- package/dist/adheseContext.js +1 -1
- package/dist/adheseContext.js.map +1 -1
- package/dist/cjs/AdheseSlot.cjs +1 -1
- package/dist/cjs/AdheseSlot.cjs.map +1 -1
- package/dist/cjs/adheseContext.cjs +1 -1
- package/dist/cjs/adheseContext.cjs.map +1 -1
- package/dist/cjs/sdkReact.cjs +2 -2
- package/dist/cjs/useAdheseSlot.cjs +2 -2
- package/dist/cjs/useAdheseSlot.cjs.map +1 -1
- package/dist/sdkReact.d.ts +13 -13
- package/dist/sdkReact.js +1 -1
- package/dist/useAdheseSlot.js +2 -2
- package/dist/useAdheseSlot.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @adhese/sdk-react
|
|
2
2
|
|
|
3
|
+
## 1.2.1-nightly-20241024100326
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 65ad4b6: Fix react state not recognizing the changed state of a slot
|
|
8
|
+
- dbaf33d: Fix errors being thrown when they are not caught by watchers
|
|
9
|
+
- Updated dependencies [dbaf33d]
|
|
10
|
+
- @adhese/sdk@1.2.1-nightly-20241024100326
|
|
11
|
+
|
|
3
12
|
## 1.2.0
|
|
4
13
|
|
|
5
14
|
### Minor Changes
|
package/dist/AdheseSlot.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useRef, useCallback, useId } from "react";
|
|
3
2
|
import { watch } from "@adhese/sdk-shared";
|
|
3
|
+
import { useRef, useCallback, useId } from "react";
|
|
4
4
|
import { useAdheseSlot } from "./useAdheseSlot.js";
|
|
5
5
|
function AdheseSlot({
|
|
6
6
|
onChange,
|
package/dist/AdheseSlot.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AdheseSlot.js","sources":["../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport
|
|
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 ReactElement, useCallback, useId, useRef } from 'react';\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/adheseContext.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createContext, useState, useEffect, useContext } from "react";
|
|
3
2
|
import { createAdhese } from "@adhese/sdk";
|
|
3
|
+
import { createContext, useState, useEffect, useContext } from "react";
|
|
4
4
|
const adheseContext = createContext(void 0);
|
|
5
5
|
function AdheseProvider({ children, options }) {
|
|
6
6
|
const [adhese, setAdhese] = useState(void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"adheseContext.js","sources":["../src/adheseContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n type PropsWithChildren,\n type ReactElement,\n
|
|
1
|
+
{"version":3,"file":"adheseContext.js","sources":["../src/adheseContext.tsx"],"sourcesContent":["'use client';\n\nimport { type Adhese, type AdheseOptions, createAdhese } from '@adhese/sdk';\nimport {\n createContext,\n type PropsWithChildren,\n type ReactElement,\n useContext,\n useEffect,\n useState,\n} from 'react';\n\nconst adheseContext = createContext<Adhese | undefined>(undefined);\n\n/**\n * Provider to create an Adhese instance with the given options. Via the `useAdhese` hook, the Adhese instance can be\n * used in all child components.\n * @constructor\n */\n// eslint-disable-next-line ts/naming-convention\nexport function AdheseProvider({ children, options }: PropsWithChildren<{ options?: AdheseOptions }>): ReactElement {\n const [adhese, setAdhese] = useState<Adhese | undefined>(undefined);\n\n useEffect(() => {\n let instance: Adhese | undefined;\n\n if (!options)\n return;\n\n setAdhese((current) => {\n instance = createAdhese(options);\n current?.dispose();\n\n return instance;\n });\n\n return (): void => {\n instance?.dispose();\n };\n }, [options]);\n\n return (\n <adheseContext.Provider value={adhese}>\n {children}\n </adheseContext.Provider>\n );\n}\n\n/**\n * Hook to get the Adhese instance from the nearest `AdheseProvider`. When the Adhese instance is not available yet, `null`\n */\nexport function useAdhese(): Adhese | undefined {\n return useContext(adheseContext);\n}\n"],"names":[],"mappings":";;;AAYA,MAAM,gBAAgB,cAAkC,MAAS;AAQ1D,SAAS,eAAe,EAAE,UAAU,WAAyE;AAClH,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,MAAS;AAElE,YAAU,MAAM;AACV,QAAA;AAEJ,QAAI,CAAC;AACH;AAEF,cAAU,CAAC,YAAY;AACrB,iBAAW,aAAa,OAAO;AAC/B,yCAAS;AAEF,aAAA;AAAA,IAAA,CACR;AAED,WAAO,MAAY;AACjB,2CAAU;AAAA,IAAQ;AAAA,EACpB,GACC,CAAC,OAAO,CAAC;AAEZ,6BACG,cAAc,UAAd,EAAuB,OAAO,QAC5B,SACH,CAAA;AAEJ;AAKO,SAAS,YAAgC;AAC9C,SAAO,WAAW,aAAa;AACjC;"}
|
package/dist/cjs/AdheseSlot.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const react = require("react");
|
|
5
4
|
const sdkShared = require("@adhese/sdk-shared");
|
|
5
|
+
const react = require("react");
|
|
6
6
|
const useAdheseSlot = require("./useAdheseSlot.cjs");
|
|
7
7
|
function AdheseSlot({
|
|
8
8
|
onChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AdheseSlot.cjs","sources":["../../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport
|
|
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 ReactElement, useCallback, useId, useRef } from 'react';\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;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const react = require("react");
|
|
5
4
|
const sdk = require("@adhese/sdk");
|
|
5
|
+
const react = require("react");
|
|
6
6
|
const adheseContext = react.createContext(void 0);
|
|
7
7
|
function AdheseProvider({ children, options }) {
|
|
8
8
|
const [adhese, setAdhese] = react.useState(void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"adheseContext.cjs","sources":["../../src/adheseContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n type PropsWithChildren,\n type ReactElement,\n
|
|
1
|
+
{"version":3,"file":"adheseContext.cjs","sources":["../../src/adheseContext.tsx"],"sourcesContent":["'use client';\n\nimport { type Adhese, type AdheseOptions, createAdhese } from '@adhese/sdk';\nimport {\n createContext,\n type PropsWithChildren,\n type ReactElement,\n useContext,\n useEffect,\n useState,\n} from 'react';\n\nconst adheseContext = createContext<Adhese | undefined>(undefined);\n\n/**\n * Provider to create an Adhese instance with the given options. Via the `useAdhese` hook, the Adhese instance can be\n * used in all child components.\n * @constructor\n */\n// eslint-disable-next-line ts/naming-convention\nexport function AdheseProvider({ children, options }: PropsWithChildren<{ options?: AdheseOptions }>): ReactElement {\n const [adhese, setAdhese] = useState<Adhese | undefined>(undefined);\n\n useEffect(() => {\n let instance: Adhese | undefined;\n\n if (!options)\n return;\n\n setAdhese((current) => {\n instance = createAdhese(options);\n current?.dispose();\n\n return instance;\n });\n\n return (): void => {\n instance?.dispose();\n };\n }, [options]);\n\n return (\n <adheseContext.Provider value={adhese}>\n {children}\n </adheseContext.Provider>\n );\n}\n\n/**\n * Hook to get the Adhese instance from the nearest `AdheseProvider`. When the Adhese instance is not available yet, `null`\n */\nexport function useAdhese(): Adhese | undefined {\n return useContext(adheseContext);\n}\n"],"names":["createContext","useState","useEffect","createAdhese","useContext"],"mappings":";;;;;AAYA,MAAM,gBAAgBA,MAAAA,cAAkC,MAAS;AAQ1D,SAAS,eAAe,EAAE,UAAU,WAAyE;AAClH,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAA6B,MAAS;AAElEC,QAAAA,UAAU,MAAM;AACV,QAAA;AAEJ,QAAI,CAAC;AACH;AAEF,cAAU,CAAC,YAAY;AACrB,iBAAWC,IAAAA,aAAa,OAAO;AAC/B,yCAAS;AAEF,aAAA;AAAA,IAAA,CACR;AAED,WAAO,MAAY;AACjB,2CAAU;AAAA,IAAQ;AAAA,EACpB,GACC,CAAC,OAAO,CAAC;AAEZ,wCACG,cAAc,UAAd,EAAuB,OAAO,QAC5B,SACH,CAAA;AAEJ;AAKO,SAAS,YAAgC;AAC9C,SAAOC,MAAAA,WAAW,aAAa;AACjC;;;"}
|
package/dist/cjs/sdkReact.cjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const adheseContext = require("./adheseContext.cjs");
|
|
4
|
-
const useAdheseSlot = require("./useAdheseSlot.cjs");
|
|
5
4
|
const AdheseSlot = require("./AdheseSlot.cjs");
|
|
5
|
+
const useAdheseSlot = require("./useAdheseSlot.cjs");
|
|
6
6
|
exports.AdheseProvider = adheseContext.AdheseProvider;
|
|
7
7
|
exports.useAdhese = adheseContext.useAdhese;
|
|
8
|
-
exports.useAdheseSlot = useAdheseSlot.useAdheseSlot;
|
|
9
8
|
exports.AdheseSlot = AdheseSlot.AdheseSlot;
|
|
9
|
+
exports.useAdheseSlot = useAdheseSlot.useAdheseSlot;
|
|
10
10
|
//# sourceMappingURL=sdkReact.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const react = require("react");
|
|
4
3
|
const sdkShared = require("@adhese/sdk-shared");
|
|
4
|
+
const react = require("react");
|
|
5
5
|
const adheseContext = require("./adheseContext.cjs");
|
|
6
6
|
function useAdheseSlot(elementRef, options) {
|
|
7
7
|
const adhese = adheseContext.useAdhese();
|
|
@@ -10,7 +10,7 @@ function useAdheseSlot(elementRef, options) {
|
|
|
10
10
|
var _a;
|
|
11
11
|
(_a = options.setup) == null ? void 0 : _a.call(options, context, hooks);
|
|
12
12
|
sdkShared.watch(context, (newSlot) => {
|
|
13
|
-
setSlot(newSlot);
|
|
13
|
+
setSlot(newSlot && { ...newSlot });
|
|
14
14
|
}, { deep: true, immediate: true });
|
|
15
15
|
}, [options.setup]);
|
|
16
16
|
react.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAdheseSlot.cjs","sources":["../../src/useAdheseSlot.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"useAdheseSlot.cjs","sources":["../../src/useAdheseSlot.ts"],"sourcesContent":["import type { AdheseSlot, AdheseSlotOptions } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport {\n type RefObject,\n useCallback,\n useEffect,\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>, options: Omit<AdheseSlotOptions, 'containingElement' | 'context'>): AdheseSlot | null {\n const adhese = useAdhese();\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 let intermediate: AdheseSlot | null = null;\n\n if (adhese && elementRef.current) {\n intermediate = adhese?.addSlot({\n ...options,\n containingElement: elementRef.current,\n setup,\n });\n }\n\n return (): void => {\n intermediate?.dispose();\n\n setSlot(null);\n };\n }, [adhese, ...Object.values(options)]);\n\n return slot;\n}\n"],"names":["useAdhese","useState","useCallback","watch","useEffect"],"mappings":";;;;;AAmBgB,SAAA,cAAc,YAAoC,SAAsF;AACtJ,QAAM,SAASA,cAAAA;AAEf,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,QAAI,eAAkC;AAElC,QAAA,UAAU,WAAW,SAAS;AAChC,qBAAe,iCAAQ,QAAQ;AAAA,QAC7B,GAAG;AAAA,QACH,mBAAmB,WAAW;AAAA,QAC9B;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO,MAAY;AACjB,mDAAc;AAEd,cAAQ,IAAI;AAAA,IAAA;AAAA,EACd,GACC,CAAC,QAAQ,GAAG,OAAO,OAAO,OAAO,CAAC,CAAC;AAE/B,SAAA;AACT;;"}
|
package/dist/sdkReact.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { AdheseOptions, Adhese, AdheseSlot as AdheseSlot$1, AdheseSlotOptions } from '@adhese/sdk';
|
|
2
|
+
import { PropsWithChildren, ReactElement, HTMLAttributes, RefObject } from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Provider to create an Adhese instance with the given options. Via the `useAdhese` hook, the Adhese instance can be
|
|
@@ -14,17 +14,6 @@ declare function AdheseProvider({ children, options }: PropsWithChildren<{
|
|
|
14
14
|
*/
|
|
15
15
|
declare function useAdhese(): Adhese | undefined;
|
|
16
16
|
|
|
17
|
-
/**
|
|
18
|
-
* Hook to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be created
|
|
19
|
-
* when the containing element is available and the Adhese instance is available.
|
|
20
|
-
* @param elementRef The ref to the containing element
|
|
21
|
-
* @param options The options to create the slot
|
|
22
|
-
*
|
|
23
|
-
* @warning Make sure to wrap your `setup` function in a `useCallback` as it can trigger an infinite loop if it's not
|
|
24
|
-
* memoized.
|
|
25
|
-
*/
|
|
26
|
-
declare function useAdheseSlot(elementRef: RefObject<HTMLElement>, options: Omit<AdheseSlotOptions, 'containingElement' | 'context'>): AdheseSlot$1 | null;
|
|
27
|
-
|
|
28
17
|
type AdheseSlotProps = {
|
|
29
18
|
/**
|
|
30
19
|
* Callback to be called when the slot is created or disposed
|
|
@@ -40,4 +29,15 @@ type AdheseSlotProps = {
|
|
|
40
29
|
*/
|
|
41
30
|
declare function AdheseSlot({ onChange, width, height, lazyLoading, lazyLoadingOptions, slot, pluginOptions, renderMode, type, setup, parameters, format, style, id, ...props }: AdheseSlotProps): ReactElement;
|
|
42
31
|
|
|
32
|
+
/**
|
|
33
|
+
* Hook to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be created
|
|
34
|
+
* when the containing element is available and the Adhese instance is available.
|
|
35
|
+
* @param elementRef The ref to the containing element
|
|
36
|
+
* @param options The options to create the slot
|
|
37
|
+
*
|
|
38
|
+
* @warning Make sure to wrap your `setup` function in a `useCallback` as it can trigger an infinite loop if it's not
|
|
39
|
+
* memoized.
|
|
40
|
+
*/
|
|
41
|
+
declare function useAdheseSlot(elementRef: RefObject<HTMLElement>, options: Omit<AdheseSlotOptions, 'containingElement' | 'context'>): AdheseSlot$1 | null;
|
|
42
|
+
|
|
43
43
|
export { AdheseProvider, AdheseSlot, useAdhese, useAdheseSlot };
|
package/dist/sdkReact.js
CHANGED
package/dist/useAdheseSlot.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useState, useCallback, useEffect } from "react";
|
|
2
1
|
import { watch } from "@adhese/sdk-shared";
|
|
2
|
+
import { useState, useCallback, useEffect } from "react";
|
|
3
3
|
import { useAdhese } from "./adheseContext.js";
|
|
4
4
|
function useAdheseSlot(elementRef, options) {
|
|
5
5
|
const adhese = useAdhese();
|
|
@@ -8,7 +8,7 @@ function useAdheseSlot(elementRef, options) {
|
|
|
8
8
|
var _a;
|
|
9
9
|
(_a = options.setup) == null ? void 0 : _a.call(options, context, hooks);
|
|
10
10
|
watch(context, (newSlot) => {
|
|
11
|
-
setSlot(newSlot);
|
|
11
|
+
setSlot(newSlot && { ...newSlot });
|
|
12
12
|
}, { deep: true, immediate: true });
|
|
13
13
|
}, [options.setup]);
|
|
14
14
|
useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAdheseSlot.js","sources":["../src/useAdheseSlot.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"useAdheseSlot.js","sources":["../src/useAdheseSlot.ts"],"sourcesContent":["import type { AdheseSlot, AdheseSlotOptions } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport {\n type RefObject,\n useCallback,\n useEffect,\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>, options: Omit<AdheseSlotOptions, 'containingElement' | 'context'>): AdheseSlot | null {\n const adhese = useAdhese();\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 let intermediate: AdheseSlot | null = null;\n\n if (adhese && elementRef.current) {\n intermediate = adhese?.addSlot({\n ...options,\n containingElement: elementRef.current,\n setup,\n });\n }\n\n return (): void => {\n intermediate?.dispose();\n\n setSlot(null);\n };\n }, [adhese, ...Object.values(options)]);\n\n return slot;\n}\n"],"names":[],"mappings":";;;AAmBgB,SAAA,cAAc,YAAoC,SAAsF;AACtJ,QAAM,SAAS;AAEf,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,QAAI,eAAkC;AAElC,QAAA,UAAU,WAAW,SAAS;AAChC,qBAAe,iCAAQ,QAAQ;AAAA,QAC7B,GAAG;AAAA,QACH,mBAAmB,WAAW;AAAA,QAC9B;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO,MAAY;AACjB,mDAAc;AAEd,cAAQ,IAAI;AAAA,IAAA;AAAA,EACd,GACC,CAAC,QAAQ,GAAG,OAAO,OAAO,OAAO,CAAC,CAAC;AAE/B,SAAA;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adhese/sdk-react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.2.
|
|
4
|
+
"version": "1.2.1-nightly-20241024100326",
|
|
5
5
|
"description": "Adhese SDK",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"react-dom": ">=16.13"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@adhese/sdk": "
|
|
47
|
+
"@adhese/sdk": "1.2.1-nightly-20241024100326",
|
|
48
48
|
"@adhese/sdk-shared": "^1.1.0"
|
|
49
49
|
}
|
|
50
50
|
}
|