wrec 0.36.2 → 0.36.4

package/dist/wrec-ssr.d.ts

@@ -23,7 +23,7 @@ declare type PropertyConfig<T = any> = {
     values?: T extends string ? string[] : never;
 };
 
-declare type PropertyType = typeof Array | typeof Boolean | typeof Number | typeof Object | typeof String;
+declare type PropertyType = typeof Array | typeof Boolean | typeof HTMLElementBase | typeof Number | typeof Object | typeof String;
 
 declare type StateChange = {
     state: WrecState;

package/dist/wrec.d.ts

@@ -23,7 +23,7 @@ declare type PropertyConfig<T = any> = {
     values?: T extends string ? string[] : never;
 };
 
-declare type PropertyType = typeof Array | typeof Boolean | typeof Number | typeof Object | typeof String;
+declare type PropertyType = typeof Array | typeof Boolean | typeof HTMLElementBase | typeof Number | typeof Object | typeof String;
 
 declare type StateChange = {
     state: WrecState;

package/package.json

@@ -2,7 +2,7 @@
   "name": "wrec",
   "description": "a library that greatly simplifies building web components",
   "author": "R. Mark Volkmann",
-  "version": "0.36.2",
+  "version": "0.36.4",
   "license": "MIT",
   "repository": {
     "type": "git",

package/scripts/lint.js

@@ -122,6 +122,7 @@ const RESERVED_PROPERTY_NAMES = new Set(['class', 'style']);
 const SUPPORTED_PROPERTY_TYPE_NAMES = new Set([
   'Array',
   'Boolean',
+  'HTMLElement',
   'Number',
   'Object',
   'String'
@@ -1101,6 +1102,12 @@ function getComponentPropertyMaps(filePath, sourceText, seen = new Set()) {
   return propertyMaps;
 }
 
+// Returns the constructed instance type for a constructor expression.
+function getConstructedType(checker, expression) {
+  const constructorType = checker.getTypeAtLocation(expression);
+  return constructorType.getConstructSignatures()[0]?.getReturnType();
+}
+
 // Returns the referenced property name for a single `this.prop` binding.
 function getPropertyNameInAttribute(attrValue) {
   const match = attrValue.trim().match(PROPERTY_REF_RE);
@@ -1673,12 +1680,44 @@ function typeExpressionMatchesDeclaredType(
   typeExpression,
   declaredTypeNode
 ) {
+  const typeKind = typeExpressionKind(typeExpression);
   const declaredType = checker.getTypeFromTypeNode(declaredTypeNode);
 
-  if (typeExpressionKind(typeExpression) === 'Object') {
+  if (typeKind === 'Boolean') {
+    return checker.isTypeAssignableTo(checker.getBooleanType(), declaredType);
+  }
+
+  if (typeKind === 'Number') {
+    return checker.isTypeAssignableTo(checker.getNumberType(), declaredType);
+  }
+
+  if (typeKind === 'String') {
+    return checker.isTypeAssignableTo(checker.getStringType(), declaredType);
+  }
+
+  if (typeKind === 'Object') {
     return isNonArrayObjectLikeType(checker, declaredType);
   }
 
+  if (typeKind === 'Array') {
+    const declaredTypes = declaredType.isUnion()
+      ? declaredType.types
+      : [declaredType];
+    return declaredTypes.every(
+      type =>
+        Boolean(type.flags & (ts.TypeFlags.Any | ts.TypeFlags.Unknown)) ||
+        checker.isArrayType(type) ||
+        checker.isTupleType(type)
+    );
+  }
+
+  if (typeKind === 'HTMLElement') {
+    const elementType = getConstructedType(checker, typeExpression);
+    return elementType
+      ? checker.isTypeAssignableTo(elementType, declaredType)
+      : false;
+  }
+
   const runtimeType = checker.getTypeAtLocation(typeExpression);
   return checker.isTypeAssignableTo(runtimeType, declaredType);
 }
@@ -1842,6 +1881,13 @@ function validateDefaultValue(checker, typeExpression, valueExpression) {
     }
   }
 
+  if (typeKind === 'HTMLElement') {
+    const elementType = getConstructedType(checker, typeExpression);
+    if (!elementType || !checker.isTypeAssignableTo(valueType, elementType)) {
+      return {typeName: 'HTMLElement', valueTypeName};
+    }
+  }
+
   return undefined;
 }
 
@@ -2006,7 +2052,7 @@ function validatePropertyConfigs(
     ) {
       findings.invalidTypeProperties.push(
         `property "${propName}" type must be one of ` +
-          'Boolean, Number, String, Object, or Array'
+          'Boolean, Number, String, Object, Array, or HTMLElement'
       );
     } else if (declaredTypeNode) {
       if (