promise-portal 1.1.0 → 2.0.0

package/README.md

@@ -1,18 +1,11 @@
 # promise-portal
 
-use component like a promisd-like function
+use component as a promisd-like function
 
 ## Installation
 
 ```bash
-// pnpm
 pnpm add promise-portal
-
-// npm
-npm install promise-portal
-
-// yarn
-yarn add promise-portal
 ```
 
 ## Online Demo
@@ -38,6 +31,7 @@ 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)
 const onClick = () => {
   show.value = true
@@ -46,9 +40,14 @@ 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>
+  <el-button @click="onClick">
+    click to open the Dialog
+  </el-button>
+  <Comp v-model="show" @closed="onClosed">
+    a dialog content
+  </Comp>
 </template>
 ```
 
@@ -59,14 +58,18 @@ use as a normal promise-style function, so happy to develop
 ```vue
 <script setup lang="ts">
 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"> open the Dialog </el-button>
+  <el-button @click="onClick">
+    open the Dialog
+  </el-button>
 </template>
 ```
 
@@ -76,23 +79,38 @@ const onClick = async () => {
 
 ```ts
 // ./main.ts
-import { createApp } from 'vue'
 import { createPromisePortal } from 'promise-portal'
+import { createApp } from 'vue'
 
 const app = createApp(App)
-app.use(
-  createPromisePortal({
-    unmountDelay: 200,
-  })
-)
+app.use(createPromisePortal())
+```
+
+### use `ContextProvider` to set context globally
+
+```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 />
+    </ContextProvider>
+  </a-config-provider>
+</template>
 ```
 
 ### in component, use `usePortalContext` to use portal context
 
 ```vue
+<!-- ./components/comp.vue -->
 <script setup lang="ts">
-// ./components/comp.vue
 import { usePortalContext } from 'promise-portal'
+
 export interface Output {
   confirm: boolean
 }
@@ -105,8 +123,11 @@ const onCancel = () => {
   resolve({ confirm: false })
 }
 </script>
+
 <template>
-  <a-modal v-model:open="show" @cancel="resolve">{{ props.input }}</a-modal>
+  <a-modal v-model:open="show" @cancel="resolve">
+    {{ props.input }}
+  </a-modal>
 </template>
 ```
 
@@ -116,6 +137,7 @@ const onCancel = () => {
 // ./App.vue
 import { definePortal } from 'promise-portal'
 import Comp, { Input, Output } from './components/comp.vue'
+
 const [func] = definePortal<Output, Input>(Comp)
 const onClick = async () => {
   const result = await func({
@@ -136,33 +158,23 @@ const instance = createPromisePortal()
 app.use(instance)
 ```
 
-you can set default options to instance
+### ContextProvider
 
-```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,
-})
-```
+a component to set context globally
 
-### getActiveInstance
-
-get active promise-portal instance
-
-```ts
-const instance = getActiveInstance()
-```
-
-### setActiveInstance
-
-set active promise-portal instance
+```vue
+<script setup lang="ts">
+import locale from 'ant-design-vue/es/locale/zh_CN'
+import { ContextProvider } from 'promise-portal'
+</script>
 
-```ts
-setActiveInstance(instance)
+<template>
+  <a-config-provider :locale="locale">
+    <ContextProvider>
+      <router-view />
+    </ContextProvider>
+  </a-config-provider>
+</template>
 ```
 
 ### usePortalContext
@@ -176,16 +188,15 @@ const { resolve } = usePortalContext()
 const {
   resolve, // promise resolve handler
   reject, // promise reject handler
-  el, // portal base element, injecting to body element
+  el, // portal base element, injected into 'appendTo' element
   vnode, // portal base vue vnode
-  setUnmountDelay, // set delay to unmount
-  show, // a ref value to use in modal component
+  unmountDelay, // Ref for portal unmount delay (ms)
+  show, // Ref for modal display state (controlled by portal)
 } = usePortalContext({
-  // set a time gap before portal unmount,
-  // in general, it is to wait for animation effect
+  // Unmount delay (ms) for portal, usually for animation effects
   unmountDelay: 200,
 
-  // initial value to property show above, default value is true
+  // Initial value for the show ref (defaults to true)
   initialShowValue: true,
 })
 ```
@@ -212,8 +223,9 @@ use `initialShowValue` to set inital value, default inital value is `true`
 <script setup lang="ts">
 const { resolve, show } = usePortalContext<Output>({ initialShowValue: true })
 </script>
+
 <template>
-  <a-modal v-model:open="show" @cancel="resolve"></a-modal>
+  <a-modal v-model:open="show" @cancel="resolve" />
 </template>
 ```
 
@@ -223,6 +235,7 @@ define a portal, return a portal function
 
 ```ts
 import Comp from './component.vue'
+
 const portalFunc = definePortal(Comp)
 portalFunc()
 ```
@@ -231,6 +244,9 @@ you can define generic types to check input object and output object
 
 ```ts
 // component.vue
+// App.vue
+import Comp, { Input, Output } from './component.vue'
+
 export interface Input {
   firstName: string
   lastName: string
@@ -243,9 +259,6 @@ export interface Output {
 
 const props = defineProps<Input>()
 const { resolve } = usePortalContext<Output>()
-
-// App.vue
-import Comp, { Input, Output } from './component.vue'
 const portal = definePortal<Output, Input>(Comp)
 const output = await portal({
   firstName: 'joe',
@@ -257,15 +270,15 @@ define a portal with empty parameter
 
 ```ts
 // component.vue
+// App.vue
+import Comp, { Output } from './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
 ```
@@ -274,14 +287,14 @@ you can set a options to definePortal
 
 ```ts
 definePortal(Comp, {
-  // set a time gap before portal unmount,
+  // Unmount delay (ms) for portal, usually for animation effects
   unmountDelay: 200,
 
-  // initial value to property show
+  // Initial value for the show ref (defaults to true)
   initialShowValue: true,
 
-  // set promise-portal instance explicitly to render this portal
-  instance: promisePortalInstance,
+  // a dom element or CSS selector to append the portal element to (defaults to document.body)
+  appendTo: document.body,
 })
 ```
 
@@ -312,9 +325,9 @@ detectPromisePortalInstance({
 })
 ```
 
-# Relative Resourece
+# Acknowledgements
 
-- [react protal](https://reactjs.org/docs/portals.html)
+- [react portal](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

@@ -1,148 +1,114 @@
-"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);
+let vue = require("vue");
 
-// src/portal.ts
-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;
+//#region 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.` } = 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);
+	}
+}
+const detectPromisePortalInstance = (options = {}) => {
+	const timer = setInterval(() => detect(options), 200);
+	return () => clearInterval(timer);
 };
-var usePortalContext = (options = {}) => {
-  const instance = (0, import_vue.inject)(promisePortalSymbol);
-  if (!instance) {
-    throw new Error("[promise-portal]: no instance found.");
-  }
-  const vnode = (0, import_vue.getCurrentInstance)()?.vnode;
-  if (!vnode) {
-    throw new Error("[promise-portal]: no vnode found.");
-  }
-  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;
+
+//#endregion
+//#region src/portal.ts
+const promisePortalSymbol = Symbol("promise-portal");
+const version = `2.0.0`;
+let activeInstance;
+const createPromisePortal = () => {
+	const instance = {
+		app: void 0,
+		map: /* @__PURE__ */ new WeakMap(),
+		provides: void 0,
+		install(app) {
+			instance.app = app;
+			activeInstance = instance;
+			app.provide(promisePortalSymbol, instance);
+		}
+	};
+	return 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?");
-  }
-  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 unmountDelay = options.unmountDelay ?? instance.defaultOptions.unmountDelay;
-    const setUnmountDelay = (delay) => {
-      unmountDelay = delay;
-    };
-    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, show });
-      const ac = appContext ?? instance.app._context;
-      vnode.appContext = Object.create(ac, {
-        provides: {
-          value: contextHolderProvides ?? ac.provides
-        }
-      });
-      (0, import_vue.render)(vnode, el);
-    });
-    p.finally(() => {
-      show.value = false;
-      setTimeout(() => {
-        (0, import_vue.render)(null, el);
-        document.body.removeChild(el);
-      }, unmountDelay);
-    });
-    return p;
-  };
-  return [portal, ContextHolder];
+const usePortalContext = (options = {}) => {
+	const instance = (0, vue.inject)(promisePortalSymbol);
+	if (!instance) throw new Error("[promise-portal]: no instance found. Did you forget to install promise-portal?");
+	const vnode = (0, vue.getCurrentInstance)()?.vnode;
+	if (!vnode) throw new Error("[promise-portal]: no vnode found in current component instance.");
+	const scope = instance.map.get(vnode);
+	if (!scope) throw new Error("[promise-portal]: no inject scope found.");
+	if (options.unmountDelay !== void 0) scope.unmountDelay.value = options.unmountDelay;
+	if (options.initialShowValue !== void 0) scope.show.value = options.initialShowValue;
+	return scope;
 };
