promise-portal 1.0.2 → 1.0.4

package/README.md

@@ -15,6 +15,60 @@ npm install promise-portal -D
 yarn add promise-portal --D
 ```
 
+## 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
@@ -155,8 +209,21 @@ const onClick = async () => {
   const output = await portal() // only allow empty parameter
   ```
 
-## Link
+  you can set a config to definePortal
 
-[@filez/portal](https://github.com/lenovo-filez/portal)
+  ```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,
+  })
+  ```
+
+## 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,97 @@
+"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,
+  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 = () => {
+  const instance = {
+    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 = 0 } = {}) => {
+  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");
+    document.body.appendChild(el);
+    let vNode;
+    const p = new Promise((resolve, reject) => {
+      vNode = (0, import_vue.createVNode)(component, props, children);
+      _instance.map.set(vNode, { resolve, reject, el, vNode });
+      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;
+      }, unmountDelay);
+    });
+    return p;
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createPromisePortal,
+  definePortal,
+  getActiveInstance,
+  setActiveInstance,
+  usePortalContext
+});

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import { VNode, App, Component } from 'vue';
+
+interface PortalContext<R> {
+    resolve: (value: R | PromiseLike<R>) => void;
+    reject: (reason?: any) => void;
+    el: HTMLDivElement;
+    vNode: VNode;
+}
+interface PromisePortal<R = any> {
+    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: () => 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>;
+
+export { PortalContext, PortalOptions, PromisePortal, createPromisePortal, definePortal, getActiveInstance, setActiveInstance, usePortalContext };

package/dist/index.js

@@ -0,0 +1,68 @@
+// 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 = () => {
+  const instance = {
+    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 = 0 } = {}) => {
+  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");
+    document.body.appendChild(el);
+    let vNode;
+    const p = new Promise((resolve, reject) => {
+      vNode = createVNode(component, props, children);
+      _instance.map.set(vNode, { resolve, reject, el, vNode });
+      vNode.appContext = _instance.app._context;
+      render(vNode, el);
+    });
+    p.finally(() => {
+      setTimeout(() => {
+        if (el) {
+          render(null, el);
+          document.body.removeChild(el);
+        }
+        el = null;
+        vNode = null;
+      }, unmountDelay);
+    });
+    return p;
+  };
+};
+export {
+  createPromisePortal,
+  definePortal,
+  getActiveInstance,
+  setActiveInstance,
+  usePortalContext
+};

package/package.json

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