Merge pull request #1 from jiliabas/spread-props

jiliabas · web-flow · commit c7fb69392ce5 · 2019-01-09T16:19:07.000+01:00
Spread props
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
 node_modules
 .DS_Store
+.idea/
+package-lock.json
diff --git a/dist/vue-wc-wrapper.global.js b/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,
diff --git a/dist/vue-wc-wrapper.js b/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,
diff --git a/package.json b/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",
diff --git a/src/index.js b/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
diff --git a/src/utils.js b/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
+      }
+    }
+  })
+}
+
diff --git a/test/fixtures/spreadedProperties.html b/test/fixtures/spreadedProperties.html
@@ -0,0 +1,48 @@
+<script src="../../node_modules/vue/dist/vue.js"></script>
+<script type="module">
+    import wrap from '../../src/index.js';
+
+    var mixin0 = {
+        props: {
+            m0: {
+                type: String,
+                default: 'm0'
+            }
+        }
+    };
+    var mixin1 = {
+        props: {
+            'm-1': {
+                type: String,
+                default: 'm1'
+            }
+        }
+    };
+    var mixin2 = {
+        props: ['m2a', 'm2b']
+    };
+
+    var Parent0 = {
+        mixins:[mixin0, mixin1, mixin2],
+        props: ['p0']
+    };
+    var Parent1 = {
+        extends: Parent0,
+        props: {
+            'p-1': {
+                type: String,
+                default: 'p1'
+            }
+        }
+    };
+
+    customElements.define('my-element', wrap(Vue, {
+        extends: Parent1,
+        props:['c1', 'c2'],
+        template: `<div> {{p0}} {{p1}} {{m0}} {{m1}} {{c1}}{{c2}}{{m2a}} {{m2b}}</div>`,
+    }));
+
+    window.el = document.querySelector('my-element');
+</script>
+
+<my-element ></my-element>
diff --git a/test/setup.js b/test/setup.js
@@ -20,6 +20,7 @@ module.exports = async function launchPage (name) {
 }
 
 beforeAll(async () => {
+  jest.setTimeout(10000)
   browser = await puppeteer.launch(puppeteerOptions)
   server = createServer({ root: process.cwd() })
   await new Promise((resolve, reject) => {
diff --git a/test/test.js b/test/test.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@vue/web-component-wrapper",`
`3`		`- "version": "1.2.0",`
	`3`	`+ "version": "1.3.0",`
`4`	`4`	`"description": "wrap a vue component as a web component.",`
`5`	`5`	`"main": "dist/vue-wc-wrapper.js",`
`6`	`6`	`"unpkg": "dist/vue-wc-wrapper.global.js",`
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ module.exports = async function launchPage (name) {`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`beforeAll(async () => {`
	`23`	`+ jest.setTimeout(10000)`
`23`	`24`	`browser = await puppeteer.launch(puppeteerOptions)`
`24`	`25`	`server = createServer({ root: process.cwd() })`
`25`	`26`	`await new Promise((resolve, reject) => {`