@adhese/sdk-devtools 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @adhese/sdk-devtools
 
+## 0.10.0
+
+### Minor Changes
+
+- 0f1b268: Rename createDevtools to devtoolsPlugin
+
+### Patch Changes
+
+- 1819375: Fix Adhese not being properly disposed in React instances
+- 0f1b268: Use watcher to listen to changes of the debug property instead of an event
+
 ## 0.9.1
 
 ### Patch Changes

package/README.md

@@ -21,15 +21,15 @@ bun add @adhese/sdk-devtools
 ```
 :::
 
-Add the `createDevtools` function to your Adhese config plugins field:
+Add the `devtoolsPlugin` function to your Adhese config plugins field:
 
 ```js
-import { createDevtools } from '@adhese/sdk-devtools';
+import { devtoolsPlugin } from '@adhese/sdk-devtools';
 import { createAdhese } from '@adhese/sdk';
 
 const adhese = createAdhese({
   account: 'your-account-id',
-  plugins: [createDevtools],
+  plugins: [devtoolsPlugin],
 });
 ```
 

package/dist/index.cjs

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const sdkShared = require("@adhese/sdk-shared");
 const react = require("react");
-const createDevtools = (context, {
+const devtoolsPlugin = (context, {
   onInit,
   onDispose
 }) => {
@@ -14,18 +15,17 @@ const createDevtools = (context, {
       unmount = main.createAdheseDevtools(wrapperElement, context);
     }
   }
-  onInit(async () => {
-    var _a;
-    if (context.debug) {
-      await initDevtools();
-      if (context.isDisposed)
-        dispose();
-    }
-    (_a = context.events) == null ? void 0 : _a.debugChange.addListener(async (debug) => {
-      if (debug)
+  onInit(() => {
+    sdkShared.watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {
+      if (debug && !isDisposed) {
         await initDevtools();
-      else
+        if (context.isDisposed)
+          dispose();
+      } else {
         dispose();
+      }
+    }, {
+      immediate: true
     });
   });
   function dispose() {
@@ -38,5 +38,5 @@ const createDevtools = (context, {
 };
 const Devtools = react.lazy(() => Promise.resolve().then(() => require("./devtools-gR8ZWEgG.cjs")).then((n) => n.Devtools).then((module2) => ({ default: module2.Devtools })));
 exports.Devtools = Devtools;
-exports.createDevtools = createDevtools;
+exports.devtoolsPlugin = devtoolsPlugin;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import type { AdheseContext, AdhesePlugin } from '@adhese/sdk';\nimport { lazy } from 'react';\n\nexport const createDevtools: AdhesePlugin = (context: AdheseContext, {\n  onInit,\n  onDispose,\n}) => {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(async () => {\n    if (context.debug) {\n      await initDevtools();\n\n      if (context.isDisposed)\n        dispose();\n    }\n\n    context.events?.debugChange.addListener(async (debug) => {\n      if (debug)\n        await initDevtools();\n      else\n        dispose();\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n};\n\n// eslint-disable-next-line ts/naming-convention\nexport const Devtools = lazy(() => import('./Devtools').then(module => ({ default: module.Devtools })));\n"],"names":["lazy","module"],"mappings":";;;AAGa,MAAA,iBAA+B,CAAC,SAAwB;AAAA,EACnE;AAAA,EACA;AACF,MAAM;AACE,QAAA,iBAAiB,SAAS,cAAc,KAAK;AAC/C,MAAA;AAEJ,iBAAe,eAA8B;AACrC,UAAA,OAAO,MAAM,QAAO,QAAA,EAAA,KAAA,MAAA,QAAA,yBAAQ;AAElC,QAAI,CAAC,SAAS;AACH,eAAA,KAAK,YAAY,cAAc;AAE9B,gBAAA,KAAK,qBAAqB,gBAAgB,OAAO;AAAA,IAC7D;AAAA,EACF;AAEA,SAAO,YAAY;;AACjB,QAAI,QAAQ,OAAO;AACjB,YAAM,aAAa;AAEnB,UAAI,QAAQ;AACF;IACZ;AAEA,kBAAQ,WAAR,mBAAgB,YAAY,YAAY,OAAO,UAAU;AACnD,UAAA;AACF,cAAM,aAAa;AAAA;AAEX;IAAA;AAAA,EACX,CACF;AAED,WAAS,UAAgB;AACb;AACA,cAAA;AACV,QAAI,eAAe;AACjB,qBAAe,YAAY;AAAA,EAC/B;AAEA,YAAU,OAAO;AACnB;AAGO,MAAM,WAAWA,MAAA,KAAK,MAAM,QAAO,QAAA,EAAA,KAAA,MAAA,QAAA,yBAAY,CAAA,EAAA,KAAA,OAAA,EAAA,QAAA,EAAE,KAAK,CAAAC,aAAW,EAAE,SAASA,QAAO,WAAW,CAAC;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import type { AdheseContext, AdhesePlugin } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { lazy } from 'react';\n\nexport const devtoolsPlugin: AdhesePlugin = (context: AdheseContext, {\n  onInit,\n  onDispose,\n}) => {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(() => {\n    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n      if (debug && !isDisposed) {\n        await initDevtools();\n\n        if (context.isDisposed)\n          dispose();\n      }\n      else {\n        dispose();\n      }\n    }, {\n      immediate: true,\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n};\n\n// eslint-disable-next-line ts/naming-convention\nexport const Devtools = lazy(() => import('./Devtools').then(module => ({ default: module.Devtools })));\n"],"names":["watch","lazy","module"],"mappings":";;;;AAIa,MAAA,iBAA+B,CAAC,SAAwB;AAAA,EACnE;AAAA,EACA;AACF,MAAM;AACE,QAAA,iBAAiB,SAAS,cAAc,KAAK;AAC/C,MAAA;AAEJ,iBAAe,eAA8B;AACrC,UAAA,OAAO,MAAM,QAAO,QAAA,EAAA,KAAA,MAAA,QAAA,yBAAQ;AAElC,QAAI,CAAC,SAAS;AACH,eAAA,KAAK,YAAY,cAAc;AAE9B,gBAAA,KAAK,qBAAqB,gBAAgB,OAAO;AAAA,IAC7D;AAAA,EACF;AAEA,SAAO,MAAM;AACLA,oBAAA,MAAM,CAAC,QAAQ,OAAO,QAAQ,UAAU,GAAG,OAAO,CAAC,OAAO,UAAU,MAAM;AAC1E,UAAA,SAAS,CAAC,YAAY;AACxB,cAAM,aAAa;AAEnB,YAAI,QAAQ;AACF;MAAA,OAEP;AACK;MACV;AAAA,IAAA,GACC;AAAA,MACD,WAAW;AAAA,IAAA,CACZ;AAAA,EAAA,CACF;AAED,WAAS,UAAgB;AACb;AACA,cAAA;AACV,QAAI,eAAe;AACjB,qBAAe,YAAY;AAAA,EAC/B;AAEA,YAAU,OAAO;AACnB;AAGO,MAAM,WAAWC,MAAA,KAAK,MAAM,QAAO,QAAA,EAAA,KAAA,MAAA,QAAA,yBAAY,CAAA,EAAA,KAAA,OAAA,EAAA,QAAA,EAAE,KAAK,CAAAC,aAAW,EAAE,SAASA,QAAO,WAAW,CAAC;;;"}

package/dist/index.d.ts

@@ -6,7 +6,7 @@ declare function Devtools$1({ adheseContext }: {
     adheseContext: AdheseContext;
 }): ReactElement;
 
-declare const createDevtools: AdhesePlugin;
+declare const devtoolsPlugin: AdhesePlugin;
 declare const Devtools: react.LazyExoticComponent<typeof Devtools$1>;
 
-export { Devtools, createDevtools };
+export { Devtools, devtoolsPlugin };

package/dist/index.js

@@ -1,5 +1,6 @@
+import { watch } from "@adhese/sdk-shared";
 import { lazy } from "react";
-const createDevtools = (context, {
+const devtoolsPlugin = (context, {
   onInit,
   onDispose
 }) => {
@@ -12,18 +13,17 @@ const createDevtools = (context, {
       unmount = main.createAdheseDevtools(wrapperElement, context);
     }
   }
-  onInit(async () => {
-    var _a;
-    if (context.debug) {
-      await initDevtools();
-      if (context.isDisposed)
-        dispose();
-    }
-    (_a = context.events) == null ? void 0 : _a.debugChange.addListener(async (debug) => {
-      if (debug)
+  onInit(() => {
+    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {
+      if (debug && !isDisposed) {
         await initDevtools();
-      else
+        if (context.isDisposed)
+          dispose();
+      } else {
         dispose();
+      }
+    }, {
+      immediate: true
     });
   });
   function dispose() {
@@ -37,6 +37,6 @@ const createDevtools = (context, {
 const Devtools = lazy(() => import("./devtools-DbsxZEDX.js").then((n) => n.D).then((module) => ({ default: module.Devtools })));
 export {
   Devtools,
-  createDevtools
+  devtoolsPlugin
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import type { AdheseContext, AdhesePlugin } from '@adhese/sdk';\nimport { lazy } from 'react';\n\nexport const createDevtools: AdhesePlugin = (context: AdheseContext, {\n  onInit,\n  onDispose,\n}) => {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(async () => {\n    if (context.debug) {\n      await initDevtools();\n\n      if (context.isDisposed)\n        dispose();\n    }\n\n    context.events?.debugChange.addListener(async (debug) => {\n      if (debug)\n        await initDevtools();\n      else\n        dispose();\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n};\n\n// eslint-disable-next-line ts/naming-convention\nexport const Devtools = lazy(() => import('./Devtools').then(module => ({ default: module.Devtools })));\n"],"names":[],"mappings":";AAGa,MAAA,iBAA+B,CAAC,SAAwB;AAAA,EACnE;AAAA,EACA;AACF,MAAM;AACE,QAAA,iBAAiB,SAAS,cAAc,KAAK;AAC/C,MAAA;AAEJ,iBAAe,eAA8B;AACrC,UAAA,OAAO,MAAM,OAAO,wBAAQ;AAElC,QAAI,CAAC,SAAS;AACH,eAAA,KAAK,YAAY,cAAc;AAE9B,gBAAA,KAAK,qBAAqB,gBAAgB,OAAO;AAAA,IAC7D;AAAA,EACF;AAEA,SAAO,YAAY;;AACjB,QAAI,QAAQ,OAAO;AACjB,YAAM,aAAa;AAEnB,UAAI,QAAQ;AACF;IACZ;AAEA,kBAAQ,WAAR,mBAAgB,YAAY,YAAY,OAAO,UAAU;AACnD,UAAA;AACF,cAAM,aAAa;AAAA;AAEX;IAAA;AAAA,EACX,CACF;AAED,WAAS,UAAgB;AACb;AACA,cAAA;AACV,QAAI,eAAe;AACjB,qBAAe,YAAY;AAAA,EAC/B;AAEA,YAAU,OAAO;AACnB;AAGO,MAAM,WAAW,KAAK,MAAM,OAAO,wBAAY,EAAA,KAAA,OAAA,EAAA,CAAA,EAAE,KAAK,CAAA,YAAW,EAAE,SAAS,OAAO,WAAW,CAAC;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import type { AdheseContext, AdhesePlugin } from '@adhese/sdk';\nimport { watch } from '@adhese/sdk-shared';\nimport { lazy } from 'react';\n\nexport const devtoolsPlugin: AdhesePlugin = (context: AdheseContext, {\n  onInit,\n  onDispose,\n}) => {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(() => {\n    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n      if (debug && !isDisposed) {\n        await initDevtools();\n\n        if (context.isDisposed)\n          dispose();\n      }\n      else {\n        dispose();\n      }\n    }, {\n      immediate: true,\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n};\n\n// eslint-disable-next-line ts/naming-convention\nexport const Devtools = lazy(() => import('./Devtools').then(module => ({ default: module.Devtools })));\n"],"names":[],"mappings":";;AAIa,MAAA,iBAA+B,CAAC,SAAwB;AAAA,EACnE;AAAA,EACA;AACF,MAAM;AACE,QAAA,iBAAiB,SAAS,cAAc,KAAK;AAC/C,MAAA;AAEJ,iBAAe,eAA8B;AACrC,UAAA,OAAO,MAAM,OAAO,wBAAQ;AAElC,QAAI,CAAC,SAAS;AACH,eAAA,KAAK,YAAY,cAAc;AAE9B,gBAAA,KAAK,qBAAqB,gBAAgB,OAAO;AAAA,IAC7D;AAAA,EACF;AAEA,SAAO,MAAM;AACL,UAAA,MAAM,CAAC,QAAQ,OAAO,QAAQ,UAAU,GAAG,OAAO,CAAC,OAAO,UAAU,MAAM;AAC1E,UAAA,SAAS,CAAC,YAAY;AACxB,cAAM,aAAa;AAEnB,YAAI,QAAQ;AACF;MAAA,OAEP;AACK;MACV;AAAA,IAAA,GACC;AAAA,MACD,WAAW;AAAA,IAAA,CACZ;AAAA,EAAA,CACF;AAED,WAAS,UAAgB;AACb;AACA,cAAA;AACV,QAAI,eAAe;AACjB,qBAAe,YAAY;AAAA,EAC/B;AAEA,YAAU,OAAO;AACnB;AAGO,MAAM,WAAW,KAAK,MAAM,OAAO,wBAAY,EAAA,KAAA,OAAA,EAAA,CAAA,EAAE,KAAK,CAAA,YAAW,EAAE,SAAS,OAAO,WAAW,CAAC;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adhese/sdk-devtools",
   "type": "module",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Adhese SDK Devtools",
   "license": "GPL-3.0",
   "repository": {