@adhese/sdk-react 1.1.1 → 1.1.2-nightly-20240617154422

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @adhese/sdk-react
 
+## 1.1.2-nightly-20240617154422
+
+### Patch Changes
+
+- 6dd76ff: Make AdheseSlot a lazy component
+- 6dd76ff: Wrap watch from @adhese/sdk-shared in dynamic import to enable more chunk splitting
+- 6dd76ff: Make passing of options optional to `AdheseProvider`, this will not initialize the SDK but will create the context
+  provider. You can, for example, use this to dynamically import plugins first before creating the SDK. See
+  `apps/react-example` for an example.
+
 ## 1.1.1
 
 ### Patch Changes

package/dist/{AdheseSlot.js → AdheseSlot/AdheseSlot.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useCallback } from "react";
 import { watch } from "@adhese/sdk-shared";
-import { useAdheseSlot } from "./useAdheseSlot.js";
+import { useAdheseSlot } from "../useAdheseSlot.js";
 function AdheseSlot({
   onChange,
   ...options

package/dist/AdheseSlot/AdheseSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdheseSlot.js","sources":["../../src/AdheseSlot/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, 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  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  return (\n    <div ref={element} />\n  );\n}\n"],"names":[],"mappings":";;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAU,OAA8B,IAAI;AAElD,gBAAc,SAAS;AAAA,IACrB,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;AAGC,SAAA,oBAAC,OAAI,EAAA,KAAK,QAAS,CAAA;AAEvB;"}

package/dist/AdheseSlot/AdheseSlot.lazy.js

@@ -0,0 +1,6 @@
+import { lazy } from "react";
+const AdheseSlot = lazy(() => import("./AdheseSlot.js").then((module) => ({ default: module.AdheseSlot })));
+export {
+  AdheseSlot
+};
+//# sourceMappingURL=AdheseSlot.lazy.js.map

package/dist/AdheseSlot/AdheseSlot.lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdheseSlot.lazy.js","sources":["../../src/AdheseSlot/AdheseSlot.lazy.ts"],"sourcesContent":["import { lazy } from 'react';\n\n// eslint-disable-next-line ts/naming-convention\nexport const AdheseSlot = lazy(() => import('./AdheseSlot').then(module => ({ default: module.AdheseSlot })));\n"],"names":[],"mappings":";AAGO,MAAM,aAAa,KAAK,MAAM,OAAO,iBAAc,EAAE,KAAK,CAAA,YAAW,EAAE,SAAS,OAAO,aAAa,CAAC;"}

package/dist/adheseContext.js

@@ -5,6 +5,8 @@ function AdheseProvider({ children, options }) {
   const [adhese, setAdhese] = useState(void 0);
   useEffect(() => {
     let instance;
+    if (!options)
+      return;
     import("@adhese/sdk").then(({ createAdhese }) => {
       instance = createAdhese(options);
       setAdhese((current) => {

package/dist/adheseContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"adheseContext.js","sources":["../src/adheseContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type PropsWithChildren,\n  type ReactElement,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport type { Adhese, AdheseOptions } from '@adhese/sdk';\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    import('@adhese/sdk').then(({ createAdhese }) => {\n      instance = createAdhese(options);\n\n      setAdhese((current) => {\n        current?.dispose();\n\n        return instance;\n      });\n    }).catch(console.error);\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,WAAwE;AACjH,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,MAAS;AAElE,YAAU,MAAM;AACV,QAAA;AAEJ,WAAO,aAAa,EAAE,KAAK,CAAC,EAAE,mBAAmB;AAC/C,iBAAW,aAAa,OAAO;AAE/B,gBAAU,CAAC,YAAY;AACrB,2CAAS;AAEF,eAAA;AAAA,MAAA,CACR;AAAA,IACF,CAAA,EAAE,MAAM,QAAQ,KAAK;AAEtB,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;"}
+{"version":3,"file":"adheseContext.js","sources":["../src/adheseContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type PropsWithChildren,\n  type ReactElement,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport type { Adhese, AdheseOptions } from '@adhese/sdk';\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    import('@adhese/sdk').then(({ createAdhese }) => {\n      instance = createAdhese(options);\n\n      setAdhese((current) => {\n        current?.dispose();\n\n        return instance;\n      });\n    }).catch(console.error);\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,WAAO,aAAa,EAAE,KAAK,CAAC,EAAE,mBAAmB;AAC/C,iBAAW,aAAa,OAAO;AAE/B,gBAAU,CAAC,YAAY;AACrB,2CAAS;AAEF,eAAA;AAAA,MAAA,CACR;AAAA,IACF,CAAA,EAAE,MAAM,QAAQ,KAAK;AAEtB,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 → AdheseSlot/AdheseSlot.cjs}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const sdkShared = require("@adhese/sdk-shared");
-const useAdheseSlot = require("./useAdheseSlot.cjs");
+const useAdheseSlot = require("../useAdheseSlot.cjs");
 function AdheseSlot({
   onChange,
   ...options

package/dist/cjs/AdheseSlot/AdheseSlot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdheseSlot.cjs","sources":["../../../src/AdheseSlot/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, 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  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  return (\n    <div ref={element} />\n  );\n}\n"],"names":["useRef","useAdheseSlot","useCallback","watch","jsx"],"mappings":";;;;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAUA,aAA8B,IAAI;AAElDC,gBAAAA,cAAc,SAAS;AAAA,IACrB,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;AAGC,SAAAC,2BAAA,IAAC,OAAI,EAAA,KAAK,QAAS,CAAA;AAEvB;;"}

package/dist/cjs/AdheseSlot/AdheseSlot.lazy.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const AdheseSlot = react.lazy(() => Promise.resolve().then(() => require("./AdheseSlot.cjs")).then((module2) => ({ default: module2.AdheseSlot })));
+exports.AdheseSlot = AdheseSlot;
+//# sourceMappingURL=AdheseSlot.lazy.cjs.map

package/dist/cjs/AdheseSlot/AdheseSlot.lazy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdheseSlot.lazy.cjs","sources":["../../../src/AdheseSlot/AdheseSlot.lazy.ts"],"sourcesContent":["import { lazy } from 'react';\n\n// eslint-disable-next-line ts/naming-convention\nexport const AdheseSlot = lazy(() => import('./AdheseSlot').then(module => ({ default: module.AdheseSlot })));\n"],"names":["lazy","module"],"mappings":";;;AAGO,MAAM,aAAaA,MAAA,KAAK,MAAM,QAAO,QAAA,EAAA,KAAA,MAAA,QAAA,kBAAc,CAAA,EAAE,KAAK,CAAAC,aAAW,EAAE,SAASA,QAAO,aAAa,CAAC;;"}

package/dist/cjs/adheseContext.cjs

@@ -29,6 +29,8 @@ function AdheseProvider({ children, options }) {
   const [adhese, setAdhese] = react.useState(void 0);
   react.useEffect(() => {
     let instance;
+    if (!options)
+      return;
     import("@adhese/sdk").then(({ createAdhese }) => {
       instance = createAdhese(options);
       setAdhese((current) => {

package/dist/cjs/adheseContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"adheseContext.cjs","sources":["../../src/adheseContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type PropsWithChildren,\n  type ReactElement,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport type { Adhese, AdheseOptions } from '@adhese/sdk';\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    import('@adhese/sdk').then(({ createAdhese }) => {\n      instance = createAdhese(options);\n\n      setAdhese((current) => {\n        current?.dispose();\n\n        return instance;\n      });\n    }).catch(console.error);\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","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,gBAAgBA,MAAAA,cAAkC,MAAS;AAQ1D,SAAS,eAAe,EAAE,UAAU,WAAwE;AACjH,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAA6B,MAAS;AAElEC,QAAAA,UAAU,MAAM;AACV,QAAA;AAEJ,WAAO,aAAa,EAAE,KAAK,CAAC,EAAE,mBAAmB;AAC/C,iBAAW,aAAa,OAAO;AAE/B,gBAAU,CAAC,YAAY;AACrB,2CAAS;AAEF,eAAA;AAAA,MAAA,CACR;AAAA,IACF,CAAA,EAAE,MAAM,QAAQ,KAAK;AAEtB,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;;;"}
+{"version":3,"file":"adheseContext.cjs","sources":["../../src/adheseContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type PropsWithChildren,\n  type ReactElement,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport type { Adhese, AdheseOptions } from '@adhese/sdk';\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    import('@adhese/sdk').then(({ createAdhese }) => {\n      instance = createAdhese(options);\n\n      setAdhese((current) => {\n        current?.dispose();\n\n        return instance;\n      });\n    }).catch(console.error);\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","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,WAAO,aAAa,EAAE,KAAK,CAAC,EAAE,mBAAmB;AAC/C,iBAAW,aAAa,OAAO;AAE/B,gBAAU,CAAC,YAAY;AACrB,2CAAS;AAEF,eAAA;AAAA,MAAA,CACR;AAAA,IACF,CAAA,EAAE,MAAM,QAAQ,KAAK;AAEtB,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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const adheseContext = require("./adheseContext.cjs");
 const useAdheseSlot = require("./useAdheseSlot.cjs");
-const AdheseSlot = require("./AdheseSlot.cjs");
+const AdheseSlot_lazy = require("./AdheseSlot/AdheseSlot.lazy.cjs");
 exports.AdheseProvider = adheseContext.AdheseProvider;
 exports.useAdhese = adheseContext.useAdhese;
 exports.useAdheseSlot = useAdheseSlot.useAdheseSlot;
-exports.AdheseSlot = AdheseSlot.AdheseSlot;
+exports.AdheseSlot = AdheseSlot_lazy.AdheseSlot;
 //# sourceMappingURL=sdkReact.cjs.map

package/dist/cjs/useAdheseSlot.cjs

@@ -1,26 +1,49 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
-const sdkShared = require("@adhese/sdk-shared");
 const adheseContext = require("./adheseContext.cjs");
 function useAdheseSlot(elementRef, options) {
   const adhese = adheseContext.useAdhese();
   const [slot, setSlot] = react.useState(null);
   react.useEffect(() => {
     let intermediate = null;
-    if (adhese && elementRef.current) {
-      intermediate = sdkShared.toRaw(adhese == null ? void 0 : adhese.addSlot({
-        ...options,
-        containingElement: elementRef.current,
-        setup(context, hooks) {
-          var _a;
-          (_a = options.setup) == null ? void 0 : _a.call(options, context, hooks);
-          sdkShared.watch(context, (newSlot) => {
-            setSlot(newSlot);
-          }, { deep: true, immediate: true });
-        }
-      }));
-    }
+    import("@adhese/sdk-shared").then(({ watch }) => {
+      if (adhese && elementRef.current) {
+        intermediate = adhese == null ? void 0 : adhese.addSlot({
+          ...options,
+          containingElement: elementRef.current,
+          setup(context, hooks) {
+            var _a;
+            (_a = options.setup) == null ? void 0 : _a.call(options, context, hooks);
+            watch(context, (newSlot) => {
+              setSlot(newSlot);
+            }, { deep: true, immediate: true });
+          }
+        });
+      }
+    }).catch(console.error);
     return () => {
       intermediate == null ? void 0 : intermediate.dispose();
       setSlot(null);

package/dist/cjs/useAdheseSlot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAdheseSlot.cjs","sources":["../../src/useAdheseSlot.ts"],"sourcesContent":["import {\n  type RefObject,\n  useEffect,\n  useState,\n} from 'react';\nimport type { AdheseSlot, AdheseSlotOptions } from '@adhese/sdk';\nimport { toRaw, watch } from '@adhese/sdk-shared';\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  useEffect(() => {\n    let intermediate: AdheseSlot | null = null;\n\n    if (adhese && elementRef.current) {\n      intermediate = toRaw(adhese?.addSlot({\n        ...options,\n        containingElement: elementRef.current,\n        setup(context, hooks) {\n          options.setup?.(context, hooks);\n\n          watch(context, (newSlot) => {\n            setSlot(newSlot);\n          }, { deep: true, immediate: true });\n        },\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","useEffect","toRaw","watch"],"mappings":";;;;;AAkBgB,SAAA,cAAc,YAAoC,SAAsF;AACtJ,QAAM,SAASA,cAAAA;AAEf,QAAM,CAAC,MAAM,OAAO,IAAIC,eAA4B,IAAI;AACxDC,QAAAA,UAAU,MAAM;AACd,QAAI,eAAkC;AAElC,QAAA,UAAU,WAAW,SAAS;AACjB,qBAAAC,UAAAA,MAAM,iCAAQ,QAAQ;AAAA,QACnC,GAAG;AAAA,QACH,mBAAmB,WAAW;AAAA,QAC9B,MAAM,SAAS,OAAO;;AACZ,wBAAA,UAAA,iCAAQ,SAAS;AAEnBC,0BAAA,SAAS,CAAC,YAAY;AAC1B,oBAAQ,OAAO;AAAA,aACd,EAAE,MAAM,MAAM,WAAW,KAAM,CAAA;AAAA,QACpC;AAAA,MACD,EAAC;AAAA,IACJ;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;;"}
+{"version":3,"file":"useAdheseSlot.cjs","sources":["../../src/useAdheseSlot.ts"],"sourcesContent":["import {\n  type RefObject,\n  useEffect,\n  useState,\n} from 'react';\nimport type { AdheseSlot, AdheseSlotOptions } from '@adhese/sdk';\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  useEffect(() => {\n    let intermediate: AdheseSlot | null = null;\n\n    import('@adhese/sdk-shared').then(({ watch }) => {\n      if (adhese && elementRef.current) {\n        intermediate = adhese?.addSlot({\n          ...options,\n          containingElement: elementRef.current,\n          setup(context, hooks) {\n            options.setup?.(context, hooks);\n\n            watch(context, (newSlot) => {\n              setSlot(newSlot);\n            }, { deep: true, immediate: true });\n          },\n        });\n      }\n    }).catch(console.error);\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","useEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiBgB,SAAA,cAAc,YAAoC,SAAsF;AACtJ,QAAM,SAASA,cAAAA;AAEf,QAAM,CAAC,MAAM,OAAO,IAAIC,eAA4B,IAAI;AACxDC,QAAAA,UAAU,MAAM;AACd,QAAI,eAAkC;AAEtC,WAAO,oBAAoB,EAAE,KAAK,CAAC,EAAE,YAAY;AAC3C,UAAA,UAAU,WAAW,SAAS;AAChC,uBAAe,iCAAQ,QAAQ;AAAA,UAC7B,GAAG;AAAA,UACH,mBAAmB,WAAW;AAAA,UAC9B,MAAM,SAAS,OAAO;;AACZ,0BAAA,UAAA,iCAAQ,SAAS;AAEnB,kBAAA,SAAS,CAAC,YAAY;AAC1B,sBAAQ,OAAO;AAAA,eACd,EAAE,MAAM,MAAM,WAAW,KAAM,CAAA;AAAA,UACpC;AAAA,QAAA;AAAA,MAEJ;AAAA,IACD,CAAA,EAAE,MAAM,QAAQ,KAAK;AAEtB,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

@@ -1,5 +1,6 @@
+import * as react from 'react';
 import { PropsWithChildren, ReactElement, RefObject } from 'react';
-import { AdheseOptions, Adhese, AdheseSlotOptions, AdheseSlot as AdheseSlot$1 } from '@adhese/sdk';
+import { AdheseOptions, Adhese, AdheseSlotOptions, AdheseSlot as AdheseSlot$2 } from '@adhese/sdk';
 
 /**
  * Provider to create an Adhese instance with the given options. Via the `useAdhese` hook, the Adhese instance can be
@@ -7,7 +8,7 @@ import { AdheseOptions, Adhese, AdheseSlotOptions, AdheseSlot as AdheseSlot$1 }
  * @constructor
  */
 declare function AdheseProvider({ children, options }: PropsWithChildren<{
-    options: AdheseOptions;
+    options?: AdheseOptions;
 }>): ReactElement;
 /**
  * Hook to get the Adhese instance from the nearest `AdheseProvider`. When the Adhese instance is not available yet, `null`
@@ -23,13 +24,13 @@ declare function useAdhese(): Adhese | undefined;
  * @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 useAdheseSlot(elementRef: RefObject<HTMLElement>, options: Omit<AdheseSlotOptions, 'containingElement' | 'context'>): AdheseSlot$1 | null;
+declare function useAdheseSlot(elementRef: RefObject<HTMLElement>, options: Omit<AdheseSlotOptions, 'containingElement' | 'context'>): AdheseSlot$2 | null;
 
 type AdheseSlotProps = {
     /**
      * Callback to be called when the slot is created or disposed
      */
-    onChange?(slot: AdheseSlot$1 | null): void;
+    onChange?(slot: AdheseSlot$2 | null): void;
 } & Omit<AdheseSlotOptions, 'containingElement' | 'context'>;
 /**
  * Component to create an Adhese slot. The slot will be disposed when the component is unmounted. The slot will be
@@ -38,6 +39,8 @@ 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$1({ onChange, ...options }: AdheseSlotProps): ReactElement;
+
+declare const AdheseSlot: react.LazyExoticComponent<typeof AdheseSlot$1>;
 
 export { AdheseProvider, AdheseSlot, useAdhese, useAdheseSlot };

package/dist/sdkReact.js

@@ -1,6 +1,6 @@
 import { AdheseProvider, useAdhese } from "./adheseContext.js";
 import { useAdheseSlot } from "./useAdheseSlot.js";
-import { AdheseSlot } from "./AdheseSlot.js";
+import { AdheseSlot } from "./AdheseSlot/AdheseSlot.lazy.js";
 export {
   AdheseProvider,
   AdheseSlot,

package/dist/useAdheseSlot.js

@@ -1,24 +1,25 @@
 import { useState, useEffect } from "react";
-import { toRaw, watch } from "@adhese/sdk-shared";
 import { useAdhese } from "./adheseContext.js";
 function useAdheseSlot(elementRef, options) {
   const adhese = useAdhese();
   const [slot, setSlot] = useState(null);
   useEffect(() => {
     let intermediate = null;
-    if (adhese && elementRef.current) {
-      intermediate = toRaw(adhese == null ? void 0 : adhese.addSlot({
-        ...options,
-        containingElement: elementRef.current,
-        setup(context, hooks) {
-          var _a;
-          (_a = options.setup) == null ? void 0 : _a.call(options, context, hooks);
-          watch(context, (newSlot) => {
-            setSlot(newSlot);
-          }, { deep: true, immediate: true });
-        }
-      }));
-    }
+    import("@adhese/sdk-shared").then(({ watch }) => {
+      if (adhese && elementRef.current) {
+        intermediate = adhese == null ? void 0 : adhese.addSlot({
+          ...options,
+          containingElement: elementRef.current,
+          setup(context, hooks) {
+            var _a;
+            (_a = options.setup) == null ? void 0 : _a.call(options, context, hooks);
+            watch(context, (newSlot) => {
+              setSlot(newSlot);
+            }, { deep: true, immediate: true });
+          }
+        });
+      }
+    }).catch(console.error);
     return () => {
       intermediate == null ? void 0 : intermediate.dispose();
       setSlot(null);

package/dist/useAdheseSlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAdheseSlot.js","sources":["../src/useAdheseSlot.ts"],"sourcesContent":["import {\n  type RefObject,\n  useEffect,\n  useState,\n} from 'react';\nimport type { AdheseSlot, AdheseSlotOptions } from '@adhese/sdk';\nimport { toRaw, watch } from '@adhese/sdk-shared';\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  useEffect(() => {\n    let intermediate: AdheseSlot | null = null;\n\n    if (adhese && elementRef.current) {\n      intermediate = toRaw(adhese?.addSlot({\n        ...options,\n        containingElement: elementRef.current,\n        setup(context, hooks) {\n          options.setup?.(context, hooks);\n\n          watch(context, (newSlot) => {\n            setSlot(newSlot);\n          }, { deep: true, immediate: true });\n        },\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":";;;AAkBgB,SAAA,cAAc,YAAoC,SAAsF;AACtJ,QAAM,SAAS;AAEf,QAAM,CAAC,MAAM,OAAO,IAAI,SAA4B,IAAI;AACxD,YAAU,MAAM;AACd,QAAI,eAAkC;AAElC,QAAA,UAAU,WAAW,SAAS;AACjB,qBAAA,MAAM,iCAAQ,QAAQ;AAAA,QACnC,GAAG;AAAA,QACH,mBAAmB,WAAW;AAAA,QAC9B,MAAM,SAAS,OAAO;;AACZ,wBAAA,UAAA,iCAAQ,SAAS;AAEnB,gBAAA,SAAS,CAAC,YAAY;AAC1B,oBAAQ,OAAO;AAAA,aACd,EAAE,MAAM,MAAM,WAAW,KAAM,CAAA;AAAA,QACpC;AAAA,MACD,EAAC;AAAA,IACJ;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;"}
+{"version":3,"file":"useAdheseSlot.js","sources":["../src/useAdheseSlot.ts"],"sourcesContent":["import {\n  type RefObject,\n  useEffect,\n  useState,\n} from 'react';\nimport type { AdheseSlot, AdheseSlotOptions } from '@adhese/sdk';\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  useEffect(() => {\n    let intermediate: AdheseSlot | null = null;\n\n    import('@adhese/sdk-shared').then(({ watch }) => {\n      if (adhese && elementRef.current) {\n        intermediate = adhese?.addSlot({\n          ...options,\n          containingElement: elementRef.current,\n          setup(context, hooks) {\n            options.setup?.(context, hooks);\n\n            watch(context, (newSlot) => {\n              setSlot(newSlot);\n            }, { deep: true, immediate: true });\n          },\n        });\n      }\n    }).catch(console.error);\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":";;AAiBgB,SAAA,cAAc,YAAoC,SAAsF;AACtJ,QAAM,SAAS;AAEf,QAAM,CAAC,MAAM,OAAO,IAAI,SAA4B,IAAI;AACxD,YAAU,MAAM;AACd,QAAI,eAAkC;AAEtC,WAAO,oBAAoB,EAAE,KAAK,CAAC,EAAE,YAAY;AAC3C,UAAA,UAAU,WAAW,SAAS;AAChC,uBAAe,iCAAQ,QAAQ;AAAA,UAC7B,GAAG;AAAA,UACH,mBAAmB,WAAW;AAAA,UAC9B,MAAM,SAAS,OAAO;;AACZ,0BAAA,UAAA,iCAAQ,SAAS;AAEnB,kBAAA,SAAS,CAAC,YAAY;AAC1B,sBAAQ,OAAO;AAAA,eACd,EAAE,MAAM,MAAM,WAAW,KAAM,CAAA;AAAA,UACpC;AAAA,QAAA;AAAA,MAEJ;AAAA,IACD,CAAA,EAAE,MAAM,QAAQ,KAAK;AAEtB,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

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

package/dist/AdheseSlot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AdheseSlot.js","sources":["../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, 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  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  return (\n    <div ref={element} />\n  );\n}\n"],"names":[],"mappings":";;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAU,OAA8B,IAAI;AAElD,gBAAc,SAAS;AAAA,IACrB,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;AAGC,SAAA,oBAAC,OAAI,EAAA,KAAK,QAAS,CAAA;AAEvB;"}

package/dist/cjs/AdheseSlot.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"AdheseSlot.cjs","sources":["../../src/AdheseSlot.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, 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  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  return (\n    <div ref={element} />\n  );\n}\n"],"names":["useRef","useAdheseSlot","useCallback","watch","jsx"],"mappings":";;;;;;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAkC;AAC1B,QAAA,UAAUA,aAA8B,IAAI;AAElDC,gBAAAA,cAAc,SAAS;AAAA,IACrB,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;AAGC,SAAAC,2BAAA,IAAC,OAAI,EAAA,KAAK,QAAS,CAAA;AAEvB;;"}