Include mixin and inherited props in compiled web component

.gitignore

@@ -1,2 +1,4 @@
 node_modules
 .DS_Store
+.idea/
+package-lock.json

abas/README2.md

@@ -0,0 +1,22 @@
+# This readme is only for abas
+
+1. Checkout this wrapper repo into the same level of the project what you want to convert. e.g. abas-elements
+2. To fix the icons styles
+   Put 'WcIconMixin.js' file into abas-elements/src/mixins
+   Add 'import WcIconMixin from '../mixins/WcIconMixin';' in Icon.vue
+   Add mixin 'mixins: [WcIconMixin],' in Icon.vue
+3. Adjust 'vue.config.js' in abas-elements project by adding alias for the '@vue/web-component-wrapper'
+
+    '''
+      configureWebpack: {
+        resolve: {
+          alias: {
+            '@vue/web-component-wrapper': path.join(__dirname, '../vue-web-component-wrapper'),
+          },
+        },
+      },
+    '''
+4. add dependency into package.json in block 'devDependencies'
+    '''
+    "eslint-plugin-vue-libs": "^2.1.0"
+    '''

abas/WcIconMixin.js

@@ -0,0 +1,28 @@
+import { dom } from '@fortawesome/fontawesome-svg-core'
+
+/**
+ * @mixin
+ */
+export default {
+  mounted () {
+    const id = 'fa-styles'
+    const shadowRoot = this.getShadowRoot(this)
+    if (shadowRoot && !shadowRoot.getElementById(id)) {
+      const faStyles = document.createElement('style')
+      faStyles.setAttribute('id', id)
+      faStyles.textContent = dom.css()
+      shadowRoot.appendChild(faStyles)
+    }
+  },
+  methods: {
+    getShadowRoot (obj) {
+      if (obj.$parent) {
+        if (obj.$parent.$options && obj.$parent.$options.shadowRoot) {
+          return obj.$parent.$options.shadowRoot
+        }
+        return this.getShadowRoot(obj.$parent)
+      }
+      return null
+    }
+  }
+}

dist/vue-wc-wrapper.global.js

@@ -98,6 +98,54 @@ function getAttributes (node) {
   return res
 }
 
