vue-mount-plugin 1.0.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +48 -18
  2. package/dist/index.cjs +28 -26
  3. package/dist/index.d.ts +2 -1
  4. package/dist/index.iife.js +73 -0
  5. package/dist/index.iife.min.js +7 -0
  6. package/dist/index.mjs +28 -26
  7. package/package.json +22 -13
package/README.md CHANGED
@@ -8,6 +8,7 @@ A simple and easy to use vue instance extension plugin that supports vue2.0 and
8
8
  [![Codacy Badge][codacy-image]][codacy-url]
9
9
  [![Test coverage][codecov-image]][codecov-url]
10
10
  [![npm download][download-image]][download-url]
11
+ [![gzip][gzip-image]][gzip-url]
11
12
  [![License][license-image]][license-url]
12
13
 
13
14
  [![Sonar][sonar-image]][sonar-url]
@@ -38,10 +39,7 @@ $ yarn add vue-mount-plugin
38
39
  ### Use in Vue `>=3.0`
39
40
 
40
41
  ```vue
41
- <template>
42
- <div></div>
43
- </template>
44
-
42
+ <!-- test.vue -->
45
43
  <script setup>
46
44
  import { getCurrentInstance } from 'vue'
47
45
  import Mount from 'vue-mount-plugin'
@@ -53,18 +51,15 @@ const instance = new Mount(DemoVue, { parent: proxy.$root })
53
51
  // mount to the end of document.body
54
52
  instance.mount()
55
53
 
56
- // destroy
57
- instance.destroy()
54
+ // unmount
55
+ instance.unmount()
58
56
  </script>
59
57
  ```
60
58
 
61
59
  ### Use in Vue `2.7`
62
60
 
63
61
  ```vue
64
- <template>
65
- <div></div>
66
- </template>
67
-
62
+ <!-- test.vue -->
68
63
  <script>
69
64
  import { getCurrentInstance } from 'vue'
70
65
  import Mount from 'vue-mount-plugin'
@@ -78,8 +73,8 @@ export default {
78
73
  // mount to the end of document.body
79
74
  instance.mount()
80
75
 
81
- // destroy
82
- instance.destroy()
76
+ // unmount
77
+ instance.unmount()
83
78
  }
84
79
  }
85
80
  </script>
@@ -98,10 +93,7 @@ export default {
98
93
  ```
99
94
 
