From 38127a60e7a6a42e12455f5b6ec25456aad42c3b Mon Sep 17 00:00:00 2001 From: Marouen Mhiri Date: Tue, 8 Mar 2022 17:53:32 +0100 Subject: [PATCH 1/2] feat: possibility to add plugins to the vue instance --- src/index.js | 3 ++- types/index.d.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 4409bd7..cb9cbc4 100644 --- a/src/index.js +++ b/src/index.js @@ -9,7 +9,7 @@ import { convertAttributeValue } from './utils.js' -export default function wrap (Vue, Component) { +export default function wrap (Vue, Component, plugin) { const isAsync = typeof Component === 'function' && !Component.cid let isInitialized = false let hyphenatedPropsList @@ -85,6 +85,7 @@ export default function wrap (Vue, Component) { const wrapper = self._wrapper = new Vue({ name: 'shadow-root', + ...(plugin && {...plugin}), customElement: self, shadowRoot: self.shadowRoot, data () { diff --git a/types/index.d.ts b/types/index.d.ts index 8b67b7b..29c10f7 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -2,7 +2,8 @@ import _Vue, { Component, AsyncComponent } from 'vue' declare function wrap( Vue: typeof _Vue, - Component: Component | AsyncComponent + Component: Component | AsyncComponent, + plugin?: any ): HTMLElement export default wrap From 13ad7ef3089a5f4a7258da8969d4202f0be38bd3 Mon Sep 17 00:00:00 2001 From: Marouen Mhiri Date: Wed, 9 Mar 2022 16:11:03 +0100 Subject: [PATCH 2/2] feat: allow adding plugins like pinia/vuex to rendered web component --- dist/vue-wc-wrapper.global.js | 17 ++++++++++++++--- dist/vue-wc-wrapper.js | 17 ++++++++++++++--- src/index.js | 16 +++++++++++++--- types/index.d.ts | 2 +- 4 files changed, 42 insertions(+), 10 deletions(-) diff --git a/dist/vue-wc-wrapper.global.js b/dist/vue-wc-wrapper.global.js index 889a242..27587b0 100644 --- a/dist/vue-wc-wrapper.global.js +++ b/dist/vue-wc-wrapper.global.js @@ -98,7 +98,7 @@ function getAttributes (node) { return res } -function wrap (Vue, Component) { +function wrap (Vue, Component, plugin) { const isAsync = typeof Component === 'function' && !Component.cid; let isInitialized = false; let hyphenatedPropsList; @@ -167,12 +167,21 @@ function wrap (Vue, Component) { ); } + const _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + + function _isObjectEmpty(obj) { + return ( + Object.prototype.toString.call(obj) === '[object Object]' && + JSON.stringify(obj) === '{}' + ); + } + class CustomElement extends HTMLElement { constructor () { const self = super(); self.attachShadow({ mode: 'open' }); - const wrapper = self._wrapper = new Vue({ + const vueProps = _extends({ name: 'shadow-root', customElement: self, shadowRoot: self.shadowRoot, @@ -188,7 +197,9 @@ function wrap (Vue, Component) { props: this.props }, this.slotChildren) } - }); + }, !_isObjectEmpty(plugin) && _extends({}, plugin)); + + const wrapper = self._wrapper = new Vue(vueProps); // Use MutationObserver to react to future attribute & slot content change const observer = new MutationObserver(mutations => { diff --git a/dist/vue-wc-wrapper.js b/dist/vue-wc-wrapper.js index 721bf1f..a40f704 100644 --- a/dist/vue-wc-wrapper.js +++ b/dist/vue-wc-wrapper.js @@ -95,7 +95,7 @@ function getAttributes (node) { return res } -function wrap (Vue, Component) { +function wrap (Vue, Component, plugin) { const isAsync = typeof Component === 'function' && !Component.cid; let isInitialized = false; let hyphenatedPropsList; @@ -164,12 +164,21 @@ function wrap (Vue, Component) { ); } + const _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + + function _isObjectEmpty(obj) { + return ( + Object.prototype.toString.call(obj) === '[object Object]' && + JSON.stringify(obj) === '{}' + ); + } + class CustomElement extends HTMLElement { constructor () { const self = super(); self.attachShadow({ mode: 'open' }); - const wrapper = self._wrapper = new Vue({ + const vueProps = _extends({ name: 'shadow-root', customElement: self, shadowRoot: self.shadowRoot, @@ -185,7 +194,9 @@ function wrap (Vue, Component) { props: this.props }, this.slotChildren) } - }); + }, !_isObjectEmpty(plugin) && _extends({}, plugin)); + + const wrapper = self._wrapper = new Vue(vueProps); // Use MutationObserver to react to future attribute & slot content change const observer = new MutationObserver(mutations => { diff --git a/src/index.js b/src/index.js index cb9cbc4..4caa8e6 100644 --- a/src/index.js +++ b/src/index.js @@ -78,14 +78,22 @@ export default function wrap (Vue, Component, plugin) { ) } + const _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + + function _isObjectEmpty(obj) { + return ( + Object.prototype.toString.call(obj) === '[object Object]' && + JSON.stringify(obj) === '{}' + ); + } + class CustomElement extends HTMLElement { constructor () { const self = super() self.attachShadow({ mode: 'open' }) - const wrapper = self._wrapper = new Vue({ + const vueProps = _extends({ name: 'shadow-root', - ...(plugin && {...plugin}), customElement: self, shadowRoot: self.shadowRoot, data () { @@ -100,7 +108,9 @@ export default function wrap (Vue, Component, plugin) { props: this.props }, this.slotChildren) } - }) + }, !_isObjectEmpty(plugin) && _extends({}, plugin)); + + const wrapper = self._wrapper = new Vue(vueProps) // Use MutationObserver to react to future attribute & slot content change const observer = new MutationObserver(mutations => { diff --git a/types/index.d.ts b/types/index.d.ts index 29c10f7..ce903f3 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -3,7 +3,7 @@ import _Vue, { Component, AsyncComponent } from 'vue' declare function wrap( Vue: typeof _Vue, Component: Component | AsyncComponent, - plugin?: any + plugin?: any // update any to a better typing (i.e. VueConstructor...) ): HTMLElement export default wrap