Skip to content

Commit

Permalink
Adds support for _not_ using JS at all
Browse files Browse the repository at this point in the history
  • Loading branch information
orta committed Jun 8, 2021
1 parent 544694d commit 5cfc297
Show file tree
Hide file tree
Showing 35 changed files with 1,713 additions and 613 deletions.
10 changes: 9 additions & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
module.exports = {
testEnvironment: 'node',
"transform": {
"^.+\\.tsx?$": "esbuild-jest"
"^.+\\.tsx?$": [
"esbuild-jest",
{
sourcemap: true,
loaders: {
'.spec.ts': 'tsx'
}
}
]
}
};
9 changes: 5 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,16 @@
],
"scripts": {
"test": "jest",
"bootstrap": "pnpm build -r --workspace-concurrency 1",
"bootstrap": "pnpm build -r --workspace-concurrency 1 && md-magic --path 'packages/*/README.md'",
"build": "pnpm run build -r"
},
"devDependencies": {
"@types/jest": "^25.2.3",
"esbuild": "^0.12.3",
"esbuild": "^0.12.6",
"esbuild-jest": "^0.5.0",
"jest": "^27.0.1",
"jest": "^27.0.4",
"pleb": "^3.4.3",
"typescript": "^4.2.4"
"typescript": "^4.3.2",
"markdown-magic": "^2.0.0"
}
}
2 changes: 1 addition & 1 deletion packages/docusaurus-preset-shiki-twoslash/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "docusaurus-preset-shiki-twoslash",
"version": "1.0.3",
"version": "1.0.4",
"license": "MIT",
"homepage": "https://github.com/shikijs/twoslash",
"repository": {
Expand Down
21 changes: 21 additions & 0 deletions packages/gatsby-remark-shiki-twoslash/test/fixtures.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ describe("with fixtures", () => {
vfsRoot: join(__dirname, "..", "..", ".."),
})

console.log(results.html)

const htmlString = format(results.html + style, { parser: "html" })
expect(cleanFixture(htmlString)).toMatchFile(resultHTMLPath)

Expand Down Expand Up @@ -105,6 +107,25 @@ color: #ffeeee;
.query {
color: white;
}
/* To get them all hovering OOTB: .twoslash data-lsp::before { */
.twoslash data-lsp:hover::before {
content: attr(lsp);
position: absolute;
transform: translate(0, 1rem);
background-color: #3f3f3f;
color: #fff;
text-align: left;
padding: 5px 8px;
border-radius: 2px;
font-family: "JetBrains Mono", Menlo, Monaco, Consolas, Courier New, monospace;
font-size: 14px;
white-space: pre-wrap;
z-index: 100;
}
</style>
`

Expand Down
18 changes: 18 additions & 0 deletions packages/gatsby-remark-shiki-twoslash/test/fixtures/generics.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
## Generics in the LSP

```ts twoslash
type A<B> = {
str: string
b: B
}
```
## String union in the Generics in the LSP
```ts twoslash

type A<B> = {
str: "one" | "two"
b: B
}
```
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ <h2>Relative imports</h2>
class="shiki twoslash lsp"
style="background-color: #ffffff; color: #000000"
><div class='code-container'><code><div class='line dim'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function greet(person: string, date: Date): void' >greet</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) person: string' >person</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(parameter) date: Date' >date</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99"><data-lsp lsp='interface Date' >Date</data-lsp></span><span style="color: #000000">) {</span></div><div class='line dim'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">`Hello </span><span style="color: #0000FF">${</span><span style="color: #001080"><data-lsp lsp='(parameter) person: string' >person</data-lsp></span><span style="color: #0000FF">}</span><span style="color: #A31515">, today is </span><span style="color: #0000FF">${</span><span style="color: #001080"><data-lsp lsp='(parameter) date: Date' >date</data-lsp></span><span style="color: #000000FF">.</span><span style="color: #795E26"><data-lsp lsp='(method) Date.toDateString(): string' >toDateString</data-lsp></span><span style="color: #000000FF">()</span><span style="color: #0000FF">}</span><span style="color: #A31515">!`</span><span style="color: #000000">)</span></div><div class='line highlight'><span style="color: #000000">}</span></div>
<div class='line dim'><span style="color: #795E26"><data-lsp lsp='function greet(person: string, date: Date): void' >greet</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Maddison"</span><span style="color: #000000">, </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='var Date: DateConstructor&amp;#13;new () => Date (+4 overloads)' >Date</data-lsp></span><span style="color: #000000">())</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/GYVwdgxgLglg9mABAcwE4FN1QBQAd2oDOCAXIoVKjGMgDSIAmAhlOmQCIvoCUiA3gChEiCAmIAbdADpxcZNgAGACXTjZiACR98RBAF96UOMwCeiGIU19mrKUc6sAypWrzuegIQLuAvQIFomDgARACyTAwMFgjB9GDoAO6IDujY3NxAA'>Try</a></div></pre>
<div class='line dim'><span style="color: #795E26"><data-lsp lsp='function greet(person: string, date: Date): void' >greet</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Maddison"</span><span style="color: #000000">, </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='var Date: DateConstructor&#13;new () => Date (+4 overloads)' >Date</data-lsp></span><span style="color: #000000">())</span></div></code></div></pre>
<p>Hello</p>
<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>
><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></div></pre>

<style>
.shiki {
Expand Down Expand Up @@ -47,4 +47,23 @@ <h2>Relative imports</h2>
.query {
color: white;
}

/* To get them all hovering OOTB: .twoslash data-lsp::before { */

.twoslash data-lsp:hover::before {
content: attr(lsp);
position: absolute;
transform: translate(0, 1rem);

background-color: #3f3f3f;
color: #fff;
text-align: left;
padding: 5px 8px;
border-radius: 2px;
font-family: "JetBrains Mono", Menlo, Monaco, Consolas, Courier New,
monospace;
font-size: 14px;
white-space: pre-wrap;
z-index: 100;
}
</style>
23 changes: 21 additions & 2 deletions packages/gatsby-remark-shiki-twoslash/test/results/exporting.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ <h2>Relative imports</h2>
<pre
class="shiki twoslash lsp"
style="background-color: #ffffff; color: #000000"
><div class='code-container'><code><div class='line'><span style="color: #008000">// @filename: utilFunctions.js</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='const getStringLength: (str: any) => any' >getStringLength</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='(parameter) str: any' >str</data-lsp></span><span style="color: #000000"> </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) str: any' >str</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='any' >length</data-lsp></span></div><div class='line'><span style="color: #267F99"><data-lsp lsp='var module: {&amp;#13; exports: typeof module.exports;&amp;#13;}' >module</data-lsp></span><span style="color: #000000">.</span><span style="color: #267F99"><data-lsp lsp='module module.exports' >exports</data-lsp></span><span style="color: #000000"> = {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) getStringLength: (str: any) => any' >getStringLength</data-lsp></span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000">}</span></div>
<div class='line'><span style="color: #008000">// @filename: index.ts</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='import utils' >utils</data-lsp></span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&apos;./utilFunctions&apos;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const count: any' >count</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='import utils' >utils</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(alias) getStringLength(str: any): any&amp;#13;import getStringLength' >getStringLength</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">&apos;Check JS&apos;</span><span style="color: #000000">)</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygIwCYCsBOAUCBAGYCWANpAHYCGAtpKgK4Au5AYo5QMatyWIA6AFaI8XPomagA5pGYBlZtBKVpAGSrTmAC1ABeUJOj6AfIaUCKqnXlpwAJowoDIADwAOCZon2gA3nigMnKKyqoa1toANHgAvngEYOCkVnQMoCr2bgLeeCS0ntBSLOQ+RPC0oADkAsAlZBzcvPxVYhJS4pxSBvWCsgpKKuqaOgAUVQDC2pBcANagAFLyVQCUQA'>Try</a></div></pre>
><div class='code-container'><code><div class='line'><span style="color: #008000">// @filename: utilFunctions.js</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='const getStringLength: (str: any) => any' >getStringLength</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='(parameter) str: any' >str</data-lsp></span><span style="color: #000000"> </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) str: any' >str</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='any' >length</data-lsp></span></div><div class='line'><span style="color: #267F99"><data-lsp lsp='var module: {&#13; exports: typeof module.exports;&#13;}' >module</data-lsp></span><span style="color: #000000">.</span><span style="color: #267F99"><data-lsp lsp='module module.exports' >exports</data-lsp></span><span style="color: #000000"> = {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) getStringLength: (str: any) => any' >getStringLength</data-lsp></span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000">}</span></div>
<div class='line'><span style="color: #008000">// @filename: index.ts</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='import utils' >utils</data-lsp></span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&apos;./utilFunctions&apos;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const count: any' >count</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='import utils' >utils</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(alias) getStringLength(str: any): any&#13;import getStringLength' >getStringLength</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">&apos;Check JS&apos;</span><span style="color: #000000">)</span></div></code></div></pre>
<p>Hello</p>

<style>
Expand Down Expand Up @@ -43,4 +43,23 @@ <h2>Relative imports</h2>
.query {
color: white;
}

/* To get them all hovering OOTB: .twoslash data-lsp::before { */

.twoslash data-lsp:hover::before {
content: attr(lsp);
position: absolute;
transform: translate(0, 1rem);

background-color: #3f3f3f;
color: #fff;
text-align: left;
padding: 5px 8px;
border-radius: 2px;
font-family: "JetBrains Mono", Menlo, Monaco, Consolas, Courier New,
monospace;
font-size: 14px;
white-space: pre-wrap;
z-index: 100;
}
</style>
68 changes: 68 additions & 0 deletions packages/gatsby-remark-shiki-twoslash/test/results/generics.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<h2>Generics in the LSP</h2>
<pre
class="shiki twoslash lsp"
style="background-color: #ffffff; color: #000000"
><div class='code-container'><code><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='type A&lt;B> = {&#13; str: string;&#13; b: B;&#13;}' >A</data-lsp></span><span style="color: #000000">&lt;</span><span style="color: #267F99"><data-lsp lsp='(type parameter) B in type A&lt;B>' >B</data-lsp></span><span style="color: #000000">&gt; = { </span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) str: string' >str</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99">string</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) b: B' >b</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99"><data-lsp lsp='(type parameter) B in type A&lt;B>' >B</data-lsp></span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre>
<h2>String union in the Generics in the LSP</h2>
<pre
class="shiki twoslash lsp"
style="background-color: #ffffff; color: #000000"
><div class='code-container'><code><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='type A&lt;B> = {&#13; str: "one" | "two";&#13; b: B;&#13;}' >A</data-lsp></span><span style="color: #000000">&lt;</span><span style="color: #267F99"><data-lsp lsp='(type parameter) B in type A&lt;B>' >B</data-lsp></span><span style="color: #000000">&gt; = { </span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) str: "one" | "two"' >str</data-lsp></span><span style="color: #000000">: </span><span style="color: #A31515">"one"</span><span style="color: #000000"> | </span><span style="color: #A31515">"two"</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) b: B' >b</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99"><data-lsp lsp='(type parameter) B in type A&lt;B>' >B</data-lsp></span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre>

<style>
.shiki {
background-color: lightgrey;
padding: 8px;
}

.error,
.error-behind {
margin-left: -20px;
margin-right: -12px;
margin-top: 4px;
margin-bottom: 4px;
padding: 6px;
padding-left: 14px;

white-space: pre-wrap;
display: block;
}

.error {
position: absolute;
background-color: #ffeeee;
border-left: 2px solid #bf1818;
width: 100%;

display: flex;
align-items: center;
color: black;
}

.error-behind {
user-select: none;
color: #ffeeee;
}
.query {
color: white;
}

/* To get them all hovering OOTB: .twoslash data-lsp::before { */

.twoslash data-lsp:hover::before {
content: attr(lsp);
position: absolute;
transform: translate(0, 1rem);

background-color: #3f3f3f;
color: #fff;
text-align: left;
padding: 5px 8px;
border-radius: 2px;
font-family: "JetBrains Mono", Menlo, Monaco, Consolas, Courier New,
monospace;
font-size: 14px;
white-space: pre-wrap;
z-index: 100;
}
</style>
112 changes: 112 additions & 0 deletions packages/gatsby-remark-shiki-twoslash/test/results/generics.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
[
{
"code": "type A<B> = { \n str: string\n b: B\n}",
"extension": "ts",
"highlights": [],
"queries": [],
"staticQuickInfos": [
{
"text": "type A<B> = {\n str: string;\n b: B;\n}",
"docs": "",
"start": 5,
"length": 1,
"line": 0,
"character": 5,
"targetString": "A"
},
{
"text": "(type parameter) B in type A<B>",
"docs": "",
"start": 7,
"length": 1,
"line": 0,
"character": 7,
"targetString": "B"
},
{
"text": "(property) str: string",
"docs": "",
"start": 19,
"length": 3,
"line": 1,
"character": 4,
"targetString": "str"
},
{
"text": "(property) b: B",
"docs": "",
"start": 35,
"length": 1,
"line": 2,
"character": 4,
"targetString": "b"
},
{
"text": "(type parameter) B in type A<B>",
"docs": "",
"start": 38,
"length": 1,
"line": 2,
"character": 7,
"targetString": "B"
}
],
"errors": [],
"playgroundURL": "https://www.typescriptlang.org/play/#code/C4TwDgpgBAggPAIQHxQLxQN5QFBT1AZ2ACcAuQkgSwDsBzXfAI3IWwF8g"
},
{
"code": "\ntype A<B> = { \n str: \"one\" | \"two\"\n b: B\n}",
"extension": "ts",
"highlights": [],
"queries": [],
"staticQuickInfos": [
{
"text": "type A<B> = {\n str: \"one\" | \"two\";\n b: B;\n}",
"docs": "",
"start": 6,
"length": 1,
"line": 1,
"character": 5,
"targetString": "A"
},
{
"text": "(type parameter) B in type A<B>",
"docs": "",
"start": 8,
"length": 1,
"line": 1,
"character": 7,
"targetString": "B"
},
{
"text": "(property) str: \"one\" | \"two\"",
"docs": "",
"start": 20,
"length": 3,
"line": 2,
"character": 4,
"targetString": "str"
},
{
"text": "(property) b: B",
"docs": "",
"start": 43,
"length": 1,
"line": 3,
"character": 4,
"targetString": "b"
},
{
"text": "(type parameter) B in type A<B>",
"docs": "",
"start": 46,
"length": 1,
"line": 3,
"character": 7,
"targetString": "B"
}
],
"errors": [],
"playgroundURL": "https://www.typescriptlang.org/play/#code/FAFwngDgpgBAggHgEID4YF4YG8bBvmAZxACcAuGAIgHsA7KSmAHypAHdrK8CAjCpYAF8gA"
}
]
Loading

0 comments on commit 5cfc297

Please sign in to comment.