100
95
  ```vue
101
- <template>
102
- <div></div>
103
- </template>
104
-
96
+ <!-- test.vue -->
105
97
  <script>
106
98
  import { getCurrentInstance } from '@vue/composition-api'
107
99
  import Mount from 'vue-mount-plugin'
@@ -115,8 +107,44 @@ export default {
115
107
  // mount to the end of document.body
116
108
  instance.mount()
117
109
 
118
- // destroy
119
- instance.destroy()
110
+ // unmount
111
+ instance.unmount()
112
+ }
113
+ }
114
+ </script>
115
+ ```
116
+
117
+ ### Import in Browser
118
+
119
+ Import `vue-mount-plugin` through browser HTML tags directly, and use global variable VueMount.
120
+
121
+ ```html
122
+ <head>
123
+ <!-- Import vue3 or vue2 -->
124
+ <script src="//unpkg.com/vue@3"></script>
125
+ <!-- Import vue-demi library -->
126
+ <script src="//unpkg.com/vue-demi"></script>
127
+ <!-- Import vue-mount-plugin library -->
128
+ <script src="//unpkg.com/vue-mount-plugin"></script>
129
+ </head>
130
+ ```
131
+
132
+ ```vue
133
+ <!-- test.vue -->
134
+ <script>
135
+ import { getCurrentInstance } from '@vue/composition-api'
136
+ import DemoVue from './demo.vue'
137
+
138
+ export default {
139
+ setup() {
140
+ const { proxy } = getCurrentInstance()
141
+ const instance = new VueMount(DemoVue, { parent: proxy.$root })
142
+
143
+ // mount to the end of document.body
144
+ instance.mount()
145
+
146
+ // unmount
147
+ instance.unmount()
120
148
  }
121
149
  }
122
150
  </script>
@@ -138,6 +166,8 @@ Please open an issue [here](https://github.com/saqqdy/vue-mount-plugin/issues).
138
166
  [codecov-url]: https://codecov.io/github/saqqdy/vue-mount-plugin?branch=master
139
167
  [download-image]: https://img.shields.io/npm/dm/vue-mount-plugin.svg?style=flat-square
140
168
  [download-url]: https://npmjs.org/package/vue-mount-plugin
169
+ [gzip-image]: http://img.badgesize.io/https://unpkg.com/vue-mount-plugin/dist/index.iife.min.js?compression=gzip&label=gzip%20size:%20JS
170
+ [gzip-url]: http://img.badgesize.io/https://unpkg.com/vue-mount-plugin/dist/index.iife.min.js?compression=gzip&label=gzip%20size:%20JS
141
171
  [license-image]: https://img.shields.io/badge/License-MIT-blue.svg
142
172
  [license-url]: LICENSE
143
173
  [sonar-image]: https://sonarcloud.io/api/project_badges/quality_gate?project=saqqdy_vue-mount-plugin
package/dist/index.cjs CHANGED
@@ -1,15 +1,16 @@
1
1
  /*!
2
- * vue-mount-plugin v1.0.0
2
+ * vue-mount-plugin v2.0.0
3
3
  * A simple and easy to use vue instance extension plugin that supports vue2.0 and vue3.0
4
- * (c) 2021-2023 saqqdy
4
+ * (c) 2021-2023 saqqdy <saqqdy@qq.com>
5
5
  * Released under the MIT License.
6
6
  */
7
7
  'use strict';
8
8
 
9
+ require('core-js/modules/es.object.assign.js');
9
10
  var vueDemi = require('vue-demi');
10
11
 
11
- class Mount {
12
- constructor(component, options) {
12
+ var Mount = /*#__PURE__*/function () {
13
+ function Mount(component, options) {
13
14
  if (options === void 0) {
14
15
  options = {};
15
16
  }
@@ -18,44 +19,44 @@ class Mount {
18
19
  this.seed = 1;
19
20
  if (typeof document === 'undefined') throw new Error('This plugin works in browser');
20
21
  this.options = options;
21
- this.target = options.target || document.createElement('div');
22
+ this.target = (typeof options.target === 'string' ? document.querySelector(options.target) : options.target) || document.createElement(options.tagName || 'div');
22
23
  this.vNode = this.createVM(component, options);
23
24
  }
24
- createVM(component, _temp) {
25
- let {
26
- props,
27
- children,
28
- patchFlag,
29
- dynamicProps,
30
- isBlockNode,
31
- app,
32
- context,
33
- parent
34
- } = _temp === void 0 ? {} : _temp;
35
- let vNode;
25
+ var _proto = Mount.prototype;
26
+ _proto.createVM = function createVM(component, _temp) {
27
+ var _ref = _temp === void 0 ? {} : _temp,
28
+ props = _ref.props,
29
+ children = _ref.children,
30
+ patchFlag = _ref.patchFlag,
31
+ dynamicProps = _ref.dynamicProps,
32
+ isBlockNode = _ref.isBlockNode,
33
+ app = _ref.app,
34
+ context = _ref.context,
35
+ parent = _ref.parent;
36
+ var vNode;
36
37
  if (vueDemi.isVue2) {
37
- const VueConstructor = vueDemi.Vue2.extend(Object.assign({}, context || {}, component));
38
+ var VueConstructor = vueDemi.Vue2.extend(Object.assign({}, context || {}, component));
38
39
  vNode = new VueConstructor({
39
- parent,
40
+ parent: parent,
40
41
  propsData: props
41
42
  });
42
- vNode.id = 'captcha' + this.seed++;
43
+ vNode.id = 'mount-plugin-' + this.seed++;
43
44
  return vNode;
44
45
  } else {
45
46
  vNode = vueDemi.createVNode(component, props, children, patchFlag, dynamicProps, isBlockNode);
46
47
  if (app === null || app === void 0 ? void 0 : app._context) vNode.appContext = app._context;
47
48
  return vNode;
48
49
  }
49
- }
50
- mount() {
50
+ };
51
+ _proto.mount = function mount() {
51
52
  !this.options.target && document.body.appendChild(this.target);
52
53
  if (vueDemi.isVue2) {
53
54
  this.vNode && this.vNode.$mount(this.target);
54
55
  } else {
55
56
  vueDemi.render(this.vNode, this.target);
56
57
  }
57
- }
58
- destroy() {
58
+ };
59
+ _proto.unmount = function unmount() {
59
60
  if (vueDemi.isVue2) {
60
61
  this.vNode.$destroy();
61
62
  document.body.removeChild(this.vNode.$el);
@@ -65,7 +66,8 @@ class Mount {
65
66
  }
66
67
  this.vNode = null;
67
68
  this.target = null;
68
- }
69
- }
69
+ };
70
+ return Mount;
71
+ }();
70
72
 
71
73
  module.exports = Mount;
package/dist/index.d.ts CHANGED
@@ -18,7 +18,7 @@ declare class Mount {
18
18
  constructor(component: Component, options?: Options);
19
19
  createVM(component: Component, { props, children, patchFlag, dynamicProps, isBlockNode, app, context, parent }?: Options): any;
20
20
  mount(): void;
21
- destroy(): void;
21
+ unmount(): void;
22
22
  }
23
23
  export default Mount;
24
24
 
@@ -29,6 +29,7 @@ export declare interface Options {
29
29
  dynamicProps?: string[] | null;
30
30
  isBlockNode?: boolean;
31
31
  target?: Element | ShadowRoot;
32
+ tagName?: keyof HTMLElementTagNameMap;
32
33
  app?: App;
33
34
  context?: Data & {
34
35
  router: unknown;
package/dist/index.iife.js ADDED
@@ -0,0 +1,73 @@
1
+ /*!
2
+ * vue-mount-plugin v2.0.0
3
+ * A simple and easy to use vue instance extension plugin that supports vue2.0 and vue3.0
4
+ * (c) 2021-2023 saqqdy <saqqdy@qq.com>
5
+ * Released under the MIT License.
6
+ */
7
+ this.VueMount = (function (es_object_assign_js, vueDemi) {
8
+ 'use strict';
9
+
10
+ var Mount = /*#__PURE__*/function () {
11
+ function Mount(component, options) {
12
+ if (options === void 0) {
13
+ options = {};
14
+ }
15
+ this.vNode = null;
16
+ this.options = {};
17
+ this.seed = 1;
18
+ if (typeof document === 'undefined') throw new Error('This plugin works in browser');
19
+ this.options = options;
20
+ this.target = (typeof options.target === 'string' ? document.querySelector(options.target) : options.target) || document.createElement(options.tagName || 'div');
21
+ this.vNode = this.createVM(component, options);
22
+ }
23
+ var _proto = Mount.prototype;
24
+ _proto.createVM = function createVM(component, _temp) {
25
+ var _ref = _temp === void 0 ? {} : _temp,
26
+ props = _ref.props,
27
+ children = _ref.children,
28
+ patchFlag = _ref.patchFlag,
29
+ dynamicProps = _ref.dynamicProps,
30
+ isBlockNode = _ref.isBlockNode,
31
+ app = _ref.app,
32
+ context = _ref.context,
33
+ parent = _ref.parent;
34
+ var vNode;
35
+ if (vueDemi.isVue2) {
36
+ var VueConstructor = vueDemi.Vue2.extend(Object.assign({}, context || {}, component));
37
+ vNode = new VueConstructor({
38
+ parent: parent,
39
+ propsData: props
40
+ });
41
+ vNode.id = 'mount-plugin-' + this.seed++;
42
+ return vNode;
43
+ } else {
44
+ vNode = vueDemi.createVNode(component, props, children, patchFlag, dynamicProps, isBlockNode);
45
+ if (app === null || app === void 0 ? void 0 : app._context) vNode.appContext = app._context;
46
+ return vNode;
47
+ }
48
+ };
49
+ _proto.mount = function mount() {
50
+ !this.options.target && document.body.appendChild(this.target);
51
+ if (vueDemi.isVue2) {
52
+ this.vNode && this.vNode.$mount(this.target);
53
+ } else {
54
+ vueDemi.render(this.vNode, this.target);
55
+ }
56
+ };
57
+ _proto.unmount = function unmount() {
58
+ if (vueDemi.isVue2) {
59
+ this.vNode.$destroy();
60
+ document.body.removeChild(this.vNode.$el);
61
+ } else {
62
+ vueDemi.render(null, this.target);
63
+ document.body.removeChild(this.target);
64
+ }
65
+ this.vNode = null;
66
+ this.target = null;
67
+ };
68
+ return Mount;
69
+ }();
70
+
71
+ return Mount;
72
+
73
+ })(null, VueDemi);
package/dist/index.iife.min.js ADDED
@@ -0,0 +1,7 @@
1
+ /*!
2
+ * vue-mount-plugin v2.0.0
3
+ * A simple and easy to use vue instance extension plugin that supports vue2.0 and vue3.0
4
+ * (c) 2021-2023 saqqdy <saqqdy@qq.com>
5
+ * Released under the MIT License.
6
+ */
7
+ this.VueMount=function(t,e){"use strict";return function(){function t(t,e){if(void 0===e&&(e={}),this.vNode=null,this.options={},this.seed=1,"undefined"==typeof document)throw new Error("This plugin works in browser");this.options=e,this.target=("string"==typeof e.target?document.querySelector(e.target):e.target)||document.createElement(e.tagName||"div"),this.vNode=this.createVM(t,e)}var o=t.prototype;return o.createVM=function(t,o){var n,i=void 0===o?{}:o,r=i.props,s=i.children,d=i.patchFlag,u=i.dynamicProps,a=i.isBlockNode,h=i.app,c=i.context,p=i.parent;return e.isVue2?((n=new(e.Vue2.extend(Object.assign({},c||{},t)))({parent:p,propsData:r})).id="mount-plugin-"+this.seed++,n):(n=e.createVNode(t,r,s,d,u,a),(null==h?void 0:h._context)&&(n.appContext=h._context),n)},o.mount=function(){!this.options.target&&document.body.appendChild(this.target),e.isVue2?this.vNode&&this.vNode.$mount(this.target):e.render(this.vNode,this.target)},o.unmount=function(){e.isVue2?(this.vNode.$destroy(),document.body.removeChild(this.vNode.$el)):(e.render(null,this.target),document.body.removeChild(this.target)),this.vNode=null,this.target=null},t}()}(0,VueDemi);
package/dist/index.mjs CHANGED
@@ -1,13 +1,14 @@
1
1
  /*!
2
- * vue-mount-plugin v1.0.0
2
+ * vue-mount-plugin v2.0.0
3
3
  * A simple and easy to use vue instance extension plugin that supports vue2.0 and vue3.0
4
- * (c) 2021-2023 saqqdy
4
+ * (c) 2021-2023 saqqdy <saqqdy@qq.com>
5
5
  * Released under the MIT License.
6
6
  */
7
+ import 'core-js/modules/es.object.assign.js';
7
8
  import { isVue2, Vue2, createVNode, render } from 'vue-demi';
8
9
 
9
- class Mount {
10
- constructor(component, options) {
10
+ var Mount = /*#__PURE__*/function () {
11
+ function Mount(component, options) {
11
12
  if (options === void 0) {
12
13
  options = {};
13
14
  }
@@ -16,44 +17,44 @@ class Mount {
16
17
  this.seed = 1;
17
18
  if (typeof document === 'undefined') throw new Error('This plugin works in browser');
18
19
  this.options = options;
19
- this.target = options.target || document.createElement('div');
20
+ this.target = (typeof options.target === 'string' ? document.querySelector(options.target) : options.target) || document.createElement(options.tagName || 'div');
20
21
  this.vNode = this.createVM(component, options);
21
22
  }
22
- createVM(component, _temp) {
23
- let {
24
- props,
25
- children,
26
- patchFlag,
27
- dynamicProps,
28
- isBlockNode,
29
- app,
30
- context,
31
- parent
32
- } = _temp === void 0 ? {} : _temp;
33
- let vNode;
23
+ var _proto = Mount.prototype;
24
+ _proto.createVM = function createVM(component, _temp) {
25
+ var _ref = _temp === void 0 ? {} : _temp,
26
+ props = _ref.props,
27
+ children = _ref.children,
28
+ patchFlag = _ref.patchFlag,
29
+ dynamicProps = _ref.dynamicProps,
30
+ isBlockNode = _ref.isBlockNode,
31
+ app = _ref.app,
32
+ context = _ref.context,
33
+ parent = _ref.parent;
34
+ var vNode;
34
35
  if (isVue2) {
35
- const VueConstructor = Vue2.extend(Object.assign({}, context || {}, component));
36
+ var VueConstructor = Vue2.extend(Object.assign({}, context || {}, component));
36
37
  vNode = new VueConstructor({
37
- parent,
38
+ parent: parent,
38
39
  propsData: props
39
40
  });
40
- vNode.id = 'captcha' + this.seed++;
41
+ vNode.id = 'mount-plugin-' + this.seed++;
41
42
  return vNode;
42
43
  } else {
43
44
  vNode = createVNode(component, props, children, patchFlag, dynamicProps, isBlockNode);
44
45
  if (app === null || app === void 0 ? void 0 : app._context) vNode.appContext = app._context;
45
46
  return vNode;
46
47
  }
47
- }
48
- mount() {
48
+ };
49
+ _proto.mount = function mount() {
49
50
  !this.options.target && document.body.appendChild(this.target);
50
51
  if (isVue2) {
51
52
  this.vNode && this.vNode.$mount(this.target);
52
53
  } else {
53
54
  render(this.vNode, this.target);
54
55
  }
55
- }
56
- destroy() {
56
+ };
57
+ _proto.unmount = function unmount() {
57
58
  if (isVue2) {
58
59
  this.vNode.$destroy();
59
60
  document.body.removeChild(this.vNode.$el);
@@ -63,7 +64,8 @@ class Mount {
63
64
  }
64
65
  this.vNode = null;
65
66
  this.target = null;
66
- }
67
- }
67
+ };
68
+ return Mount;
69
+ }();
68
70
 
69
71
  export { Mount as default };
package/package.json CHANGED
@@ -1,15 +1,19 @@
1
1
  {
2
2
  "name": "vue-mount-plugin",
3
3
  "description": "A simple and easy to use vue instance extension plugin that supports vue2.0 and vue3.0",
4
- "version": "1.0.0",
4
+ "version": "2.0.0",
5
5
  "packageManager": "pnpm@7.26.1",
6
6
  "main": "./dist/index.cjs",
7
7
  "module": "./dist/index.mjs",
8
8
  "typings": "./dist/index.d.ts",
9
+ "unpkg": "./dist/index.iife.min.js",
10
+ "jsdelivr": "./dist/index.iife.min.js",
9
11
  "exports": {
10
12
  ".": {
13
+ "types": "./dist/index.d.ts",
11
14
  "require": "./dist/index.cjs",
12
- "import": "./dist/index.mjs"
15
+ "import": "./dist/index.mjs",
16
+ "browser": "./dist/index.mjs"
13
17
  },
14
18
  "./*": "./*"
15
19
  },
@@ -46,7 +50,7 @@
46
50
  "prettier": "prettier --write \"**/*.{js,ts,jsx,tsx,yml,json,md}\""
47
51
  },
48
52
  "dependencies": {
49
- "core-js": "^3.27.2",
53
+ "core-js": "^3.28.0",
50
54
  "js-cool": "^2.8.0",
51
55
  "vue-demi": "^0.13.11"
52
56
  },
@@ -54,37 +58,38 @@
54
58
  "@babel/core": "^7.20.12",
55
59
  "@babel/preset-env": "^7.20.2",
56
60
  "@babel/preset-typescript": "^7.18.6",
57
- "@eslint-sets/eslint-config-ts": "^4.2.1",
58
- "@microsoft/api-extractor": "^7.34.2",
61
+ "@eslint-sets/eslint-config-ts": "^5.0.0",
62
+ "@microsoft/api-extractor": "^7.34.4",
59
63
  "@rollup/plugin-alias": "^4.0.3",
60
64
  "@rollup/plugin-babel": "^6.0.3",
61
65
  "@rollup/plugin-commonjs": "^24.0.1",
62
66
  "@rollup/plugin-node-resolve": "^15.0.1",
67
+ "@rollup/plugin-terser": "^0.4.0",
63
68
  "@rollup/plugin-typescript": "^11.0.0",
64
69
  "@types/jest": "^29.4.0",
65
- "@types/node": "^18.11.18",
70
+ "@types/node": "^18.13.0",
66
71
  "chalk": "^5.2.0",
67
72
  "coveralls": "^3.1.1",
68
73
  "cross-env": "^7.0.3",
69
- "eslint": "^8.33.0",
74
+ "eslint": "^8.34.0",
70
75
  "fast-glob": "^3.2.12",
71
- "jest": "^29.4.1",
76
+ "jest": "^29.4.2",
72
77
  "load-yml": "^1.2.0",
73
78
  "npm-run-all": "^4.1.5",
74
- "prettier": "^2.8.3",
75
- "prettier-config-common": "^1.3.0",
79
+ "prettier": "^2.8.4",
80
+ "prettier-config-common": "^1.4.0",
76
81
  "reinstaller": "^2.3.0",
77
82
  "rimraf": "^4.1.2",
78
- "rollup": "^3.13.0",
83
+ "rollup": "^3.15.0",
79
84
  "rollup-plugin-filesize": "^9.1.2",
80
85
  "rollup-plugin-visualizer": "^5.9.0",
81
86
  "ts-jest": "^29.0.5",
82
87
  "tsnd": "^1.1.0",
83
- "typedoc": "^0.23.24",
88
+ "typedoc": "^0.23.25",
84
89
  "typedoc-plugin-markdown": "^3.14.0",
85
90
  "typescript": "^4.9.5",
86
91
  "vue": "^3.2.47",
87
- "vue2": "npm:vue@2",
92
+ "vue2": "npm:vue@^2.7.14",
88
93
  "zx": "^7.1.1"
89
94
  },
90
95
  "peerDependencies": {
@@ -98,6 +103,9 @@
98
103
  "optional": true
99
104
  }
100
105
  },
106
+ "engines": {
107
+ "node": ">=12"
108
+ },
101
109
  "pnpm": {
102
110
  "peerDependencyRules": {
103
111
  "ignoreMissing": [
@@ -129,6 +137,7 @@
129
137
  "type": "git",
130
138
  "url": "git+https://github.com/saqqdy/vue-mount-plugin.git"
131
139
  },
140
+ "funding": "https://github.com/sponsors/saqqdy",
132
141
  "publishConfig": {
133
142
  "registry": "https://registry.npmjs.org",
134
143
  "access": "public"