wrec 0.35.0 → 0.35.2

package/package.json

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

package/scripts/lint.js

@@ -451,6 +451,21 @@ function collectSupportedPropertyNames(classNode) {
   return supportedProps;
 }
 
+// Collects declared TypeScript property types from a component class.
+function collectDeclaredPropertyTypes(classNode) {
+  const declaredProps = new Map();
+
+  for (const member of classNode.members) {
+    if (!isDeclarePropertyDeclaration(member)) continue;
+
+    const propName = getMemberName(member);
+    if (!propName || !member.type) continue;
+    declaredProps.set(propName, member.type);
+  }
+
+  return declaredProps;
+}
+
 // Validates that useState mappings point at existing component properties.
 function collectUseStateMapErrors(classNode, supportedProps, findings) {
   // Walks the class body looking for useState calls with mapping objects.
@@ -815,6 +830,7 @@ function formatReport(
     findings.duplicateProperties.length > 0 ||
     findings.extraArguments.length > 0 ||
     findings.incompatibleArguments.length > 0 ||
+    findings.incompatibleDeclareTypes.length > 0 ||
     findings.invalidCheckedBindings.length > 0 ||
     findings.invalidComputedProperties.length > 0 ||
     findings.invalidDefaultValues.length > 0 ||
@@ -889,6 +905,13 @@ function formatReport(
     });
   }
 
