vue-mount-plugin 1.0.0-alpha.1 → 1.0.0-beta.1

package/README.md

@@ -35,6 +35,93 @@ $ yarn add vue-mount-plugin
 
 ## Usage
 
+### Use in Vue `>=3.0`
+
+```vue
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { getCurrentInstance } from 'vue'
+import Mount from 'vue-mount-plugin'
+import DemoVue from './demo.vue'
+
+const { proxy } = getCurrentInstance()
+const instance = new Mount(DemoVue, { parent: proxy.$root })
+
+// mount to the end of document.body
+instance.mount()
+
+// destroy
+instance.destroy()
+</script>
+```
+
+### Use in Vue `2.7`
+
+```vue
+<template>
+  <div></div>
+</template>
+
+<script>
+import { getCurrentInstance } from 'vue'
+import Mount from 'vue-mount-plugin'
+import DemoVue from './demo.vue'
+
+export default {
+  setup() {
+    const { proxy } = getCurrentInstance()
+    const instance = new Mount(DemoVue, { parent: proxy.$root })
+
+    // mount to the end of document.body
+    instance.mount()
+
+    // destroy
+    instance.destroy()
+  }
+}
+</script>
+```
+
+### Use in Vue `<=2.6`
+
+> Add `@vue/composition-api` to the `project.json` dependencies and run install.
+
+```json
+{
+  "dependencies": {
+    "@vue/composition-api": "latest"
+  }
+}
+```
+
+```vue
+<template>
+  <div></div>
+</template>
+
+<script>
+import { getCurrentInstance } from '@vue/composition-api'
+import Mount from 'vue-mount-plugin'
+import DemoVue from './demo.vue'
+
+export default {
+  setup() {
+    const { proxy } = getCurrentInstance()
+    const instance = new Mount(DemoVue, { parent: proxy.$root })
+
+    // mount to the end of document.body
+    instance.mount()
+
+    // destroy
+    instance.destroy()
+  }
+}
+</script>
+```
+
 ## Support & Issues
 
 Please open an issue [here](https://github.com/saqqdy/vue-mount-plugin/issues).

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /*!
- * vue-mount-plugin v1.0.0-alpha.1
+ * vue-mount-plugin v1.0.0-beta.1
  * A simple and easy to use vue instance extension plugin that supports vue2.0 and vue3.0
  * (c) 2021-2023 saqqdy 
  * Released under the MIT License.
@@ -8,59 +8,64 @@
 
 var vueDemi = require('vue-demi');
 
-var MountPlugin = function () {
-  function MountPlugin(component, options) {
+class Mount {
+  constructor(component, options) {
     if (options === void 0) {
       options = {};
     }
     this.vNode = null;
+    this.options = {};
     this.seed = 1;
-    if (options.target) this.target = options.target;else {
-      this.target = document.createElement('div');
-      document.body.appendChild(this.target);
-    }
+    if (typeof document === 'undefined') throw new Error('This plugin works in browser');
+    this.options = options;
+    this.target = options.target || document.createElement('div');
     this.vNode = this.createVM(component, options);
   }
-  MountPlugin.prototype.createVM = function (component, _a) {
-    var _b = _a === void 0 ? {} : _a,
-      props = _b.props,
-      children = _b.children,
-      app = _b.app,
-      context = _b.context;
-    var vNode;
+  createVM(component, _temp) {
+    let {
+      props,
+      children,
+      patchFlag,
+      dynamicProps,
+      isBlockNode,
+      app,
+      context,
+      parent
+    } = _temp === void 0 ? {} : _temp;
+    let vNode;
     if (vueDemi.isVue2) {
-      var VueConstructor = vueDemi.Vue2.extend(Object.assign({}, context || {}, component));
+      const VueConstructor = vueDemi.Vue2.extend(Object.assign({}, context || {}, component));
       vNode = new VueConstructor({
-        el: this.target,
+        parent,
         propsData: props
       });
       vNode.id = 'captcha' + this.seed++;
       return vNode;
     } else {
-      vNode = vueDemi.createVNode(component, props, children);
+      vNode = vueDemi.createVNode(component, props, children, patchFlag, dynamicProps, isBlockNode);
       if (app === null || app === void 0 ? void 0 : app._context) vNode.appContext = app._context;
       return vNode;
     }
-  };
-  MountPlugin.prototype.mount = function () {
+  }
+  mount() {
+    !this.options.target && document.body.appendChild(this.target);
     if (vueDemi.isVue2) {
-      this.vNode && this.vNode.$mount();
+      this.vNode && this.vNode.$mount(this.target);
     } else {
       vueDemi.render(this.vNode, this.target);
     }
-  };
-  MountPlugin.prototype.destroy = function () {
+  }
+  destroy() {
     if (vueDemi.isVue2) {
       this.vNode.$destroy();
       document.body.removeChild(this.vNode.$el);
-      this.vNode = null;
     } else {
       vueDemi.render(null, this.target);
       document.body.removeChild(this.target);
-      this.vNode = null;
     }
-  };
-  return MountPlugin;
-}();
+    this.vNode = null;
+    this.target = null;
+  }
+}
 
-module.exports = MountPlugin;
+module.exports = Mount;

package/dist/index.d.ts

@@ -10,16 +10,17 @@ export declare type CreateVNodeParameters = Parameters<typeof createVNode>;
 
 export declare type Data = Record<string, unknown>;
 
-declare class MountPlugin {
+declare class Mount {
     vNode: VNode | typeof Vue2 | null;
     target: Element | ShadowRoot;
+    options: Options;
     seed: number;
     constructor(component: Component, options?: Options);
-    createVM(component: Component, { props, children, app, context }?: Options): any;
+    createVM(component: Component, { props, children, patchFlag, dynamicProps, isBlockNode, app, context, parent }?: Options): any;
     mount(): void;
     destroy(): void;
 }
-export default MountPlugin;
+export default Mount;
 
 export declare interface Options {
     props?: (Data & VNodeProps) | null;
@@ -34,6 +35,7 @@ export declare interface Options {
         store: unknown;
         i18n: unknown;
     };
+    parent?: unknown;
 }
 
 export { }

package/dist/index.mjs

@@ -1,64 +1,69 @@
 /*!
- * vue-mount-plugin v1.0.0-alpha.1
+ * vue-mount-plugin v1.0.0-beta.1
  * A simple and easy to use vue instance extension plugin that supports vue2.0 and vue3.0
  * (c) 2021-2023 saqqdy 
  * Released under the MIT License.
  */
 import { isVue2, Vue2, createVNode, render } from 'vue-demi';
 
-var MountPlugin = function () {
-  function MountPlugin(component, options) {
+class Mount {
+  constructor(component, options) {
     if (options === void 0) {
       options = {};
     }
     this.vNode = null;
+    this.options = {};
     this.seed = 1;
-    if (options.target) this.target = options.target;else {
-      this.target = document.createElement('div');
-      document.body.appendChild(this.target);
-    }
+    if (typeof document === 'undefined') throw new Error('This plugin works in browser');
+    this.options = options;
+    this.target = options.target || document.createElement('div');
     this.vNode = this.createVM(component, options);
   }
-  MountPlugin.prototype.createVM = function (component, _a) {
-    var _b = _a === void 0 ? {} : _a,
-      props = _b.props,
-      children = _b.children,
-      app = _b.app,
-      context = _b.context;
-    var vNode;
+  createVM(component, _temp) {
+    let {
+      props,
+      children,
+      patchFlag,
+      dynamicProps,
+      isBlockNode,
+      app,
+      context,
+      parent
+    } = _temp === void 0 ? {} : _temp;
+    let vNode;
     if (isVue2) {
-      var VueConstructor = Vue2.extend(Object.assign({}, context || {}, component));
+      const VueConstructor = Vue2.extend(Object.assign({}, context || {}, component));
       vNode = new VueConstructor({
-        el: this.target,
+        parent,
         propsData: props
       });
       vNode.id = 'captcha' + this.seed++;
       return vNode;
     } else {
-      vNode = createVNode(component, props, children);
+      vNode = createVNode(component, props, children, patchFlag, dynamicProps, isBlockNode);
       if (app === null || app === void 0 ? void 0 : app._context) vNode.appContext = app._context;
       return vNode;
     }
-  };
-  MountPlugin.prototype.mount = function () {
+  }
+  mount() {
+    !this.options.target && document.body.appendChild(this.target);
     if (isVue2) {
-      this.vNode && this.vNode.$mount();
+      this.vNode && this.vNode.$mount(this.target);
     } else {
       render(this.vNode, this.target);
     }
-  };
-  MountPlugin.prototype.destroy = function () {
+  }
+  destroy() {
     if (isVue2) {
       this.vNode.$destroy();
       document.body.removeChild(this.vNode.$el);
-      this.vNode = null;
     } else {
       render(null, this.target);
       document.body.removeChild(this.target);
-      this.vNode = null;
     }
-  };
-  return MountPlugin;
-}();
+    this.vNode = null;
+    this.target = null;
+  }
+}
 
-export { MountPlugin as default };
+export { Mount as default };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "vue-mount-plugin",
 	"description": "A simple and easy to use vue instance extension plugin that supports vue2.0 and vue3.0",
-	"version": "1.0.0-alpha.1",
+	"version": "1.0.0-beta.1",
 	"packageManager": "pnpm@7.26.1",
 	"main": "./dist/index.cjs",
 	"module": "./dist/index.mjs",