Instantly share code, notes, and snippets.
Last active
March 8, 2018 21:42
-
Save renoirb/a39069722261328ef23863b9f3df4af0 to your computer and use it in GitHub Desktop.
CgiFooter exported as a WebComponent
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)})({0:function(t,e,n){t.exports=n("Fdtz")},"2F3w":function(t,e){function n(t,e){var n=t[1]||"",o=t[3];if(!o)return n;if(e&&"function"===typeof btoa){var s=r(o),i=o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"});return[n].concat(i).concat([s]).join("\n")}return[n].join("\n")}function r(t){var e=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,"+e;return"/*# "+n+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var r=n(e,t);return e[2]?"@media "+e[2]+"{"+r+"}":r}).join("")},e.i=function(t,n){"string"===typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var s=this[o][0];"number"===typeof s&&(r[s]=!0)}for(o=0;o<t.length;o++){var i=t[o];"number"===typeof i[0]&&r[i[0]]||(n&&!i[2]?i[2]=n:n&&(i[2]="("+i[2]+") and ("+n+")"),e.push(i))}},e}},Fdtz:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n("lRwf"),o=n.n(r);const s=/-(\w)/g,i=t=>{return t.replace(s,(t,e)=>e?e.toUpperCase():"")},a=/\B([A-Z])/g,u=t=>{return t.replace(a,"-$1").toLowerCase()};function c(t){const e={};return t.forEach(t=>{e[t]=void 0}),e}function p(t,e,n){t[e]=[].concat(t[e]||[]),t[e].unshift(n)}function l(t,e){if(t){const n=t.$options[e]||[];n.forEach(e=>{e.call(t)})}}function f(t,e){return new CustomEvent(t,{bubbles:!1,cancelable:!1,detail:e})}const d=t=>/function Boolean/.test(String(t)),h=t=>/function Number/.test(String(t));function m(t,e,{type:n}={}){if(d(n))return"true"===t||"false"===t?"true"===t:""===t||t===e||null!=t;if(h(n)){const e=parseFloat(t,10);return isNaN(e)?t:e}return t}function b(t,e){const n=[];for(let r=0,o=e.length;r<o;r++)n.push(v(t,e[r]));return n}function v(t,e){if(3===e.nodeType)return e.data.trim()?e.data:null;if(1===e.nodeType){const n={attrs:_(e),domProps:{innerHTML:e.innerHTML}};return n.attrs.slot&&(n.slot=n.attrs.slot,delete n.attrs.slot),t(e.tagName,n)}return null}function _(t){const e={};for(let n=0,r=t.attributes.length;n<r;n++){const r=t.attributes[n];e[r.nodeName]=r.nodeValue}return e}function g(t,e){const n="function"===typeof e&&!e.cid;let r,o,s,a=!1;function d(t){if(a)return;const e="function"===typeof t?t.options:t,n=Array.isArray(e.props)?e.props:Object.keys(e.props||{});r=n.map(u),o=n.map(i);const c=Array.isArray(e.props)?{}:e.props||{};s=o.reduce((t,e,r)=>{return t[e]=c[n[r]],t},{}),p(e,"beforeCreate",function(){const t=this.$emit;this.$emit=((e,...n)=>{return this.$root.$options.customElement.dispatchEvent(f(e,n)),t.call(this,e,...n)})}),p(e,"created",function(){o.forEach(t=>{this.$root.props[t]=this[t]})}),o.forEach(t=>{Object.defineProperty(v.prototype,t,{get(){return this._wrapper.props[t]},set(e){this._wrapper.props[t]=e},enumerable:!1,configurable:!0})}),a=!0}function h(t,e){const n=i(e),r=t.hasAttribute(e)?t.getAttribute(e):void 0;t._wrapper.props[n]=m(r,e,s[n])}class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const n=this._wrapper=new t({name:"shadow-root",customElement:this,shadowRoot:this.shadowRoot,data(){return{props:{},slotChildren:[]}},render(t){return t(e,{ref:"inner",props:this.props},this.slotChildren)}}),r=new MutationObserver(t=>{let e=!1;for(let n=0;n<t.length;n++){const r=t[n];a&&"attributes"===r.type&&r.target===this?h(this,r.attributeName):e=!0}e&&(n.slotChildren=Object.freeze(b(n.$createElement,this.childNodes)))});r.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0})}get vueComponent(){return this._wrapper.$refs.inner}connectedCallback(){const t=this._wrapper;if(t._isMounted)l(this.vueComponent,"activated");else{const n=()=>{t.props=c(o),r.forEach(t=>{h(this,t)})};a?n():e().then(t=>{(t.__esModule||"Module"===t[Symbol.toStringTag])&&(t=t.default),d(t),n()}),t.slotChildren=Object.freeze(b(t.$createElement,this.childNodes)),t.$mount(),this.shadowRoot.appendChild(t.$el)}}disconnectedCallback(){l(this.vueComponent,"deactivated")}}return n||d(e),v}var y=g;n("2F3w");function w(t,e,n,r,o,s,i,a){t=t||{};var u=typeof t.default;"object"!==u&&"function"!==u||(t=t.default);var c,p="function"===typeof t?t.options:t;if(e&&(p.render=e,p.staticRenderFns=n,p._compiled=!0),r&&(p.functional=!0),s&&(p._scopeId=s),i?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},p._ssrRegister=c):o&&(c=a?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(p.functional){p._injectStyles=c;var l=p.render;p.render=function(t,e){return c.call(e),l(t,e)}}else{var f=p.beforeCreate;p.beforeCreate=f?[].concat(f,c):[c]}return{exports:t,options:p}}var C=["grey","lighten-4","elevation-4"],$={props:{productName:{type:String,default:"CGI Unify360"},productUrl:{type:String,default:"https://www.cgi.com/en/solutions/cgi-unify360"},publisherName:{type:String,default:"CGI"},publisherUrl:{type:String,default:"https://www.cgi.com/"},firstYear:{type:Number,default:2016}},data:function(){return{classNames:C}},computed:{year:function(){return(new Date).getFullYear()}}},E=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:[t.classNames]},[n("a",{attrs:{href:t.productUrl,title:"Example"}},[t._v("\n "+t._s(t.productName)+"\n ")]),t._v("\n \n ©\n \n "+t._s(t.firstYear)+"-"+t._s(t.year)+"\n \n "),n("a",{attrs:{href:t.publisherUrl}},[t._v("\n "+t._s(t.publisherName)+"\n ")])])},N=[],S=!1,j=null,x=null,R=null,O=w($,E,N,S,j,x,R,!0),U=O.exports;(()=>{let t;(t=document.currentScript)&&(t=t.src.match(/(.+\/)[^/]+\.js$/))&&(n.p=t[1])})(),window.customElements.define("cgi-footer",y(o.a,U))},lRwf:function(t,e){t.exports=Vue}}); | |
/* 20180308 16:23 */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div :class="[classNames]"> | |
<a | |
:href="productUrl" | |
> | |
{{ productName }} | |
</a> | |
| |
© | |
| |
{{ firstYear }}-{{ year }} | |
| |
<a | |
:href="publisherUrl" | |
> | |
{{ publisherName }} | |
</a> | |
</div> | |
</template> | |
<script> | |
const classNames = ['grey', 'lighten-4', 'elevation-4']; | |
// @vue/component | |
export default { | |
props: { | |
productName: { | |
type: String, | |
default: 'CGI Unify360', | |
}, | |
productUrl: { | |
type: String, | |
default: 'https://www.cgi.com/en/solutions/cgi-unify360', | |
}, | |
publisherName: { | |
type: String, | |
default: 'CGI', | |
}, | |
publisherUrl: { | |
type: String, | |
default: 'https://www.cgi.com/', | |
}, | |
firstYear: { | |
type: Number, | |
default: 2016, | |
}, | |
}, | |
data: () => ({ | |
classNames, | |
}), | |
computed: { | |
year: () => new Date().getFullYear(), | |
}, | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Introduction
This is a prototype to show off how we could create HTML custom elements using Vue.js
Parts of this demo has been inspired by Evan You - State of VueJS 2018 around 21m
Reproduce
Ensure you have the following installed within a working NodeJS installation.
Create a Vue component as a file, e.g.
CgiFooter.vue
, paste contents from example hereCompile as a Web Component
vue build --target wc --name cgi-footer CgiFooter.vue
Use it somewhere, for example in JSBin, See in action NOTE that this currently works only in Google Chrome, because Web Components and Custom Elements aren't native everywhere, yet
Enable in Firefox
about:config
true
the following keysdom.webcomponents.shadowdom.enabled
dom.webcomponents.customelements.enabled