Add support for TypeScript 5.0 (#264)

* Install `typescript@~5.0`.

* Add `5.0` to the set of tested TypeScript versions.

* Support for TypeScript 4.8+ decorator AST changes (cherry-pick of #249)

* Fall back to `isTypeAssertion` for `isTypeAssertionExpression` (introduced in `4.0.2`). (cherry-pick c69e804)

* Fix building with TypeScript before `isTypeAssertionExpression` existed.

* Remove indentation from JSDoc descriptions in tests. (...)

Somewhere between 3.8 and 5.0, indentation for JSDoc description lines starting
with whitespace was fixed to not include the additional space immediately after
the line's leading `*`. The indentiation in this test causes it to fail in at
least TS 5.0, so I'm removing it rather than trying to track down exactly when
this change was made and then propagating the version number to the test.

* `DocumentAndElementEventHandlers` was removed in microsoft/TypeScript#52328 (0c2fa39).

* Revert back to `lockfileVersion: 1` by installing new deps with npm v6 instead of v9.

Author: bicknellr

package-lock.json

@@ -73,7 +73,8 @@
 		"typescript-3.5": "npm:typescript@~3.5.3",
 		"typescript-3.6": "npm:typescript@~3.6.4",
 		"typescript-3.7": "npm:typescript@~3.7.4",
-		"typescript-3.8": "npm:typescript@~3.8.0"
+		"typescript-3.8": "npm:typescript@~3.8.0",
+		"typescript-5.0": "npm:typescript@~5.0.3"
 	},
 	"ava": {
 		"snapshotDir": "test/snapshots/results",

package.json

@@ -1,6 +1,6 @@
 import { Node } from "typescript";
 import { AnalyzerVisitContext } from "../../analyzer-visit-context";
-import { getNodeIdentifier } from "../../util/ast-util";
+import { getDecorators, getNodeIdentifier } from "../../util/ast-util";
 import { resolveNodeValue } from "../../util/resolve-node-value";
 import { DefinitionNodeResult } from "../analyzer-flavor";
 
@@ -16,7 +16,7 @@ export function discoverDefinitions(node: Node, context: AnalyzerVisitContext):
 	// @customElement("my-element")
 	if (ts.isClassDeclaration(node)) {
 		// Visit all decorators on the class
-		for (const decorator of node.decorators || []) {
+		for (const decorator of getDecorators(node, context)) {
 			const callExpression = decorator.expression;
 
 			// Find "@customElement"

src/analyze/flavors/lit-element/discover-definitions.ts

@@ -1,6 +1,7 @@
 import { CallExpression, Expression, Node, ObjectLiteralExpression } from "typescript";
 import { AnalyzerVisitContext } from "../../analyzer-visit-context";
 import { LitElementPropertyConfig } from "../../types/features/lit-element-property-config";
+import { getDecorators } from "../../util/ast-util";
 import { resolveNodeValue } from "../../util/resolve-node-value";
 
 export type LitElementPropertyDecoratorKind = "property" | "internalProperty";
@@ -16,11 +17,10 @@ export function getLitElementPropertyDecorator(
 	node: Node,
 	context: AnalyzerVisitContext
 ): { expression: CallExpression; kind: LitElementPropertyDecoratorKind } | undefined {
-	if (node.decorators == null) return undefined;
 	const { ts } = context;
 
 	// Find a decorator with "property" name.
-	for (const decorator of node.decorators) {
+	for (const decorator of getDecorators(node, context)) {
 		const expression = decorator.expression;
 
 		// We find the first decorator calling specific identifier name (found in LIT_ELEMENT_PROPERTY_DECORATOR_KINDS)
@@ -32,6 +32,8 @@ export function getLitElementPropertyDecorator(
 			}
 		}
 	}
+
+	return undefined;
 }
 
 /**

src/analyze/flavors/lit-element/parse-lit-property-configuration.ts

@@ -2,9 +2,11 @@ import { isAssignableToSimpleTypeKind } from "ts-simple-type";
 import * as tsModule from "typescript";
 import {
 	Declaration,
+	Decorator,
 	Identifier,
 	InterfaceDeclaration,
 	Node,
+	NodeArray,
 	PropertyDeclaration,
 	PropertySignature,
 	SetAccessorDeclaration,
@@ -347,3 +349,46 @@ export function getNodeIdentifier(node: Node, context: { ts: typeof tsModule }):
 
 	return undefined;
 }
+
+/**
+ * Returns all decorators in either the node's `decorators` or `modifiers`.
+ * @param node
+ * @param context
+ */
+export function getDecorators(node: Node, context: { ts: typeof tsModule }): ReadonlyArray<Decorator> {
+	const { ts } = context;
+
+	// As of TypeScript 4.8 decorators have been moved from the `decorators`
+	// property into `modifiers`. For compatibility with versions on both sides of
+	// this change, this function first attempts to use the new utility functions
+	// from TS 4.8+, otherwise it combines and filters all decorators found in
+	// either `decorators` or `modifiers`.
+	//
+	// https://devblogs.microsoft.com/typescript/announcing-typescript-4-8/#decorators-are-placed-on-modifiers-on-typescripts-syntax-trees
+
+	// Declare enough of the TS 4.8+ API to let us check for and use these
+	// functions despite compiling with an earlier version of TS.
+	interface HasDecorators extends Node {
+		_sentinel: never;
+	}
+	type TSModuleExports = typeof tsModule;
+	interface TSWithDecorators extends TSModuleExports {
+		canHaveDecorators: (node: Node) => node is HasDecorators;
+		getDecorators: (node: HasDecorators) => ReadonlyArray<Decorator> | undefined;
+	}
+
+	// Use TS 4.8+ functions if available.
+	const isTSWithDecorators = (ts: typeof tsModule): ts is TSWithDecorators => typeof (ts as any).canHaveDecorators === "function";
+	if (isTSWithDecorators(ts)) {
+		return ts.canHaveDecorators(node) ? ts.getDecorators(node) ?? [] : [];
+	}
+
+	// Fall back to manually checking `decorators` and `modifiers`.
+	const decorators = Array.from((node.decorators ?? []) as NodeArray<Decorator>);
+	for (const modifier of node.modifiers ?? []) {
+		if (ts.isDecorator(modifier)) {
+			decorators.push(modifier);
+		}
+	}
+	return decorators;
+}

src/analyze/util/ast-util.ts

@@ -9,6 +9,10 @@ export interface Context {
 	strict?: boolean;
 }
 
+interface TSMaybeWithIsTypeAssertionExpression {
+	isTypeAssertionExpression?: typeof tsModule.isTypeAssertion;
+}
+
 /**
  * Takes a node and tries to resolve a constant value from it.
  * Returns undefined if no constant value can be resolved.
@@ -107,7 +111,11 @@ export function resolveNodeValue(node: Node | undefined, context: Context): { va
 	//  - "my-value" as string
 	//  - <any>"my-value"
 	//  - ("my-value")
-	else if (ts.isAsExpression(node) || ts.isTypeAssertion(node) || ts.isParenthesizedExpression(node)) {
+	else if (
+		ts.isAsExpression(node) ||
+		((ts as TSMaybeWithIsTypeAssertionExpression).isTypeAssertionExpression ?? ts.isTypeAssertion)(node) ||
+		ts.isParenthesizedExpression(node)
+	) {
 		return resolveNodeValue(node.expression, { ...context, depth });
 	}
 

src/analyze/util/resolve-node-value.ts

@@ -16,7 +16,7 @@ tsTest("analyzeHTMLElement returns correct result", t => {
 	// Test that the node extends some of the interfaces
 	t.truthy(ext.has("EventTarget"));
 	t.truthy(ext.has("Node"));
-	t.truthy(ext.has("DocumentAndElementEventHandlers"));
+	t.truthy(ext.has("HTMLOrSVGElement"));
 	t.truthy(ext.has("ElementContentEditable"));
 
 	// From ElementContentEditable interface

test/flavors/custom-element/analyze-html-element-test.ts

@@ -6,13 +6,9 @@ tsTest("jsdoc: Correctly discovers the description in the jsdoc", t => {
 		results: [result]
 	} = analyzeTextWithCurrentTsModule(`
 	/**
-	 * layout to full document height as follows:
+	 * This CSS makes text in \`<p>\` tags red.
 	 * \`\`\`
-	 * \\@media screen {
-	 *   html, body {
-	 *     height: 100%;
-	 *   }
-	 * }
+	 * p { color: red; }
 	 * \`\`\`
 	 * This is an example
 	 * @element
@@ -25,13 +21,9 @@ tsTest("jsdoc: Correctly discovers the description in the jsdoc", t => {
 
 	t.is(
 		declaration.jsDoc?.description,
-		`layout to full document height as follows:
+		`This CSS makes text in \`<p>\` tags red.
 \`\`\`
-@media screen {
-   html, body {
-     height: 100%;
-   }
-}
+p { color: red; }
 \`\`\`
 This is an example`
 	);

test/flavors/jsdoc/description-test.ts

@@ -4,11 +4,11 @@ import * as tsModule from "typescript";
 
 type TestFunction = (title: string, implementation: Implementation) => void;
 
-type TsModuleKind = "current" | "3.5" | "3.6" | "3.7" | "3.8";
+type TsModuleKind = "current" | "3.5" | "3.6" | "3.7" | "3.8" | "5.0";
 
-const TS_MODULES_ALL: TsModuleKind[] = ["current", "3.5", "3.6", "3.7", "3.8"];
+const TS_MODULES_ALL: TsModuleKind[] = ["current", "3.5", "3.6", "3.7", "3.8", "5.0"];
 
-const TS_MODULES_DEFAULT: TsModuleKind[] = ["3.5", "3.6", "3.7", "3.8"];
+const TS_MODULES_DEFAULT: TsModuleKind[] = ["3.5", "3.6", "3.7", "3.8", "5.0"];
 
 /**
  * Returns the name of the module to require for a specific ts module kind
@@ -21,6 +21,7 @@ function getTsModuleNameWithKind(kind: TsModuleKind | undefined): string {
 		case "3.6":
 		case "3.7":
 		case "3.8":
+		case "5.0":
 			return `typescript-${kind}`;
 		case "current":
 		case undefined: