promise-portal 1.0.3 → 1.0.5

package/README.md

@@ -15,12 +15,71 @@ 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)
+- [vue teleport](https://vuejs.org/guide/built-ins/teleport.html)
+
+## Why
+
+like element-plus, the modal is a vue component
+
+in development, we want use modal like a function
+
+no `show` property to control show/hide, gettting result is more explicit
+
+easier to control workflow, and easier to handle life-cycles
+
+### Before
+
+use as acomponent, with ref value to control visibility and life-cycles
+
+```ts
+<script setup lang="ts">
+import Comp from './components/name.vue'
+const show = ref(false)
+const onClick = () => {
+  show.value = true
+}
+const onClosed = () => {
+  show.value = false
+}
+</script>
+<template>
+  <el-button @click="onClick"> click to open the Dialog </el-button>
+  <Comp v-model="show" @closed="onClosed"> a dialog content </Comp>
+</template>
+```
+
+### After
+
+use as a normal promise-style function, so happy to develop
+
+```ts
+<script setup lang="ts">
+import Comp, { Input, Output } from './components/name.vue'
+const func = definePortal<Output, Input>(Comp)
+const onClick = async () => {
+  const data = await func()
+  console.log(data)
+}
+</script>
+<template>
+  <el-button @click="onClick"> click to open the Dialog </el-button>
+</template>
+```
+
 ## Use
 
 ### install in the entry file
 
 ```ts
 // ./main.ts
+import { createApp } from 'vue'
 import { createPromisePortal } from 'promise-portal'
 
 const app = createApp(App)
@@ -60,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
@@ -88,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
@@ -169,8 +237,29 @@ const onClick = async () => {
   })
   ```
 
-## Link
+- detectPromisePortalInstance
+
+  Check if the instance has been properly destroyed
 
-[@filez/portal](https://github.com/lenovo-filez/portal)
+  ```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
 
-[promise-modal](https://github.com/liruifengv/promise-modal)
+- [@filez/portal](https://github.com/lenovo-filez/portal)
+- [promise-modal](https://github.com/liruifengv/promise-modal)

package/dist/index.cjs

@@ -0,0 +1,124 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createPromisePortal: () => createPromisePortal,
+  definePortal: () => definePortal,
+  detectPromisePortalInstance: () => detectPromisePortalInstance,
+  getActiveInstance: () => getActiveInstance,
+  setActiveInstance: () => setActiveInstance,
+  usePortalContext: () => usePortalContext
+});
+module.exports = __toCommonJS(src_exports);
+var import_vue = require("vue");
+var promisePortalSymbol = process.env.NODE_ENV !== "production" ? Symbol("promise-portal") : Symbol();
+var activeInstance;
+var getActiveInstance = () => activeInstance;
+var setActiveInstance = (instance) => activeInstance = instance;
+var createPromisePortal = (defaultOptions = {}) => {
+  const instance = {
+    defaultOptions,
+    app: void 0,
+    map: /* @__PURE__ */ new WeakMap(),
+    install(app) {
+      instance.app = app;
+      setActiveInstance(instance);
+      app.provide(promisePortalSymbol, instance);
+    }
+  };
+  return instance;
+};
+var usePortalContext = () => {
+  const instance = (0, import_vue.inject)(promisePortalSymbol);
+  if (!instance) {
+    throw new Error("[promise-portal]: no instance found.");
+  }
+  const ins = (0, import_vue.getCurrentInstance)();
+  if (!ins?.vnode) {
+    throw new Error("[promise-portal]: no vnode found.");
+  }
+  const data = instance.map.get(ins.vnode);
+  if (!data) {
+    throw new Error("[promise-portal]: no inject data found.");
+  }
+  return data;
+};
+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, setUnmountDelay });
+      vNode.appContext = _instance.app._context;
+      (0, import_vue.render)(vNode, el);
+    });
+    p.finally(() => {
+      setTimeout(() => {
+        if (el) {
+          (0, import_vue.render)(null, el);
+          document.body.removeChild(el);
+        }
+        el = null;
+        vNode = null;
+      }, _delay);
+    });
+    return p;
+  };
+};
+var 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.`
+} = {}) => {
+  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, 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

@@ -0,0 +1,32 @@
+import { VNode, App, Component } from 'vue';
+
+interface PortalContext<R> {
+    resolve: (value: R | PromiseLike<R>) => void;
+    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;
+}
+interface PortalOptions<R> {
+    instance?: PromisePortal<R>;
+    unmountDelay?: number;
+}
+declare const getActiveInstance: () => PromisePortal<any>;
+declare const setActiveInstance: (instance: PromisePortal) => 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>;
+declare const detectPromisePortalInstance: ({ style, text, }?: {
+    style?: string | undefined;
+    text?: string | undefined;
+}) => void;
+
+export { PortalContext, PortalOptions, PromisePortal, createPromisePortal, definePortal, detectPromisePortalInstance, getActiveInstance, setActiveInstance, usePortalContext };

package/dist/index.js

@@ -0,0 +1,94 @@
+// src/index.ts
+import { createVNode, render, inject, getCurrentInstance } from "vue";
+var promisePortalSymbol = process.env.NODE_ENV !== "production" ? Symbol("promise-portal") : Symbol();
+var activeInstance;
+var getActiveInstance = () => activeInstance;
+var setActiveInstance = (instance) => activeInstance = instance;
+var createPromisePortal = (defaultOptions = {}) => {
+  const instance = {
+    defaultOptions,
+    app: void 0,
+    map: /* @__PURE__ */ new WeakMap(),
+    install(app) {
+      instance.app = app;
+      setActiveInstance(instance);
+      app.provide(promisePortalSymbol, instance);
+    }
+  };
+  return instance;
+};
+var usePortalContext = () => {
+  const instance = inject(promisePortalSymbol);
+  if (!instance) {
+    throw new Error("[promise-portal]: no instance found.");
+  }
+  const ins = getCurrentInstance();
+  if (!ins?.vnode) {
+    throw new Error("[promise-portal]: no vnode found.");
+  }
+  const data = instance.map.get(ins.vnode);
+  if (!data) {
+    throw new Error("[promise-portal]: no inject data found.");
+  }
+  return data;
+};
+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, setUnmountDelay });
+      vNode.appContext = _instance.app._context;
+      render(vNode, el);
+    });
+    p.finally(() => {
+      setTimeout(() => {
+        if (el) {
+          render(null, el);
+          document.body.removeChild(el);
+        }
+        el = null;
+        vNode = null;
+      }, _delay);
+    });
+    return p;
+  };
+};
+var 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.`
+} = {}) => {
+  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, 200);
+};
+export {
+  createPromisePortal,
+  definePortal,
+  detectPromisePortalInstance,
+  getActiveInstance,
+  setActiveInstance,
+  usePortalContext
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "promise-portal",
-  "version": "1.0.3",
-  "description": "a vite plugin to load svg icon for element-plus",
+  "version": "1.0.5",
+  "description": "let you use react portal in vue, and with promise",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",