+  if (findings.incompatibleDeclareTypes.length > 0) {
+    lines.push('incompatible declare types:');
+    findings.incompatibleDeclareTypes.forEach(message =>
+      lines.push(`  ${message}`)
+    );
+  }
+
   if (findings.invalidCheckedBindings.length > 0) {
     lines.push('invalid checked bindings:');
     findings.invalidCheckedBindings.forEach(message =>
@@ -1166,6 +1189,11 @@ function getPropertyTypeText(checker, sourceFile, expression) {
   return checker.typeToString(type);
 }
 
+// Gets the TypeScript type text for a declared property member.
+function getPropertyTypeTextFromNode(sourceFile, typeNode) {
+  return typeNode.getText(sourceFile).trim();
+}
+
 // Returns an array of string literal values from a property when possible.
 function getStringArrayLiteral(property) {
   if (!property || !ts.isPropertyAssignment(property)) return undefined;
@@ -1275,6 +1303,17 @@ function isCallCallee(node) {
   return ts.isCallExpression(node.parent) && node.parent.expression === node;
 }
 
+// Returns whether a class member is a declared property declaration.
+function isDeclarePropertyDeclaration(member) {
+  return (
+    ts.isPropertyDeclaration(member) &&
+    ts.canHaveModifiers(member) &&
+    ts
+      .getModifiers(member)
+      ?.some(mod => mod.kind === ts.SyntaxKind.DeclareKeyword)
+  );
+}
+
 // Returns whether a reference refers to a getter method.
 function isGetterReference(reference) {
   return reference.startsWith(GETTER_PREFIX);
@@ -1362,12 +1401,14 @@ export function lintSource(filePath, sourceText, options = {}) {
     propertyEntries,
     reservedProperties
   } = extractProperties(sourceFile, checker, classNode);
+  const declaredPropertyTypes = collectDeclaredPropertyTypes(classNode);
   const getterNames = collectGetterNames(classNode);
   const allMethods = collectClassMethods(classNode);
   const findings = {
     duplicateProperties,
     extraArguments: [],
     incompatibleArguments: [],
+    incompatibleDeclareTypes: [],
     invalidCheckedBindings: [],
     invalidComputedProperties: [],
     invalidDefaultValues: [],
@@ -1430,6 +1471,8 @@ export function lintSource(filePath, sourceText, options = {}) {
 
   validatePropertyConfigs(
     checker,
+    sourceFile,
+    declaredPropertyTypes,
     supportedProps,
     propertyEntries,
     getterNames,
@@ -1473,6 +1516,7 @@ export function lintSource(filePath, sourceText, options = {}) {
       a.methodName.localeCompare(b.methodName) ||
       a.parameterName.localeCompare(b.parameterName)
   );
+  findings.incompatibleDeclareTypes.sort();
   findings.invalidCheckedBindings.sort();
   findings.invalidComputedProperties.sort();
   findings.invalidDefaultValues.sort();
@@ -1558,6 +1602,23 @@ function requiresContextFunction(symbol, sourceFile) {
   });
 }
 
+// Returns whether a type represents an object-like value other than an array.
+function isNonArrayObjectLikeType(checker, type) {
+  if (type.isUnion()) {
+    return type.types.every(member => isNonArrayObjectLikeType(checker, member));
+  }
+
+  if (type.isIntersection()) {
+    return type.types.every(member => isNonArrayObjectLikeType(checker, member));
+  }
+
+  return (
+    Boolean(type.flags & (ts.TypeFlags.Object | ts.TypeFlags.NonPrimitive)) &&
+    !checker.isArrayType(type) &&
+    !checker.isTupleType(type)
+  );
+}
+
 // Resolves a relative import path to an existing source file.
 function resolveImportPath(baseDir, importPath) {
   if (!importPath.startsWith('.')) return undefined;
@@ -1578,6 +1639,22 @@ function toUserFacingExpression(text) {
   return text.replaceAll(WREC_REF_NAME, 'this');
 }
 
+// Returns whether a static property config type is compatible with a declare type.
+function typeExpressionMatchesDeclaredType(
+  checker,
+  typeExpression,
+  declaredTypeNode
+) {
+  const declaredType = checker.getTypeFromTypeNode(declaredTypeNode);
+
+  if (typeExpressionKind(typeExpression) === 'Object') {
+    return isNonArrayObjectLikeType(checker, declaredType);
+  }
+
+  const runtimeType = checker.getTypeAtLocation(typeExpression);
+  return checker.isTypeAssignableTo(runtimeType, declaredType);
+}
+
 // Classifies a constructor-based type expression by its identifier name.
 function typeExpressionKind(expression) {
   if (!expression) return undefined;
@@ -1732,11 +1809,7 @@ function validateDefaultValue(checker, typeExpression, valueExpression) {
   }
 
   if (typeKind === 'Object') {
-    const isObjectLike =
-      Boolean(valueType.flags & ts.TypeFlags.Object) &&
-      !checker.isArrayType(valueType) &&
-      !checker.isTupleType(valueType);
-    if (!isObjectLike) {
+    if (!isNonArrayObjectLikeType(checker, valueType)) {
       return {typeName: 'Object', valueTypeName};
     }
   }
@@ -1865,6 +1938,8 @@ function validateHtmlNesting(node, findings) {
 // Validates all configured component property metadata entries.
 function validatePropertyConfigs(
   checker,
+  sourceFile,
+  declaredPropertyTypes,
   supportedProps,
   propertyEntries,
   getterNames,
@@ -1872,9 +1947,10 @@ function validatePropertyConfigs(
   findings
 ) {
   for (const {config, propName} of propertyEntries) {
+    const computedProp = getObjectProperty(config, 'computed');
+    const declaredTypeNode = declaredPropertyTypes.get(propName);
     const typeProp = getObjectProperty(config, 'type');
     const usedByProp = getObjectProperty(config, 'usedBy');
-    const computedProp = getObjectProperty(config, 'computed');
     const valueProp = getObjectProperty(config, 'value');
     const valuesProp = getObjectProperty(config, 'values');
 
@@ -1894,6 +1970,15 @@ function validatePropertyConfigs(
         `property "${propName}" type must be one of ` +
           'Boolean, Number, String, Object, or Array'
       );
+    } else if (declaredTypeNode) {
+      if (!typeExpressionMatchesDeclaredType(checker, typeExpression, declaredTypeNode)) {
+        findings.incompatibleDeclareTypes.push(
+          `property "${propName}" declare type ` +
+            `"${getPropertyTypeTextFromNode(sourceFile, declaredTypeNode)}" ` +
+            `is not compatible with static properties type ` +
+            `"${getPropertyConfigTypeName(typeExpressionKind(typeExpression))}"`
+        );
+      }
     }
 
     if (usedByProp && ts.isPropertyAssignment(usedByProp)) {