From 13d2e052913a77c221a1750cbcf074be3f0df389 Mon Sep 17 00:00:00 2001 From: Eran Grinberg Date: Tue, 29 Sep 2020 10:03:26 +0200 Subject: [PATCH 1/2] FEATURE | Add option to pass arguments to main wrap function to add attribute to the new Vue object before render --- src/index.js | 39 ++++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/src/index.js b/src/index.js index 4409bd7..13a6f2f 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, vueAttributeBeforeRender) { const isAsync = typeof Component === 'function' && !Component.cid let isInitialized = false let hyphenatedPropsList @@ -83,23 +83,28 @@ export default function wrap (Vue, Component) { const self = super() self.attachShadow({ mode: 'open' }) - const wrapper = self._wrapper = new Vue({ - name: 'shadow-root', - customElement: self, - shadowRoot: self.shadowRoot, - data () { - return { - props: {}, - slotChildren: [] + const wrapper = self._wrapper = new Vue( + Object.assign( + vueAttributeBeforeRender, { + name: 'shadow-root', + customElement: self, + shadowRoot: self.shadowRoot, + + data () { + return { + props: {}, + slotChildren: [] + } + }, + + render (h) { + return h(Component, { + ref: 'inner', + props: this.props + }, this.slotChildren) + } } - }, - render (h) { - return h(Component, { - ref: 'inner', - props: this.props - }, this.slotChildren) - } - }) + )) // Use MutationObserver to react to future attribute & slot content change const observer = new MutationObserver(mutations => { From d7b6a4431e4fc4b19b1cad9e38cd973582c254bf Mon Sep 17 00:00:00 2001 From: Eran Grinberg Date: Tue, 29 Sep 2020 10:22:13 +0200 Subject: [PATCH 2/2] DOCUMENTATION | Add usage info regarding the new suggested feature of addtional attributes before Vue instance render --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index c3a58a5..4d02bd0 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,19 @@ const CustomElement = wrap(Vue, () => import(`MyComponent.vue`)) window.customElements.define('my-element', CustomElement) ``` +### Usage with addtional attributes +```js +const vueAttributeBeforeRender = { + i18n:{ locale: 'de' }, + foo:{ bar: 'test' }, +}; + +const CustomElement = wrap(Vue, Component, vueAttributeBeforeRender) +``` +This will add the attribute to the +```js +new Vue({ // attributes }) +``` ## Interface Proxying Details 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