Add support event types in JSDoc. Fixes #165

Author: runem

dev/src/custom-element/custom-element.ts

@@ -28,7 +28,8 @@ export class CustomElement extends MySuperClass {
 	set attr1(val: string) {}
 
 	onClick() {
-		new CustomEvent("my-custom-event");
+		this.dispatchEvent(new CustomEvent("my-custom-event", { detail: "hello" }));
+		this.dispatchEvent(new MouseEvent("mouse-move"));
 	}
 }
 

dev/tsconfig.json

@@ -3,7 +3,7 @@
 		"experimentalDecorators": true,
 		"target": "es5",
 		"module": "commonjs",
-		"lib": ["esnext", "dom"],
+		"lib": ["ESnext", "DOM"],
 		"strict": true,
 		"esModuleInterop": true
 	}

package-lock.json

@@ -47,7 +47,7 @@
 	"homepage": "https://github.com/runem/web-component-analyzer#readme",
 	"dependencies": {
 		"fast-glob": "^3.2.2",
-		"ts-simple-type": "~1.0.0",
+		"ts-simple-type": "~1.0.4",
 		"typescript": "^3.8.3",
 		"yargs": "^15.3.1"
 	},
@@ -87,7 +87,7 @@
 			"test/**/*.ts",
 			"!test/{helpers,snapshots}/**/*"
 		],
