wrec 0.31.2 → 0.31.4

package/README.md

@@ -2,7 +2,7 @@
 
 <img alt="shipwreck" src="shipwreck.png" style="width: 256px">
 
-Wrec is a small library that greatly simplifies building web components.
+Wrec is a library that greatly simplifies building web components.
 It is described in detail, with several working examples,
 in [my blog](https://mvolkmann.github.io/blog/wrec/).
 Also, see my series of

package/package.json

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

package/scripts/lint.js

@@ -30,6 +30,8 @@
 // - invalid HTML element nesting in templates
 // - invalid ref attribute targets
 // - duplicate ref attribute values
+// - checkbox checked bindings that do not reference Boolean properties
+// - radio checked bindings that do not reference String properties
 
 import fs from 'node:fs';
 import path from 'node:path';
@@ -43,8 +45,9 @@ import {
 } from './ast-utils.js';
 
 const CSS_PROPERTY_RE = /([a-zA-Z-]+)\s*:\s*([^;}]+)/g;
-const REFS_TEST_RE = /this\.[a-zA-Z_$][\w$]*(\.[a-zA-Z_$][\w$]*)*/;
 const IDENTIFIER_RE = /^[A-Za-z_$][\w$]*$/;
+const PROPERTY_REF_RE = /^this\.([A-Za-z_$][\w$]*)$/;
+const REFS_TEST_RE = /this\.[a-zA-Z_$][\w$]*(\.[a-zA-Z_$][\w$]*)*/;
 const HTML_GLOBAL_ATTRIBUTES = new Set([
   'aria-label',
   'class',
@@ -142,13 +145,7 @@ const componentPropertyCache = new Map();
 
 // Analyzes code for invalid property access,
 // method calls, and arithmetic usage.
-function analyzeCodeNode(
-  codeNode,
-  checker,
-  classNode,
-  findings,
-  metadata
-) {
+function analyzeCodeNode(codeNode, checker, classNode, findings, metadata) {
   if (metadata.eventHandler && ts.isIdentifier(codeNode)) {
     if (!metadata.classMethods.has(codeNode.text)) {
       uniquePush(
@@ -315,9 +312,7 @@ function buildAugmentedSource(
         : `${classNode.name.text} & __WrecSupportedProps`;
     const rewrittenText = item.text.replace(/\bthis\b/g, WREC_REF_NAME);
     const helperBody =
-      item.shape === 'block'
-        ? rewrittenText
-        : `return (${rewrittenText});`;
+      item.shape === 'block' ? rewrittenText : `return (${rewrittenText});`;
     return `
 function __wrec_expr_${index}() {
   const ${WREC_REF_NAME} = null as unknown as ${targetType};
@@ -397,9 +392,11 @@ function collectMethodCodeItems(classNode) {
         context: 'instance',
         eventHandler: false,
         kind: 'method',
-        location: member.getSourceFile().getLineAndCharacterOfPosition(
-          member.name.getStart(member.getSourceFile())
-        ),
+        location: member
+          .getSourceFile()
+          .getLineAndCharacterOfPosition(
+            member.name.getStart(member.getSourceFile())
+          ),
         shape: 'block',
         text: member.body.getText()
       });
@@ -799,6 +796,7 @@ function formatReport(
     findings.duplicateProperties.length > 0 ||
     findings.reservedProperties.length > 0 ||
     findings.invalidUsedByReferences.length > 0 ||
+    findings.invalidCheckedBindings.length > 0 ||
     findings.invalidComputedProperties.length > 0 ||
     findings.invalidRefAttributes.length > 0 ||
     findings.invalidValuesConfigurations.length > 0 ||
@@ -868,6 +866,13 @@ function formatReport(
     );
   }
 
+  if (findings.invalidCheckedBindings.length > 0) {
+    lines.push('invalid checked bindings:');
+    findings.invalidCheckedBindings.forEach(message =>
+      lines.push(`  ${message}`)
+    );
+  }
+
   if (findings.invalidRefAttributes.length > 0) {
     lines.push('invalid ref attributes:');
     findings.invalidRefAttributes.forEach(message =>
@@ -1046,6 +1051,12 @@ function getComponentPropertyMaps(filePath, sourceText, seen = new Set()) {
   return propertyMaps;
 }
 
+// Returns the referenced property name for a single `this.prop` binding.
+function getPropertyNameInAttribute(attrValue) {
+  const match = attrValue.trim().match(PROPERTY_REF_RE);
+  return match ? match[1] : undefined;
+}
+
 // Returns trimmed source text for a TypeScript expression node.
 function getExpressionText(sourceFile, expression) {
   return expression.getText(sourceFile).trim();
@@ -1057,6 +1068,12 @@ function getHtmlTagName(node) {
   return typeof tagName === 'string' ? tagName.toLowerCase() : '';
 }
 
+// Returns the literal input type attribute value when one is present.
+function getInputType(node) {
+  const type = node.getAttribute('type');
+  return typeof type === 'string' ? type.toLowerCase() : undefined;
+}
+
 // Gets an object-literal property with the given key.
 function getObjectProperty(objectLiteral, key) {
   for (const property of objectLiteral.properties) {
@@ -1090,6 +1107,24 @@ function getParameterType(checker, parameterSymbol, location, isRestArgument) {
   return typeArguments[0] ?? parameterType;
 }
 
+// Returns the Wrec property config type name for a normalized type string.
+function getPropertyConfigTypeName(typeName) {
+  switch (typeName) {
+    case 'array':
+      return 'Array';
+    case 'boolean':
+      return 'Boolean';
+    case 'number':
+      return 'Number';
+    case 'object':
+      return 'Object';
+    case 'string':
+      return 'String';
+    default:
+      return typeName;
+  }
+}
+
 // Derives a readable property type string from syntax or the type checker.
 function getPropertyTypeText(checker, sourceFile, expression) {
   const typeText = getTypeSyntaxText(sourceFile, expression);
@@ -1295,6 +1330,7 @@ export function lintSource(filePath, sourceText, options = {}) {
     duplicateProperties,
     extraArguments: [],
     incompatibleArguments: [],
+    invalidCheckedBindings: [],
     invalidComputedProperties: [],
     invalidDefaultValues: [],
     invalidEventHandlers: [],
@@ -1377,19 +1413,13 @@ export function lintSource(filePath, sourceText, options = {}) {
 
   helperCodeNodes.forEach((codeNode, index) => {
     if (!codeNode) return;
-    analyzeCodeNode(
-      codeNode,
-      augmentedChecker,
-      augmentedClassNode,
-      findings,
-      {
-        classMethods: allMethods,
-        contextKeys: new Set(contextKeys),
-        checkContextCalls: allCodeItems[index]?.checkContextCalls ?? true,
-        eventHandler: allCodeItems[index]?.eventHandler ?? false,
-        sourceFile: augmentedSourceFile
-      }
-    );
+    analyzeCodeNode(codeNode, augmentedChecker, augmentedClassNode, findings, {
+      classMethods: allMethods,
+      contextKeys: new Set(contextKeys),
+      checkContextCalls: allCodeItems[index]?.checkContextCalls ?? true,
+      eventHandler: allCodeItems[index]?.eventHandler ?? false,
+      sourceFile: augmentedSourceFile
+    });
   });
 
   findings.duplicateProperties.sort();
@@ -1403,6 +1433,7 @@ export function lintSource(filePath, sourceText, options = {}) {
       a.methodName.localeCompare(b.methodName) ||
       a.parameterName.localeCompare(b.parameterName)
   );
+  findings.invalidCheckedBindings.sort();
   findings.invalidComputedProperties.sort();
   findings.invalidDefaultValues.sort();
   findings.invalidEventHandlers.sort();
@@ -1552,6 +1583,39 @@ function uniquePush(array, value) {
   if (!array.includes(value)) array.push(value);
 }
 
+// Validates checked bindings for checkbox and radio input elements.
+function validateCheckedBinding(
+  node,
+  attrName,
+  attrValue,
+  findings,
+  supportedProps
+) {
+  if (getHtmlTagName(node) !== 'input') return;
+
+  const [baseAttrName] = attrName.split(':');
+  if (baseAttrName !== 'checked') return;
+
+  const inputType = getInputType(node);
+  if (inputType !== 'checkbox' && inputType !== 'radio') return;
+
+  const propName = getPropertyNameInAttribute(attrValue);
+  if (!propName) return;
+
+  const propInfo = supportedProps.get(propName);
+  if (!propInfo) return;
+
+  const expectedType = inputType === 'checkbox' ? 'boolean' : 'string';
+  if (propInfo.typeText === expectedType) return;
+
+  const expectedTypeName = getPropertyConfigTypeName(expectedType);
+
+  findings.invalidCheckedBindings.push(
+    `input type="${inputType}" attribute "${attrName}" refers to ` +
+      `property "${propName}" whose type is not ${expectedTypeName}`
+  );
+}
+
 // Validates computed property references and method calls.
 function validateComputedProperty(
   propName,
@@ -1596,7 +1660,7 @@ function validateDefaultValue(checker, typeExpression, valueExpression) {
     if (
       !(valueType.flags & (ts.TypeFlags.String | ts.TypeFlags.StringLiteral))
     ) {
-      return {typeName: 'string', valueTypeName};
+      return {typeName: 'String', valueTypeName};
     }
     return undefined;
   }
@@ -1605,7 +1669,7 @@ function validateDefaultValue(checker, typeExpression, valueExpression) {
     if (
       !(valueType.flags & (ts.TypeFlags.Number | ts.TypeFlags.NumberLiteral))
     ) {
-      return {typeName: 'number', valueTypeName};
+      return {typeName: 'Number', valueTypeName};
     }
     return undefined;
   }
@@ -1614,14 +1678,14 @@ function validateDefaultValue(checker, typeExpression, valueExpression) {
     if (
       !(valueType.flags & (ts.TypeFlags.Boolean | ts.TypeFlags.BooleanLiteral))
     ) {
-      return {typeName: 'boolean', valueTypeName};
+      return {typeName: 'Boolean', valueTypeName};
     }
     return undefined;
   }
 
   if (typeKind === 'Array') {
     if (!checker.isArrayType(valueType) && !checker.isTupleType(valueType)) {
-      return {typeName: 'array', valueTypeName};
+      return {typeName: 'Array', valueTypeName};
     }
     return undefined;
   }
@@ -1632,7 +1696,7 @@ function validateDefaultValue(checker, typeExpression, valueExpression) {
       !checker.isArrayType(valueType) &&
       !checker.isTupleType(valueType);
     if (!isObjectLike) {
-      return {typeName: 'object', valueTypeName};
+      return {typeName: 'Object', valueTypeName};
     }
   }
 
@@ -1926,6 +1990,13 @@ function walkHtmlNode(
         findings,
         componentPropertyMaps
       );
+      validateCheckedBinding(
+        node,
+        attrName,
+        attrValue,
+        findings,
+        supportedProps
+      );
       validateHtmlAttribute(node, attrName, findings);
       validateValueBindingEvent(node, attrName, findings);
       if (attrName === 'ref') {