From d389f49ae9517e4b6aa14c1fd02aec9fa2b8c18a Mon Sep 17 00:00:00 2001 From: Eran Grinberg Date: Thu, 25 Jan 2024 01:01:50 +0100 Subject: [PATCH] RELEASE | Update package version to 1.4.0 and add support for provide/inject --- CHANGELOG.md | 6 ++ demo-app-vite/src/main.ts | 4 +- demo-app-webpack/src/main.js | 4 +- package.json | 2 +- package/dist/vue-web-component-wrapper.es.js | 98 ++++++++++--------- package/dist/vue-web-component-wrapper.umd.js | 2 +- package/package.json | 2 +- 7 files changed, 66 insertions(+), 52 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a8069e..c42d88e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [Unreleased] +## [1.4.0] - 25.01.2024 +### Added +- Added support for provide/inject +- Fixed demo app +- Added documentation for provide/inject + ## [1.3.4] - 19.01.2024 ### Fixed - Fixed WEBPACK 5 support example diff --git a/demo-app-vite/src/main.ts b/demo-app-vite/src/main.ts index 8e1f721..c9d28b9 100644 --- a/demo-app-vite/src/main.ts +++ b/demo-app-vite/src/main.ts @@ -7,8 +7,8 @@ import style from './style.css?inline' import { pluginsWrapper } from './plugins' import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue' -import { createWebComponent } from '../../package/index.js' -// import { createWebComponent } from 'vue-web-component-wrapper' +// import { createWebComponent } from '../../package/index.js' +import { createWebComponent } from 'vue-web-component-wrapper' createWebComponent({ diff --git a/demo-app-webpack/src/main.js b/demo-app-webpack/src/main.js index 6d9e53a..81b5b5b 100644 --- a/demo-app-webpack/src/main.js +++ b/demo-app-webpack/src/main.js @@ -7,7 +7,9 @@ import { createStore } from 'vuex' import { defaultRoutes} from './main.routes.js' import { store } from './store/index.js' import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue'; -import { createWebComponent } from '../../package/index.js'; +// import { createWebComponent } from '../../package/index.js'; +import { createWebComponent } from 'vue-web-component-wrapper'; + const pluginsWrapper = { install(GivenVue) { diff --git a/package.json b/package.json index 2acfd20..ee7e327 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-web-component-wrapper", - "version": "1.3.4", + "version": "1.4.0", "description": "A Vue 3 plugin that provides a web component wrapper with styles, seamlessly integrating with Vuex, Vue Router, Vue I18n, and supporting Tailwind CSS and Sass styles.", "repository": { "type": "git", diff --git a/package/dist/vue-web-component-wrapper.es.js b/package/dist/vue-web-component-wrapper.es.js index bc7fcf2..199aa14 100644 --- a/package/dist/vue-web-component-wrapper.es.js +++ b/package/dist/vue-web-component-wrapper.es.js @@ -11,16 +11,16 @@ const b = (e) => { function y(e) { return "on" + e.charAt(0).toUpperCase() + e.slice(1); } -const S = ({ +const h = ({ rootComponent: e, - plugins: i, + plugins: c, cssFrameworkStyles: l, VueDefineCustomElement: u, - h: o, + h: s, createApp: a, - getCurrentInstance: c, + getCurrentInstance: o, elementName: p, - disableRemoveStylesOnUnmount: m + disableRemoveStylesOnUnmount: _ }) => u({ styles: [l], props: { @@ -29,66 +29,72 @@ const S = ({ // v-model support }, emits: e == null ? void 0 : e.emits, - setup(w) { - var v; - const _ = [...(e == null ? void 0 : e.emits) || [], "update:modelValue"], n = a(); - n.component("app-root", e), n.mixin({ + setup(f) { + var m; + const v = [...(e == null ? void 0 : e.emits) || [], "update:modelValue"], r = a(); + if (r.component("app-root", e), e.provide) { + const t = typeof e.provide == "function" ? e.provide() : e.provide; + Object.keys(t).forEach((n) => { + r.provide(n, t[n]); + }); + } + r.mixin({ mounted() { - var r; - const t = (s) => { - s != null && s.length && (this.__style = document.createElement("style"), this.__style.innerText = s.join().replace(/\n/g, ""), b(this.$el).prepend(this.__style)); + var n; + const t = (i) => { + i != null && i.length && (this.__style = document.createElement("style"), this.__style.innerText = i.join().replace(/\n/g, ""), b(this.$el).prepend(this.__style)); }; - if (t((r = this.$) == null ? void 0 : r.type.styles), this.$options.components) - for (const s of Object.values(this.$options.components)) - t(s.styles); + if (t((n = this.$) == null ? void 0 : n.type.styles), this.$options.components) + for (const i of Object.values(this.$options.components)) + t(i.styles); }, unmounted() { var t; - m || (t = this.__style) == null || t.remove(); + _ || (t = this.__style) == null || t.remove(); } - }), n.use(i); - const d = c(); - if (Object.assign(d.appContext, n._context), Object.assign(d.provides, n._context.provides), process.env.NODE_ENV === "development" && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) { + }), r.use(c); + const d = o(); + if (Object.assign(d.appContext, r._context), Object.assign(d.provides, r._context.provides), process.env.NODE_ENV === "development" && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) { const t = document.querySelector(p); - n._container = t, n._instance = d; - const r = { + r._container = t, r._instance = d; + const n = { Comment: Symbol("v-cmt"), Fragment: Symbol("v-fgt"), Static: Symbol("v-stc"), Text: Symbol("v-txt") }; - window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("app:init", n, n.version, r), window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = n; + window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("app:init", r, r.version, n), window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = r; } - const O = _ == null ? void 0 : _.reduce((t, r) => { - const s = y(r); - return t[s] = (E) => { - d.emit(r, E); + const w = v == null ? void 0 : v.reduce((t, n) => { + const i = y(n); + return t[i] = (E) => { + d.emit(n, E); }, t; - }, {}), f = (v = e == null ? void 0 : e.namedSlots) == null ? void 0 : v.reduce((t, r) => (t[r] = () => o("slot", { name: r }), t), {}); - return () => o( + }, {}), O = (m = e == null ? void 0 : e.namedSlots) == null ? void 0 : m.reduce((t, n) => (t[n] = () => s("slot", { name: n }), t), {}); + return () => s( e, { - ...w, - ...O + ...f, + ...w }, { - default: () => o("slot"), - ...f + default: () => s("slot"), + ...O } ); } -}), h = ({ +}), S = ({ elementName: e, - rootComponent: i, + rootComponent: c, plugins: l, cssFrameworkStyles: u, - VueDefineCustomElement: o, + VueDefineCustomElement: s, h: a, - createApp: c, + createApp: o, getCurrentInstance: p, - disableRemoveStylesOnUnmount: m + disableRemoveStylesOnUnmount: _ }) => { - if (!i) { + if (!c) { console.warn("No root component provided. Please provide a root component to create a web component."); return; } @@ -96,7 +102,7 @@ const S = ({ console.warn("No element name provided. Please provide an element name to create a web component."); return; } - if (!o) { + if (!s) { console.warn( "No VueDefineCustomElement provided. Please provide a VueDefineCustomElement to create a web component." ); @@ -106,7 +112,7 @@ const S = ({ console.warn("No h provided. Please provide an h to create a web component."); return; } - if (!c) { + if (!o) { console.warn("No createApp provided. Please provide a createApp to create a web component."); return; } @@ -116,19 +122,19 @@ const S = ({ } customElements.define( e, - S({ - rootComponent: i, + h({ + rootComponent: c, plugins: l, cssFrameworkStyles: u, - VueDefineCustomElement: o, + VueDefineCustomElement: s, h: a, - createApp: c, + createApp: o, getCurrentInstance: p, elementName: e, - disableRemoveStylesOnUnmount: m + disableRemoveStylesOnUnmount: _ }) ); }; export { - h as createWebComponent + S as createWebComponent }; diff --git a/package/dist/vue-web-component-wrapper.umd.js b/package/dist/vue-web-component-wrapper.umd.js index a099cad..7fb0158 100644 --- a/package/dist/vue-web-component-wrapper.umd.js +++ b/package/dist/vue-web-component-wrapper.umd.js @@ -1 +1 @@ -(function(r,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(r=typeof globalThis<"u"?globalThis:r||self,a(r.Vue3WebComponentWrapper={}))})(this,function(r){"use strict";const a=e=>{for(;(e==null?void 0:e.nodeType)!==1;){if(!e.parentElement)throw new Error("No parent element found, the rootComponent must be wrapped in a HTML element (e.g. )");e=e.parentElement}return e};function w(e){return"on"+e.charAt(0).toUpperCase()+e.slice(1)}const O=({rootComponent:e,plugins:c,cssFrameworkStyles:m,VueDefineCustomElement:_,h:s,createApp:p,getCurrentInstance:d,elementName:u,disableRemoveStylesOnUnmount:f})=>_({styles:[m],props:{...e.props,modelValue:{type:[String,Number,Boolean,Array,Object]}},emits:e==null?void 0:e.emits,setup(E){var b;const v=[...(e==null?void 0:e.emits)||[],"update:modelValue"],n=p();n.component("app-root",e),n.mixin({mounted(){var o;const t=i=>{i!=null&&i.length&&(this.__style=document.createElement("style"),this.__style.innerText=i.join().replace(/\n/g,""),a(this.$el).prepend(this.__style))};if(t((o=this.$)==null?void 0:o.type.styles),this.$options.components)for(const i of Object.values(this.$options.components))t(i.styles)},unmounted(){var t;f||(t=this.__style)==null||t.remove()}}),n.use(c);const l=d();if(Object.assign(l.appContext,n._context),Object.assign(l.provides,n._context.provides),process.env.NODE_ENV==="development"&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__){const t=document.querySelector(u);n._container=t,n._instance=l;const o={Comment:Symbol("v-cmt"),Fragment:Symbol("v-fgt"),Static:Symbol("v-stc"),Text:Symbol("v-txt")};window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("app:init",n,n.version,o),window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue=n}const h=v==null?void 0:v.reduce((t,o)=>{const i=w(o);return t[i]=V=>{l.emit(o,V)},t},{}),S=(b=e==null?void 0:e.namedSlots)==null?void 0:b.reduce((t,o)=>(t[o]=()=>s("slot",{name:o}),t),{});return()=>s(e,{...E,...h},{default:()=>s("slot"),...S})}}),y=({elementName:e,rootComponent:c,plugins:m,cssFrameworkStyles:_,VueDefineCustomElement:s,h:p,createApp:d,getCurrentInstance:u,disableRemoveStylesOnUnmount:f})=>{if(!c){console.warn("No root component provided. Please provide a root component to create a web component.");return}if(!e){console.warn("No element name provided. Please provide an element name to create a web component.");return}if(!s){console.warn("No VueDefineCustomElement provided. Please provide a VueDefineCustomElement to create a web component.");return}if(!p){console.warn("No h provided. Please provide an h to create a web component.");return}if(!d){console.warn("No createApp provided. Please provide a createApp to create a web component.");return}if(!u){console.warn("No getCurrentInstance provided. Please provide a getCurrentInstance to create a web component.");return}customElements.define(e,O({rootComponent:c,plugins:m,cssFrameworkStyles:_,VueDefineCustomElement:s,h:p,createApp:d,getCurrentInstance:u,elementName:e,disableRemoveStylesOnUnmount:f}))};r.createWebComponent=y,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}); +(function(s,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(s=typeof globalThis<"u"?globalThis:s||self,c(s.Vue3WebComponentWrapper={}))})(this,function(s){"use strict";const c=e=>{for(;(e==null?void 0:e.nodeType)!==1;){if(!e.parentElement)throw new Error("No parent element found, the rootComponent must be wrapped in a HTML element (e.g. )");e=e.parentElement}return e};function O(e){return"on"+e.charAt(0).toUpperCase()+e.slice(1)}const w=({rootComponent:e,plugins:a,cssFrameworkStyles:f,VueDefineCustomElement:m,h:o,createApp:p,getCurrentInstance:d,elementName:u,disableRemoveStylesOnUnmount:v})=>m({styles:[f],props:{...e.props,modelValue:{type:[String,Number,Boolean,Array,Object]}},emits:e==null?void 0:e.emits,setup(E){var b;const _=[...(e==null?void 0:e.emits)||[],"update:modelValue"],i=p();if(i.component("app-root",e),e.provide){const t=typeof e.provide=="function"?e.provide():e.provide;Object.keys(t).forEach(n=>{i.provide(n,t[n])})}i.mixin({mounted(){var n;const t=r=>{r!=null&&r.length&&(this.__style=document.createElement("style"),this.__style.innerText=r.join().replace(/\n/g,""),c(this.$el).prepend(this.__style))};if(t((n=this.$)==null?void 0:n.type.styles),this.$options.components)for(const r of Object.values(this.$options.components))t(r.styles)},unmounted(){var t;v||(t=this.__style)==null||t.remove()}}),i.use(a);const l=d();if(Object.assign(l.appContext,i._context),Object.assign(l.provides,i._context.provides),process.env.NODE_ENV==="development"&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__){const t=document.querySelector(u);i._container=t,i._instance=l;const n={Comment:Symbol("v-cmt"),Fragment:Symbol("v-fgt"),Static:Symbol("v-stc"),Text:Symbol("v-txt")};window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("app:init",i,i.version,n),window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue=i}const h=_==null?void 0:_.reduce((t,n)=>{const r=O(n);return t[r]=V=>{l.emit(n,V)},t},{}),S=(b=e==null?void 0:e.namedSlots)==null?void 0:b.reduce((t,n)=>(t[n]=()=>o("slot",{name:n}),t),{});return()=>o(e,{...E,...h},{default:()=>o("slot"),...S})}}),y=({elementName:e,rootComponent:a,plugins:f,cssFrameworkStyles:m,VueDefineCustomElement:o,h:p,createApp:d,getCurrentInstance:u,disableRemoveStylesOnUnmount:v})=>{if(!a){console.warn("No root component provided. Please provide a root component to create a web component.");return}if(!e){console.warn("No element name provided. Please provide an element name to create a web component.");return}if(!o){console.warn("No VueDefineCustomElement provided. Please provide a VueDefineCustomElement to create a web component.");return}if(!p){console.warn("No h provided. Please provide an h to create a web component.");return}if(!d){console.warn("No createApp provided. Please provide a createApp to create a web component.");return}if(!u){console.warn("No getCurrentInstance provided. Please provide a getCurrentInstance to create a web component.");return}customElements.define(e,w({rootComponent:a,plugins:f,cssFrameworkStyles:m,VueDefineCustomElement:o,h:p,createApp:d,getCurrentInstance:u,elementName:e,disableRemoveStylesOnUnmount:v}))};s.createWebComponent=y,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}); diff --git a/package/package.json b/package/package.json index 7758e99..95e8c6e 100644 --- a/package/package.json +++ b/package/package.json @@ -1,6 +1,6 @@ { "name": "vue-web-component-wrapper", - "version": "1.3.4", + "version": "1.4.0", "description": "A Vue 3 plugin that provides a web component wrapper with styles, seamlessly integrating with Vuex, Vue Router, Vue I18n, and supporting Tailwind CSS and Sass styles.", "types": "types.d.ts", "repository": {