promise-portal 1.0.4 → 1.0.6

package/README.md

@@ -15,6 +15,10 @@ npm install promise-portal -D
 yarn add promise-portal --D
 ```
 
+## Online Demo
+
+[Demo on codesandbox](https://codesandbox.io/p/github/tjyuanpeng/promise-portal)
+
 ## Relative Resourece
 
 - [react protal](https://reactjs.org/docs/portals.html)
@@ -75,6 +79,7 @@ const onClick = async () => {
 
 ```ts
 // ./main.ts
+import { createApp } from 'vue'
 import { createPromisePortal } from 'promise-portal'
 
 const app = createApp(App)
@@ -114,11 +119,19 @@ const onClick = async () => {
 
 - createPromisePortal
 
-  create promise-portal instance
+  create promise-portal instance, set to vue instance
 
   ```ts
   const instance = createPromisePortal()
-  app.use(instance) // vue instance
+  app.use(instance)
+  ```
+
+  you can set default config to instance
+
+  ```ts
+  const instance = createPromisePortal({
+    unmountDelay: 100,
+  })
   ```
 
 - getActiveInstance
@@ -142,11 +155,12 @@ const onClick = async () => {
   a vue composition api, use in portal component to get context of portal
 
   ```ts
-  const { resolve, reject, el, vNode } = usePortalContext()
+  const { resolve, reject, el, vNode, setUnmountDelay } = usePortalContext()
   // resolve: promise resolve handler
   // reject: promise reject handler
   // el: portal base element, injecting to body element
   // vNode: portal base vue vnode
+  // setUnmountDelay: set unmount delay to this portal
   ```
 
   you can use typescript generic types
@@ -223,6 +237,28 @@ const onClick = async () => {
   })
   ```
 
+- detectPromisePortalInstance
+
+  Check if the instance has been properly destroyed
+
+  ```ts
+  // main.ts
+  if (import.meta.env.DEV) {
+    detectPromisePortalInstance()
+  }
+  ```
+
+  You can pass in other values to customize it.
+
+  ```ts
+  // default value
+  detectPromisePortalInstance({
+    style = 'position:fixed;top:0;right:0;text-align:right;line-height:1.3;color:red;z-index:9999;',
+    text = `Detected that the promise-portal instance has not been properly destroyed<br>
+            Please make sure to call resolve/reject to release the instance correctly.`,
+  })
+  ```
+
 ## Link
 
 - [@filez/portal](https://github.com/lenovo-filez/portal)

package/dist/index.cjs

@@ -22,6 +22,7 @@ var src_exports = {};
 __export(src_exports, {
   createPromisePortal: () => createPromisePortal,
   definePortal: () => definePortal,
+  detectPromisePortalInstance: () => detectPromisePortalInstance,
   getActiveInstance: () => getActiveInstance,
   setActiveInstance: () => setActiveInstance,
   usePortalContext: () => usePortalContext
@@ -32,8 +33,9 @@ var promisePortalSymbol = process.env.NODE_ENV !== "production" ? Symbol("promis
 var activeInstance;
 var getActiveInstance = () => activeInstance;
 var setActiveInstance = (instance) => activeInstance = instance;
-var createPromisePortal = () => {
+var createPromisePortal = (defaultOptions = {}) => {
   const instance = {
+    defaultOptions,
     app: void 0,
     map: /* @__PURE__ */ new WeakMap(),
     install(app) {
@@ -59,18 +61,23 @@ var usePortalContext = () => {
   }
   return data;
 };
-var definePortal = (component, { instance, unmountDelay = 0 } = {}) => {
+var definePortal = (component, { instance, unmountDelay } = {}) => {
   const _instance = instance || (0, import_vue.getCurrentInstance)() && (0, import_vue.inject)(promisePortalSymbol) || activeInstance;
   if (!_instance) {
     throw new Error("[promise-portal]: no instance found. Do you forget install promise-portal?");
   }
   return (props, children) => {
     let el = document.createElement("div");
+    el.setAttribute("data-promise-portal-container", "");
     document.body.appendChild(el);
+    let _delay = unmountDelay || _instance.defaultOptions?.unmountDelay;
+    const setUnmountDelay = (delay) => {
+      _delay = delay;
+    };
     let vNode;
     const p = new Promise((resolve, reject) => {
       vNode = (0, import_vue.createVNode)(component, props, children);
-      _instance.map.set(vNode, { resolve, reject, el, vNode });
+      _instance.map.set(vNode, { resolve, reject, el, vNode, setUnmountDelay });
       vNode.appContext = _instance.app._context;
       (0, import_vue.render)(vNode, el);
     });
@@ -82,15 +89,36 @@ var definePortal = (component, { instance, unmountDelay = 0 } = {}) => {
         }
         el = null;
         vNode = null;
-      }, unmountDelay);
+      }, _delay);
     });
     return p;
   };
 };
+var detectPromisePortalInstance = (config = {}) => {
+  const {
+    style = "position:fixed;top:0;right:0;text-align:right;line-height:1.3;color:red;z-index:9999;",
+    text = `Detected that the promise-portal instance has not been properly destroyed<br>Please make sure to call resolve/reject to release the instance correctly.`
+  } = config;
+  const nodes = document.querySelectorAll("[data-promise-portal-container]");
+  if (nodes.length > 0) {
+    let el = document.querySelector("[data-promise-portal-detector]");
+    if (!el) {
+      el = document.createElement("div");
+      el.setAttribute("data-promise-portal-detector", "");
+      el.setAttribute("style", style);
+      el.innerHTML = text;
+      document.body.appendChild(el);
+    }
+  } else {
+    document.querySelector("[data-promise-portal-detector]")?.remove();
+  }
+  setTimeout(() => detectPromisePortalInstance(config), 200);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createPromisePortal,
   definePortal,
+  detectPromisePortalInstance,
   getActiveInstance,
   setActiveInstance,
   usePortalContext

package/dist/index.d.ts

@@ -5,8 +5,12 @@ interface PortalContext<R> {
     reject: (reason?: any) => void;
     el: HTMLDivElement;
     vNode: VNode;
+    setUnmountDelay: (unmountDelay: number) => void;
 }
 interface PromisePortal<R = any> {
+    defaultOptions: {
+        unmountDelay?: number;
+    };
     app: App;
     map: WeakMap<VNode, PortalContext<R>>;
     install: (app: App) => void;
@@ -17,8 +21,13 @@ interface PortalOptions<R> {
 }
 declare const getActiveInstance: () => PromisePortal<any>;
 declare const setActiveInstance: (instance: PromisePortal) => PromisePortal<any>;
-declare const createPromisePortal: () => PromisePortal<any>;
+declare const createPromisePortal: (defaultOptions?: {}) => PromisePortal<any>;
 declare const usePortalContext: <TOutput = any>() => PortalContext<TOutput>;
 declare const definePortal: <TOutput = any, TProps = any>(component: Component, { instance, unmountDelay }?: PortalOptions<TOutput>) => (props?: TProps | undefined, children?: unknown) => Promise<TOutput>;
+interface DetectPromisePortalInstanceConfig {
+    style?: string;
+    text?: string;
+}
+declare const detectPromisePortalInstance: (config?: DetectPromisePortalInstanceConfig) => void;
 
-export { PortalContext, PortalOptions, PromisePortal, createPromisePortal, definePortal, getActiveInstance, setActiveInstance, usePortalContext };
+export { DetectPromisePortalInstanceConfig, PortalContext, PortalOptions, PromisePortal, createPromisePortal, definePortal, detectPromisePortalInstance, getActiveInstance, setActiveInstance, usePortalContext };

package/dist/index.js

@@ -4,8 +4,9 @@ var promisePortalSymbol = process.env.NODE_ENV !== "production" ? Symbol("promis
 var activeInstance;
 var getActiveInstance = () => activeInstance;
 var setActiveInstance = (instance) => activeInstance = instance;
-var createPromisePortal = () => {
+var createPromisePortal = (defaultOptions = {}) => {
   const instance = {
+    defaultOptions,
     app: void 0,
     map: /* @__PURE__ */ new WeakMap(),
     install(app) {
@@ -31,18 +32,23 @@ var usePortalContext = () => {
   }
   return data;
 };
-var definePortal = (component, { instance, unmountDelay = 0 } = {}) => {
+var definePortal = (component, { instance, unmountDelay } = {}) => {
   const _instance = instance || getCurrentInstance() && inject(promisePortalSymbol) || activeInstance;
   if (!_instance) {
     throw new Error("[promise-portal]: no instance found. Do you forget install promise-portal?");
   }
   return (props, children) => {
     let el = document.createElement("div");
+    el.setAttribute("data-promise-portal-container", "");
     document.body.appendChild(el);
+    let _delay = unmountDelay || _instance.defaultOptions?.unmountDelay;
+    const setUnmountDelay = (delay) => {
+      _delay = delay;
+    };
     let vNode;
     const p = new Promise((resolve, reject) => {
       vNode = createVNode(component, props, children);
-      _instance.map.set(vNode, { resolve, reject, el, vNode });
+      _instance.map.set(vNode, { resolve, reject, el, vNode, setUnmountDelay });
       vNode.appContext = _instance.app._context;
       render(vNode, el);
     });
@@ -54,14 +60,35 @@ var definePortal = (component, { instance, unmountDelay = 0 } = {}) => {
         }
         el = null;
         vNode = null;
-      }, unmountDelay);
+      }, _delay);
     });
     return p;
   };
 };
+var detectPromisePortalInstance = (config = {}) => {
+  const {
+    style = "position:fixed;top:0;right:0;text-align:right;line-height:1.3;color:red;z-index:9999;",
+    text = `Detected that the promise-portal instance has not been properly destroyed<br>Please make sure to call resolve/reject to release the instance correctly.`
+  } = config;
+  const nodes = document.querySelectorAll("[data-promise-portal-container]");
+  if (nodes.length > 0) {
+    let el = document.querySelector("[data-promise-portal-detector]");
+    if (!el) {
+      el = document.createElement("div");
+      el.setAttribute("data-promise-portal-detector", "");
+      el.setAttribute("style", style);
+      el.innerHTML = text;
+      document.body.appendChild(el);
+    }
+  } else {
+    document.querySelector("[data-promise-portal-detector]")?.remove();
+  }
+  setTimeout(() => detectPromisePortalInstance(config), 200);
+};
 export {
   createPromisePortal,
   definePortal,
+  detectPromisePortalInstance,
   getActiveInstance,
   setActiveInstance,
   usePortalContext

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "promise-portal",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "let you use react portal in vue, and with promise",
   "type": "module",
   "main": "dist/index.cjs",