-		"timeout": "200s"
+		"timeout": "2m"
 	},
 	"husky": {
 		"hooks": {

package.json

@@ -1,3 +1,5 @@
+import { existsSync, readFileSync } from "fs";
+import { dirname, join } from "path";
 import * as tsModule from "typescript";
 import { CompilerOptions, Program, ScriptKind, ScriptTarget, SourceFile, System, TypeChecker } from "typescript";
 //import * as ts from "typescript";
@@ -10,6 +12,7 @@ export interface IVirtualSourceFile {
 	fileName: string;
 	text?: string;
 	analyze?: boolean;
+	includeLib?: boolean;
 }
 
 export type VirtualSourceFile = IVirtualSourceFile | string;
@@ -45,9 +48,24 @@ export function analyzeText(inputFiles: VirtualSourceFile[] | VirtualSourceFile,
 		)
 		.map(file => ({ ...file, fileName: file.fileName }));
 
+	const includeLib = files.some(file => file.includeLib);
+
 	const readFile = (fileName: string): string | undefined => {
 		const matchedFile = files.find(currentFile => currentFile.fileName === fileName);
-		return matchedFile == null ? undefined : matchedFile.text;
+		if (matchedFile != null) {
+			return matchedFile.text;
+		}
+
+		if (includeLib) {
+			// TODO: find better method of finding the current typescript module path
+			fileName = fileName.match(/[/\\]/) ? fileName : join(dirname(require.resolve("typescript")), fileName);
+		}
+
+		if (existsSync(fileName)) {
+			return readFileSync(fileName, "utf8").toString();
+		}
+
+		return undefined;
 	};
 
 	const fileExists = (fileName: string): boolean => {

src/analyze/analyze-text.ts

@@ -1,5 +1,5 @@
 import * as tsModule from "typescript";
-import { Node, SourceFile, TypeChecker } from "typescript";
+import { Node, SourceFile, TypeChecker, Program } from "typescript";
 import { AnalyzerFlavor, ComponentFeatureCollection } from "./flavors/analyzer-flavor";
 import { AnalyzerConfig } from "./types/analyzer-config";
 import { ComponentDeclaration } from "./types/component-declaration";
@@ -10,6 +10,7 @@ import { ComponentDeclaration } from "./types/component-declaration";
  */
 export interface AnalyzerVisitContext {
 	checker: TypeChecker;
+	program: Program;
 	ts: typeof tsModule;
 	config: AnalyzerConfig;
 	flavors: AnalyzerFlavor[];

src/analyze/analyzer-visit-context.ts

@@ -1,9 +1,30 @@
-import { SimpleType } from "ts-simple-type";
 import { Node } from "typescript";
 import { AnalyzerVisitContext } from "../../analyzer-visit-context";
 import { ComponentEvent } from "../../types/features/component-event";
 import { getJsDoc } from "../../util/js-doc-util";
 import { lazy } from "../../util/lazy";
+import { resolveNodeValue } from "../../util/resolve-node-value";
+
+const EVENT_NAMES = [
+	"Event",
+	"CustomEvent",
+	"AnimationEvent",
+	"ClipboardEvent",
+	"DragEvent",
+	"FocusEvent",
+	"HashChangeEvent",
+	"InputEvent",
+	"KeyboardEvent",
+	"MouseEvent",
+	"PageTransitionEvent",
+	"PopStateEvent",
+	"ProgressEvent",
+	"StorageEvent",
+	"TouchEvent",
+	"TransitionEvent",
+	"UiEvent",
+	"WheelEvent"
+];
 
 /**
  * Discovers events dispatched
@@ -15,14 +36,14 @@ export function discoverEvents(node: Node, context: AnalyzerVisitContext): Compo
 
 	// new CustomEvent("my-event");
 	if (ts.isNewExpression(node)) {
-		const { expression, arguments: args, typeArguments } = node;
+		const { expression, arguments: args } = node;
 
-		if (expression.getText() === "CustomEvent" && args && args.length >= 1) {
+		if (EVENT_NAMES.includes(expression.getText()) && args && args.length >= 1) {
 			const arg = args[0];
 
-			if (ts.isStringLiteralLike(arg)) {
-				const eventName = arg.text;
+			const eventName = resolveNodeValue(arg, context)?.value;
 
+			if (typeof eventName === "string") {
 				// Either grab jsdoc from the new expression or from a possible call expression that its wrapped in
 				const jsDoc =
 					getJsDoc(expression, ts) ||
@@ -35,14 +56,7 @@ export function discoverEvents(node: Node, context: AnalyzerVisitContext): Compo
 						jsDoc,
 						name: eventName,
 						node,
-						type: lazy(() => {
-							return (
-								(typeArguments?.[0] != null && checker.getTypeFromTypeNode(typeArguments[0])) ||
-								({
-									kind: "ANY"
-								} as SimpleType)
-							);
-						})
+						type: lazy(() => checker.getTypeAtLocation(node))
 					}
 				];
 			}

src/analyze/flavors/custom-element/discover-events.ts

@@ -59,7 +59,7 @@ export const discoverFeatures: Partial<FeatureDiscoverVisitMap<AnalyzerVisitCont
 						return {
 							name: name,
 							jsDoc: description != null ? { description } : undefined,
-							type: lazy(() => (type && parseSimpleJsDocTypeExpression(type)) || { kind: "ANY" }),
+							type: type != null ? lazy(() => parseSimpleJsDocTypeExpression(type, context) || { kind: "ANY" }) : undefined,
 							typeHint: type,
 							node: tagNode
 						};
@@ -77,7 +77,7 @@ export const discoverFeatures: Partial<FeatureDiscoverVisitMap<AnalyzerVisitCont
 				(tagNode, { name, type, description }) => {
 					// Grab the type from jsdoc and use it to find permitted tag names
 					// Example: @slot {"div"|"span"} myslot
-					const permittedTagNameType = type == null ? undefined : parseSimpleJsDocTypeExpression(type);
+					const permittedTagNameType = type == null ? undefined : parseSimpleJsDocTypeExpression(type, context);
 					const permittedTagNames: string[] | undefined = (() => {
 						if (permittedTagNameType == null) {
 							return undefined;
@@ -120,7 +120,7 @@ export const discoverFeatures: Partial<FeatureDiscoverVisitMap<AnalyzerVisitCont
 							propName: name,
 							jsDoc: description != null ? { description } : undefined,
 							typeHint: type,
-							type: lazy(() => (type && parseSimpleJsDocTypeExpression(type)) || { kind: "ANY" }),
+							type: lazy(() => (type && parseSimpleJsDocTypeExpression(type, context)) || { kind: "ANY" }),
 							node: tagNode,
 							default: def,
 							visibility: undefined,
@@ -143,7 +143,7 @@ export const discoverFeatures: Partial<FeatureDiscoverVisitMap<AnalyzerVisitCont
 							kind: "attribute",
 							attrName: name,
 							jsDoc: description != null ? { description } : undefined,
-							type: lazy(() => (type && parseSimpleJsDocTypeExpression(type)) || { kind: "ANY" }),
+							type: lazy(() => (type && parseSimpleJsDocTypeExpression(type, context)) || { kind: "ANY" }),
 							typeHint: type,
 							node: tagNode,
 							default: def,

src/analyze/flavors/js-doc/discover-features.ts

@@ -1,6 +1,5 @@
-import { ComponentEvent } from "../../types/features/component-event";
+import { AnalyzerVisitContext } from "../../analyzer-visit-context";
 import { ComponentMember, ComponentMemberReflectKind } from "../../types/features/component-member";
-import { ComponentMethod } from "../../types/features/component-method";
 import { JsDoc } from "../../types/js-doc";
 import { VisibilityKind } from "../../types/visibility-kind";
 import { parseSimpleJsDocTypeExpression } from "../../util/js-doc-util";
@@ -11,7 +10,7 @@ import { AnalyzerFlavor } from "../analyzer-flavor";
  * Refines features by looking at the jsdoc tags on the feature
  */
 export const refineFeature: AnalyzerFlavor["refineFeature"] = {
-	event: (event: ComponentEvent) => {
+	event: (event, context) => {
 		if (event.jsDoc == null || event.jsDoc.tags == null) return event;
 
 		// Check if the feature has "@ignore" jsdoc tag
@@ -20,23 +19,26 @@ export const refineFeature: AnalyzerFlavor["refineFeature"] = {
 		}
 
 		return [applyJsDocDeprecated, applyJsDocVisibility, applyJsDocType].reduce(
-			(event, applyFunc) => (applyFunc as Function)(event, event.jsDoc),
+			(event, applyFunc) => (applyFunc as Function)(event, event.jsDoc, context),
 			event
 		);
 	},
-	method: (method: ComponentMethod) => {
+	method: (method, context) => {
 		if (method.jsDoc == null || method.jsDoc.tags == null) return method;
 
 		// Check if the feature has "@ignore" jsdoc tag
 		if (hasIgnoreJsDocTag(method.jsDoc)) {
 			return undefined;
 		}
 
-		method = [applyJsDocDeprecated, applyJsDocVisibility].reduce((method, applyFunc) => (applyFunc as Function)(method, method.jsDoc), method);
+		method = [applyJsDocDeprecated, applyJsDocVisibility].reduce(
+			(method, applyFunc) => (applyFunc as Function)(method, method.jsDoc, context),
+			method
+		);
 
 		return method;
 	},
-	member: (member: ComponentMember) => {
+	member: (member, context) => {
 		// Return right away if the member doesn't have jsdoc
 		if (member.jsDoc == null || member.jsDoc.tags == null) return member;
 
@@ -54,7 +56,7 @@ export const refineFeature: AnalyzerFlavor["refineFeature"] = {
 			applyJsDocType,
 			applyJsDocAttribute,
 			applyJsDocModifiers
-		].reduce((member, applyFunc) => (applyFunc as Function)(member, member.jsDoc), member);
+		].reduce((member, applyFunc) => (applyFunc as Function)(member, member.jsDoc, context), member);
 	}
 };
 
@@ -122,10 +124,12 @@ function applyJsDocVisibility<T extends Partial<Pick<ComponentMember, "visibilit
  * Applies the "@attribute" jsdoc tag
  * @param feature
  * @param jsDoc
+ * @param context
  */
 function applyJsDocAttribute<T extends Partial<Pick<ComponentMember, "propName" | "attrName" | "default" | "type" | "typeHint">>>(
 	feature: T,
-	jsDoc: JsDoc
+	jsDoc: JsDoc,
+	context: AnalyzerVisitContext
 ): T {
 	const attributeTag = jsDoc.tags?.find(tag => ["attr", "attribute"].includes(tag.tag));
 
@@ -141,7 +145,7 @@ function applyJsDocAttribute<T extends Partial<Pick<ComponentMember, "propName"
 		// @attr jsdoc tag can also include the type of attribute
 		if (parsed.type != null && result.typeHint == null) {
 			result.typeHint = parsed.type;
-			result.type = feature.type ?? lazy(() => parseSimpleJsDocTypeExpression(parsed.type || ""));
+			result.type = feature.type ?? lazy(() => parseSimpleJsDocTypeExpression(parsed.type || "", context));
 		}
 
 		return result;
@@ -237,8 +241,9 @@ function applyJsDocReflect<T extends Partial<Pick<ComponentMember, "reflect">>>(
  * Applies the "@type" jsdoc tag
  * @param feature
  * @param jsDoc
+ * @param context
  */
-function applyJsDocType<T extends Partial<Pick<ComponentMember, "type" | "typeHint">>>(feature: T, jsDoc: JsDoc): T {
+function applyJsDocType<T extends Partial<Pick<ComponentMember, "type" | "typeHint">>>(feature: T, jsDoc: JsDoc, context: AnalyzerVisitContext): T {
 	const typeTag = jsDoc.tags?.find(tag => tag.tag === "type");
 
 	if (typeTag != null && feature.typeHint == null) {
@@ -248,7 +253,7 @@ function applyJsDocType<T extends Partial<Pick<ComponentMember, "type" | "typeHi
 			return {
 				...feature,
 				typeHint: parsed.type,
-				type: feature.type ?? lazy(() => parseSimpleJsDocTypeExpression(parsed.type || ""))
+				type: feature.type ?? lazy(() => parseSimpleJsDocTypeExpression(parsed.type || "", context))
 			};
 		}
 	}

src/analyze/flavors/js-doc/refine-feature.ts

@@ -202,7 +202,7 @@ function parseStaticProperties(returnStatement: ReturnStatement, context: Analyz
 				priority: "high",
 				kind: "property",
 				type: lazy(() => {
-					return (jsDoc && getJsDocType(jsDoc)) || (typeof litConfig.type === "object" && litConfig.type) || { kind: "ANY" };
+					return (jsDoc && getJsDocType(jsDoc, context)) || (typeof litConfig.type === "object" && litConfig.type) || { kind: "ANY" };
 				}),
 				propName: propName,
 				attrName: emitAttribute ? attrName : undefined,