wrec 0.36.1 → 0.36.3

package/dist/wrec-ssr.d.ts

@@ -1,5 +1,3 @@
-declare type AnyClass = new (...args: any[]) => any;
-
 declare type ChangeCallback = (change: StateChange) => void;
 
 export declare function createElement(name: string, attributes: StringToString, innerHTML: string): HTMLElement;
@@ -19,12 +17,14 @@ declare type PropertyConfig<T = any> = {
     computed?: string;
     dispatch?: boolean;
     required?: boolean;
-    type: AnyClass;
+    type: PropertyType;
     usedBy?: string | string[];
     value?: T;
     values?: T extends string ? string[] : never;
 };
 
+declare type PropertyType = typeof Array | typeof Boolean | typeof HTMLElementBase | typeof Number | typeof Object | typeof String;
+
 declare type StateChange = {
     state: WrecState;
     statePath: string;

package/dist/wrec.d.ts

@@ -1,5 +1,3 @@
-declare type AnyClass = new (...args: any[]) => any;
-
 declare type ChangeCallback = (change: StateChange) => void;
 
 export declare function createElement(name: string, attributes: StringToString, innerHTML: string): HTMLElement;
@@ -19,12 +17,14 @@ declare type PropertyConfig<T = any> = {
     computed?: string;
     dispatch?: boolean;
     required?: boolean;
-    type: AnyClass;
+    type: PropertyType;
     usedBy?: string | string[];
     value?: T;
     values?: T extends string ? string[] : never;
 };
 
+declare type PropertyType = typeof Array | typeof Boolean | typeof HTMLElementBase | typeof Number | typeof Object | typeof String;
+
 declare type StateChange = {
     state: WrecState;
     statePath: string;

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.1",
+  "version": "0.36.3",
   "license": "MIT",
   "repository": {
     "type": "git",

package/scripts/declare.js

@@ -41,7 +41,9 @@ function analyzeSourceFile(sourceFile) {
       if (!ts.isPropertyAssignment(property)) continue;
 
       const propName = getMemberName(property);
-      if (!propName || !/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(propName)) continue;
+      if (!propName || !/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(propName)) {
+        continue;
+      }
 
       const declareType = getDeclareType(property.initializer);
       if (!declareType) continue;

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);
@@ -1180,6 +1187,15 @@ function getPropertyConfigTypeName(typeName) {
   }
 }
 
+// Gets the base constructor name from a generic-looking type expression.
+function getPropertyTypeGenericBaseName(sourceFile, expression) {
+  if (!expression) return undefined;
+
+  const text = expression.getText(sourceFile).trim();
+  const match = text.match(/^([A-Za-z_$][\w$]*)\s*<[\s\S]+>$/);
+  return match?.[1];
+}
+
 // Derives a readable property type string from syntax or the type checker.
 function getPropertyTypeText(checker, sourceFile, expression) {
   const typeText = getTypeSyntaxText(sourceFile, expression);
@@ -1665,10 +1681,17 @@ function typeExpressionMatchesDeclaredType(
   declaredTypeNode
 ) {
   const declaredType = checker.getTypeFromTypeNode(declaredTypeNode);
+  const typeKind = typeExpressionKind(typeExpression);
 
-  if (typeExpressionKind(typeExpression) === 'Object') {
+  if (typeKind === 'Object') {
     return isNonArrayObjectLikeType(checker, declaredType);
   }
+  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);
@@ -1833,6 +1856,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;
 }
 
@@ -1982,12 +2012,22 @@ function validatePropertyConfigs(
       findings.missingTypeProperties.push(
         `property "${propName}" does not specify a type`
       );
+    } else if (
+      SUPPORTED_PROPERTY_TYPE_NAMES.has(
+        getPropertyTypeGenericBaseName(sourceFile, typeExpression)
+      )
+    ) {
+      findings.invalidTypeProperties.push(
+        `property "${propName}" type cannot use generic syntax like ` +
+          `"${typeExpression.getText(sourceFile).trim()}"; use ` +
+          `"${getPropertyTypeGenericBaseName(sourceFile, typeExpression)}" instead`
+      );
     } else if (
       !SUPPORTED_PROPERTY_TYPE_NAMES.has(typeExpressionKind(typeExpression))
     ) {
       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 (