lit · justinfagnani · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023
@@ -0,0 +1,5 @@
+---
+'@lit-labs/analyzer': patch
+---
+
+Supports class accessors (pairs, readonly, or setter-only)
@@ -0,0 +1,5 @@
+---
+'@lit-labs/analyzer': patch
+---
+
+Supports non-reactive, constructor assigned class fields
@@ -0,0 +1,5 @@
+---
+'@lit-labs/analyzer': patch
+---
+
+Supports jsDoc `@readonly` tag on non-reactive class fields
@@ -0,0 +1,5 @@
+---
+'@lit-labs/analyzer': patch
+---
+
+Supports typescript `readonly` keyword on non-reactive class fields
@@ -72,6 +72,28 @@ export const getClassDeclaration = (
   });
 };
 
+const getIsReadonlyForNode = (
+  node: ts.Node,
+  analyzer: AnalyzerInterface
+): boolean => {
+  const {typescript} = analyzer;
+  if (typescript.isPropertyDeclaration(node)) {
+    return (
+      node.modifiers?.some((mod) =>
+        typescript.isReadonlyKeywordOrPlusOrMinusToken(mod)
+      ) ||
+      typescript
+        .getJSDocTags(node)
+        .some((tag) => tag.tagName.text === 'readonly')
+    );
+  } else if (typescript.isStatement(node)) {
+    return typescript
+      .getJSDocTags(node)
+      .some((tag) => tag.tagName.text === 'readonly');
+  }
+  return false;
+};
+
 /**
  * Returns the `fields` and `methods` of a class.
  */
