CgiFooter exported as a WebComponent

cgi-footer.js

(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 */

CgiFooter.vue

<template>
  <div :class="[classNames]">
    <a
      :href="productUrl"
    >
      {{ productName }}
    </a>
    &nbsp;
    &copy;
    &nbsp;
    {{ firstYear }}-{{ year }}
    &nbsp;
    <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>

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

1. Ensure you have the following installed within a working NodeJS installation.

   npm install -g yarn@latest
   yarn global add @vue/cli
   yarn global add @vue/cli-service-global

2. Create a Vue component as a file, e.g. CgiFooter.vue, paste contents from example here

3. Compile as a Web Component

   vue build --target wc --name cgi-footer CgiFooter.vue

   

4. 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

   <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
   <script src="https://rawgit.com/renoirb/a39069722261328ef23863b9f3df4af0/raw/cgi-footer.js"></script>
   <cgi-footer first-year="1976" product-name="ACME Corp Inc. FooBar Global Extra Pro Plus"></cgi-footer>

   

Enable in Firefox

1. Go to about:config
2. Set to true the following keys

• dom.webcomponents.shadowdom.enabled
• dom.webcomponents.customelements.enabled