-
-// 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.`
-  } = 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);
-  }
-}
-var detectPromisePortalInstance = (options = {}) => {
-  const timer = setInterval(() => detect(options), 200);
-  return () => clearInterval(timer);
+const resolveTarget = (to) => typeof to === "string" ? document.querySelector(to) : to;
+const definePortal = (component, options = {}) => {
+	const instance = ((0, vue.getCurrentInstance)() && (0, vue.inject)(promisePortalSymbol)) ?? activeInstance;
+	if (!instance) throw new Error("[promise-portal]: no instance found. Did you forget to install promise-portal?");
+	let appContext = (0, vue.getCurrentInstance)()?.appContext ?? instance.app._context;
+	let provides = instance.provides ?? appContext.provides;
+	const ContextHolder = (0, vue.defineComponent)(() => () => {
+		const ci = (0, vue.getCurrentInstance)();
+		if (ci) {
+			appContext = ci.appContext;
+			provides = ci.provides;
+		}
+	});
+	const portal = (props, children) => {
+		const el = document.createElement("div");
+		el.setAttribute("data-promise-portal-container", "");
+		const target = resolveTarget(options.appendTo ?? document.body);
+		if (!target) throw new Error("[promise-portal]: invalid appendTo target - no element found or provided.");
+		target.appendChild(el);
+		const unmountDelay = (0, vue.ref)(options.unmountDelay ?? 0);
+		const show = (0, vue.ref)(options.initialShowValue ?? true);
+		const promise = new Promise((resolve, reject) => {
+			const vnode = (0, vue.createVNode)(component, props, children);
+			vnode.appContext = Object.create(appContext, { provides: { value: provides } });
+			instance.map.set(vnode, {
+				resolve,
+				reject,
+				el,
+				vnode,
+				unmountDelay,
+				show
+			});
+			(0, vue.render)(vnode, el);
+		});
+		promise.finally(() => {
+			show.value = false;
+			setTimeout(() => {
+				(0, vue.render)(null, el);
+				el?.remove();
+			}, unmountDelay.value);
+		});
+		return promise;
+	};
+	return [portal, ContextHolder];
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createPromisePortal,
-  definePortal,
-  detectPromisePortalInstance,
-  getActiveInstance,
-  setActiveInstance,
-  usePortalContext
+const ContextProvider = (0, vue.defineComponent)({
+	name: "PromisePortalContextProvider",
+	setup(_props, { slots }) {
+		const provides = (0, vue.getCurrentInstance)()?.provides;
+		if (provides && activeInstance) activeInstance.provides = provides;
+		return () => slots.default?.();
+	}
 });
+
+//#endregion
+exports.ContextProvider = ContextProvider;
+exports.createPromisePortal = createPromisePortal;
+exports.definePortal = definePortal;
+exports.detectPromisePortalInstance = detectPromisePortalInstance;
+exports.usePortalContext = usePortalContext;
+exports.version = version;

package/dist/index.d.cts

@@ -0,0 +1,42 @@
+import * as vue0 from "vue";
+import { App, Component, Ref, RendererElement, VNode } from "vue";
+
+//#region src/detector.d.ts
+interface DetectorOptions {
+  style?: string;
+  text?: string;
+}
+declare const detectPromisePortalInstance: (options?: DetectorOptions) => () => void;
+//#endregion
+//#region src/portal.d.ts
+declare const version = "2.0.0";
+interface UsePortalContextOptions {
+  unmountDelay?: number;
+  initialShowValue?: boolean;
+}
+interface DefinePortalOptions extends UsePortalContextOptions {
+  appendTo?: string | RendererElement | null | undefined;
+}
+type DefinePortalResult<Output, Input> = [(props?: Input, children?: unknown) => Promise<Output>, Component];
+interface Scope<R> {
+  resolve: (value: R | PromiseLike<R>) => void;
+  reject: (reason?: any) => void;
+  el: HTMLDivElement;
+  vnode: VNode;
+  unmountDelay: Ref<number>;
+  show: Ref<boolean>;
+}
+interface Instance<R = any> {
+  app: App;
+  map: WeakMap<VNode, Scope<R>>;
+  provides: any;
+  install: (app: App) => void;
+}
+declare const createPromisePortal: () => Instance<any>;
+declare const usePortalContext: <Output = any>(options?: UsePortalContextOptions) => Scope<Output>;
+declare const definePortal: <Output = any, Input = any>(component: Component, options?: DefinePortalOptions) => DefinePortalResult<Output, Input>;
+declare const ContextProvider: vue0.DefineComponent<{}, () => VNode<vue0.RendererNode, RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { ContextProvider, DefinePortalOptions, DefinePortalResult, DetectorOptions, Instance, Scope, UsePortalContextOptions, createPromisePortal, definePortal, detectPromisePortalInstance, usePortalContext, version };

package/dist/index.d.mts

@@ -0,0 +1,42 @@
+import * as vue0 from "vue";
+import { App, Component, Ref, RendererElement, VNode } from "vue";
+
+//#region src/detector.d.ts
+interface DetectorOptions {
+  style?: string;
+  text?: string;
+}
+declare const detectPromisePortalInstance: (options?: DetectorOptions) => () => void;
+//#endregion
+//#region src/portal.d.ts
+declare const version = "2.0.0";
+interface UsePortalContextOptions {
+  unmountDelay?: number;
+  initialShowValue?: boolean;
+}
+interface DefinePortalOptions extends UsePortalContextOptions {
+  appendTo?: string | RendererElement | null | undefined;
+}
+type DefinePortalResult<Output, Input> = [(props?: Input, children?: unknown) => Promise<Output>, Component];
+interface Scope<R> {
+  resolve: (value: R | PromiseLike<R>) => void;
+  reject: (reason?: any) => void;
+  el: HTMLDivElement;
+  vnode: VNode;
+  unmountDelay: Ref<number>;
+  show: Ref<boolean>;
+}
+interface Instance<R = any> {
+  app: App;
+  map: WeakMap<VNode, Scope<R>>;
+  provides: any;
+  install: (app: App) => void;
+}
+declare const createPromisePortal: () => Instance<any>;
+declare const usePortalContext: <Output = any>(options?: UsePortalContextOptions) => Scope<Output>;
+declare const definePortal: <Output = any, Input = any>(component: Component, options?: DefinePortalOptions) => DefinePortalResult<Output, Input>;
+declare const ContextProvider: vue0.DefineComponent<{}, () => VNode<vue0.RendererNode, RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { ContextProvider, DefinePortalOptions, DefinePortalResult, DetectorOptions, Instance, Scope, UsePortalContextOptions, createPromisePortal, definePortal, detectPromisePortalInstance, usePortalContext, version };

package/dist/index.mjs

@@ -0,0 +1,109 @@
+import { createVNode, defineComponent, getCurrentInstance, inject, ref, render } from "vue";
+
+//#region 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.` } = 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);
+	}
+}
+const detectPromisePortalInstance = (options = {}) => {
+	const timer = setInterval(() => detect(options), 200);
+	return () => clearInterval(timer);
+};
+
+//#endregion
+//#region src/portal.ts
+const promisePortalSymbol = Symbol("promise-portal");
+const version = `2.0.0`;
+let activeInstance;
+const createPromisePortal = () => {
+	const instance = {
+		app: void 0,
+		map: /* @__PURE__ */ new WeakMap(),
+		provides: void 0,
+		install(app) {
+			instance.app = app;
+			activeInstance = instance;
+			app.provide(promisePortalSymbol, instance);
+		}
+	};
+	return instance;
+};
+const usePortalContext = (options = {}) => {
+	const instance = inject(promisePortalSymbol);
+	if (!instance) throw new Error("[promise-portal]: no instance found. Did you forget to install promise-portal?");
+	const vnode = getCurrentInstance()?.vnode;
+	if (!vnode) throw new Error("[promise-portal]: no vnode found in current component instance.");
+	const scope = instance.map.get(vnode);
+	if (!scope) throw new Error("[promise-portal]: no inject scope found.");
+	if (options.unmountDelay !== void 0) scope.unmountDelay.value = options.unmountDelay;
+	if (options.initialShowValue !== void 0) scope.show.value = options.initialShowValue;
+	return scope;
+};
+const resolveTarget = (to) => typeof to === "string" ? document.querySelector(to) : to;
+const definePortal = (component, options = {}) => {
+	const instance = (getCurrentInstance() && inject(promisePortalSymbol)) ?? activeInstance;
+	if (!instance) throw new Error("[promise-portal]: no instance found. Did you forget to install promise-portal?");
+	let appContext = getCurrentInstance()?.appContext ?? instance.app._context;
+	let provides = instance.provides ?? appContext.provides;
+	const ContextHolder = defineComponent(() => () => {
+		const ci = getCurrentInstance();
+		if (ci) {
+			appContext = ci.appContext;
+			provides = ci.provides;
+		}
+	});
+	const portal = (props, children) => {
+		const el = document.createElement("div");
+		el.setAttribute("data-promise-portal-container", "");
+		const target = resolveTarget(options.appendTo ?? document.body);
+		if (!target) throw new Error("[promise-portal]: invalid appendTo target - no element found or provided.");
+		target.appendChild(el);
+		const unmountDelay = ref(options.unmountDelay ?? 0);
+		const show = ref(options.initialShowValue ?? true);
+		const promise = new Promise((resolve, reject) => {
+			const vnode = createVNode(component, props, children);
+			vnode.appContext = Object.create(appContext, { provides: { value: provides } });
+			instance.map.set(vnode, {
+				resolve,
+				reject,
+				el,
+				vnode,
+				unmountDelay,
+				show
+			});
+			render(vnode, el);
+		});
+		promise.finally(() => {
+			show.value = false;
+			setTimeout(() => {
+				render(null, el);
+				el?.remove();
+			}, unmountDelay.value);
+		});
+		return promise;
+	};
+	return [portal, ContextHolder];
+};
+const ContextProvider = defineComponent({
+	name: "PromisePortalContextProvider",
+	setup(_props, { slots }) {
+		const provides = getCurrentInstance()?.provides;
+		if (provides && activeInstance) activeInstance.provides = provides;
+		return () => slots.default?.();
+	}
+});
+
+//#endregion
+export { ContextProvider, createPromisePortal, definePortal, detectPromisePortalInstance, usePortalContext, version };

