++ */ +pre { + /* Give the text some space to breathe */ + padding: 12px; + /* All code samples get a grey border, twoslash ones get a different color */ + border-left: 1px solid #999; + border-bottom: 1px solid #999; + margin-bottom: 3rem; + /* Important to allow the code to move horizontally; + */ + overflow: auto; + /* So that folks know you can highlight */ + position: relative; +} +pre.shiki { + overflow: initial; +} +pre.shiki:hover .dim { + opacity: 1; +} +pre.shiki div.dim { + opacity: 0.5; +} +pre.shiki div.dim, +pre.shiki div.highlight { + margin: 0; + padding: 0; +} +pre.shiki div.highlight { + opacity: 1; + background-color: #f1f8ff; +} +pre.shiki div.line { + min-height: 1rem; +} +pre.twoslash { + border-color: #719af4; +} +pre .code-container { + overflow: auto; +} +pre .code-container > a { + position: absolute; + right: 8px; + bottom: 8px; + border-radius: 4px; + border: 1px solid #719af4; + padding: 0 8px; + color: #719af4; + text-decoration: none; + opacity: 0; + transition-timing-function: ease; + transition: opacity 0.3s; +} +@media (prefers-reduced-motion: reduce) { + pre .code-container > a { + transition: none; + } +} +pre .code-container > a:hover { + color: white; + background-color: #719af4; +} +pre .code-container:hover a { + opacity: 1; +} +pre code { + /** Style setup */ + font-size: 15px; + font-family: var(--code-font); + white-space: pre; + -webkit-overflow-scrolling: touch; +} +pre code a { + text-decoration: none; +} +pre data-err { + background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") + repeat-x bottom left; + padding-bottom: 3px; +} +pre .query { + margin-bottom: 10px; + color: #137998; + display: inline-block; +} +pre .error, +pre .error-behind { + margin-left: -14px; + margin-top: 8px; + margin-bottom: 4px; + padding: 6px; + padding-left: 14px; + width: calc(100% - 19px); + white-space: pre-wrap; + display: block; +} +pre .error { + position: absolute; + background-color: #fee; + border-left: 2px solid #bf1818; + /* Give the space to the error code */ + display: flex; + align-items: center; + color: black; +} +pre .error .code { + display: none; +} +pre .error-behind { + user-select: none; + color: #fee; +} +pre .arrow { + /* Transparent background */ + background-color: #eee; + position: relative; + top: -7px; + margin-left: 0.1rem; + /* Edges */ + border-left: 1px solid #eee; + border-top: 1px solid #eee; + transform: translateY(25%) rotate(45deg); + /* Size */ + height: 8px; + width: 8px; +} +pre .popover { + margin-bottom: 10px; + background-color: #eee; + display: inline-block; + padding: 0 0.5rem 0.3rem; + margin-top: 10px; + border-radius: 3px; +} +pre .inline-completions ul.dropdown { + display: inline-block; + position: absolute; + width: 240px; + background-color: gainsboro; + color: grey; + padding-top: 4px; + font-family: "JetBrains Mono", Menlo, Monaco, Consolas, Courier New, monospace; + font-size: 0.8rem; + margin: 0; + padding: 0; + border-left: 4px solid #4b9edd; +} +pre .inline-completions ul.dropdown::before { + background-color: #4b9edd; + width: 2px; + position: absolute; + top: -1.2rem; + left: -3px; + content: " "; +} +pre .inline-completions ul.dropdown li { + overflow-x: hidden; + padding-left: 4px; + margin-bottom: 4px; +} +pre .inline-completions ul.dropdown li.deprecated { + text-decoration: line-through; +} +pre .inline-completions ul.dropdown li span.result-found { + color: #4b9edd; +} +pre .inline-completions ul.dropdown li span.result { + width: 100px; + color: black; + display: inline-block; +} +.dark-theme .markdown pre { + background-color: #d8d8d8; + border-color: #ddd; + filter: invert(98%) hue-rotate(180deg); +} +data-lsp { + /* Ensures there's no 1px jump when the hover happens above */ + border-bottom: 1px dotted transparent; + /* Fades in unobtrusively */ + transition-timing-function: ease; + transition: border-color 0.3s; + /* Respect people's wishes to not have animations */ +} +@media (prefers-reduced-motion: reduce) { + data-lsp { + transition: none; + } +} +/** When you mouse over the pre, show the underlines */ +pre:hover data-lsp { + border-color: #747474; +} +/** The tooltip-like which provides the LSP response */ +#twoslash-mouse-hover-info { + background-color: #3f3f3f; + color: #fff; + text-align: left; + padding: 5px 8px; + border-radius: 2px; + font-family: "Cascadia Mono-SemiLight", "JetBrains Mono", Menlo, Monaco, Consolas, Courier New, monospace; + font-size: 14px; + white-space: pre-wrap; + border-radius: 2px; + z-index: 100; + pointer-events: none; +} +/* These are probably annoying to most others */ +.shiki.playground-link { + display: none; +} +.shiki.language-id { + display: none; +} diff --git a/packages/eleventy-plugin-shiki-twoslash/LICENSE b/packages/eleventy-plugin-shiki-twoslash/LICENSE new file mode 100644 index 0000000..9f2bf75 --- /dev/null +++ b/packages/eleventy-plugin-shiki-twoslash/LICENSE @@ -0,0 +1,17 @@ +The MIT License (MIT) +Copyright (c) Microsoft Corporation + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and +associated documentation files (the "Software"), to deal in the Software without restriction, +including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, +and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial +portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT +NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE +SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/eleventy-plugin-shiki-twoslash/README.md b/packages/eleventy-plugin-shiki-twoslash/README.md new file mode 100644 index 0000000..94f57d3 --- /dev/null +++ b/packages/eleventy-plugin-shiki-twoslash/README.md @@ -0,0 +1,19 @@ +### Eleventy Shiki Twoslash + +Sets up markdown code blocks to run through [shiki](https://shiki.matsu.io) which means it gets the VS Code quality +syntax highlighting mixed with the twoslash JavaScript tooling from the TypeScript website. + +#### Setup + +1. **Install the dependency**: `yarn add eleventy-plugin-shiki-twoslash` +1. **Include `"eleventy-plugin-shiki-twoslash"` in the plugins section** of `.eleventy.js` + + ```ts + const shikiTwoslash = require("eleventy-plugin-shiki-twoslash") + + module.exports = function (eleventyConfig) { + eleventyConfig.addPlugin(shikiTwoslash, { theme: "nord" }) + } + ``` + +1. **Go read [npmjs.com/package/remark-shiki-twoslash](https://www.npmjs.com/package/remark-shiki-twoslash)** to see the next steps, and what is available, this module leaves all the heavy work to that module. diff --git a/packages/eleventy-plugin-shiki-twoslash/index.js b/packages/eleventy-plugin-shiki-twoslash/index.js new file mode 100644 index 0000000..7f4f9ec --- /dev/null +++ b/packages/eleventy-plugin-shiki-twoslash/index.js @@ -0,0 +1,29 @@ +// @ts-check +const { setupForFile, transformAttributesToHTML } = require("remark-shiki-twoslash") +const { sleep } = require("deasync") + +/** + * @param {*} eleventyConfig + * @param {import("shiki-twoslash").UserConfigSettings} options + */ +module.exports = function (eleventyConfig, options = {}) { + /** @type {import("shiki").Highlighter[]} */ + let highlighters = undefined + setupForFile(options).then(h => (highlighters = h.highlighters)) + + if (!highlighters) { + let count = 10000 / 200 + while (!highlighters) { + sleep(200) + count -= 1 + if (count <= 0) + throw new Error( + "Could not get Shiki loaded async via 'deasync'. 11ty doesn't have an API for async plugins, and Shiki needs this for the WASM syntax highlighter. You can try using a different version of node, or requesting APIs at https://github.com/11ty/eleventy" + ) + } + } + + eleventyConfig.addMarkdownHighlighter((code, lang, fence) => + transformAttributesToHTML(code, lang, fence, highlighters, options) + ) +} diff --git a/packages/eleventy-plugin-shiki-twoslash/package.json b/packages/eleventy-plugin-shiki-twoslash/package.json new file mode 100644 index 0000000..fb2c946 --- /dev/null +++ b/packages/eleventy-plugin-shiki-twoslash/package.json @@ -0,0 +1,26 @@ +{ + "name": "eleventy-plugin-shiki-twoslash", + "version": "1.0.0", + "license": "MIT", + "homepage": "https://github.com/microsoft/TypeScript-Website", + "repository": { + "url": "https://github.com/microsoft/TypeScript-Website.git", + "directory": "packages/eleventy-plugin-shiki-twoslash", + "type": "git" + }, + "bugs": { + "url": "https://github.com/microsoft/TypeScript-Website/issues" + }, + "description": "An 11ty plugin which adds shiki with optional twoslash-powered code samples", + "author": "Orta Therox", + "main": "./index.js", + "typings": "./index.d.ts", + "scripts": { + "bootstrap": "echo 'NOOP'", + "build": "npx tsc index.js --declaration --allowJs --emitDeclarationOnly" + }, + "dependencies": { + "remark-shiki-twoslash": "1.3.0", + "typescript": "*" + } +} diff --git a/packages/gatsby-remark-shiki-twoslash/.gitignore b/packages/gatsby-remark-shiki-twoslash/.gitignore new file mode 100644 index 0000000..ff88468 --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/.gitignore @@ -0,0 +1,8 @@ +*.log +.DS_Store +node_modules +.rts2_cache_cjs +.rts2_cache_esm +.rts2_cache_umd +.rts2_cache_system +dist diff --git a/packages/gatsby-remark-shiki-twoslash/LICENSE b/packages/gatsby-remark-shiki-twoslash/LICENSE new file mode 100644 index 0000000..9f2bf75 --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/LICENSE @@ -0,0 +1,17 @@ +The MIT License (MIT) +Copyright (c) Microsoft Corporation + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and +associated documentation files (the "Software"), to deal in the Software without restriction, +including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, +and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial +portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT +NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE +SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/gatsby-remark-shiki-twoslash/README.md b/packages/gatsby-remark-shiki-twoslash/README.md new file mode 100644 index 0000000..4d7ad13 --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/README.md @@ -0,0 +1,38 @@ +### gatsby-remark-shiki-twoslash + +Sets up markdown code blocks to run through [shiki](https://shiki.matsu.io) which means it gets the VS Code quality +syntax highlighting. This part is basically the same as [gatsby-remark-shiki](https://www.gatsbyjs.org/packages/gatsby-remark-shiki/). + +## Plugin Setup + +#### Express Setup + +[Read this PR](https://github.com/orta/gatsby-twoslash-shiki-blog/pull/1) and apply the same to your project. + +#### Setup + +1. **Install the dependency**: `yarn add gatsby-remark-shiki-twoslash` +1. **Include `"gatsby-remark-shiki-twoslash"` in the plugins section** of `gatsby-transformer-remark` + + ```diff + { + resolve: `gatsby-transformer-remark`, + options: { + plugins: [ + "gatsby-remark-autolink-headers", + + { + + resolve: "gatsby-remark-shiki-twoslash", + + options: { + + theme: "nord", + + } + + }, + "gatsby-remark-copy-linked-files", + "gatsby-remark-smartypants", + ], + }, + } + ``` + + If you have `gatsby-remark-prismjs` in, delete it from the config and run `yarn remove gatsby-remark-prismjs`. + +1. **Go read [npmjs.com/package/remark-shiki-twoslash](https://www.npmjs.com/package/remark-shiki-twoslash)** to see what is available, this module leaves all the heavy work to that module. diff --git a/packages/gatsby-remark-shiki-twoslash/package.json b/packages/gatsby-remark-shiki-twoslash/package.json new file mode 100644 index 0000000..09c9b8f --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/package.json @@ -0,0 +1,47 @@ +{ + "name": "gatsby-remark-shiki-twoslash", + "version": "2.0.0", + "license": "MIT", + "homepage": "https://github.com/microsoft/TypeScript-Website", + "repository": { + "url": "https://github.com/microsoft/TypeScript-Website.git", + "directory": "packages/gatsby-remark-shiki-twoslash", + "type": "git" + }, + "bugs": { + "url": "https://github.com/microsoft/TypeScript-Website/issues" + }, + "description": "A remark plugin for Gatsby which adds twoslash code samples for TypeScript", + "author": "Orta Therox", + "main": "./dist/index.js", + "module": "./dist/gatsby-remark-shiki-twoslash.esm.js", + "typings": "./dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "start": "tsdx watch", + "bootstrap": "yarn build", + "prepublishOnly": "yarn build", + "build": "tsdx build", + "test": "tsdx test", + "lint": "tsdx lint" + }, + "dependencies": { + "remark-shiki-twoslash": "1.3.0", + "typescript": "*", + "unist-util-visit": "^2.0.0" + }, + "devDependencies": { + "jest-file-snapshot": "^0.5.0", + "rehype-stringify": "^6.0.1", + "tsdx": "^0.14.1", + "tslib": "^1.10.0", + "typescript": "*", + "unified": "^8.4.2", + "remark": "^13.0.0" + }, + "jest": { + "testEnvironment": "node" + } +} diff --git a/packages/gatsby-remark-shiki-twoslash/screenshots/twoslash-site.png b/packages/gatsby-remark-shiki-twoslash/screenshots/twoslash-site.png new file mode 100644 index 0000000..223b8b2 Binary files /dev/null and b/packages/gatsby-remark-shiki-twoslash/screenshots/twoslash-site.png differ diff --git a/packages/gatsby-remark-shiki-twoslash/src/ambient.d.ts b/packages/gatsby-remark-shiki-twoslash/src/ambient.d.ts new file mode 100644 index 0000000..133eed2 --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/src/ambient.d.ts @@ -0,0 +1 @@ +declare module 'unist-util-visit' diff --git a/packages/gatsby-remark-shiki-twoslash/src/index.ts b/packages/gatsby-remark-shiki-twoslash/src/index.ts new file mode 100755 index 0000000..94e9e6d --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/src/index.ts @@ -0,0 +1,99 @@ +// prettier-ignore +import { createShikiHighlighter, renderCodeToHTML, runTwoSlash, UserConfigSettings } from "shiki-twoslash" +import type { Highlighter, Lang } from "shiki" + +import visit from "unist-util-visit" +import { Node } from "unist" + +import { createHash } from "crypto" +import { readFileSync, existsSync, mkdirSync, writeFileSync } from "fs" +import { join } from "path" + +/* A rich AST node for uninst with twoslash'd data */ +type RichNode = Node & { + lang: Lang + type: string + children: Node[] + value: string + meta?: string[] + twoslash?: import("@typescript/twoslash").TwoSlashReturn +} + +/** + * The function doing the work of transforming any codeblock samples + * which have opted-in to the twoslash pattern. + */ +export const visitor = (highlighter: Highlighter, nullSettings?: UserConfigSettings) => (node: RichNode) => { + let lang = node.lang + const settings = nullSettings || {} + + const shouldDisableTwoslash = process && process.env && !!process.env.TWOSLASH_DISABLE + + // Run twoslash + if (!shouldDisableTwoslash) runTwoSlashOnNode(settings)(node) + + // Shiki doesn't respect json5 as an input, so switch it + // to json, which can handle comments in the syntax highlight + const replacer = { + json5: "json", + } + + // @ts-ignore + if (replacer[lang]) lang = replacer[lang] + + const results = renderCodeToHTML(node.value, lang, node.meta || [], {}, highlighter, node.twoslash) + node.type = "html" + node.value = results + node.children = [] +} + +/** + * Runs twoslash across an AST node, switching out the text content, and lang + * and adding a `twoslash` property to the node. + */ +export const runTwoSlashOnNode = (settings: UserConfigSettings) => (node: RichNode) => { + if (node.meta && node.meta.includes("twoslash")) { + try { + const results = cachedTwoslashCall(node.value, node.lang, settings) + node.value = results.code + node.lang = results.extension as Lang + node.twoslash = results + } catch (error) { + error.message = `gatsby-remark-shiki-twoslash: Error thrown in code sample on line ${node.position?.start.line}\n\n${error.message}` + throw error + } + } +} + +/** Keeps a cache of the JSON responses in node_modules/.cache/twoslash */ +export const cachedTwoslashCall = (code: string, lang: string, settings: UserConfigSettings) => { + const shasum = createHash("sha1") + const codeSha = shasum.update(code).digest("hex") + const cacheRoot = join(__dirname, "..", "..", ".cache", "twoslash") + const cachePath = join(cacheRoot, `${codeSha}.json`) + + if (existsSync(cachePath)) { + return JSON.parse(readFileSync(cachePath, "utf8")) + } else { + const results = runTwoSlash(code, lang, settings) + if (!existsSync(cacheRoot)) mkdirSync(cacheRoot, { recursive: true }) + writeFileSync(cachePath, JSON.stringify(results), "utf8") + return results + } +} + +/** + * The main interface for the remark shiki API, sets up the + * highlighter then runs a visitor across all code tags in + * the markdown running twoslash, then shiki. + * */ +const remarkShiki = async function ({ markdownAST }: any, settings: UserConfigSettings = {}) { + const highlighter = await createShikiHighlighter(settings) + visit(markdownAST, "code", visitor(highlighter, settings)) +} + +/** Sends the twoslash visitor over the existing MD AST and replaces the code samples inline, does not do highlighting */ +export const runTwoSlashAcrossDocument = ({ markdownAST }: any, settings: UserConfigSettings = {}) => + visit(markdownAST, "code", runTwoSlashOnNode(settings)) + +export default remarkShiki diff --git a/packages/gatsby-remark-shiki-twoslash/test/fixtures.test.ts b/packages/gatsby-remark-shiki-twoslash/test/fixtures.test.ts new file mode 100644 index 0000000..78171ef --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/test/fixtures.test.ts @@ -0,0 +1,116 @@ +const toHAST = require(`mdast-util-to-hast`) +const hastToHTML = require(`hast-util-to-html`) +import { readdirSync, readFileSync, lstatSync } from "fs" +import { join, parse } from "path" +import { toMatchFile } from "jest-file-snapshot" +import { format } from "prettier" +import gatsbyRemarkShiki from "../src/index" +const remark = require("remark") +import { Node } from "unist" +expect.extend({ toMatchFile }) + +const getHTML = async (code: string, settings: any) => { + //import("shiki-twoslash").UserConfigSettings) => { + const markdownAST: Node = remark().parse(code) + + await gatsbyRemarkShiki({ markdownAST }, settings) + // await run() + + // @ts-ignore + const twoslashes = markdownAST.children.filter(c => c.meta && c.meta.includes("twoslash")).map(c => c.twoslash) + const hAST = toHAST(markdownAST, { allowDangerousHtml: true }) + return { + html: hastToHTML(hAST, { allowDangerousHtml: true }), + twoslashes, + } +} + +// To add a test, create a file in the fixtures folder and it will will run through +// as though it was the codeblock. + +describe("with fixtures", () => { + // Add all codefixes + const fixturesFolder = join(__dirname, "fixtures") + const resultsFolder = join(__dirname, "results") + + readdirSync(fixturesFolder).forEach(fixtureName => { + const fixture = join(fixturesFolder, fixtureName) + if (lstatSync(fixture).isDirectory()) { + return + } + + // if (fixtureName.includes("Relative")) { + // return + // } + + it("Fixture: " + fixtureName, async () => { + const resultHTMLName = parse(fixtureName).name + ".html" + const resultTwoSlashName = parse(fixtureName).name + ".json" + + const resultHTMLPath = join(resultsFolder, resultHTMLName) + const resultTwoSlashPath = join(resultsFolder, resultTwoSlashName) + + const code = readFileSync(fixture, "utf8") + + const results = await getHTML(code, { + theme: require("./ts-theme.json"), + vfsRoot: join(__dirname, "..", "..", ".."), + }) + + const htmlString = format(results.html + style, { parser: "html" }) + expect(cleanFixture(htmlString)).toMatchFile(resultHTMLPath) + + const twoString = format(JSON.stringify(results.twoslashes), { parser: "json" }) + expect(cleanFixture(twoString)).toMatchFile(resultTwoSlashPath) + }) + }) +}) + +const style = ` + + +` + +const cleanFixture = (text: string) => { + const wd = process.cwd() + return text + .replace(new RegExp(wd, "g"), "[home]") + .replace(/\/home\/runner\/work\/TypeScript-Website\/TypeScript-Website/g, "[home]") +} diff --git a/packages/gatsby-remark-shiki-twoslash/test/fixtures/codefenceHighlight.md b/packages/gatsby-remark-shiki-twoslash/test/fixtures/codefenceHighlight.md new file mode 100644 index 0000000..9495c22 --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/test/fixtures/codefenceHighlight.md @@ -0,0 +1,18 @@ +## Relative imports + +```ts twoslash {2} +function greet(person: string, date: Date) { + console.log(`Hello ${person}, today is ${date.toDateString()}!`) +} + +greet("Maddison", new Date()) +``` + +Hello + +```ts twoslash {1} +const a = 1 +// ---cut--- +const b = 2 +const c = 3 // highlighted (0 based) +``` diff --git a/packages/gatsby-remark-shiki-twoslash/test/fixtures/exporting.md b/packages/gatsby-remark-shiki-twoslash/test/fixtures/exporting.md new file mode 100644 index 0000000..74485bc --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/test/fixtures/exporting.md @@ -0,0 +1,16 @@ +## Relative imports + +```ts twoslash +// @errors: 1259 +// @filename: utilFunctions.js +const getStringLength = str => str.length +module.exports = { + getStringLength, +} + +// @filename: index.ts +import utils from './utilFunctions' +const count = utils.getStringLength('Check JS') +``` + +Hello diff --git a/packages/gatsby-remark-shiki-twoslash/test/fixtures/highlight.md b/packages/gatsby-remark-shiki-twoslash/test/fixtures/highlight.md new file mode 100644 index 0000000..bece5f8 --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/test/fixtures/highlight.md @@ -0,0 +1,6 @@ +## Hello + +```ts twoslash +let helloWorld = 'Hello World' +// ^? +``` diff --git a/packages/gatsby-remark-shiki-twoslash/test/fixtures/importNodeTypes.md b/packages/gatsby-remark-shiki-twoslash/test/fixtures/importNodeTypes.md new file mode 100644 index 0000000..1059189 --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/test/fixtures/importNodeTypes.md @@ -0,0 +1,33 @@ +## Imports node's type defs + +This has a global `process` and two imports + +```ts twoslash +///++++[the code as a series of spans]+
Hello
+<pre class="shiki twoslash lsp" style="background-color: #FFFFFF; color: +#000000"><div class='code-container'><code><div class='line +dim'><span style="color: #0000FF">const</span><span style="color: +#000000"> </span><span style="color: #0070C1"><data-lsp +lsp='const b: 2' >b</data-lsp></span><span style="color: +#000000"> = </span><span style="color: +#098658">2</span></div><div class='line highlight'><span +style="color: #0000FF">const</span><span style="color: #000000"> +</span><span style="color: #0070C1"><data-lsp lsp='const c: 3' +>c</data-lsp></span><span style="color: #000000"> = +</span><span style="color: #098658">3</span><span +style="color: #000000"> </span><span style="color: #008000">// +highlighted (0 based)</span></div></code><a +class='playground-link' +href='https://www.typescriptlang.org/play/#code/MYewdgzgLgBAhjAvDAjAKAPQZgWj8AVyjxzVElgCMkYAmM8aGYGgZhixgAsBLAcy4AbflygBTACYwAFAAYYlOBEkBKIA'>Try</a></div></pre> + + diff --git a/packages/gatsby-remark-shiki-twoslash/test/results/codefenceHighlight.json b/packages/gatsby-remark-shiki-twoslash/test/results/codefenceHighlight.json new file mode 100644 index 0000000..32c6a84 --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/test/results/codefenceHighlight.json @@ -0,0 +1,139 @@ +[ + { + "code": "function greet(person: string, date: Date) {\n console.log(`Hello ${person}, today is ${date.toDateString()}!`)\n}\n\ngreet(\"Maddison\", new Date())", + "extension": "ts", + "highlights": [], + "queries": [], + "staticQuickInfos": [ + { + "text": "function greet(person: string, date: Date): void", + "docs": "", + "start": 9, + "length": 5, + "line": 0, + "character": 9, + "targetString": "greet" + }, + { + "text": "(parameter) person: string", + "docs": "", + "start": 15, + "length": 6, + "line": 0, + "character": 15, + "targetString": "person" + }, + { + "text": "(parameter) date: Date", + "docs": "", + "start": 31, + "length": 4, + "line": 0, + "character": 31, + "targetString": "date" + }, + { + "text": "interface Date", + "docs": "Enables basic storage and retrieval of dates and times.", + "start": 37, + "length": 4, + "line": 0, + "character": 37, + "targetString": "Date" + }, + { + "text": "var console: Console", + "docs": "", + "start": 47, + "length": 7, + "line": 1, + "character": 2, + "targetString": "console" + }, + { + "text": "(method) Console.log(...data: any[]): void", + "docs": "", + "start": 55, + "length": 3, + "line": 1, + "character": 10, + "targetString": "log" + }, + { + "text": "(parameter) person: string", + "docs": "", + "start": 68, + "length": 6, + "line": 1, + "character": 23, + "targetString": "person" + }, + { + "text": "(parameter) date: Date", + "docs": "", + "start": 88, + "length": 4, + "line": 1, + "character": 43, + "targetString": "date" + }, + { + "text": "(method) Date.toDateString(): string", + "docs": "Returns a date as a string value.", + "start": 93, + "length": 12, + "line": 1, + "character": 48, + "targetString": "toDateString" + }, + { + "text": "function greet(person: string, date: Date): void", + "docs": "", + "start": 115, + "length": 5, + "line": 4, + "character": 0, + "targetString": "greet" + }, + { + "text": "var Date: DateConstructor\nnew () => Date (+4 overloads)", + "docs": "", + "start": 137, + "length": 4, + "line": 4, + "character": 22, + "targetString": "Date" + } + ], + "errors": [], + "playgroundURL": "https://www.typescriptlang.org/play/#code/GYVwdgxgLglg9mABAcwE4FN1QBQAd2oDOCAXIoVKjGMgDSIAmAhlOmQCIvoCUiA3gChEiCAmIAbdADpxcZNgAGACXTjZiACR98RBAF96UOMwCeiGIU19mrKUc6sAypWrzuegIQLuAvQIFomDgARACyTAwMFgjB9GDoAO6IDujY3NxAA" + }, + { + "code": "const b = 2\nconst c = 3 // highlighted (0 based)", + "extension": "ts", + "highlights": [], + "queries": [], + "staticQuickInfos": [ + { + "text": "const b: 2", + "docs": "", + "start": 6, + "length": 1, + "line": 0, + "character": 6, + "targetString": "b" + }, + { + "text": "const c: 3", + "docs": "", + "start": 18, + "length": 1, + "line": 1, + "character": 6, + "targetString": "c" + } + ], + "errors": [], + "playgroundURL": "https://www.typescriptlang.org/play/#code/MYewdgzgLgBAhjAvDAjAKAPQZgWj8AVyjxzVElgCMkYAmM8aGYGgZhixgAsBLAcy4AbflygBTACYwAFAAYYlOBEkBKIA" + } +] diff --git a/packages/gatsby-remark-shiki-twoslash/test/results/exporting.html b/packages/gatsby-remark-shiki-twoslash/test/results/exporting.html new file mode 100644 index 0000000..adbec16 --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/test/results/exporting.html @@ -0,0 +1,90 @@ +Hello
+ + diff --git a/packages/gatsby-remark-shiki-twoslash/test/results/exporting.json b/packages/gatsby-remark-shiki-twoslash/test/results/exporting.json new file mode 100644 index 0000000..b09ff5c --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/test/results/exporting.json @@ -0,0 +1,110 @@ +[ + { + "code": "// @filename: utilFunctions.js\nconst getStringLength = str => str.length\nmodule.exports = {\n getStringLength,\n}\n\n// @filename: index.ts\nimport utils from './utilFunctions'\nconst count = utils.getStringLength('Check JS')", + "extension": "ts", + "highlights": [], + "queries": [], + "staticQuickInfos": [ + { + "text": "const getStringLength: (str: any) => any", + "docs": "", + "start": 37, + "length": 15, + "line": 1, + "character": 6, + "targetString": "getStringLength" + }, + { + "text": "(parameter) str: any", + "docs": "", + "start": 55, + "length": 3, + "line": 1, + "character": 24, + "targetString": "str" + }, + { + "text": "(parameter) str: any", + "docs": "", + "start": 62, + "length": 3, + "line": 1, + "character": 31, + "targetString": "str" + }, + { + "text": "any", + "start": 66, + "length": 6, + "line": 1, + "character": 35, + "targetString": "length" + }, + { + "text": "var module: {\n exports: typeof module.exports;\n}", + "docs": "", + "start": 73, + "length": 6, + "line": 2, + "character": 0, + "targetString": "module" + }, + { + "text": "module module.exports", + "docs": "", + "start": 80, + "length": 7, + "line": 2, + "character": 7, + "targetString": "exports" + }, + { + "text": "(alias) const getStringLength: (str: any) => any\nimport getStringLength", + "docs": "", + "start": 94, + "length": 15, + "line": 3, + "character": 2, + "targetString": "getStringLength" + }, + { + "text": "import utils", + "docs": "", + "start": 144, + "length": 5, + "line": 7, + "character": 7, + "targetString": "utils" + }, + { + "text": "const count: any", + "docs": "", + "start": 179, + "length": 5, + "line": 8, + "character": 6, + "targetString": "count" + }, + { + "text": "import utils", + "docs": "", + "start": 187, + "length": 5, + "line": 8, + "character": 14, + "targetString": "utils" + }, + { + "text": "(alias) getStringLength(str: any): any\nimport getStringLength", + "docs": "", + "start": 193, + "length": 15, + "line": 8, + "character": 20, + "targetString": "getStringLength" + } + ], + "errors": [], + "playgroundURL": "https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygIwCYCsBOAUCBAGYCWANpAHYCGAtpKgK4Au5AYo5QMatyWIA6AFaI8XPomagA5pGYBlZtBKVpAGSrTmAC1ABeUJOj6AfIaUCKqnXlpwAJowoDIADwAOCZon2gA3nigMnKKyqoa1toANHgAvngEYOCkVnQMoCr2bgLeeCS0ntBSLOQ+RPC0oADkAsAlZBzcvPxVYhJS4pxSBvWCsgpKKuqaOgAUVQDC2pBcANagAFLyVQCUQA" + } +] diff --git a/packages/gatsby-remark-shiki-twoslash/test/results/highlight.html b/packages/gatsby-remark-shiki-twoslash/test/results/highlight.html new file mode 100644 index 0000000..a98e0da --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/test/results/highlight.html @@ -0,0 +1,51 @@ +This has a global process and two imports
Type assertions have two forms. One is the "angle-bracket" syntax:
+<pre class="shiki twoslash lsp" style="background-color: #FFFFFF; color: +#000000"><div class='code-container'><code><div +class='line'><span style="color: #0000FF">let</span><span +style="color: #000000"> </span><span style="color: +#001080"><data-lsp lsp='let someValue: any' +>someValue</data-lsp></span><span style="color: #000000">: +</span><span style="color: #267F99">any</span><span +style="color: #000000"> = </span><span style="color: #A31515">"this is +a string"</span></div> <div class='line'><span style="color: +#0000FF">let</span><span style="color: #000000"> +</span><span style="color: #001080"><data-lsp lsp='let strLength: +number' >strLength</data-lsp></span><span style="color: +#000000">: </span><span style="color: +#267F99">number</span><span style="color: #000000"> = +(<</span><span style="color: +#267F99">string</span><span style="color: +#000000">></span><span style="color: #001080"><data-lsp +lsp='let someValue: any' >someValue</data-lsp></span><span +style="color: #000000">).</span><span style="color: +#001080"><data-lsp lsp='(property) String.length: number' +>length</data-lsp></span></div></code><a +class='playground-link' +href='https://www.typescriptlang.org/play/#code/DYUwLgBAzg9gtiAagQ2AVxALgsgdgTwgF4IAiMACwEsoIadowAnK3Ac1IChPRIpmAMiHaVsuNHABGIJsQgAKADz8W7AHywEKdCACUAOlAiKQA'>Try</a></div></pre> +And the other is the as-syntax:
+ The two samples are equivalent. Using one over the other is mostly a choice of
+ preference; however, when using TypeScript with JSX, only
+ as-style assertions are allowed.
+
+ In this case, you can use a switch statement to narrow down which
+ type is represented at runtime:
+
+ Intersection types are closely related to union types, but they are used very + differently. An intersection type combines multiple types into one. +
+ + diff --git a/packages/gatsby-remark-shiki-twoslash/test/results/large-chopped.json b/packages/gatsby-remark-shiki-twoslash/test/results/large-chopped.json new file mode 100644 index 0000000..39ca353 --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/test/results/large-chopped.json @@ -0,0 +1,193 @@ +[ + { + "code": "type NetworkState = NetworkLoadingState | NetworkFailedState | NetworkSuccessState\n\nfunction networkStatus(state: NetworkState): string {\n // Right now TypeScript does not know which of the three\n // potential types state could be.\n\n // Trying to access a property which isn't shared\n // across all types will raise an error\n state.code\n\n // By switching on state, TypeScript can narrow the union\n // down in code flow analysis\n switch (state.state) {\n case 'loading':\n return 'Downloading...'\n case 'failed':\n // The type must be NetworkFailedState here,\n // so accessing the `code` field is safe\n return `Error ${state.code} downloading`\n case 'success':\n return `Downloaded ${state.response.title} - ${state.response.summary}`\n }\n}", + "extension": "ts", + "highlights": [], + "queries": [], + "staticQuickInfos": [ + { + "text": "type NetworkState = NetworkLoadingState | NetworkFailedState | NetworkSuccessState", + "docs": "", + "start": 5, + "length": 12, + "line": 0, + "character": 5, + "targetString": "NetworkState" + }, + { + "text": "type NetworkLoadingState = {\n state: 'loading';\n}", + "docs": "", + "start": 20, + "length": 19, + "line": 0, + "character": 20, + "targetString": "NetworkLoadingState" + }, + { + "text": "type NetworkFailedState = {\n state: 'failed';\n code: number;\n}", + "docs": "", + "start": 42, + "length": 18, + "line": 0, + "character": 42, + "targetString": "NetworkFailedState" + }, + { + "text": "type NetworkSuccessState = {\n state: 'success';\n response: {\n title: string;\n duration: number;\n summary: string;\n };\n}", + "docs": "", + "start": 63, + "length": 19, + "line": 0, + "character": 63, + "targetString": "NetworkSuccessState" + }, + { + "text": "function networkStatus(state: NetworkState): string", + "docs": "", + "start": 93, + "length": 13, + "line": 2, + "character": 9, + "targetString": "networkStatus" + }, + { + "text": "(parameter) state: NetworkState", + "docs": "", + "start": 107, + "length": 5, + "line": 2, + "character": 23, + "targetString": "state" + }, + { + "text": "type NetworkState = NetworkLoadingState | NetworkFailedState | NetworkSuccessState", + "docs": "", + "start": 114, + "length": 12, + "line": 2, + "character": 30, + "targetString": "NetworkState" + }, + { + "text": "(parameter) state: NetworkState", + "docs": "", + "start": 331, + "length": 5, + "line": 8, + "character": 2, + "targetString": "state" + }, + { + "text": "any", + "start": 337, + "length": 4, + "line": 8, + "character": 8, + "targetString": "code" + }, + { + "text": "(parameter) state: NetworkState", + "docs": "", + "start": 445, + "length": 5, + "line": 12, + "character": 10, + "targetString": "state" + }, + { + "text": "(property) state: \"loading\" | \"failed\" | \"success\"", + "docs": "", + "start": 451, + "length": 5, + "line": 12, + "character": 16, + "targetString": "state" + }, + { + "text": "(parameter) state: NetworkFailedState", + "docs": "", + "start": 649, + "length": 5, + "line": 18, + "character": 22, + "targetString": "state" + }, + { + "text": "(property) code: number", + "docs": "", + "start": 655, + "length": 4, + "line": 18, + "character": 28, + "targetString": "code" + }, + { + "text": "(parameter) state: NetworkSuccessState", + "docs": "", + "start": 721, + "length": 5, + "line": 20, + "character": 27, + "targetString": "state" + }, + { + "text": "(property) response: {\n title: string;\n duration: number;\n summary: string;\n}", + "docs": "", + "start": 727, + "length": 8, + "line": 20, + "character": 33, + "targetString": "response" + }, + { + "text": "(property) title: string", + "docs": "", + "start": 736, + "length": 5, + "line": 20, + "character": 42, + "targetString": "title" + }, + { + "text": "(parameter) state: NetworkSuccessState", + "docs": "", + "start": 747, + "length": 5, + "line": 20, + "character": 53, + "targetString": "state" + }, + { + "text": "(property) response: {\n title: string;\n duration: number;\n summary: string;\n}", + "docs": "", + "start": 753, + "length": 8, + "line": 20, + "character": 59, + "targetString": "response" + }, + { + "text": "(property) summary: string", + "docs": "", + "start": 762, + "length": 7, + "line": 20, + "character": 68, + "targetString": "summary" + } + ], + "errors": [ + { + "category": 1, + "code": 2339, + "length": 4, + "start": 337, + "line": 8, + "character": 8, + "renderedMessage": "Property 'code' does not exist on type 'NetworkState'.\n Property 'code' does not exist on type 'NetworkLoadingState'.", + "id": "err-2339-592-4" + } + ], + "playgroundURL": "https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGYME4BQAXATwAdJQA5SfAdwQGsAZOAQwBMBLAOwHMBlfZvjIBeUAG9coUIgFDUAcgA2LDj3m4AvrgIkylGvQBizdosit+gkeMnTZkBQDMTZ1uqkBjOKwehOAVwBbACMYTW0iUgoqWmg6Xn8PD0hEREshUFEJKRkrBURE5NT3UGgU4jhORF9sqVB8dnwzVBloLm5bKVZ-aEF2StQAkLC66SDA5mhCFvw2nlstLRBQAFo1j398NZWdKP1Y+PtM6IM4pjZ29LIAHxOD41NzK9Bb-foEpJS0+21Hf04PA1Kn4Yu9ZP5EAAKXJyO5gqwAShmc24NikywASuxuAALfB+ODUUAAFV0vA8bWI+NYcBSBPxdE4hNA1Bx7A8ONAcEc9RxZHwOLKkFsywqQk4DWYinqukQdisoC8-kUrFAoQAdNp0WBiVN2vU4KBmJ9UkbQMR4KRoEQWWyOaB2IhOPJ8YgcZNzCKwMb4KapdLInTqKZpb1HWRmJxQDB4NBbDDIOqvD4taBlgAhQjSYP4Dn64EJgA0JLJFPYVMVkb8k3gRIFZH+-U4XtANOoUa4iu8ZEcyiJkalhEQjvjOft0Ps6oTCLRdQ8zGqoCUKna8mQnTqZXwPSj8gAIoTOMoLjx1WeSp4F2R5M5Hm516NtSS+TKooEIfjQnC4g9XM8+WUhYbk+iCGsaRTDjwvJkAABsmkAwaAjjsJAKoOnKiDMI4wqPqUVA7qAMEAKKwAgoAACRiAmSbdhoraHseqjcDBG7zou8gFCaiBrsBeHbtAUYwQe7aMeYFFUZOZSIBUVSJg0TSQHRKzidRUkydUU7jJMhAaCxUiLEAA" + } +] diff --git a/packages/gatsby-remark-shiki-twoslash/test/results/one.html b/packages/gatsby-remark-shiki-twoslash/test/results/one.html new file mode 100644 index 0000000..f2bf4a8 --- /dev/null +++ b/packages/gatsby-remark-shiki-twoslash/test/results/one.html @@ -0,0 +1,58 @@ +++ */ + pre { + /* Give the text some space to breathe */ + padding: 12px; + /* All code samples get a grey border, twoslash ones get a different color */ + border-left: 1px solid #999; + border-bottom: 1px solid #999; + margin-bottom: 3rem; + /* Important to allow the code to move horizontally; + */ + overflow: auto; + /* So that folks know you can highlight */ + position: relative; + } + pre.shiki { + overflow: initial; + } + pre.shiki:hover .dim { + opacity: 1; + } + pre.shiki div.dim { + opacity: 0.5; + } + pre.shiki div.dim, + pre.shiki div.highlight { + margin: 0; + padding: 0; + } + pre.shiki div.highlight { + opacity: 1; + background-color: #f1f8ff; + } + pre.shiki div.line { + min-height: 1rem; + } + pre.twoslash { + border-color: #719af4; + } + pre .code-container { + overflow: auto; + } + pre .code-container > a { + position: absolute; + right: 8px; + bottom: 8px; + border-radius: 4px; + border: 1px solid #719af4; + padding: 0 8px; + color: #719af4; + text-decoration: none; + opacity: 0; + transition-timing-function: ease; + transition: opacity 0.3s; + } + @media (prefers-reduced-motion: reduce) { + pre .code-container > a { + transition: none; + } + } + pre .code-container > a:hover { + color: white; + background-color: #719af4; + } + pre .code-container:hover a { + opacity: 1; + } + pre code { + /** Style setup */ + font-size: 15px; + font-family: var(--code-font); + white-space: pre; + -webkit-overflow-scrolling: touch; + } + pre code a { + text-decoration: none; + } + pre data-err { + background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") + repeat-x bottom left; + padding-bottom: 3px; + } + pre .query { + margin-bottom: 10px; + color: #137998; + display: inline-block; + } + pre .error, + pre .error-behind { + margin-left: -14px; + margin-top: 8px; + margin-bottom: 4px; + padding: 6px; + padding-left: 14px; + width: calc(100% - 19px); + white-space: pre-wrap; + display: block; + } + pre .error { + position: absolute; + background-color: #fee; + border-left: 2px solid #bf1818; + /* Give the space to the error code */ + display: flex; + align-items: center; + color: black; + } + pre .error .code { + display: none; + } + pre .error-behind { + user-select: none; + color: #fee; + } + pre .arrow { + /* Transparent background */ + background-color: #eee; + position: relative; + top: -7px; + margin-left: 0.1rem; + /* Edges */ + border-left: 1px solid #eee; + border-top: 1px solid #eee; + transform: translateY(25%) rotate(45deg); + /* Size */ + height: 8px; + width: 8px; + } + pre .popover { + margin-bottom: 10px; + background-color: #eee; + display: inline-block; + padding: 0 0.5rem 0.3rem; + margin-top: 10px; + border-radius: 3px; + } + pre .inline-completions ul.dropdown { + display: inline-block; + position: absolute; + width: 240px; + background-color: gainsboro; + color: grey; + padding-top: 4px; + font-family: "JetBrains Mono", Menlo, Monaco, Consolas, Courier New, monospace; + font-size: 0.8rem; + margin: 0; + padding: 0; + border-left: 4px solid #4b9edd; + } + pre .inline-completions ul.dropdown::before { + background-color: #4b9edd; + width: 2px; + position: absolute; + top: -1.2rem; + left: -3px; + content: " "; + } + pre .inline-completions ul.dropdown li { + overflow-x: hidden; + padding-left: 4px; + margin-bottom: 4px; + } + pre .inline-completions ul.dropdown li.deprecated { + text-decoration: line-through; + } + pre .inline-completions ul.dropdown li span.result-found { + color: #4b9edd; + } + pre .inline-completions ul.dropdown li span.result { + width: 100px; + color: black; + display: inline-block; + } + .dark-theme .markdown pre { + background-color: #d8d8d8; + border-color: #ddd; + filter: invert(98%) hue-rotate(180deg); + } + data-lsp { + /* Ensures there's no 1px jump when the hover happens above */ + border-bottom: 1px dotted transparent; + /* Fades in unobtrusively */ + transition-timing-function: ease; + transition: border-color 0.3s; + /* Respect people's wishes to not have animations */ + } + @media (prefers-reduced-motion: reduce) { + data-lsp { + transition: none; + } + } + /** When you mouse over the pre, show the underlines */ + pre:hover data-lsp { + border-color: #747474; + } + /** The tooltip-like which provides the LSP response */ + #twoslash-mouse-hover-info { + background-color: #3f3f3f; + color: #fff; + text-align: left; + padding: 5px 8px; + border-radius: 2px; + font-family: "Cascadia Mono-SemiLight", "JetBrains Mono", Menlo, Monaco, Consolas, Courier New, monospace; + font-size: 14px; + white-space: pre-wrap; + border-radius: 2px; + z-index: 100; + pointer-events: none; + } + ``` + +1. **Add the JS** for hover info to your component: + + In a React codebase: + + ```jsx + import React, { useEffect } from "react" + import { setupTwoslashHovers } from "shiki-twoslash/dist/dom"; + + export default () => { + // Add a the hovers + useEffect(setupTwoslashHovers, []) + + // Normal JSX for your component + return + } + ``` + + In a non-React codebase, you can still call `setupTwoslashHovers` via a bundler or module import, it will set up all + of the hovers on the page, this will need to be _after_ the HTML is set up. + +### Verify + +With that set up, start up your server and add a codeblock to a markdown file to see if it renders with highlights: + +```` +```json +{ "json": true } +``` +```` + +If that works, then add a twoslash example: + +```` +```ts twoslash +interface IdLabel {id: number, /* some fields */ } +interface NameLabel {name: string, /* other fields */ } +type NameOrId++++[the code as a series of spans]+
*/
+export const preOpenerFromRenderingOptsWithExtras = (opts: HtmlRendererOptions, fence?: any, classes?: string[]) => {
+ const bg = opts.bg || "#fff"
+ const fg = opts.fg || "black"
+ const theme = opts.themeName || ""
+ const fenceClass = (fence && fence.class) || ""
+ const extras = (classes && classes.join(" ")) || ""
+ return ``
+}
+
+/** You don't have a language which shiki twoslash can handle, make a DOM compatible version */
+export function plainTextRenderer(code: string, options: HtmlRendererOptions, codefenceMeta: any) {
+ let html = ""
+
+ html += preOpenerFromRenderingOptsWithExtras(options, codefenceMeta, [])
+ if (options.langId) {
+ html += `${options.langId}`
+ }
+
+ html += ``
+ html += escapeHtml(code)
+
+ html = html.replace(/\n*$/, "") // Get rid of final new lines
+ html += ``
+ return html
+}
diff --git a/packages/shiki-twoslash/src/renderers/shiki.ts b/packages/shiki-twoslash/src/renderers/shiki.ts
new file mode 100644
index 0000000..e8c70e9
--- /dev/null
+++ b/packages/shiki-twoslash/src/renderers/shiki.ts
@@ -0,0 +1,31 @@
+import { escapeHtml } from "../utils"
+import { HtmlRendererOptions, preOpenerFromRenderingOptsWithExtras } from "./plain"
+
+type Lines = import("shiki").IThemedToken[][]
+
+export function defaultShikiRenderer(lines: Lines, options: HtmlRendererOptions, codefenceMeta: any) {
+ let html = ""
+
+ html += preOpenerFromRenderingOptsWithExtras(options, codefenceMeta, [])
+ if (options.langId) {
+ html += `${options.langId}`
+ }
+
+ html += ``
+
+ lines.forEach(l => {
+ if (l.length === 0) {
+ html += ``
+ } else {
+ html += ``
+ l.forEach(token => {
+ html += `${escapeHtml(token.content)}`
+ })
+ html += ``
+ }
+ })
+
+ html = html.replace(/\n*$/, "") // Get rid of final new lines
+ html += ``
+ return html
+}
diff --git a/packages/shiki-twoslash/src/renderers/tsconfig.ts b/packages/shiki-twoslash/src/renderers/tsconfig.ts
new file mode 100644
index 0000000..623c703
--- /dev/null
+++ b/packages/shiki-twoslash/src/renderers/tsconfig.ts
@@ -0,0 +1,59 @@
+type Lines = import("shiki").IThemedToken[][]
+
+import type { IThemedToken } from "shiki"
+import { escapeHtml } from "../utils"
+import { tsconfig } from "../tsconfig-oneliners.generated"
+import { HtmlRendererOptions, preOpenerFromRenderingOptsWithExtras } from "./plain"
+
+/** Uses tmLanguage scopes to determine what the content of the token is */
+const tokenIsJSONKey = (token: IThemedToken) => {
+ if (!token.explanation) return false
+ return token.explanation.find(e => e.scopes.find(s => s.scopeName.includes("support.type.property-name")))
+}
+
+/** Can you look up the token in the tsconfig reference? */
+const isKeyInTSConfig = (token: IThemedToken) => {
+ if (token.content === '"') return
+ const name = token.content.slice(1, token.content.length - 1)
+ return name in tsconfig
+}
+
+/**
+ * Renders a TSConfig JSON object with additional LSP-ish information
+ * @param lines the result of shiki highlighting
+ * @param options shiki display options
+ */
+export function tsconfigJSONRenderer(lines: Lines, options: HtmlRendererOptions, codefenceMeta: any) {
+ let html = ""
+
+ html += preOpenerFromRenderingOptsWithExtras(options, codefenceMeta, ["tsconfig", "lsp"])
+ if (options.langId) {
+ html += ``
+
+ lines.forEach(l => {
+ if (l.length === 0) {
+ html += ``
+ } else {
+ html += ``
+ l.forEach(token => {
+ // This means we're looking at a token which could be '"module"', '"', '"compilerOptions"' etc
+ if (tokenIsJSONKey(token) && isKeyInTSConfig(token)) {
+ const key = token.content.slice(1, token.content.length - 1)
+ const oneliner = (tsconfig as Record)[key]
+ // prettier-ignore
+ html += `""`
+ } else {
+ html += `${escapeHtml(token.content)}`
+ }
+ })
+ html += ` `
+ }
+ })
+
+ html = html.replace(/\n*$/, "") // Get rid of final new lines
+ html += ``
+
+ const errorsGroupedByLine = groupBy(twoslash.errors, e => e.line) || new Map()
+ const staticQuickInfosGroupedByLine = groupBy(twoslash.staticQuickInfos, q => q.line) || new Map()
+ // A query is always about the line above it!
+ const queriesGroupedByLine = groupBy(twoslash.queries, q => q.line - 1) || new Map()
+
+ /**
+ * This is the index of the original twoslash code reference, it is not
+ * related to the HTML output
+ */
+ let filePos = 0
+
+ lines.forEach((l, i) => {
+ const errors = errorsGroupedByLine.get(i) || []
+ const lspValues = staticQuickInfosGroupedByLine.get(i) || []
+ const queries = queriesGroupedByLine.get(i) || []
+
+ if (l.length === 0 && i === 0) {
+ // Skip the first newline if it's blank
+ filePos += 1
+ } else if (l.length === 0) {
+ filePos += 1
+ html += `\n`
+ } else {
+ const hiClass = hasHighlight ? (hl(i) ? " highlight" : " dim") : ""
+ const prefix = ``
+ html += prefix
+
+ // Keep track of the position of the current token in a line so we can match it up to the
+ // errors and lang serv identifiers
+ let tokenPos = 0
+
+ l.forEach(token => {
+ let targetedQueryWord: typeof twoslash.staticQuickInfos[number] | undefined
+
+ let tokenContent = ""
+ // Underlining particular words
+ const findTokenFunc = (start: number) => (e: any) =>
+ start <= e.character && start + token.content.length >= e.character + e.length
+
+ const findTokenDebug = (start: number) => (e: any) => {
+ const result = start <= e.character && start + token.content.length >= e.character + e.length
+ // prettier-ignore
+ console.log(result, start, '<=', e.character, '&&', start + token.content.length, '>=', e.character + e.length)
+ if (result) {
+ console.log("Found:", e)
+ console.log("Inside:", token)
+ }
+ return result
+ }
+
+ const errorsInToken = errors.filter(findTokenFunc(tokenPos))
+ const lspResponsesInToken = lspValues.filter(findTokenFunc(tokenPos))
+ const queriesInToken = queries.filter(findTokenFunc(tokenPos))
+
+ // Does this line have a word targeted by a query?
+ targetedQueryWord = targetedQueryWord || lspResponsesInToken.find(response => response.text === (queries.length && queries[0].text))!
+
+ const allTokens = [...errorsInToken, ...lspResponsesInToken, ...queriesInToken]
+ const allTokensByStart = allTokens.sort((l, r) => {
+ return (l.start || 0) - (r.start || 0)
+ })
+
+ if (allTokensByStart.length) {
+ const ranges = allTokensByStart.map(token => {
+ const range: any = {
+ begin: token.start! - filePos,
+ end: token.start! + token.length! - filePos,
+ }
+
+ // prettier-ignore
+ if (range.begin < 0 || range.end < 0) {
+ // prettier-ignore
+ // throw new Error(`The begin range of a token is at a minus location, filePos:${filePos} current token: ${JSON.stringify(token, null, ' ')}\n result: ${JSON.stringify(range, null, ' ')}`)
+ }
+
+ if ("renderedMessage" in token) range.classes = "err"
+ if ("kind" in token) range.classes = token.kind
+ if ("targetString" in token) {
+ range.classes = "lsp"
+ range["lsp"] = stripHTML(token.text)
+ }
+ return range
+ })
+
+ tokenContent += createHighlightedString2(ranges, token.content, targetedQueryWord?.text)
+ } else {
+ tokenContent += subTripleArrow(token.content)
+ }
+
+ html += `${tokenContent}`
+ tokenPos += token.content.length
+ filePos += token.content.length
+ })
+
+ html += ``
+ // This is the \n which the "` + ) + }) +}) + +describe("with a simple example", () => { + it("links to the ts website for a compiler option", async () => { + const highlighter = await createShikiHighlighter({ theme: "dark-plus" }) + const code = ` +{ + "compilerOptions": { + "jsx": "something" + } +} + ` + const tokens = highlighter.codeToThemedTokens(code, "json") + const html = renderers.tsconfigJSONRenderer(tokens, {}, {}) + + expect(html.includes("https://www.typescriptlang.org/tsconfig#jsx")).toBeTruthy() + }) + + it("includes a
" + `) +}) + +it("it has the right ", async () => { + const highlighter = await createShikiHighlighter({ theme: "dark-plus" }) + const code = ` +// Hello +const a = "123" +const b = "345" +// ^? + ` + const twoslash = runTwoSlash(code, "ts", {}) + const html = renderCodeToHTML(twoslash.code, "ts", ["twoslash"], {}, highlighter, twoslash) + expect(html).toContain(` `) +}) diff --git a/packages/shiki-twoslash/tsconfig.json b/packages/shiki-twoslash/tsconfig.json new file mode 100644 index 0000000..20bc2b7 --- /dev/null +++ b/packages/shiki-twoslash/tsconfig.json @@ -0,0 +1,28 @@ +{ + "include": ["src", "types", "test"], + "exclude": ["test"], + "compilerOptions": { + "target": "ES2015", + "module": "esnext", + "lib": ["dom", "esnext"], + "importHelpers": true, + "declaration": true, + "sourceMap": true, + "rootDir": "./src", + "strict": true, + "noImplicitAny": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "strictPropertyInitialization": true, + "noImplicitThis": true, + "alwaysStrict": true, + "noUnusedLocals": false, + "noUnusedParameters": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "moduleResolution": "node", + "jsx": "react", + "esModuleInterop": true, + "skipLibCheck": true + } +} diff --git a/packages/vuepress-plugin-shiki-twoslash/LICENSE b/packages/vuepress-plugin-shiki-twoslash/LICENSE new file mode 100644 index 0000000..9f2bf75 --- /dev/null +++ b/packages/vuepress-plugin-shiki-twoslash/LICENSE @@ -0,0 +1,17 @@ +The MIT License (MIT) +Copyright (c) Microsoft Corporation + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and +associated documentation files (the "Software"), to deal in the Software without restriction, +including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, +and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial +portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT +NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE +SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/vuepress-plugin-shiki-twoslash/README.md b/packages/vuepress-plugin-shiki-twoslash/README.md new file mode 100644 index 0000000..8628182 --- /dev/null +++ b/packages/vuepress-plugin-shiki-twoslash/README.md @@ -0,0 +1,28 @@ +### VuePress Shiki Twoslash + +Sets up markdown code blocks to run through [shiki](https://shiki.matsu.io) which means it gets the VS Code quality +syntax highlighting mixed with the twoslash JavaScript tooling from the TypeScript website. + +#### Setup + +1. **Install the dependency**: `yarn add vuepress-shiki-twoslash` +1. **Include `"vuepress-shiki-twoslash"` in the plugins section** of `./vuepress/config.ts` + + ```diff + + import vuepressShikiTwoslash from "vuepress-shiki-twoslash" + + export default defineUserConfigTryfunctionf () {return {x : 10,y : 3 };}typetype P = { + x: number; + y: number; + }P =ReturnType <typeoff >;