wrec 0.36.0 → 0.36.2

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 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 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.0",
+  "version": "0.36.2",
   "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

@@ -842,7 +842,7 @@ function formatReport(
     findings.invalidUsedByReferences.length > 0 ||
     findings.invalidUseStateMaps.length > 0 ||
     findings.invalidValuesConfigurations.length > 0 ||
-    findings.missingFormAssociatedProperty.length > 0 ||
+    findings.missingRequiredMembers.length > 0 ||
     findings.missingTypeProperties.length > 0 ||
     findings.reservedProperties.length > 0 ||
     findings.typeErrors.length > 0 ||
@@ -985,9 +985,9 @@ function formatReport(
     );
   }
 
-  if (findings.missingFormAssociatedProperty.length > 0) {
-    lines.push('missing formAssociated property:');
-    findings.missingFormAssociatedProperty.forEach(message =>
+  if (findings.missingRequiredMembers.length > 0) {
+    lines.push('missing required members:');
+    findings.missingRequiredMembers.forEach(message =>
       lines.push(`  ${message}`)
     );
   }
@@ -1180,6 +1180,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);
@@ -1287,6 +1296,16 @@ function getTypeSyntaxText(sourceFile, expression) {
   return undefined;
 }
 
+// Returns whether a component class defines its own static html property.
+function hasStaticHtmlDefinition(classNode) {
+  for (const member of classNode.members) {
+    if (!hasStaticModifier(member)) continue;
+    if (!ts.isPropertyDeclaration(member)) continue;
+    if (getMemberName(member) === 'html') return true;
+  }
+  return false;
+}
+
 // Returns whether a token kind is one of the supported arithmetic operators.
 function isArithmeticOperator(kind) {
   return (
@@ -1329,6 +1348,27 @@ function isImportLikeDeclaration(node) {
   );
 }
 
+// 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)
+  );
+}
+
 // Returns whether a type is fully numeric or any-like for arithmetic checks.
 function isNumericLikeType(type) {
   const parts = type.isUnion() ? type.types : [type];
@@ -1420,7 +1460,7 @@ export function lintSource(filePath, sourceText, options = {}) {
     invalidUsedByReferences: [],
     invalidUseStateMaps: [],
     invalidValuesConfigurations: [],
-    missingFormAssociatedProperty: [],
+    missingRequiredMembers: [],
     missingTypeProperties: [],
     reservedProperties,
     typeErrors: [],
@@ -1445,10 +1485,15 @@ export function lintSource(filePath, sourceText, options = {}) {
   }));
 
   if (allMethods.has('formAssociatedCallback') && !formAssociated) {
-    findings.missingFormAssociatedProperty.push(
+    findings.missingRequiredMembers.push(
       'formAssociatedCallback is defined, but static formAssociated is not true'
     );
   }
+  if (!hasStaticHtmlDefinition(classNode)) {
+    findings.missingRequiredMembers.push(
+      'static html property must be defined'
+    );
+  }
 
   const augmentedSource = buildAugmentedSource(
     sourceFile,
@@ -1528,7 +1573,7 @@ export function lintSource(filePath, sourceText, options = {}) {
   findings.invalidUsedByReferences.sort();
   findings.invalidUseStateMaps.sort();
   findings.invalidValuesConfigurations.sort();
-  findings.missingFormAssociatedProperty.sort();
+  findings.missingRequiredMembers.sort();
   findings.missingTypeProperties.sort();
   findings.reservedProperties.sort();
   findings.typeErrors.sort((a, b) => a.expression.localeCompare(b.expression));
@@ -1602,23 +1647,6 @@ 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;
@@ -1963,6 +1991,16 @@ 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))
     ) {
@@ -1971,7 +2009,13 @@ function validatePropertyConfigs(
           'Boolean, Number, String, Object, or Array'
       );
     } else if (declaredTypeNode) {
-      if (!typeExpressionMatchesDeclaredType(checker, typeExpression, declaredTypeNode)) {
+      if (
+        !typeExpressionMatchesDeclaredType(
+          checker,
+          typeExpression,
+          declaredTypeNode
+        )
+      ) {
         findings.incompatibleDeclareTypes.push(
           `property "${propName}" declare type ` +
             `"${getPropertyTypeTextFromNode(sourceFile, declaredTypeNode)}" ` +