Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat]: Add code processing to annotations #19

Merged
merged 3 commits into from
Nov 18, 2024
Merged

[Feat]: Add code processing to annotations #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b825d7a
add code processing to annotations
Adammatthiesen Nov 18, 2024
61f7d18
add changeset
Adammatthiesen Nov 18, 2024
2cdad62
organize deps
Adammatthiesen Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/pink-ants-deliver.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"expressive-code-twoslash": patch
---

Add codeblock and type processing to Hover/Static annotations
1 change: 0 additions & 1 deletion packages/twoslash/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand Down
5 changes: 2 additions & 3 deletions packages/twoslash/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -42,6 +40,7 @@
},
"type": "module",
"dependencies": {
"expressive-code": "^0.38.3",
"mdast-util-from-markdown": "^2.0.2",
"mdast-util-gfm": "^3.0.0",
"mdast-util-to-hast": "^13.2.0",
Expand Down
69 changes: 8 additions & 61 deletions packages/twoslash/src/annotations/hover.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -25,7 +18,8 @@ export class TwoslashHoverAnnotation extends ExpressiveCodeAnnotation {
*/
constructor(
readonly hover: NodeHover,
readonly includeJsDoc: boolean,
readonly codeType: Element,
readonly renderedDocs: RenderJSDocs,
) {
super({
inlineRange: {
Expand All @@ -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.
Expand All @@ -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,
Expand Down
73 changes: 10 additions & 63 deletions packages/twoslash/src/annotations/static.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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: {
Expand All @@ -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.
Expand All @@ -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,
]),
],
),
Expand Down
Loading