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 4409bd7..4caa8e6 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 @@ -78,12 +78,21 @@ export default 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, @@ -99,7 +108,9 @@ export default 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/types/index.d.ts b/types/index.d.ts index 8b67b7b..ce903f3 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 // update any to a better typing (i.e. VueConstructor...) ): HTMLElement export default wrap