wrec 0.32.0 → 0.32.1

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

package/scripts/lint.js

@@ -119,6 +119,7 @@ const THIS_CALL_RE = /this\.([A-Za-z_$][\w$]*)\s*\(/g;
 const THIS_REF_RE = /this\.([A-Za-z_$][\w$]*)(\.[A-Za-z_$][\w$]*)*/g;
 const PLACEHOLDER_PREFIX = '__WREC_PLACEHOLDER__';
 const RESERVED_PROPERTY_NAMES = new Set(['class', 'style']);
+const GETTER_PREFIX = 'get ';
 const SUPPORTED_EVENT_NAMES = new Set([
   'blur',
   'change',
@@ -348,6 +349,17 @@ function collectClassMethods(classNode) {
   return methods;
 }
 
+// Collects all getter names defined in a component class.
+function collectGetterNames(classNode) {
+  const getters = new Set();
+  for (const member of classNode.members) {
+    if (!ts.isGetAccessorDeclaration(member)) continue;
+    const name = getMemberName(member);
+    if (name) getters.add(name);
+  }
+  return getters;
+}
+
 // Finds the synthetic `__wrec_expr_*` helper functions that were added by
 // `buildAugmentedSource` and returns their bodies in index order.
 // This gives the linter a stable list of typed code nodes
@@ -1062,6 +1074,11 @@ function getExpressionText(sourceFile, expression) {
   return expression.getText(sourceFile).trim();
 }
 
+// Returns the name from a getter reference.
+function getGetterName(reference) {
+  return reference.slice(GETTER_PREFIX.length).trim();
+}
+
 // Returns a lowercased HTML tag name for a parsed HTML node.
 function getHtmlTagName(node) {
   const tagName = node.rawTagName || node.tagName;
@@ -1243,6 +1260,11 @@ function isCallCallee(node) {
   return ts.isCallExpression(node.parent) && node.parent.expression === node;
 }
 
+// Returns whether a reference refers to a getter method.
+function isGetterReference(reference) {
+  return reference.startsWith(GETTER_PREFIX);
+}
+
 // Returns whether a declaration represents an imported binding.
 function isImportLikeDeclaration(node) {
   return (
@@ -1325,6 +1347,7 @@ export function lintSource(filePath, sourceText, options = {}) {
     propertyEntries,
     reservedProperties
   } = extractProperties(sourceFile, checker, classNode);
+  const getterNames = collectGetterNames(classNode);
   const allMethods = collectClassMethods(classNode);
   const findings = {
     duplicateProperties,
@@ -1393,6 +1416,7 @@ export function lintSource(filePath, sourceText, options = {}) {
     checker,
     supportedProps,
     propertyEntries,
+    getterNames,
     allMethods,
     findings
   );
@@ -1826,6 +1850,7 @@ function validatePropertyConfigs(
   checker,
   supportedProps,
   propertyEntries,
+  getterNames,
   classMethods,
   findings
 ) {
@@ -1852,6 +1877,16 @@ function validatePropertyConfigs(
 
       if (methods) {
         for (const methodName of methods) {
+          if (isGetterReference(methodName)) {
+            const getterName = getGetterName(methodName);
+            if (getterNames.has(getterName)) continue;
+            findings.invalidUsedByReferences.push(
+              `property "${propName}" usedBy references ` +
+                `missing getter "${getterName}"`
+            );
+            continue;
+          }
+
           if (!classMethods.has(methodName)) {
             findings.invalidUsedByReferences.push(
               `property "${propName}" usedBy references ` +

package/scripts/used-by.js

@@ -28,6 +28,10 @@ import {
 } from './ast-utils.js';
 
 const cwd = process.cwd();
+const CALL_RE = /this\.([A-Za-z_$][A-Za-z0-9_$]*)\s*\(/g;
+const REFS_RE =
+  /this\.([A-Za-z_$][A-Za-z0-9_$]*)(\.[A-Za-z_$][A-Za-z0-9_$]*)*/g;
+const GETTER_PREFIX = 'get ';
 
 // Records property names introduced by
 // an identifier or object binding pattern.
@@ -264,17 +268,17 @@ function buildConfigText(sourceFile, member, methodNames, quote) {
   return `{${openSpacing}${propertyStrings.join(', ')}${closeSpacing}}`;
 }
 
-// Walks a method body to collect component property reads
-// and method calls made through `this`.
+// Walks a method or accessor body to collect component property reads
+// and dependency targets reached through `this`.
 // This is only called by getMethodUsages.
-function collectMethodBodyUsage(node, props, calledMethods) {
+function collectMethodBodyUsage(node, getterNames, props, calledMethods) {
   if (
     ts.isPropertyAccessExpression(node) &&
     node.expression.kind === ts.SyntaxKind.ThisKeyword
   ) {
     // Handles direct property access like `this.foo`
     // and records method calls like `this.foo()`.
-    recordThisAccess(props, calledMethods, node, node.name.text);
+    recordThisAccess(props, calledMethods, getterNames, node, node.name.text);
   } else if (
     ts.isElementAccessExpression(node) &&
     node.expression.kind === ts.SyntaxKind.ThisKeyword &&
@@ -283,7 +287,13 @@ function collectMethodBodyUsage(node, props, calledMethods) {
   ) {
     // Handles string-based element access like `this['foo']`
     // and records method calls like `this['foo']()`.
-    recordThisAccess(props, calledMethods, node, node.argumentExpression.text);
+    recordThisAccess(
+      props,
+      calledMethods,
+      getterNames,
+      node,
+      node.argumentExpression.text
+    );
   } else if (
     ts.isVariableDeclaration(node) &&
     node.initializer &&
@@ -315,7 +325,7 @@ function collectMethodBodyUsage(node, props, calledMethods) {
   }
 
   ts.forEachChild(node, child =>
-    collectMethodBodyUsage(child, props, calledMethods)
+    collectMethodBodyUsage(child, getterNames, props, calledMethods)
   );
 }
 
@@ -385,7 +395,6 @@ export function evaluateSourceText(filePath, text) {
 // This is only called by getMethodUsages.
 function getCssCalledMethods(classNode) {
   const methodNames = new Set();
-  const CALL_RE = /this\.([A-Za-z_$][A-Za-z0-9_$]*)\s*\(/g;
   let template;
 
   for (const member of classNode.members) {
@@ -410,11 +419,10 @@ function getCssCalledMethods(classNode) {
   // If no matching declaration was found, return an empty Set.
   if (!template) return methodNames;
 
-  // Finds all method names called in CSS property value expressions
-  // matching `this.method()`.
-  const text = template.getText();
-  for (const match of text.matchAll(CALL_RE)) {
-    methodNames.add(match[1]);
+  // Finds all method calls and getter references
+  // in CSS property value expressions.
+  for (const target of getExpressionTargets(template.getText())) {
+    methodNames.add(target);
   }
 
   return methodNames;
@@ -425,7 +433,6 @@ function getCssCalledMethods(classNode) {
 // This is only called by getMethodUsages.
 function getComputedCalledMethods(classNode) {
   const methodNames = new Set();
-  const CALL_RE = /this\.([A-Za-z_$][A-Za-z0-9_$]*)\s*\(/g;
   let propertiesNode;
 
   for (const member of classNode.members) {
@@ -473,10 +480,11 @@ function getComputedCalledMethods(classNode) {
       // If the property value isn't a string then skip it.
       if (!ts.isStringLiteralLike(configProperty.initializer)) continue;
 
-      // Find all the method calls in the string JavaScript expression.
+      // Find all method calls and getter references
+      // in the string JavaScript expression.
       const computed = configProperty.initializer.text;
-      for (const match of computed.matchAll(CALL_RE)) {
-        methodNames.add(match[1]);
+      for (const target of getExpressionTargets(computed)) {
+        methodNames.add(target);
       }
     }
   }
@@ -484,6 +492,23 @@ function getComputedCalledMethods(classNode) {
   return methodNames;
 }
 
+// Collects method-call and getter-reference targets from expression text.
+function getExpressionTargets(text) {
+  const targets = new Set();
+  for (const match of text.matchAll(CALL_RE)) {
+    targets.add(match[1]);
+  }
+  for (const match of text.matchAll(REFS_RE)) {
+    targets.add(getGetterDependency(match[1]));
+  }
+  return targets;
+}
+
+// Returns the dependency target string for a getter reference.
+function getGetterDependency(name) {
+  return `${GETTER_PREFIX}${name}`;
+}
+
 // Returns the leading indentation in the line
 // that begins at a given position (`pos`) inside `text`.
 function getIndent(text, pos) {
@@ -495,19 +520,26 @@ function getIndent(text, pos) {
 // Returns a map where the keys are property names and
 // the values are Sets of public methods that use it transitively.
 function getMethodUsages(classNode, propertyNames) {
+  const getterNames = new Set();
   const methodInfo = new Map();
 
+  for (const member of classNode.members) {
+    if (!ts.isGetAccessorDeclaration(member)) continue;
+    const getterName = getNameText(member.name);
+    if (getterName) getterNames.add(getterName);
+  }
+
   for (const member of classNode.members) {
     // If the member doesn't represent an instance method, skip it.
     if (!isInstanceMethodMember(member)) continue;
 
     // If the member doesn't have a string name, skip it.
-    const methodName = getNameText(member.name);
+    const methodName = getUsageTargetName(member);
     if (!methodName) continue;
 
     const props = new Set();
     const calledMethods = new Set();
-    collectMethodBodyUsage(member.body, props, calledMethods);
+    collectMethodBodyUsage(member.body, getterNames, props, calledMethods);
     methodInfo.set(methodName, {
       calledMethods,
       isPrivate: ts.isPrivateIdentifier(member.name),
@@ -573,12 +605,9 @@ function getTemplateCalledMethods(classNode) {
 
   const methodNames = new Set();
   if (template) {
-    // Finds all method names called in the HTML template
-    // matching `this.method()`.
-    const text = template.getText();
-    const CALL_RE = /this\.([A-Za-z_$][A-Za-z0-9_$]*)\s*\(/g;
-    for (const match of text.matchAll(CALL_RE)) {
-      methodNames.add(match[1]);
+    // Finds all method calls and getter references in the HTML template.
+    for (const target of getExpressionTargets(template.getText())) {
+      methodNames.add(target);
     }
   }
   return methodNames;
@@ -614,6 +643,13 @@ function getTransitiveProps(methodInfo, memo, methodName, seen = new Set()) {
   return props;
 }
 
+// Returns the usedBy dependency target name for a class member.
+function getUsageTargetName(member) {
+  const name = getNameText(member.name);
+  if (!name) return undefined;
+  return ts.isGetAccessorDeclaration(member) ? getGetterDependency(name) : name;
+}
+
 // Determines if a class member represents an instance method.
 // This is only called by getMethodUsages.
 function isInstanceMethodMember(member) {
@@ -671,10 +707,12 @@ function main() {
 
 // Records a `this` property access and
 // tracks it as a method call when applicable.
-function recordThisAccess(props, calledMethods, node, name) {
+function recordThisAccess(props, calledMethods, getterNames, node, name) {
   props.add(name);
   if (ts.isCallExpression(node.parent) && node.parent.expression === node) {
     calledMethods.add(name);
+  } else if (getterNames.has(name)) {
+    calledMethods.add(getGetterDependency(name));
   }
 }