vue-mount-plugin 1.1.0 → 2.1.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.
- package/README.md +48 -18
- package/dist/es5/index.cjs +66 -0
- package/dist/es5/index.d.ts +42 -0
- package/dist/es5/index.iife.js +1046 -0
- package/dist/es5/index.iife.min.js +7 -0
- package/dist/es5/index.mjs +64 -0
- package/dist/index.cjs +22 -28
- package/dist/index.d.ts +1 -1
- package/dist/index.iife.js +72 -0
- package/dist/index.iife.min.js +7 -0
- package/dist/index.mjs +22 -28
- package/package.json +38 -27
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
|
-
|
|
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
|
-
//
|
|
57
|
-
instance.
|
|
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
|
-
|
|
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
|
-
//
|
|
82
|
-
instance.
|
|
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
|
-
|
|
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
|
-
//
|
|
119
|
-
instance.
|
|
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
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('core-js/modules/es.object.assign.js');
|
|
4
|
+
var vueDemi = require('vue-demi');
|
|
5
|
+
|
|
6
|
+
var Mount = function () {
|
|
7
|
+
function Mount(component, options) {
|
|
8
|
+
if (options === void 0) {
|
|
9
|
+
options = {};
|
|
10
|
+
}
|
|
11
|
+
this.vNode = null;
|
|
12
|
+
this.options = {};
|
|
13
|
+
this.seed = 1;
|
|
14
|
+
if (typeof document === 'undefined') throw new Error('This plugin works in browser');
|
|
15
|
+
this.options = options;
|
|
16
|
+
this.target = (typeof options.target === 'string' ? document.querySelector(options.target) : options.target) || document.createElement(options.tagName || 'div');
|
|
17
|
+
this.vNode = this.createVM(component, options);
|
|
18
|
+
}
|
|
19
|
+
Mount.prototype.createVM = function (component, _a) {
|
|
20
|
+
var _b = _a === void 0 ? {} : _a,
|
|
21
|
+
props = _b.props,
|
|
22
|
+
children = _b.children,
|
|
23
|
+
patchFlag = _b.patchFlag,
|
|
24
|
+
dynamicProps = _b.dynamicProps,
|
|
25
|
+
isBlockNode = _b.isBlockNode,
|
|
26
|
+
app = _b.app,
|
|
27
|
+
context = _b.context,
|
|
28
|
+
parent = _b.parent;
|
|
29
|
+
var vNode;
|
|
30
|
+
if (vueDemi.isVue2) {
|
|
31
|
+
var VueConstructor = vueDemi.Vue2.extend(Object.assign({}, context || {}, component));
|
|
32
|
+
vNode = new VueConstructor({
|
|
33
|
+
parent: parent,
|
|
34
|
+
propsData: props
|
|
35
|
+
});
|
|
36
|
+
vNode.id = 'mount-plugin-' + this.seed++;
|
|
37
|
+
return vNode;
|
|
38
|
+
} else {
|
|
39
|
+
vNode = vueDemi.createVNode(component, props, children, patchFlag, dynamicProps, isBlockNode);
|
|
40
|
+
if (app === null || app === void 0 ? void 0 : app._context) vNode.appContext = app._context;
|
|
41
|
+
return vNode;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
Mount.prototype.mount = function () {
|
|
45
|
+
!this.options.target && document.body.appendChild(this.target);
|
|
46
|
+
if (vueDemi.isVue2) {
|
|
47
|
+
this.vNode && this.vNode.$mount(this.target);
|
|
48
|
+
} else {
|
|
49
|
+
vueDemi.render(this.vNode, this.target);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
Mount.prototype.unmount = function () {
|
|
53
|
+
if (vueDemi.isVue2) {
|
|
54
|
+
this.vNode.$destroy();
|
|
55
|
+
document.body.removeChild(this.vNode.$el);
|
|
56
|
+
} else {
|
|
57
|
+
vueDemi.render(null, this.target);
|
|
58
|
+
document.body.removeChild(this.target);
|
|
59
|
+
}
|
|
60
|
+
this.vNode = null;
|
|
61
|
+
this.target = null;
|
|
62
|
+
};
|
|
63
|
+
return Mount;
|
|
64
|
+
}();
|
|
65
|
+
|
|
66
|
+
module.exports = Mount;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { App } from 'vue-demi';
|
|
2
|
+
import { createVNode } from 'vue-demi';
|
|
3
|
+
import type { VNode } from 'vue-demi';
|
|
4
|
+
import type { VNodeProps } from 'vue-demi';
|
|
5
|
+
import { Vue2 } from 'vue-demi';
|
|
6
|
+
|
|
7
|
+
export declare type Component = CreateVNodeParameters['0'];
|
|
8
|
+
|
|
9
|
+
export declare type CreateVNodeParameters = Parameters<typeof createVNode>;
|
|
10
|
+
|
|
11
|
+
export declare type Data = Record<string, unknown>;
|
|
12
|
+
|
|
13
|
+
declare class Mount {
|
|
14
|
+
vNode: VNode | typeof Vue2 | null;
|
|
15
|
+
target: Element | ShadowRoot;
|
|
16
|
+
options: Options;
|
|
17
|
+
seed: number;
|
|
18
|
+
constructor(component: Component, options?: Options);
|
|
19
|
+
createVM(component: Component, { props, children, patchFlag, dynamicProps, isBlockNode, app, context, parent }?: Options): any;
|
|
20
|
+
mount(): void;
|
|
21
|
+
unmount(): void;
|
|
22
|
+
}
|
|
23
|
+
export default Mount;
|
|
24
|
+
|
|
25
|
+
export declare interface Options {
|
|
26
|
+
props?: (Data & VNodeProps) | null;
|
|
27
|
+
children?: unknown;
|
|
28
|
+
patchFlag?: number;
|
|
29
|
+
dynamicProps?: string[] | null;
|
|
30
|
+
isBlockNode?: boolean;
|
|
31
|
+
target?: Element | ShadowRoot;
|
|
32
|
+
tagName?: keyof HTMLElementTagNameMap;
|
|
33
|
+
app?: App;
|
|
34
|
+
context?: Data & {
|
|
35
|
+
router: unknown;
|
|
36
|
+
store: unknown;
|
|
37
|
+
i18n: unknown;
|
|
38
|
+
};
|
|
39
|
+
parent?: unknown;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export { }
|