wrec 0.39.4 → 0.39.6

package/package.json

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

package/scripts/lint.js

@@ -16,6 +16,7 @@
 // - incompatible declare property types
 // - arithmetic and other type errors in expressions
 // - invalid computed property references
+// - computed property cycles
 // - invalid event handler references
 // - unsupported event names
 // - duplicate property names
@@ -28,6 +29,7 @@
 // - missing required members like `static html` and `formAssociated`
 // - invalid `form-assoc` values
 // - invalid `useState` map entries
+// - invalid native form-control value bindings
 // - unsupported HTML attributes in templates
 // - invalid HTML element nesting in templates
 // - invalid ref attribute targets
@@ -46,10 +48,33 @@ import {
   hasStaticModifier
 } from './ast-utils.js';
 
+// Regular expressions
 const CSS_PROPERTY_RE = /([a-zA-Z-]+)\s*:\s*([^;}]+)/g;
 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 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 GETTER_PREFIX = 'get ';
+const HTML_ALLOWED_CHILDREN = new Map([
+  ['select', new Set(['option'])],
+  ['table', new Set(['tbody', 'thead', 'tr'])],
+  ['tbody', new Set(['tr'])],
+  ['thead', new Set(['tr'])],
+  ['tr', new Set(['td', 'th'])],
+  ['ul', new Set(['li'])]
+]);
+const HTML_ALLOWED_PARENTS = new Map([
+  ['legend', new Set(['fieldset'])],
+  ['li', new Set(['ol', 'ul'])],
+  ['option', new Set(['select'])],
+  ['tbody', new Set(['table'])],
+  ['td', new Set(['tr'])],
+  ['th', new Set(['tr'])],
+  ['thead', new Set(['table'])],
+  ['tr', new Set(['table', 'tbody', 'thead'])]
+]);
 const HTML_GLOBAL_ATTRIBUTES = new Set([
   'aria-label',
   'class',
@@ -99,37 +124,9 @@ const HTML_TAG_ATTRIBUTES = new Map([
   ['tr', new Set([])],
   ['ul', new Set([])]
 ]);
-const HTML_ALLOWED_PARENTS = new Map([
-  ['legend', new Set(['fieldset'])],
-  ['li', new Set(['ol', 'ul'])],
-  ['option', new Set(['select'])],
-  ['tbody', new Set(['table'])],
-  ['td', new Set(['tr'])],
-  ['th', new Set(['tr'])],
-  ['thead', new Set(['table'])],
-  ['tr', new Set(['table', 'tbody', 'thead'])]
-]);
-const HTML_ALLOWED_CHILDREN = new Map([
-  ['select', new Set(['option'])],
-  ['table', new Set(['tbody', 'thead', 'tr'])],
-  ['tbody', new Set(['tr'])],
-  ['thead', new Set(['tr'])],
-  ['tr', new Set(['td', 'th'])],
-  ['ul', new Set(['li'])]
-]);
-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 NATIVE_FORM_CONTROL_TAGS = new Set(['input', 'select', 'textarea']);
 const PLACEHOLDER_PREFIX = '__WREC_PLACEHOLDER__';
 const RESERVED_PROPERTY_NAMES = new Set(['class', 'style']);
-const SUPPORTED_PROPERTY_TYPE_NAMES = new Set([
-  'Array',
-  'Boolean',
-  'HTMLElement',
-  'Number',
-  'Object',
-  'String'
-]);
-const GETTER_PREFIX = 'get ';
 const SUPPORTED_EVENT_NAMES = new Set([
   'blur',
   'change',
@@ -151,7 +148,16 @@ const SUPPORTED_EVENT_NAMES = new Set([
   'mouseup',
   'paste'
 ]);
+const SUPPORTED_PROPERTY_TYPE_NAMES = new Set([
+  'Array',
+  'Boolean',
+  'HTMLElement',
+  'Number',
+  'Object',
+  'String'
+]);
 const WREC_REF_NAME = '__wrec';
+
 const componentPropertyCache = new Map();
 
 // Analyzes code for invalid property access,
@@ -370,6 +376,20 @@ function collectGetterNames(classNode) {
   return getters;
 }
 
+// Collects computed-property dependencies on other computed properties.
+function collectComputedDependencies(computedText, computedPropNames) {
+  const dependencies = new Set();
+
+  for (const match of computedText.matchAll(THIS_REF_RE)) {
+    const referencedName = match[1];
+    if (computedPropNames.has(referencedName)) {
+      dependencies.add(referencedName);
+    }
+  }
+
+  return [...dependencies].sort();
+}
+
 // 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
@@ -844,6 +864,7 @@ function formatReport(
     findings.invalidTypeProperties.length > 0 ||
     findings.invalidUsedByReferences.length > 0 ||
     findings.invalidUseStateMaps.length > 0 ||
+    findings.invalidValueBindings.length > 0 ||
     findings.invalidValuesConfigurations.length > 0 ||
     findings.missingRequiredMembers.length > 0 ||
     findings.missingTypeProperties.length > 0 ||
@@ -981,6 +1002,13 @@ function formatReport(
     findings.invalidUseStateMaps.forEach(message => lines.push(`  ${message}`));
   }
 
+  if (findings.invalidValueBindings.length > 0) {
+    lines.push('invalid value bindings:');
+    findings.invalidValueBindings.forEach(message =>
+      lines.push(`  ${message}`)
+    );
+  }
+
   if (findings.invalidValuesConfigurations.length > 0) {
     lines.push('invalid values configurations:');
     findings.invalidValuesConfigurations.forEach(message =>
@@ -1230,6 +1258,35 @@ function getStringArrayLiteral(property) {
   return values;
 }
 
+// Returns an invalid values configuration message when one is found.
+function getValuesConfigurationError(property) {
+  if (!property || !ts.isPropertyAssignment(property)) return undefined;
+
+  const {initializer} = property;
+  if (!ts.isArrayLiteralExpression(initializer)) {
+    return 'values must be a literal array of strings';
+  }
+
+  if (initializer.elements.length === 0) {
+    return 'values must not be empty';
+  }
+
+  const seenValues = new Set();
+  for (const element of initializer.elements) {
+    if (
+      !ts.isStringLiteral(element) &&
+      !ts.isNoSubstitutionTemplateLiteral(element)
+    ) {
+      return 'values must contain only string literals';
+    }
+
+    if (seenValues.has(element.text)) {
+      return `values contains duplicate entry "${element.text}"`;
+    }
+    seenValues.add(element.text);
+  }
+}
+
 // Returns either a single string value or a string array value as an array.
 function getStringOrStringArrayLiteral(property) {
   if (!property || !ts.isPropertyAssignment(property)) return undefined;
@@ -1357,6 +1414,11 @@ function isImportLikeDeclaration(node) {
   );
 }
 
+// Returns whether an HTML node is a native form control with a value property.
+function isNativeFormControl(node) {
+  return NATIVE_FORM_CONTROL_TAGS.has(getHtmlTagName(node));
+}
+
 // Returns whether a type represents an object-like value other than an array.
 function isNonArrayObjectLikeType(checker, type) {
   if (type.isUnion()) {
@@ -1468,6 +1530,7 @@ export function lintSource(filePath, sourceText, options = {}) {
     invalidTypeProperties: [],
     invalidUsedByReferences: [],
     invalidUseStateMaps: [],
+    invalidValueBindings: [],
     invalidValuesConfigurations: [],
     missingRequiredMembers: [],
     missingTypeProperties: [],
@@ -1581,6 +1644,7 @@ export function lintSource(filePath, sourceText, options = {}) {
   findings.invalidTypeProperties.sort();
   findings.invalidUsedByReferences.sort();
   findings.invalidUseStateMaps.sort();
+  findings.invalidValueBindings.sort();
   findings.invalidValuesConfigurations.sort();
   findings.missingRequiredMembers.sort();
   findings.missingTypeProperties.sort();
@@ -1803,6 +1867,34 @@ function validateCheckedBinding(
   );
 }
 
+// Validates value bindings on native form controls.
+function validateValueBinding(
+  node,
+  attrName,
+  attrValue,
+  findings,
+  supportedProps
+) {
+  const [baseAttrName] = attrName.split(':');
+  if (baseAttrName !== 'value') return;
+  if (!isNativeFormControl(node)) return;
+
+  const propName = getPropertyNameInAttribute(attrValue);
+  if (!propName) return;
+
+  const propInfo = supportedProps.get(propName);
+  if (!propInfo) return;
+
+  if (propInfo.typeText === 'number' || propInfo.typeText === 'string') {
+    return;
+  }
+
+  findings.invalidValueBindings.push(
+    `${getHtmlTagName(node)} attribute "${attrName}" refers to property ` +
+      `"${propName}" whose type is not String or Number`
+  );
+}
+
 // Validates computed property references and method calls.
 function validateComputedProperty(
   propName,
@@ -1835,6 +1927,51 @@ function validateComputedProperty(
   }
 }
 
+// Validates that computed properties do not form dependency cycles.
+function validateComputedPropertyCycles(computedDependencies, findings) {
+  const computedNames = [...computedDependencies.keys()].sort();
+  const dependencyCountMap = new Map();
+  const dependentsMap = new Map();
+  const queue = [];
+
+  for (const computedName of computedNames) {
+    const dependencies = computedDependencies.get(computedName) ?? [];
+    dependencyCountMap.set(computedName, dependencies.length);
+    if (dependencies.length === 0) queue.push(computedName);
+
+    for (const dependencyName of dependencies) {
+      let dependents = dependentsMap.get(dependencyName);
+      if (!dependents) {
+        dependents = [];
+        dependentsMap.set(dependencyName, dependents);
+      }
+      dependents.push(computedName);
+    }
+  }
+
+  const orderedNames = [];
+  for (let index = 0; index < queue.length; index++) {
+    const computedName = queue[index];
+    orderedNames.push(computedName);
+
+    const dependents = (dependentsMap.get(computedName) ?? []).sort();
+    for (const dependentName of dependents) {
+      const nextCount = dependencyCountMap.get(dependentName) - 1;
+      dependencyCountMap.set(dependentName, nextCount);
+      if (nextCount === 0) queue.push(dependentName);
+    }
+  }
+
+  if (orderedNames.length === computedNames.length) return;
+
+  const cycleNames = computedNames.filter(
+    computedName => dependencyCountMap.get(computedName) > 0
+  );
+  findings.invalidComputedProperties.push(
+    `computed properties form a cycle: ${cycleNames.join(', ')}`
+  );
+}
+
 // Validates that a default value matches the declared property type.
 function validateDefaultValue(checker, typeExpression, valueExpression) {
   if (!typeExpression || !valueExpression) return undefined;
@@ -2022,6 +2159,21 @@ function validatePropertyConfigs(
   classMethods,
   findings
 ) {
+  const computedDependencies = new Map();
+  const computedPropNames = new Set();
+
+  for (const {config, propName} of propertyEntries) {
+    const computedProp = getObjectProperty(config, 'computed');
+    if (
+      computedProp &&
+      ts.isPropertyAssignment(computedProp) &&
+      (ts.isStringLiteral(computedProp.initializer) ||
+        ts.isNoSubstitutionTemplateLiteral(computedProp.initializer))
+    ) {
+      computedPropNames.add(propName);
+    }
+  }
+
   for (const {config, propName} of propertyEntries) {
     const computedProp = getObjectProperty(config, 'computed');
     const declaredTypeNode = declaredPropertyTypes.get(propName);
@@ -2029,6 +2181,7 @@ function validatePropertyConfigs(
     const usedByProp = getObjectProperty(config, 'usedBy');
     const valueProp = getObjectProperty(config, 'value');
     const valuesProp = getObjectProperty(config, 'values');
+    const valuesConfigError = getValuesConfigurationError(valuesProp);
 
     const typeExpression =
       typeProp && ts.isPropertyAssignment(typeProp)
@@ -2104,6 +2257,13 @@ function validatePropertyConfigs(
       (ts.isStringLiteral(computedProp.initializer) ||
         ts.isNoSubstitutionTemplateLiteral(computedProp.initializer))
     ) {
+      computedDependencies.set(
+        propName,
+        collectComputedDependencies(
+          computedProp.initializer.text,
+          computedPropNames
+        )
+      );
       validateComputedProperty(
         propName,
         computedProp.initializer.text,
@@ -2113,6 +2273,12 @@ function validatePropertyConfigs(
       );
     }
 
+    if (valuesConfigError) {
+      findings.invalidValuesConfigurations.push(
+        `property "${propName}" ${valuesConfigError}`
+      );
+    }
+
     const values = getStringArrayLiteral(valuesProp);
     if (values) {
       if (typeExpressionKind(typeExpression) !== 'String') {
@@ -2150,6 +2316,8 @@ function validatePropertyConfigs(
       }
     }
   }
+
+  validateComputedPropertyCycles(computedDependencies, findings);
 }
 
 // Validates that a ref attribute targets a unique HTMLElement property.
@@ -2234,6 +2402,7 @@ function walkHtmlNode(
         supportedProps
       );
       validateHtmlAttribute(node, attrName, findings);
+      validateValueBinding(node, attrName, attrValue, findings, supportedProps);
       validateValueBindingEvent(node, attrName, findings);
       if (attrName === 'ref') {
         validateRefAttribute(attrValue, supportedProps, findings, seenRefProps);