Fix issues with markdown transformer and documenting events

dev/src/lit-element/lit-element.ts

@@ -4,7 +4,7 @@ import { customElement, LitElement, property } from "lit-element";
  * This is my element
  * @fires {string} change - This is a change event
  * @fires my-event - This event is awesome
- * @cssprop --main-bg-color - This css property is nice!
+ * @cssprop {Color} --main-bg-color - This css property is nice!
  * @cssprop --main-color - This css property is also nice!
  * @attr {on|off} switch - This is a great attribute
  * @attr {String} my-attr - This is an attribute defined from jsdoc

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

@@ -40,7 +40,7 @@ export const discoverFeatures: Partial<FeatureDiscoverVisitMap<AnalyzerVisitCont
 						return {
 							name: name,
 							jsDoc: description != null ? { description } : undefined,
-							type: type || undefined,
+							typeHint: type || undefined,
 							default: def
 						};
 					}

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

@@ -13,7 +13,10 @@ export const refineFeature: AnalyzerFlavor["refineFeature"] = {
 	event: (event: ComponentEvent) => {
 		if (event.jsDoc == null || event.jsDoc.tags == null) return event;
 
-		return [applyJsDocDeprecated, applyJsDocVisibility].reduce((event, applyFunc) => (applyFunc as Function)(event, event.jsDoc), event);
+		return [applyJsDocDeprecated, applyJsDocVisibility, applyJsDocType].reduce(
+			(event, applyFunc) => (applyFunc as Function)(event, event.jsDoc),
+			event
+		);
 	},
 	method: (method: ComponentMethod) => {
 		if (method.jsDoc == null || method.jsDoc.tags == null) return method;

src/analyze/flavors/lit-element/exclude-node.ts

@@ -1,11 +1,18 @@
 import { Node } from "typescript";
 import { AnalyzerVisitContext } from "../../analyzer-visit-context";
+import { getDeclarationName } from "../../util/ast-util";
 
 export function excludeNode(node: Node, context: AnalyzerVisitContext): boolean | undefined {
 	if (context.config.analyzeLib) {
 		return undefined;
 	}
 
-	const fileName = node.getSourceFile().fileName;
-	return fileName.includes("lit-element.d.ts") || fileName.endsWith("updating-element.d.ts");
+	const declName = getDeclarationName(node, context);
+	if (declName != null) {
+		return declName === "LitElement" || declName === "UpdatingElement";
+	} else {
+		const fileName = node.getSourceFile().fileName;
+
+		return fileName.includes("/lit-element.") || fileName.endsWith("/updating-element.");
+	}
 }

src/analyze/stages/analyze-declaration.ts

@@ -2,6 +2,7 @@ import { Node } from "typescript";
 import { AnalyzerVisitContext } from "../analyzer-visit-context";
 import { AnalyzerDeclarationVisitContext, ComponentFeatureCollection } from "../flavors/analyzer-flavor";
 import { ComponentDeclaration } from "../types/component-declaration";
+import { getDeclarationName } from "../util/ast-util";
 import { getUniqueResolvedNodeForInheritanceTree } from "../util/inheritance-tree-util";
 import { getJsDoc } from "../util/js-doc-util";
 import { discoverFeatures } from "./discover-features";
@@ -82,7 +83,7 @@ export function analyzeComponentDeclaration(initialDeclarationNodes: Node[], con
 }
 
 function shouldExcludeNode(node: Node, context: AnalyzerVisitContext): boolean {
-	if (!context.config.analyzeLibDom && excludeNode(node.getSourceFile(), context)) {
+	if (!context.config.analyzeLibDom && excludeNode(node, context)) {
 		return true;
 	}
 
@@ -94,13 +95,3 @@ function shouldExcludeNode(node: Node, context: AnalyzerVisitContext): boolean {
 
 	return false;
 }
-
-function getDeclarationName(node: Node, context: AnalyzerVisitContext): string | undefined {
-	if (context.ts.isClassLike(node) || context.ts.isInterfaceDeclaration(node)) {
-		return node.name?.text;
-	} else if (context.ts.isVariableDeclaration(node)) {
-		return node.name?.getText();
-	}
-
-	return undefined;
-}

src/analyze/types/features/component-css-property.ts

@@ -3,6 +3,6 @@ import { JsDoc } from "../js-doc";
 export interface ComponentCssProperty {
 	name: string;
 	jsDoc: JsDoc | undefined;
-	type?: string;
+	typeHint?: string;
 	default?: any;
 }

src/analyze/util/ast-util.ts

@@ -252,3 +252,13 @@ export function getLeadingCommentForNode(node: Node, ts: typeof tsModule): strin
 export function isHTMLElementExtensionInterface(node: Node, context: AnalyzerVisitContext): node is InterfaceDeclaration {
 	return context.ts.isInterfaceDeclaration(node) && context.ts.isModuleBlock(node.parent) && node.name.text === "HTMLElement";
 }
+
+export function getDeclarationName(node: Node, context: AnalyzerVisitContext): string | undefined {
+	if (context.ts.isClassLike(node) || context.ts.isInterfaceDeclaration(node)) {
+		return node.name?.text;
+	} else if (context.ts.isVariableDeclaration(node)) {
+		return node.name?.getText();
+	}
+
+	return undefined;
+}

src/transformers/json/json-transformer.ts

@@ -79,7 +79,7 @@ function componentCssPropToHtmlCssProp(prop: ComponentCssProperty, checker: Type
 	return {
 		name: prop.name || "",
 		description: getDescriptionFromJsDoc(prop.jsDoc),
-		type: prop.type,
+		type: prop.typeHint,
 		default: prop.default != null ? JSON.stringify(prop.default) : undefined
 	};
 }

src/transformers/markdown/markdown-transformer.ts

@@ -1,4 +1,3 @@
-import { isAssignableToSimpleTypeKind, SimpleTypeKind, toTypeString } from "ts-simple-type";
 import { Program, TypeChecker } from "typescript";
 import { AnalyzerResult } from "../../analyze/types/analyzer-result";
 import { ComponentCssPart } from "../../analyze/types/features/component-css-part";
@@ -97,16 +96,16 @@ export const markdownTransformer: TransformerFunction = (results: AnalyzerResult
 
 /**
  * Returns a markdown table with css props
- * @param cssProperty
+ * @param cssProperties
  * @param config
  */
-function cssPropSection(cssProperty: ComponentCssProperty[], config: TransformerConfig): string {
-	const rows: string[][] = [["Property", "Default", "Description"]];
+function cssPropSection(cssProperties: ComponentCssProperty[], config: TransformerConfig): string {
+	const rows: string[][] = [["Property", "Type", "Default", "Description"]];
 	rows.push(
-		...cssProperty.map(prop => {
+		...cssProperties.map(prop => {
 			const def = (prop.default !== undefined ? JSON.stringify(prop.default) : "") || "";
 
-			return [(prop.name && markdownHighlight(prop.name)) || "", def, prop.jsDoc?.description || ""];
+			return [(prop.name && markdownHighlight(prop.name)) || "", prop.typeHint || "", def, prop.jsDoc?.description || ""];
 		})
 	);
 	return markdownHeader("CSS Custom Properties", 2, config) + "\n" + markdownTable(rows);
@@ -156,7 +155,7 @@ function eventSection(events: ComponentEvent[], checker: TypeChecker, config: Tr
 		...events.map(event => [
 			(event.name && markdownHighlight(event.name)) || "",
 			...(showVisibility ? [event.visibility || "public"] : []),
-			isAssignableToSimpleTypeKind(event.type(), SimpleTypeKind.ANY, checker) ? "" : markdownHighlight(toTypeString(event.type(), checker)),
+			markdownHighlight(getTypeHintFromType(event.typeHint ?? event.type?.(), checker)),
 			event.jsDoc?.description || ""
 		])
 	);