@@ -84,10 +106,42 @@ export const getClassMembers = (
   const staticFieldMap = new Map<string, ClassField>();
   const methodMap = new Map<string, ClassMethod>();
   const staticMethodMap = new Map<string, ClassMethod>();
+  const accessors = new Map<string, {get?: ts.Node; set?: ts.Node}>();
   declaration.members.forEach((node) => {
     // Ignore non-implementation signatures of overloaded methods by checking
     // for `node.body`.
-    if (typescript.isMethodDeclaration(node) && node.body) {
+    if (typescript.isConstructorDeclaration(node) && node.body) {
+      // TODO(bennypowers): We probably want to see if this matches what TypeScript considers a field initialization.
+      // Maybe instead of iterating through the constructor statements, we walk the body looking for any
+      // assignment expression so that we get ones inside of if statements, in parenthesized expressions, etc.
+      //
+      // Also, this doesn't cover destructuring assignment.
+      //
+      // This is ok for now because these are rare ways to "declare" a field,
+      // especially in web components where you shouldn't have constructor parameters.
+      node.body.statements.forEach((node) => {
+        if (
+          typescript.isExpressionStatement(node) &&
+          typescript.isBinaryExpression(node.expression) &&
+          node.expression.operatorToken.kind ===
+            typescript.SyntaxKind.EqualsToken &&
+          typescript.isPropertyAccessExpression(node.expression.left) &&
+          node.expression.left.expression.kind ===
+            typescript.SyntaxKind.ThisKeyword
+        ) {
+          const name = node.expression.left.name.getText();
+          fieldMap.set(
+            name,
+            new ClassField({
+              name,
+              type: getTypeForNode(node.expression.right, analyzer),
+              privacy: getPrivacy(typescript, node),
+              readonly: getIsReadonlyForNode(node, analyzer),
+            })
+          );
+        }
+      });
+    } else if (typescript.isMethodDeclaration(node) && node.body) {
       const info = getMemberInfo(typescript, node);
       const name = node.name.getText();
       (info.static ? staticMethodMap : methodMap).set(
@@ -122,10 +176,33 @@ export const getClassMembers = (
           default: node.initializer?.getText(),
           type: getTypeForNode(node, analyzer),
           ...parseNodeJSDocInfo(node, analyzer),
+          readonly: getIsReadonlyForNode(node, analyzer),
         })
       );
+    } else if (typescript.isAccessor(node)) {
+      const name = node.name.getText();
+      const _accessors = accessors.get(name) ?? {};
+      if (typescript.isGetAccessor(node)) _accessors.get = node;
+      else if (typescript.isSetAccessor(node)) _accessors.set = node;
+      accessors.set(name, _accessors);
     }
   });
+  for (const [name, {get, set}] of accessors) {
+    if (get ?? set) {
+      fieldMap.set(
+        name,
+        new ClassField({
+          name,
+          type: getTypeForNode((get ?? set)!, analyzer),
+          privacy: getPrivacy(typescript, (get ?? set)!),
+          readonly: !!get && !set,
+          // TODO(bennypowers): derive from getter?
+          // default: ???
+          // TODO(bennypowers): reflect, etc?
+        })
+      );
+    }
+  }
   return {
     fieldMap,
     staticFieldMap,

@@ -390,13 +390,15 @@ export interface ClassFieldInit extends PropertyLike {
   privacy?: Privacy | undefined;
   inheritedFrom?: Reference | undefined;
   source?: SourceReference | undefined;
+  readonly?: boolean | undefined;
 }
 
 export class ClassField extends Declaration {
   static?: boolean | undefined;
   privacy?: Privacy | undefined;
   inheritedFrom?: Reference | undefined;
   source?: SourceReference | undefined;
+  readonly?: boolean | undefined;
   type?: Type | undefined;
   default?: string | undefined;
   constructor(init: ClassFieldInit) {
@@ -407,6 +409,7 @@ export class ClassField extends Declaration {
     this.source = init.source;
     this.type = init.type;
     this.default = init.default;
+    this.readonly = init.readonly;
   }
 }
 

@@ -44,15 +44,21 @@ export const hasProtectedModifier = (ts: TypeScript, node: ts.HasModifiers) => {
   return hasModifier(ts, node, ts.SyntaxKind.ProtectedKeyword);
 };
 
-const isPrivate = (ts: TypeScript, node: ts.HasModifiers) => {
-  return hasPrivateModifier(ts, node) || hasJSDocTag(ts, node, 'private');
+const isPrivate = (ts: TypeScript, node: ts.Node) => {
+  return (
+    (ts.canHaveModifiers(node) && hasPrivateModifier(ts, node)) ||
+    hasJSDocTag(ts, node, 'private')
+  );
 };
 
-const isProtected = (ts: TypeScript, node: ts.HasModifiers) => {
-  return hasProtectedModifier(ts, node) || hasJSDocTag(ts, node, 'protected');
+const isProtected = (ts: TypeScript, node: ts.Node) => {
+  return (
+    (ts.canHaveModifiers(node) && hasProtectedModifier(ts, node)) ||
+    hasJSDocTag(ts, node, 'protected')
+  );
 };
 
-export const getPrivacy = (ts: TypeScript, node: ts.HasModifiers): Privacy => {
+export const getPrivacy = (ts: TypeScript, node: ts.Node): Privacy => {
   return isPrivate(ts, node)
     ? 'private'
     : isProtected(ts, node)

@@ -36,6 +36,45 @@ for (const lang of languages) {
     assert.equal(element.reactiveProperties.has('notDecorated'), false);
   });
 
+  test('constructor-assigned non-decorated field', ({element}) => {
+    const property = element.getField('constructorAssignOnly')!;
+    assert.ok(property);
+    assert.ok(property.type);
+    assert.equal(property.name, 'constructorAssignOnly');
+    assert.equal(property.type?.text, 'number');
+    assert.equal(property.type?.references.length, 0);
+  });
+
+  test('readonly field', ({element}) => {
+    const property = element.getField('readonlyField')!;
+    assert.ok(property);
+    assert.ok(property.type);
+    assert.equal(property.name, 'readonlyField');
+    assert.equal(property.readonly, true);
+    assert.equal(property.type?.text, 'number');
+    assert.equal(property.type?.references.length, 0);
+  });
+
+  test('getter-only accessor', ({element}) => {
+    const property = element.getField('getterOnly')!;
+    assert.ok(property);
+    assert.ok(property.type);
+    assert.equal(property.name, 'getterOnly');
+    assert.equal(property.readonly, true);
+    assert.equal(property.type?.text, 'number');
+    assert.equal(property.type?.references.length, 0);
+  });
+
+  test('accessor pair', ({element}) => {
+    const property = element.getField('accessorPair')!;
+    assert.ok(property);
+    assert.ok(property.type);
+    assert.equal(property.name, 'accessorPair');
+    assert.not.equal(property.readonly, true);
+    assert.equal(property.type?.text, 'number');
+    assert.equal(property.type?.references.length, 0);
+  });
+
   test('string property with no options', ({element}) => {
     const property = element.reactiveProperties.get('noOptionsString');
     assert.ok(property);

@@ -39,8 +39,25 @@ export class ElementA extends LitElement {
 
   [unsupportedPropertyName] = '';
 
+  /** @type {number} */
+  get getterOnly() {
+    return 0;
+  }
+
+  /** @type {number} */
+  get accessorPair() {
+    return 0;
+  }
+  set accessorPair(_) {
+    void 0;
+  }
+
+  /** @readonly */
+  readonlyField = 0;
+
   constructor() {
     super();
+    this.constructorAssignOnly = 0;
     this.notDecorated = '';
     this.noOptionsString = '';
     this.noOptionsNumber = 42;

@@ -25,13 +25,29 @@ export class ElementA extends LitElement {
 
   declare staticProp: number;
 
+  declare constructorAssignOnly: number;
+
   constructor() {
     super();
     this.staticProp = 42;
+    this.constructorAssignOnly = 0;
   }
 
   notDecorated: string;
 
+  readonly readonlyField = 0;
+
+  get getterOnly(): number {
+    return 0;
+  }
+
+  get accessorPair(): number {
+    return 0;
+  }
+  set accessorPair(_: number) {
+    void 0;
+  }
+
   @property()
   noOptionsString: string;