package/package.json

@@ -1,33 +1,13 @@
 {
   "name": "promise-portal",
-  "version": "1.1.0",
-  "description": "let you use react portal in vue, and with promise",
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "peerDependencies": {
-    "vue": "^3.2.13"
-  },
-  "devDependencies": {
-    "tsup": "^6.2.3",
-    "typescript": "^4.8.2",
-    "vue": "^3.3.8"
-  },
+  "version": "2.0.0",
+  "description": "use component as a promisd-like function",
   "author": {
     "name": "tjyuanpeng",
     "email": "tjyuanpeng@gmail.com"
   },
+  "license": "MIT",
   "homepage": "https://github.com/tjyuanpeng/promise-portal",
   "repository": {
     "type": "git",
@@ -36,14 +16,36 @@
   "bugs": {
     "url": "https://github.com/tjyuanpeng/promise-portal/issues"
   },
-  "license": "MIT",
   "keywords": [
     "vue",
     "promise",
     "portal"
   ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "tsup-node src/index.ts --dts --format esm,cjs --no-splitting --clean",
-    "dev": "npm run build -- --watch"
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint ."
+  },
+  "peerDependencies": {
+    "vue": "3"
+  },
+  "devDependencies": {
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License Copyright (c) 2022 yuanpeng
-
-Permission is hereby granted, free of
-charge, to any person obtaining a copy of this software and associated
-documentation files (the "Software"), to deal in the Software without
-restriction, including without limitation the rights to use, copy, modify, merge,
-publish, distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice
-(including the next paragraph) shall be included in all copies or substantial
-portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
-ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
-EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
-OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/dist/index.d.ts

@@ -1,36 +0,0 @@
-import * as vue from 'vue';
-import { VNode, Ref, App, Component } from 'vue';
-
-interface Options {
-    unmountDelay?: number;
-    initialShowValue?: boolean;
-}
-interface Context<R> {
-    resolve: (value: R | PromiseLike<R>) => void;
-    reject: (reason?: any) => void;
-    el: HTMLDivElement;
-    vnode: VNode;
-    setUnmountDelay: (unmountDelay: number) => void;
-    show: Ref<boolean>;
-}
-interface Instance<R = any> {
-    defaultOptions: Options;
-    app: App;
-    map: WeakMap<VNode, Context<R>>;
-    install: (app: App) => void;
-}
-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>];
-
-interface DetectorOptions {
-    style?: string;
-    text?: string;
-}
-declare const detectPromisePortalInstance: (options?: DetectorOptions) => () => void;
-
-export { Context, DetectorOptions, Instance, Options, createPromisePortal, definePortal, detectPromisePortalInstance, getActiveInstance, setActiveInstance, usePortalContext };

package/dist/index.js

@@ -1,116 +0,0 @@
-// src/portal.ts
-import { createVNode, render, inject, getCurrentInstance, defineComponent, ref } 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 = (options = {}) => {
-  const instance = inject(promisePortalSymbol);
-  if (!instance) {
-    throw new Error("[promise-portal]: no instance found.");
-  }
-  const vnode = getCurrentInstance()?.vnode;
-  if (!vnode) {
-    throw new Error("[promise-portal]: no vnode found.");
-  }
-  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, 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?");
-  }
-  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 unmountDelay = options.unmountDelay ?? instance.defaultOptions.unmountDelay;
-    const setUnmountDelay = (delay) => {
-      unmountDelay = delay;
-    };
-    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, show });
-      const ac = appContext ?? instance.app._context;
-      vnode.appContext = Object.create(ac, {
-        provides: {
-          value: contextHolderProvides ?? ac.provides
-        }
-      });
-      render(vnode, el);
-    });
-    p.finally(() => {
-      show.value = false;
-      setTimeout(() => {
-        render(null, el);
-        document.body.removeChild(el);
-      }, unmountDelay);
-    });
-    return p;
-  };
-  return [portal, ContextHolder];
-};
-
-// 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.`
-  } = 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);
-  }
-}
-var detectPromisePortalInstance = (options = {}) => {
-  const timer = setInterval(() => detect(options), 200);
-  return () => clearInterval(timer);
-};
-export {
-  createPromisePortal,
-  definePortal,
-  detectPromisePortalInstance,
-  getActiveInstance,
-  setActiveInstance,
-  usePortalContext
-};