promise-portal 1.0.6 → 1.2.1

package/README.md

@@ -1,30 +1,25 @@
 # promise-portal
 
-let you use react portal in vue, and with promise
+use component as a promisd-like function
 
-## Install
+## Installation
 
 ```bash
 // pnpm
-pnpm add promise-portal -D
+pnpm add promise-portal
 
 // npm
-npm install promise-portal -D
+npm install promise-portal
 
 // yarn
-yarn add promise-portal --D
+yarn add promise-portal
 ```
 
 ## Online Demo
 
-[Demo on codesandbox](https://codesandbox.io/p/github/tjyuanpeng/promise-portal)
+[https://codesandbox.io/p/github/tjyuanpeng/promise-portal](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
+## Motivation
 
 like element-plus, the modal is a vue component
 
@@ -34,11 +29,13 @@ no `show` property to control show/hide, gettting result is more explicit
 
 easier to control workflow, and easier to handle life-cycles
 
-### Before
+so you can use Promise-Portal to save your life-time
 
-use as acomponent, with ref value to control visibility and life-cycles
+### before
 
-```ts
+use as a component, with ref value to control visibility and life-cycles
+
+```vue
 <script setup lang="ts">
 import Comp from './components/name.vue'
 const show = ref(false)
@@ -55,27 +52,27 @@ const onClosed = () => {
 </template>
 ```
 
-### After
+### after
 
 use as a normal promise-style function, so happy to develop
 
-```ts
+```vue
 <script setup lang="ts">
-import Comp, { Input, Output } from './components/name.vue'
-const func = definePortal<Output, Input>(Comp)
+import Comp from './components/name.vue'
+const func = definePortal(Comp)
 const onClick = async () => {
   const data = await func()
   console.log(data)
 }
 </script>
 <template>
-  <el-button @click="onClick"> click to open the Dialog </el-button>
+  <el-button @click="onClick"> open the Dialog </el-button>
 </template>
 ```
 
-## Use
+## Use Case
 
-### install in the entry file
+### create promise-portal instance in the entry file
 
 ```ts
 // ./main.ts
@@ -83,183 +80,276 @@ import { createApp } from 'vue'
 import { createPromisePortal } from 'promise-portal'
 
 const app = createApp(App)
-app.use(createPromisePortal())
+app.use(
+  createPromisePortal({
+    unmountDelay: 200,
+  })
+)
 ```
 
-### in component, use `usePortalContext` to get portal context
+### use `ContextProvider` to set context globally
 
-```ts
-// ./components/name.vue
-import { usePortalContext } from 'promise-portal'
+```vue
+<!-- ./App.vue -->
+<script setup lang="ts">
+import locale from 'ant-design-vue/es/locale/zh_CN'
+import { ContextProvider } from 'promise-portal'
+</script>
+<template>
+  <a-config-provider :locale="locale">
+    <ContextProvider>
+      <router-view></router-view>
+    </ContextProvider>
+  </a-config-provider>
+</template>
+```
 
-const { resolve } = usePortalContext<Output>()
-const onClose = () => {
-  resolve({ confirm: false, fullName: '' })
+### in component, use `usePortalContext` to use portal context
+
+```vue
+<!-- ./components/comp.vue -->
+<script setup lang="ts">
+import { usePortalContext } from 'promise-portal'
+export interface Output {
+  confirm: boolean
 }
+export interface Output {
+  input: string
+}
+const props = defineProps<Input>()
+const { resolve, show } = usePortalContext<Output>()
+const onCancel = () => {
+  resolve({ confirm: false })
+}
+</script>
+<template>
+  <a-modal v-model:open="show" @cancel="resolve">{{ props.input }}</a-modal>
+</template>
 ```
 
-### define portal, use it like a promise-style function
+### define portal in anywhere, then use it like a promise-style function
 
 ```ts
 // ./App.vue
 import { definePortal } from 'promise-portal'
-import Comp, { Input, Output } from './components/name.vue'
-
-const func = definePortal<Output, Input>(Comp)
+import Comp, { Input, Output } from './components/comp.vue'
+const [func] = definePortal<Output, Input>(Comp)
 const onClick = async () => {
-  const data = await func({ firstName: 'joe', lastName: 'watson' })
-  if (!data.confirm) {
-    return
-  }
-  console.log(data)
+  const result = await func({
+    input: 'foo',
+  })
+  console.log(result)
 }
 ```
 
 ## API Reference
 
-- createPromisePortal
+### createPromisePortal
+
+create promise-portal instance, set to vue instance
 
-  create promise-portal instance, set to vue instance
+```ts
+const instance = createPromisePortal()
+app.use(instance)
+```
+
+you can set default options to instance
 
-  ```ts
-  const instance = createPromisePortal()
-  app.use(instance)
-  ```
+```ts
+const instance = createPromisePortal({
+  // set a time gap before portal unmount,
+  // in general, it is to wait for animation effect
+  unmountDelay: 200,
+
+  // initial value to property show, default value is true
+  initialShowValue: true,
+})
+```
 
-  you can set default config to instance
+### getActiveInstance
 
-  ```ts
-  const instance = createPromisePortal({
-    unmountDelay: 100,
-  })
-  ```
+get active promise-portal instance
+
+```ts
+const instance = getActiveInstance()
+```
+
+### setActiveInstance
+
+set active promise-portal instance
+
+```ts
+setActiveInstance(instance)
+```
+
+### ContextProvider
+
+a component to set context globally
+
+```vue
+<script setup lang="ts">
+import locale from 'ant-design-vue/es/locale/zh_CN'
+import { ContextProvider } from 'promise-portal'
+</script>
+<template>
+  <a-config-provider :locale="locale">
+    <ContextProvider>
+      <router-view></router-view>
+    </ContextProvider>
+  </a-config-provider>
+</template>
+```
 
-- getActiveInstance
+### usePortalContext
 
-  get active promise-portal instance
+a vue composition api, use in portal component to get context of portal
 
-  ```ts
-  const instance = getActiveInstance()
-  ```
+```ts
+const { resolve } = usePortalContext()
+
+// detail
+const {
+  resolve, // promise resolve handler
+  reject, // promise reject handler
+  el, // portal base element, injecting to body element
+  vnode, // portal base vue vnode
+  setUnmountDelay, // set delay to unmount
+  show, // a ref value to use in modal component
+} = usePortalContext({
+  // set a time gap before portal unmount,
+  // in general, it is to wait for animation effect
+  unmountDelay: 200,
+
+  // initial value to property show above, default value is true
+  initialShowValue: true,
+})
+```
 
-- setActiveInstance
+you can use typescript generic types to promise fulfilled result
 
-  set promise-portal instance to be active
+```ts
+export interface Output {
+  confirm: boolean
+}
+const { resolve } = usePortalContext<Output>()
+resolve({
+  confirm: true,
+})
+```
 
-  ```ts
-  setActiveInstance(instance)
-  ```
+you can use `show` to control modal component
 
-- usePortalContext
+before `unmount`, `show.value = false` will be setted
 
-  a vue composition api, use in portal component to get context of portal
+use `initialShowValue` to set inital value, default inital value is `true`
 
-  ```ts
-  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
-  ```
+```vue
+<script setup lang="ts">
+const { resolve, show } = usePortalContext<Output>({ initialShowValue: true })
+</script>
+<template>
+  <a-modal v-model:open="show" @cancel="resolve"></a-modal>
+</template>
+```
 
-  you can use typescript generic types
+### definePortal
 
-  ```ts
-  const { resolve } = usePortalContext<Output>()
-  resolve({ ... })    // an object of type Output
-  ```
+define a portal, return a portal function
 
-- definePortal
+```ts
+import Comp from './component.vue'
+const portalFunc = definePortal(Comp)
+portalFunc()
+```
 
-  define a portal, return a portal function
+you can define generic types to check input object and output object
 
-  ```ts
-  import Comp from './component.vue'
-  const portal = definePortal(Comp)
-  portal() // return a promise
-  ```
+```ts
+// component.vue
+export interface Input {
+  firstName: string
+  lastName: string
+}
 
-  you can define generic types to check input object and output object
+export interface Output {
+  fullName: string
+  confirm: boolean
+}
 
-  ```ts
-  // component.vue
-  export interface Input {
-    firstName: string
-    lastName: string
-  }
+const props = defineProps<Input>()
+const { resolve } = usePortalContext<Output>()
 
-  export interface Output {
-    fullName: string
-    confirm: boolean
-  }
+// App.vue
+import Comp, { Input, Output } from './component.vue'
+const portal = definePortal<Output, Input>(Comp)
+const output = await portal({
+  firstName: 'joe',
+  lastName: 'watson',
+})
+```
 
-  const props = defineProps<Input>()
-  const { resolve } = usePortalContext<Output>()
+define a portal with empty parameter
 
-  // App.vue
-  import Comp, { Input, Output } from './component.vue'
-  const portal = definePortal<Output, Input>(Comp)
-  const output = await portal({
-    firstName: 'joe',
-    lastName: 'watson',
-  })
-  ```
-
-  how to define a portal with empty parameter
-
-  ```ts
-  // component.vue
-  export interface Output {
-    fullName: string
-    confirm: boolean
-  }
-
-  const { resolve } = usePortalContext<Output>()
-
-  // App.vue
-  import Comp, { Output } from './component.vue'
-  const portal = definePortal<Output, void>(Comp)
-  const output = await portal() // only allow empty parameter
-  ```
-
-  you can set a config to definePortal
-
-  ```ts
-  definePortal(Comp, {
-    // set a time gap before portal unmount,
-    // in general, it to wait for animation effect
-    unmountDelay: 1000,
-    // set promise-portal instance explicitly to render this portal
-    // not use the active instance internally
-    // of course, you can use `setActiveInstance` to set active instance
-    instance: promisePortalInstance,
-  })
-  ```
+```ts
+// component.vue
+export interface Output {
+  fullName: string
+  confirm: boolean
+}
 
-- detectPromisePortalInstance
+const { resolve } = usePortalContext<Output>()
 
-  Check if the instance has been properly destroyed
+// App.vue
+import Comp, { Output } from './component.vue'
+const portal = definePortal<Output, void>(Comp)
+const output = await portal() // only allow empty parameter
+```
 
-  ```ts
-  // main.ts
-  if (import.meta.env.DEV) {
-    detectPromisePortalInstance()
-  }
-  ```
+you can set a options to definePortal
 
-  You can pass in other values to customize it.
+```ts
+definePortal(Comp, {
+  // set a time gap before portal unmount,
+  unmountDelay: 200,
 
-  ```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.`,
-  })
-  ```
+  // initial value to property show
+  initialShowValue: true,
+
+  // set promise-portal instance explicitly to render this portal
+  instance: promisePortalInstance,
+})
+```
+
+### detectPromisePortalInstance
+
+detect whether the instance has been properly destroyed
+
+```ts
+// main.ts
+if (import.meta.env.DEV) {
+  detectPromisePortalInstance()
+}
+```
+
+the return value is a function to stop detecting
+
+```ts
+const stopHandler = detectPromisePortalInstance()
+stopHandler() // stop detecting
+```
 
-## Link
+You can pass in other values to customize it.
 
+```ts
+detectPromisePortalInstance({
+  text: 'Detected unreleased promise-portal instance',
+  style: ' /styles you like/ ',
+})
+```
+
+# Relative Resourece
+
+- [react protal](https://reactjs.org/docs/portals.html)
+- [vue teleport](https://vuejs.org/guide/built-ins/teleport.html)
 - [@filez/portal](https://github.com/lenovo-filez/portal)
 - [promise-modal](https://github.com/liruifengv/promise-modal)

package/dist/index.cjs

@@ -20,16 +20,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ContextProvider: () => ContextProvider,
   createPromisePortal: () => createPromisePortal,
   definePortal: () => definePortal,
   detectPromisePortalInstance: () => detectPromisePortalInstance,
   getActiveInstance: () => getActiveInstance,
   setActiveInstance: () => setActiveInstance,
-  usePortalContext: () => usePortalContext
+  usePortalContext: () => usePortalContext,
+  version: () => version
 });
 module.exports = __toCommonJS(src_exports);
+
+// src/portal.ts
 var import_vue = require("vue");
 var promisePortalSymbol = process.env.NODE_ENV !== "production" ? Symbol("promise-portal") : Symbol();
+var version = `1.2.1`;
 var activeInstance;
 var getActiveInstance = () => activeInstance;
 var setActiveInstance = (instance) => activeInstance = instance;
@@ -38,6 +43,7 @@ var createPromisePortal = (defaultOptions = {}) => {
     defaultOptions,
     app: void 0,
     map: /* @__PURE__ */ new WeakMap(),
+    provides: void 0,
     install(app) {
       instance.app = app;
       setActiveInstance(instance);
@@ -46,80 +52,114 @@ var createPromisePortal = (defaultOptions = {}) => {
   };
   return instance;
 };
-var usePortalContext = () => {
+var usePortalContext = (options = {}) => {
   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) {
+  const vnode = (0, import_vue.getCurrentInstance)()?.vnode;
+  if (!vnode) {
     throw new Error("[promise-portal]: no vnode found.");
   }
-  const data = instance.map.get(ins.vnode);
+  const data = instance.map.get(vnode);
   if (!data) {
     throw new Error("[promise-portal]: no inject data found.");
   }
+  if (options.unmountDelay != void 0) {
+    data.setUnmountDelay(options.unmountDelay);
+  }
+  if (options.initialShowValue != void 0) {
+    data.show.value = options.initialShowValue;
+  }
   return data;
 };
-var definePortal = (component, { instance, unmountDelay } = {}) => {
-  const _instance = instance || (0, import_vue.getCurrentInstance)() && (0, import_vue.inject)(promisePortalSymbol) || activeInstance;
-  if (!_instance) {
+var definePortal = (component, options = {}) => {
+  const instance = options.instance ?? ((0, import_vue.getCurrentInstance)() && (0, import_vue.inject)(promisePortalSymbol)) ?? getActiveInstance();
+  if (!instance) {
     throw new Error("[promise-portal]: no instance found. Do you forget install promise-portal?");
   }
-  return (props, children) => {
-    let el = document.createElement("div");
+  let appContext = (0, import_vue.getCurrentInstance)()?.appContext;
+  let contextHolderProvides = null;
+  const ContextHolder = (0, import_vue.defineComponent)(() => () => {
+    appContext = (0, import_vue.getCurrentInstance)()?.appContext;
+    contextHolderProvides = (0, import_vue.getCurrentInstance)()?.provides;
+  });
+  const portal = (props, children) => {
+    const el = document.createElement("div");
     el.setAttribute("data-promise-portal-container", "");
     document.body.appendChild(el);
-    let _delay = unmountDelay || _instance.defaultOptions?.unmountDelay;
+    let unmountDelay = options.unmountDelay ?? instance.defaultOptions.unmountDelay;
     const setUnmountDelay = (delay) => {
-      _delay = delay;
+      unmountDelay = delay;
     };
-    let vNode;
+    const show = (0, import_vue.ref)(options.initialShowValue ?? instance.defaultOptions.initialShowValue ?? true);
+    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);
+      vnode = (0, import_vue.createVNode)(component, props, children);
+      instance.map.set(vnode, { resolve, reject, el, vnode, setUnmountDelay, show });
+      const ac = appContext ?? instance.app._context;
+      vnode.appContext = Object.create(ac, {
+        provides: {
+          value: contextHolderProvides ?? instance.provides ?? ac.provides
+        }
+      });
+      (0, import_vue.render)(vnode, el);
     });
     p.finally(() => {
+      show.value = false;
       setTimeout(() => {
-        if (el) {
-          (0, import_vue.render)(null, el);
-          document.body.removeChild(el);
-        }
-        el = null;
-        vNode = null;
-      }, _delay);
+        (0, import_vue.render)(null, el);
+        document.body.removeChild(el);
+      }, unmountDelay);
     });
     return p;
   };
+  return [portal, ContextHolder];
 };
-var detectPromisePortalInstance = (config = {}) => {
+var ContextProvider = (0, import_vue.defineComponent)({
+  name: "PromisePortalContextProvider",
+  setup(_props, { slots }) {
+    const p = (0, import_vue.getCurrentInstance)()?.provides;
+    const instance = getActiveInstance();
+    if (p && instance) {
+      instance.provides = p;
+    }
+    return () => slots.default?.();
+  }
+});
+
+// src/detector.ts
+function detect(options) {
   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();
+  } = options;
+  const containers = document.querySelectorAll("[data-promise-portal-container]");
+  const detector = document.querySelector("[data-promise-portal-detector]");
+  if (containers.length === 0) {
+    detector?.remove();
+    return;
+  }
+  if (!detector) {
+    const el = document.createElement("div");
+    el.setAttribute("data-promise-portal-detector", "");
+    el.setAttribute("style", style);
+    el.innerHTML = text;
+    document.body.appendChild(el);
   }
-  setTimeout(() => detectPromisePortalInstance(config), 200);
+}
+var detectPromisePortalInstance = (options = {}) => {
+  const timer = setInterval(() => detect(options), 200);
+  return () => clearInterval(timer);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ContextProvider,
   createPromisePortal,
   definePortal,
   detectPromisePortalInstance,
   getActiveInstance,
   setActiveInstance,
-  usePortalContext
+  usePortalContext,
+  version
 });

package/dist/index.d.ts

@@ -1,33 +1,41 @@
-import { VNode, App, Component } from 'vue';
+import * as vue from 'vue';
+import { VNode, Ref, App, Component } from 'vue';
 
-interface PortalContext<R> {
+declare const version = "1.2.1";
+interface Options {
+    unmountDelay?: number;
+    initialShowValue?: boolean;
+}
+interface Context<R> {
     resolve: (value: R | PromiseLike<R>) => void;
     reject: (reason?: any) => void;
     el: HTMLDivElement;
-    vNode: VNode;
+    vnode: VNode;
     setUnmountDelay: (unmountDelay: number) => void;
+    show: Ref<boolean>;
 }
-interface PromisePortal<R = any> {
-    defaultOptions: {
-        unmountDelay?: number;
-    };
+interface Instance<R = any> {
+    defaultOptions: Options;
     app: App;
-    map: WeakMap<VNode, PortalContext<R>>;
+    map: WeakMap<VNode, Context<R>>;
+    provides: any;
     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>;
-interface DetectPromisePortalInstanceConfig {
+declare const getActiveInstance: () => Instance<any>;
+declare const setActiveInstance: (instance: Instance) => Instance<any>;
+declare const createPromisePortal: (defaultOptions?: Options) => Instance<any>;
+declare const usePortalContext: <TOutput = any>(options?: Options) => Context<TOutput>;
+declare const definePortal: <TOutput = any, TProps = any>(component: Component, options?: Options & {
+    instance?: Instance<TOutput> | undefined;
+}) => [(props?: TProps | undefined, children?: unknown) => Promise<TOutput>, Component<any, any, any, vue.ComputedOptions, vue.MethodOptions>];
+declare const ContextProvider: vue.DefineComponent<{}, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+interface DetectorOptions {
     style?: string;
     text?: string;
 }
-declare const detectPromisePortalInstance: (config?: DetectPromisePortalInstanceConfig) => void;
+declare const detectPromisePortalInstance: (options?: DetectorOptions) => () => void;
 
-export { DetectPromisePortalInstanceConfig, PortalContext, PortalOptions, PromisePortal, createPromisePortal, definePortal, detectPromisePortalInstance, getActiveInstance, setActiveInstance, usePortalContext };
+export { Context, ContextProvider, DetectorOptions, Instance, Options, createPromisePortal, definePortal, detectPromisePortalInstance, getActiveInstance, setActiveInstance, usePortalContext, version };

package/dist/index.js

@@ -1,6 +1,7 @@
-// src/index.ts
-import { createVNode, render, inject, getCurrentInstance } from "vue";
+// src/portal.ts
+import { createVNode, render, inject, getCurrentInstance, defineComponent, ref } from "vue";
 var promisePortalSymbol = process.env.NODE_ENV !== "production" ? Symbol("promise-portal") : Symbol();
+var version = `1.2.1`;
 var activeInstance;
 var getActiveInstance = () => activeInstance;
 var setActiveInstance = (instance) => activeInstance = instance;
@@ -9,6 +10,7 @@ var createPromisePortal = (defaultOptions = {}) => {
     defaultOptions,
     app: void 0,
     map: /* @__PURE__ */ new WeakMap(),
+    provides: void 0,
     install(app) {
       instance.app = app;
       setActiveInstance(instance);
@@ -17,79 +19,113 @@ var createPromisePortal = (defaultOptions = {}) => {
   };
   return instance;
 };
-var usePortalContext = () => {
+var usePortalContext = (options = {}) => {
   const instance = inject(promisePortalSymbol);
   if (!instance) {
     throw new Error("[promise-portal]: no instance found.");
   }
-  const ins = getCurrentInstance();
-  if (!ins?.vnode) {
+  const vnode = getCurrentInstance()?.vnode;
+  if (!vnode) {
     throw new Error("[promise-portal]: no vnode found.");
   }
-  const data = instance.map.get(ins.vnode);
+  const data = instance.map.get(vnode);
   if (!data) {
     throw new Error("[promise-portal]: no inject data found.");
   }
+  if (options.unmountDelay != void 0) {
+    data.setUnmountDelay(options.unmountDelay);
+  }
+  if (options.initialShowValue != void 0) {
+    data.show.value = options.initialShowValue;
+  }
   return data;
 };
-var definePortal = (component, { instance, unmountDelay } = {}) => {
-  const _instance = instance || getCurrentInstance() && inject(promisePortalSymbol) || activeInstance;
-  if (!_instance) {
+var definePortal = (component, options = {}) => {
+  const instance = options.instance ?? (getCurrentInstance() && inject(promisePortalSymbol)) ?? getActiveInstance();
+  if (!instance) {
     throw new Error("[promise-portal]: no instance found. Do you forget install promise-portal?");
   }
-  return (props, children) => {
-    let el = document.createElement("div");
+  let appContext = getCurrentInstance()?.appContext;
+  let contextHolderProvides = null;
+  const ContextHolder = defineComponent(() => () => {
+    appContext = getCurrentInstance()?.appContext;
+    contextHolderProvides = getCurrentInstance()?.provides;
+  });
+  const portal = (props, children) => {
+    const el = document.createElement("div");
     el.setAttribute("data-promise-portal-container", "");
     document.body.appendChild(el);
-    let _delay = unmountDelay || _instance.defaultOptions?.unmountDelay;
+    let unmountDelay = options.unmountDelay ?? instance.defaultOptions.unmountDelay;
     const setUnmountDelay = (delay) => {
-      _delay = delay;
+      unmountDelay = delay;
     };
-    let vNode;
+    const show = ref(options.initialShowValue ?? instance.defaultOptions.initialShowValue ?? true);
+    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);
+      vnode = createVNode(component, props, children);
+      instance.map.set(vnode, { resolve, reject, el, vnode, setUnmountDelay, show });
+      const ac = appContext ?? instance.app._context;
+      vnode.appContext = Object.create(ac, {
+        provides: {
+          value: contextHolderProvides ?? instance.provides ?? ac.provides
+        }
+      });
+      render(vnode, el);
     });
     p.finally(() => {
+      show.value = false;
       setTimeout(() => {
-        if (el) {
-          render(null, el);
-          document.body.removeChild(el);
-        }
-        el = null;
-        vNode = null;
-      }, _delay);
+        render(null, el);
+        document.body.removeChild(el);
+      }, unmountDelay);
     });
     return p;
   };
+  return [portal, ContextHolder];
 };
-var detectPromisePortalInstance = (config = {}) => {
+var ContextProvider = defineComponent({
+  name: "PromisePortalContextProvider",
+  setup(_props, { slots }) {
+    const p = getCurrentInstance()?.provides;
+    const instance = getActiveInstance();
+    if (p && instance) {
+      instance.provides = p;
+    }
+    return () => slots.default?.();
+  }
+});
+
+// src/detector.ts
+function detect(options) {
   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();
+  } = options;
+  const containers = document.querySelectorAll("[data-promise-portal-container]");
+  const detector = document.querySelector("[data-promise-portal-detector]");
+  if (containers.length === 0) {
+    detector?.remove();
+    return;
+  }
+  if (!detector) {
+    const el = document.createElement("div");
+    el.setAttribute("data-promise-portal-detector", "");
+    el.setAttribute("style", style);
+    el.innerHTML = text;
+    document.body.appendChild(el);
   }
-  setTimeout(() => detectPromisePortalInstance(config), 200);
+}
+var detectPromisePortalInstance = (options = {}) => {
+  const timer = setInterval(() => detect(options), 200);
+  return () => clearInterval(timer);
 };
 export {
+  ContextProvider,
   createPromisePortal,
   definePortal,
   detectPromisePortalInstance,
   getActiveInstance,
   setActiveInstance,
-  usePortalContext
+  usePortalContext,
+  version
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "promise-portal",
-  "version": "1.0.6",
-  "description": "let you use react portal in vue, and with promise",
+  "version": "1.2.1",
+  "description": "use component as a promisd-like function",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -22,7 +22,7 @@
   "devDependencies": {
     "tsup": "^6.2.3",
     "typescript": "^4.8.2",
-    "vue": "^3.2.37"
+    "vue": "^3.3.8"
   },
   "author": {
     "name": "tjyuanpeng",