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 pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy