fix(#140): getPropsData() sets propsData for all props regardless of attribute existence. collides with 'required' validation

Author: karol-f

demo/components/DemoBasic-component.vue

@@ -34,7 +34,9 @@
 <script>
   export default {
     props: {
-      prop1: {},
+      prop1: {
+        required: true
+      },
       prop2: {},
       prop3: {},
       stringProp: {

src/utils/createVueInstance.js

@@ -46,7 +46,7 @@ export default function createVueInstance(element, Vue, componentDefinition, pro
           reactiveProps() {
             const reactivePropsList = {};
             props.camelCase.forEach((prop) => {
-              reactivePropsList[prop] = this[prop];
+              typeof this[prop] !== 'undefined' && (reactivePropsList[prop] = this[prop]);
             });
 
             return reactivePropsList;

src/utils/props.js

@@ -14,7 +14,7 @@ export function convertAttributeValue(value, overrideType) {
   const valueParsed = parseFloat(propsValue, 10);
   const isNumber = !isNaN(valueParsed) && isFinite(propsValue) && (typeof propsValue === 'string' && !propsValue.match(/^0+[^.]\d*$/g));
 
-  if (overrideType && overrideType !== Boolean) {
+  if (overrideType && overrideType !== Boolean && typeof propsValue !== overrideType) { // eslint-disable-line valid-typeof
     propsValue = overrideType(value);
   } else if (isBoolean || overrideType === Boolean) {
     propsValue = propsValue === '' ? true : propsValue === 'true';
@@ -122,9 +122,12 @@ export function getPropsData(element, componentDefinition, props) {
       type = props.types[propCamelCase];
     }
 
-    propsData[propCamelCase] = propValue instanceof Attr
-      ? convertAttributeValue(propValue.value, type)
-      : propValue;
+    // ensure propsData is only set if `propsValue` exists.
+    if (propValue instanceof Attr) {
+      propsData[propCamelCase] = convertAttributeValue(propValue.value, type);
+    } else if (typeof propValue !== 'undefined') {
+      propsData[propCamelCase] = propValue;
+    }
   });
 
   return propsData;