add code processing to annotations

MatthiesenXYZ · Nov 18, 2024 · b825d7a · b825d7a
1 parent 4159260
commit b825d7a
Show file tree

Hide file tree

Showing 10 changed files with 278 additions and 191 deletions.
diff --git a/packages/twoslash/README.md b/packages/twoslash/README.md
@@ -8,7 +8,6 @@ Add Twoslash support to your Expressive Code TypeScript code blocks.
 
 ### TODO
 - [ ] Make Annotations accessible
-- [ ] Implement Annotation code processesing (Requires support from EC (Planned))
 - [ ] Use EC's Markdown processing system once released. (Requires support from EC (Planned))
 - [ ] Figure out how to work with TwoslashVFS and setup support for "Showing Emitted Files"
 

diff --git a/packages/twoslash/package.json b/packages/twoslash/package.json
@@ -31,9 +31,7 @@
 		"default": "./dist/index.js"
 	},
 	"types": "./dist/index.d.ts",
-	"files": [
-		"dist"
-	],
+	"files": ["dist"],
 	"scripts": {
 		"build-js-module": "tsm --require=../../scripts/filter-warnings.cjs ./scripts/minify.ts",
 		"compile": "tsup ./src/index.ts --format esm --dts --sourcemap --clean",
@@ -45,7 +43,8 @@
 		"mdast-util-from-markdown": "^2.0.2",
 		"mdast-util-gfm": "^3.0.0",
 		"mdast-util-to-hast": "^13.2.0",
-		"twoslash": "^0.2.12"
+		"twoslash": "^0.2.12",
+		"expressive-code": "^0.38.3"
 	},
 	"devDependencies": {
 		"@types/uglify-js": "^3.17.5",

diff --git a/packages/twoslash/src/annotations/hover.ts b/packages/twoslash/src/annotations/hover.ts
@@ -4,14 +4,7 @@ import {
 } from "@expressive-code/core";
 import { h, type Root, type Element } from "@expressive-code/core/hast";
 import type { NodeHover } from "twoslash";
-import {
-	defaultHoverInfoProcessor,
-	renderMarkdown,
-	checkIfSingleParagraph,
-	filterTags,
-	renderMarkdownInline,
-} from "../helpers";
-import { jsdocTags } from "../regex";
+import type { RenderJSDocs } from "../types";
 
 /**
  * Represents a hover annotation for Twoslash.
@@ -25,7 +18,8 @@ export class TwoslashHoverAnnotation extends ExpressiveCodeAnnotation {
 	 */
 	constructor(
 		readonly hover: NodeHover,
-		readonly includeJsDoc: boolean,
+		readonly codeType: Element,
+		readonly renderedDocs: RenderJSDocs,
 	) {
 		super({
 			inlineRange: {
@@ -35,20 +29,6 @@ export class TwoslashHoverAnnotation extends ExpressiveCodeAnnotation {
 		});
 	}
 
-	private getHoverInfo(text: string) {
-		const info = defaultHoverInfoProcessor(text);
-
-		if (info === false) {
-			return [];
-		}
-
-		if (typeof info === "string") {
-			return h("code.twoslash-popup-code", [
-				h("span.twoslash-popup-code-type", info),
-			]);
-		}
-	}
-
 	/**
 	 * Renders the hover annotation.
 	 * @param nodesToTransform - The nodes to be transformed with hover annotations.
@@ -63,44 +43,11 @@ export class TwoslashHoverAnnotation extends ExpressiveCodeAnnotation {
 							"div.twoslash-popup-container.not-content",
 
 							[
-								this.getHoverInfo(this.hover.text),
-								...(this.hover.docs && this.includeJsDoc
-									? [
-											h("div.twoslash-popup-docs", [
-												h("p", [renderMarkdown(this.hover.docs)]),
-											]),
-										]
-									: []),
-								...(this.hover.tags && this.includeJsDoc
-									? [
-											h("div.twoslash-popup-docs.twoslash-popup-docs-tags", [
-												...this.hover.tags.map((tag) =>
-													jsdocTags.includes(tag[0])
-														? h("p", [
-																h(
-																	"span.twoslash-popup-docs-tag-name",
-																	`@${tag[0]}`,
-																),
-																tag[1]
-																	? [
-																			checkIfSingleParagraph(
-																				tag[1],
-																				filterTags(tag[0]),
-																			)
-																				? " ― "
-																				: " ",
-																			h(
-																				"span.twoslash-popup-docs-tag-value",
-																				renderMarkdownInline(tag[1]),
-																			),
-																		]
-																	: [],
-															])
-														: [],
-												),
-											]),
-										]
-									: []),
+								h("code.twoslash-popup-code", [
+									h("span.twoslash-popup-code-type", this.codeType),
+								]),
+								this.renderedDocs.docs,
+								this.renderedDocs.tags,
 							],
 						),
 						node,

diff --git a/packages/twoslash/src/annotations/static.ts b/packages/twoslash/src/annotations/static.ts
@@ -3,17 +3,10 @@ import {
 	ExpressiveCodeAnnotation,
 	type ExpressiveCodeLine,
 } from "@expressive-code/core";
-import { h } from "@expressive-code/core/hast";
+import { type Element, h } from "@expressive-code/core/hast";
 import type { NodeQuery } from "twoslash";
-import {
-	defaultHoverInfoProcessor,
-	getTextWidthInPixels,
-	renderMarkdown,
-	checkIfSingleParagraph,
-	filterTags,
-	renderMarkdownInline,
-} from "../helpers";
-import { jsdocTags } from "../regex";
+import { getTextWidthInPixels } from "../helpers";
+import type { RenderJSDocs } from "../types";
 
 /**
  * Represents a static annotation for Twoslash.
@@ -32,7 +25,8 @@ export class TwoslashStaticAnnotation extends ExpressiveCodeAnnotation {
 	constructor(
 		readonly query: NodeQuery,
 		readonly line: ExpressiveCodeLine,
-		readonly includeJsDoc: boolean,
+		readonly codeType: Element,
+		readonly renderedDocs: RenderJSDocs,
 	) {
 		super({
 			inlineRange: {
@@ -42,20 +36,6 @@ export class TwoslashStaticAnnotation extends ExpressiveCodeAnnotation {
 		});
 	}
 
-	private getHoverInfo(text: string) {
-		const info = defaultHoverInfoProcessor(text);
-
-		if (info === false) {
-			return [];
-		}
-
-		if (typeof info === "string") {
-			return h("code.twoslash-popup-code", [
-				h("span.twoslash-popup-code-type", info),
-			]);
-		}
-	}
-
 	/**
 	 * Renders the static annotation.
 	 * @param nodesToTransform - The nodes to transform with the error box annotation.
@@ -74,44 +54,11 @@ export class TwoslashStaticAnnotation extends ExpressiveCodeAnnotation {
 					},
 					[
 						h("div.twoslash-static-container.not-content", [
-							this.getHoverInfo(this.query.text),
-							...(this.query.docs && this.includeJsDoc
-								? [
-										h("div.twoslash-popup-docs", [
-											h("p", [renderMarkdown(this.query.docs)]),
-										]),
-									]
-								: []),
-							...(this.query.tags && this.includeJsDoc
-								? [
-										h("div.twoslash-popup-docs.twoslash-popup-docs-tags", [
-											...this.query.tags.map((tag) =>
-												jsdocTags.includes(tag[0])
-													? h("p", [
-															h(
-																"span.twoslash-popup-docs-tag-name",
-																`@${tag[0]}`,
-															),
-															tag[1]
-																? [
-																		checkIfSingleParagraph(
-																			tag[1],
-																			filterTags(tag[0]),
-																		)
-																			? " ― "
-																			: " ",
-																		h(
-																			"span.twoslash-popup-docs-tag-value",
-																			renderMarkdownInline(tag[1]),
-																		),
-																	]
-																: [],
-														])
-													: [],
-											),
-										]),
-									]
-								: []),
+							h("code.twoslash-popup-code", [
+								h("span.twoslash-popup-code-type", this.codeType),
+							]),
+							this.renderedDocs.docs,
+							this.renderedDocs.tags,
 						]),
 					],
 				),