+function spreadProps (component) {
+  const result = {};
+  spreadNext(result, component);
+  return result
+}
+
+function spreadNext (result, component) {
+  if (component.props) {
+    appendProps(result, component.props);
+  }
+
+  if (component.mixins) {
+    component.mixins.forEach(function (mixin) {
+      spreadNext(result, mixin);
+    });
+  }
+  if (component.extends) {
+    spreadNext(result, component.extends);
+  }
+}
+
+function appendProps (result, props) {
+  if (Array.isArray(props)) {
+    processArrayProps(result, props);
+  } else {
+    processObjectProps(result, props);
+  }
+}
+
+function processObjectProps (result, props) {
+  for (const key in props) {
+    const camelKey = camelize(key);
+    if (!(camelKey in result)) {
+      result[camelKey] = props[key];
+    }
+  }
+}
+function processArrayProps (result, props) {
+  props.forEach(function (prop) {
+    if (typeof prop === 'string') {
+      const camelKey = camelize(prop);
+      if (!(camelKey in result)) {
+        result[camelKey] = undefined;
+      }
+    }
+  });
+}
+
 function wrap (Vue, Component) {
   const isAsync = typeof Component === 'function' && !Component.cid;
   let isInitialized = false;
@@ -112,13 +160,13 @@ function wrap (Vue, Component) {
       ? Component.options
       : Component;
 
+    // spread props
+    options.props = spreadProps(options);
     // extract props info
-    const propsList = Array.isArray(options.props)
-      ? options.props
-      : Object.keys(options.props || {});
+    const propsList = Object.keys(options.props || {});
     hyphenatedPropsList = propsList.map(hyphenate);
     camelizedPropsList = propsList.map(camelize);
-    const originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {};
+    const originalPropsAsObject = options.props || {};
     camelizedPropsMap = camelizedPropsList.reduce((map, key, i) => {
       map[key] = originalPropsAsObject[propsList[i]];
       return map
@@ -169,13 +217,13 @@ function wrap (Vue, Component) {
 
   class CustomElement extends HTMLElement {
     constructor () {
-      super();
-      this.attachShadow({ mode: 'open' });
+      const self = super();
+      self.attachShadow({ mode: 'open' });
 
-      const wrapper = this._wrapper = new Vue({
+      const wrapper = self._wrapper = new Vue({
         name: 'shadow-root',
-        customElement: this,
-        shadowRoot: this.shadowRoot,
+        customElement: self,
+        shadowRoot: self.shadowRoot,
         data () {
           return {
             props: {},
@@ -195,20 +243,20 @@ function wrap (Vue, Component) {
         let hasChildrenChange = false;
         for (let i = 0; i < mutations.length; i++) {
           const m = mutations[i];
-          if (isInitialized && m.type === 'attributes' && m.target === this) {
-            syncAttribute(this, m.attributeName);
+          if (isInitialized && m.type === 'attributes' && m.target === self) {
+            syncAttribute(self, m.attributeName);
           } else {
             hasChildrenChange = true;
           }
         }
         if (hasChildrenChange) {
           wrapper.slotChildren = Object.freeze(toVNodes(
             wrapper.$createElement,
-            this.childNodes
+            self.childNodes
           ));
         }
       });
-      observer.observe(this, {
+      observer.observe(self, {
         childList: true,
         subtree: true,
         characterData: true,

dist/vue-wc-wrapper.js

@@ -95,6 +95,54 @@ function getAttributes (node) {
   return res
 }
 
+function spreadProps (component) {
+  const result = {};
+  spreadNext(result, component);
+  return result
+}
+
+function spreadNext (result, component) {
+  if (component.props) {
+    appendProps(result, component.props);
+  }
+
+  if (component.mixins) {
+    component.mixins.forEach(function (mixin) {
+      spreadNext(result, mixin);
+    });
+  }
+  if (component.extends) {
+    spreadNext(result, component.extends);
+  }
+}
+
+function appendProps (result, props) {
+  if (Array.isArray(props)) {
+    processArrayProps(result, props);
+  } else {
+    processObjectProps(result, props);
+  }
+}
+
+function processObjectProps (result, props) {
+  for (const key in props) {
+    const camelKey = camelize(key);
+    if (!(camelKey in result)) {
+      result[camelKey] = props[key];
+    }
+  }
+}
+function processArrayProps (result, props) {
+  props.forEach(function (prop) {
+    if (typeof prop === 'string') {
+      const camelKey = camelize(prop);
+      if (!(camelKey in result)) {
+        result[camelKey] = undefined;
+      }
+    }
+  });
+}
+
 function wrap (Vue, Component) {
   const isAsync = typeof Component === 'function' && !Component.cid;
   let isInitialized = false;
@@ -109,13 +157,13 @@ function wrap (Vue, Component) {
       ? Component.options
       : Component;
 
+    // spread props
+    options.props = spreadProps(options);
     // extract props info
-    const propsList = Array.isArray(options.props)
-      ? options.props
-      : Object.keys(options.props || {});
+    const propsList = Object.keys(options.props || {});
     hyphenatedPropsList = propsList.map(hyphenate);
     camelizedPropsList = propsList.map(camelize);
-    const originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {};
+    const originalPropsAsObject = options.props || {};
     camelizedPropsMap = camelizedPropsList.reduce((map, key, i) => {
       map[key] = originalPropsAsObject[propsList[i]];
       return map
@@ -166,13 +214,13 @@ function wrap (Vue, Component) {
 
   class CustomElement extends HTMLElement {
     constructor () {
-      super();
-      this.attachShadow({ mode: 'open' });
+      const self = super();
+      self.attachShadow({ mode: 'open' });
 
-      const wrapper = this._wrapper = new Vue({
+      const wrapper = self._wrapper = new Vue({
         name: 'shadow-root',
-        customElement: this,
-        shadowRoot: this.shadowRoot,
+        customElement: self,
+        shadowRoot: self.shadowRoot,
         data () {
           return {
             props: {},
@@ -192,20 +240,20 @@ function wrap (Vue, Component) {
         let hasChildrenChange = false;
         for (let i = 0; i < mutations.length; i++) {
           const m = mutations[i];
-          if (isInitialized && m.type === 'attributes' && m.target === this) {
-            syncAttribute(this, m.attributeName);
+          if (isInitialized && m.type === 'attributes' && m.target === self) {
+            syncAttribute(self, m.attributeName);
           } else {
             hasChildrenChange = true;
           }
         }
         if (hasChildrenChange) {
           wrapper.slotChildren = Object.freeze(toVNodes(
             wrapper.$createElement,
-            this.childNodes
+            self.childNodes
           ));
         }
       });
-      observer.observe(this, {
+      observer.observe(self, {
         childList: true,
         subtree: true,
         characterData: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/web-component-wrapper",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "wrap a vue component as a web component.",
   "main": "dist/vue-wc-wrapper.js",
   "unpkg": "dist/vue-wc-wrapper.global.js",

src/index.js

@@ -6,7 +6,8 @@ import {
   injectHook,
   getInitialProps,
   createCustomEvent,
-  convertAttributeValue
+  convertAttributeValue,
+  spreadProps
 } from './utils.js'
 
 export default function wrap (Vue, Component) {
@@ -23,13 +24,13 @@ export default function wrap (Vue, Component) {
       ? Component.options
       : Component
 
+    // spread props
+    options.props = spreadProps(options)
     // extract props info
-    const propsList = Array.isArray(options.props)
-      ? options.props
-      : Object.keys(options.props || {})
+    const propsList = Object.keys(options.props || {})
     hyphenatedPropsList = propsList.map(hyphenate)
     camelizedPropsList = propsList.map(camelize)
-    const originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {}
+    const originalPropsAsObject = options.props || {}
     camelizedPropsMap = camelizedPropsList.reduce((map, key, i) => {
       map[key] = originalPropsAsObject[propsList[i]]
       return map

src/utils.js

@@ -94,3 +94,52 @@ function getAttributes (node) {
   }
   return res
 }
+
+export function spreadProps (component) {
+  const result = {}
+  spreadNext(result, component)
+  return result
+}
+
+function spreadNext (result, component) {
+  if (component.props) {
+    appendProps(result, component.props)
+  }
+
+  if (component.mixins) {
+    component.mixins.forEach(function (mixin) {
+      spreadNext(result, mixin)
+    })
+  }
+  if (component.extends) {
+    spreadNext(result, component.extends)
+  }
+}
+
+function appendProps (result, props) {
+  if (Array.isArray(props)) {
+    processArrayProps(result, props)
+  } else {
+    processObjectProps(result, props)
+  }
+}
+
+function processObjectProps (result, props) {
+  for (const key in props) {
+    const camelKey = camelize(key)
+    if (!(camelKey in result)) {
+      result[camelKey] = props[key]
+    }
+  }
+}
+function processArrayProps (result, props) {
+  props.forEach(function (prop) {
+    if (typeof prop === 'string') {
+      const camelKey = camelize(prop)
+      if (!(camelKey in result)) {
+        result[camelKey] = undefined
+      }
+    }
+  })
+}
+