Merge pull request #176 from microsoft/dev_section

Create a dev section, improve twoslash and create a new lib for doing in-memory compilation
microsoft · Jan 12, 2020 · bf7f62d · bf7f62d
2 parents fcc9826 + 93f24a3
commit bf7f62d
Show file tree

Hide file tree

Showing 58 changed files with 2,204 additions and 516 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,11 @@ code .
 Working on this repo is done by running `yarn start` - this starts up the website on port `8000` and creates a
 builder worker for every package in the repo, so if you make a change outside of the site it will compile and lint etc.
 
+Some useful knowledge:
+
+- All packages have: `yarn bootstrap`, `yarn build` and `yarn test`
+- All packages use [debug](https://www.npmjs.com/package/debug) - which means you can do `env DEBUG="*" yarn test` to get verbose logs
+
 # Website Packages
 
 ## TypeScriptLang-Org
@@ -71,33 +76,23 @@ The code samples used in the Playground
 
 # Infra Packages
 
-## TS Twoslasher
+All of these packages use [`tsdx`](https://github.com/jaredpalmer/tsdx).
 
-A code sample markup extension for TypeScript.
-
-```sh
-# Tests
-yarn workspace ts-twoslasher test
+## TS Twoslash
 
-# Build
-yarn workspace ts-twoslasher build
-```
+A code sample markup extension for TypeScript.
 
 ## Gatsby Remark Twoslasher Code Blocks
 
-A Gasby Remark plugin which runs twoslash for any code blocks with twoslash in their metadata
+A Gatsby Remark plugin which runs twoslash for any code blocks with twoslash in their metadata
 
 ## Gatsby Remark Shiki
 
-A Gasby Remark plugin which highlights code (using vscode's parsers) then annotates the code with twoslash information
+A Gatsby Remark plugin which highlights code (using vscode's parsers) then annotates the code with twoslash information
 
-```sh
-# Tests
-yarn workspace gatsby-remark-shiki test
+## TypeScript VFS
 
-# Build
-yarn workspace gatsby-remark-shiki build
-```
+A comprehensive way to run TypeScript projects in-memory in a browser or node environment
 
 # Contributing
 

diff --git a/packages/gatsby-remark-shiki/src/renderer.ts b/packages/gatsby-remark-shiki/src/renderer.ts
@@ -28,9 +28,12 @@ export function renderToHTML(lines: Lines, options: Options, twoslash?: TwoSlash
     const lspValues = staticQuickInfosGroupedByLine.get(i) || []
     const queries = queriesGroupedByLine.get(i) || []
 
-    if (l.length === 0) {
-      html += `\n`
+    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 {
       // 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
@@ -41,10 +44,10 @@ export function renderToHTML(lines: Lines, options: Options, twoslash?: TwoSlash
         // console.log(tokenPos, token.content.length, filePos)
         // Underlining particular words
         const findTokenFunc = (start: number) => (e: any) =>
-          start <= e.character && start + token.content.length <= e.character + e.length
+          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
+          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)
           return result
@@ -55,6 +58,7 @@ export function renderToHTML(lines: Lines, options: Options, twoslash?: TwoSlash
         const queriesInToken = queries.filter(findTokenFunc(tokenPos))
 
         const allTokensByStart = [...errorsInToken, ...lspResponsesInToken, ...queriesInToken]
+
         if (allTokensByStart.length) {
           const ranges = allTokensByStart.map(token => {
             const range: any = {

diff --git a/packages/gatsby-remark-shiki/test/results/exporting.html b/packages/gatsby-remark-shiki/test/results/exporting.html
@@ -2,8 +2,8 @@ <h2>Relative imports</h2>
 <pre
   class="shiki twoslash"
 ><div class="language-id">ts</div><div class='code-container'><code><span style="color: #4C566A">// @filename: utilFunctions.js</span>
-<span class="error"><span>Module '"utilFunctions"' can only be default-imported using the 'allowSyntheticDefaultImports' flag</span><span class="code">1259</span></span><span class="error-behind">Module '"utilFunctions"' can only be default-imported using the 'allowSyntheticDefaultImports' flag</span><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">getStringLength</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">str</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=&gt;</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">str</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">length</span>
-<span style="color: #8FBCBB"><span class='lsp'>module<span class='lsp-result'>module export=&#13;(property) export=: {&#13;    getStringLength: (str: any) =&gt; any;&#13;}</span></span></span><span style="color: #ECEFF4"><span class='lsp'>.<span class='lsp-result'>module export=&#13;(property) export=: {&#13;    getStringLength: (str: any) =&gt; any;&#13;}</span></span></span><span style="color: #8FBCBB">exports</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span>
+<span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">getStringLength</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">str</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=></span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">str</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">length</span>
+<span style="color: #8FBCBB">module</span><span style="color: #ECEFF4">.</span><span style="color: #8FBCBB">exports</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span>
 <span style="color: #D8DEE9FF">  </span><span style="color: #D8DEE9">getStringLength</span><span style="color: #ECEFF4">,</span>
 <span style="color: #ECEFF4">}</span>
 

diff --git a/packages/gatsby-remark-shiki/test/results/exporting.json b/packages/gatsby-remark-shiki/test/results/exporting.json
@@ -5,41 +5,6 @@
     "highlights": [],
     "queries": [],
     "staticQuickInfos": [
-      {
-        "text": "import utils",
-        "docs": "",
-        "start": 144,
-        "length": 5,
-        "line": 1,
-        "character": 108,
-        "targetString": "utils"
-      },
-      {
-        "text": "const count: any",
-        "docs": "",
-        "start": 179,
-        "length": 5,
-        "line": 1,
-        "character": 143,
-        "targetString": "count"
-      },
-      {
-        "text": "import utils",
-        "docs": "",
-        "start": 187,
-        "length": 5,
-        "line": 1,
-        "character": 151,
-        "targetString": "utils"
-      },
-      {
-        "text": "any",
-        "start": 193,
-        "length": 15,
-        "line": 1,
-        "character": 157,
-        "targetString": "getStringLength"
-      },
       {
         "text": "const getStringLength: (str: any) => any",
         "docs": "",
@@ -101,20 +66,45 @@
         "line": 5,
         "character": 11,
         "targetString": "getStringLength"
-      }
-    ],
-    "errors": [
+      },
       {
-        "category": 1,
-        "code": 1259,
-        "length": 5,
+        "text": "import utils",
+        "docs": "",
         "start": 144,
-        "line": 0,
-        "character": 7,
-        "renderedMessage": "Module '\"utilFunctions\"' can only be default-imported using the 'allowSyntheticDefaultImports' flag",
-        "id": "err-1259-7-5"
+        "length": 5,
+        "line": 1,
+        "character": 108,
+        "targetString": "utils"
+      },
+      {
+        "text": "const count: any",
+        "docs": "",
+        "start": 179,
+        "length": 5,
+        "line": 1,
+        "character": 143,
+        "targetString": "count"
+      },
+      {
+        "text": "import utils",
+        "docs": "",
+        "start": 187,
+        "length": 5,
+        "line": 1,
+        "character": 151,
+        "targetString": "utils"
+      },
+      {
+        "text": "(property) getStringLength: (str: any) => any",
+        "docs": "",
+        "start": 193,
+        "length": 15,
+        "line": 1,
+        "character": 157,
+        "targetString": "getStringLength"
       }
     ],
-    "playgroundURL": "https://www.typescriptlang.org/play/#code/PTAEAEDMEsBsFMB2BDAtvAXKArgFzgGLaIDG+A9ogM4B0AVlQFAmVW6gDm8uAyrgE7REHADJIOuABagAvKDb9ZAPnkCaCYVMapyAE2wIa8AB4AHcv1xVZoAN6NQnbn0HCxmyQBpGAX0aMQCBgNNExQIV0TGitGaFRzSxx8WGtIfnJUUAByGmA8QmIyaFYs5lZ2FmJ2OXyUmi5eASFRcSkACiyAYUl4EgBrUAApHiyASiA"
+    "errors": [],
+    "playgroundURL": "https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygIwCYCsBOAUCBAGYCWANpAHYCGAtpKgK4Au5AYo5QMatyWIA6AFaI8XPomagA5pGYBlZtBKVpAGSrTmAC1ABeUJOj6AfIaUCKqnXlpwAJowoDIADwAOCZon2gA3nigMnKKyqoa1toANHgAvngEYOCkVnQMoCr2bgLeeCS0ntBSLOQ+RPC0oADkAsAlZBzcvPxVYhJS4pxSBvWCsgpKKuqaOgAUVQDC2pBcANagAFLyVQCUQA"
   }
 ]
diff --git a/packages/gatsby-remark-shiki/test/results/one.html b/packages/gatsby-remark-shiki/test/results/one.html
@@ -1,7 +1,7 @@
 <h2>One liner with multiple IDs</h2>
 <pre
   class="shiki twoslash"
-><div class="language-id">ts</div><div class='code-container'><code><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0"><span class='lsp'>getStringLength<span class='lsp-result'>const getStringLength: (str: string) =&gt; number</span></span></span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9"><span class='lsp'>str<span class='lsp-result'>(parameter) str: string</span></span></span><span style="color: #81A1C1">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">string</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=&gt;</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9"><span class='lsp'>str<span class='lsp-result'>(parameter) str: string</span></span></span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9"><span class='lsp'>length<span class='lsp-result'>(property) String.length: number</span></span></span></code></div></pre>
+><div class="language-id">ts</div><div class='code-container'><code><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0"><span class='lsp'>getStringLength<span class='lsp-result'>const getStringLength: (str: string) =&gt; number</span></span></span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9"><span class='lsp'>str<span class='lsp-result'>(parameter) str: string</span></span></span><span style="color: #81A1C1">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">string</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=></span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9"><span class='lsp'>str<span class='lsp-result'>(parameter) str: string</span></span></span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9"><span class='lsp'>length<span class='lsp-result'>(property) String.length: number</span></span></span></code></div></pre>
 
 <style>
   .shiki {

diff --git a/packages/gatsby-remark-shiki/test/results/twoliner.html b/packages/gatsby-remark-shiki/test/results/twoliner.html
@@ -2,7 +2,7 @@ <h2>Two liner with multiple IDs</h2>
 <pre
   class="shiki twoslash"
 ><div class="language-id">ts</div><div class='code-container'><code><span style="color: #4C566A">// @filename: getStringLength.ts</span>
-<span style="color: #81A1C1">export</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">getStringLength</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">str</span><span style="color: #81A1C1">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">string</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=&gt;</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">str</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">length</span>
+<span style="color: #81A1C1">export</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">getStringLength</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">str</span><span style="color: #81A1C1">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">string</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=></span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">str</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">length</span>
 <span style="color: #4C566A">// @filename: index.ts</span>
 <span style="color: #81A1C1">import</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">getStringLength</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">from</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">./getStringLength</span><span style="color: #ECEFF4">'</span>
 <span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">b</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">getStringLength</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">string</span><span style="color: #ECEFF4">'</span><span style="color: #D8DEE9FF">)</span></code></div></pre>

diff --git a/packages/gatsby-remark-shiki/test/results/twoliner.json b/packages/gatsby-remark-shiki/test/results/twoliner.json
@@ -5,33 +5,6 @@
     "highlights": [],
     "queries": [],
     "staticQuickInfos": [
-      {
-        "text": "(alias) const getStringLength: (str: string) => number\nimport getStringLength",
-        "docs": "",
-        "start": 124,
-        "length": 15,
-        "line": 1,
-        "character": 72,
-        "targetString": "getStringLength"
-      },
-      {
-        "text": "const b: number",
-        "docs": "",
-        "start": 173,
-        "length": 1,
-        "line": 1,
-        "character": 121,
-        "targetString": "b"
-      },
-      {
-        "text": "(alias) getStringLength(str: string): number\nimport getStringLength",
-        "docs": "",
-        "start": 177,
-        "length": 15,
-        "line": 1,
-        "character": 125,
-        "targetString": "getStringLength"
-      },
       {
         "text": "const getStringLength: (str: string) => number",
         "docs": "",
@@ -67,6 +40,33 @@
         "line": 1,
         "character": 26,
         "targetString": "length"
+      },
+      {
+        "text": "(alias) const getStringLength: (str: string) => number\nimport getStringLength",
+        "docs": "",
+        "start": 124,
+        "length": 15,
+        "line": 1,
+        "character": 72,
+        "targetString": "getStringLength"
+      },
+      {
+        "text": "const b: number",
+        "docs": "",
+        "start": 173,
+        "length": 1,
+        "line": 1,
+        "character": 121,
+        "targetString": "b"
+      },
+      {
+        "text": "(alias) getStringLength(str: string): number\nimport getStringLength",
+        "docs": "",
+        "start": 177,
+        "length": 15,
+        "line": 1,
+        "character": 125,
+        "targetString": "getStringLength"
       }
     ],
     "errors": [],

diff --git a/packages/sandbox/README.md b/packages/sandbox/README.md
@@ -25,16 +25,19 @@ we'll accept it.
 ## Installation
 
 ```html
-<html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+  </head>
   <div id="loader">Loading...</div>
-  <div id="monaco-editor-embed" />
+  <div id="monaco-editor-embed" style="height: 800px;" />
   <script>
     // First set up the VSCode loader in a script tag
-    const getLoaderScript = document.createElement('script');
-    getLoaderScript.src = "https://typescriptlang.org/v2/js/vs.loader.js";
-    getLoaderScript.async = true;
+    const getLoaderScript = document.createElement('script')
+    getLoaderScript.src = 'https://www.typescriptlang.org/v2/js/vs.loader.js'
+    getLoaderScript.async = true
     getLoaderScript.onload = () => {
-
       // Now the loader is ready, tell require where it can get the version of monaco, and the sandbox
       // This version uses the latest version of the sandbox, which is used on the TypeScript website
 
@@ -44,33 +47,55 @@ we'll accept it.
       //
       require.config({
         paths: {
-          vs: "https://tswebinfra.blob.core.windows.net/cdn/3.7.3/monaco/min/vs",
-          sandbox: 'https://typescriptlang.org/v2/js/sandbox'
+          vs: 'https://tswebinfra.blob.core.windows.net/cdn/3.7.3/monaco/min/vs',
+          sandbox: 'https://www.typescriptlang.org/v2/js/sandbox',
         },
         // This is something you need for monaco to work
-        ignoreDuplicateModules: ["vs/editor/editor.main"],
-      });
+        ignoreDuplicateModules: ['vs/editor/editor.main'],
+      })
 
       // Grab a copy of monaco, TypeScript and the sandbox
-      require(["vs/editor/editor.main", "vs/language/typescript/tsWorker", "sandbox/index"], async (main, _tsWorker, sandbox) => {
-        const initialCode = `import {markdown} from "danger"\n\nmarkdown("OK")`
+      require(['vs/editor/editor.main', 'vs/language/typescript/tsWorker', 'sandbox/index'], (
+        main,
+        _tsWorker,
+        tsSandbox
+      ) => {
+        const initialCode = `import {markdown, danger} from "danger"
+
+export default async function () {
+    // Check for new @types in devDependencies
+    const packageJSONDiff = await danger.git.JSONDiffForFile("package.json")
+    const newDeps = packageJSONDiff.devDependencies.added
+    const newTypesDeps = newDeps?.filter(d => d.includes("@types")) ?? []
+    if (newTypesDeps.length){
+        markdown("Added new types packages " + newTypesDeps.join(", "))
+    }
+}
+`
 
         const isOK = main && window.ts && sandbox
         if (isOK) {
-          document.getElementById("loader")!.parentNode?.removeChild(document.getElementById("loader")!)
+          document.getElementById('loader').parentNode.removeChild(document.getElementById('loader'))
         } else {
-          console.error("Could not get all the dependencies of sandbox set up!")
-          console.error("main", !!main, "ts", !!window.ts, "sandbox", !!sandbox)
+          console.error('Could not get all the dependencies of sandbox set up!')
+          console.error('main', !!main, 'ts', !!window.ts, 'sandbox', !!sandbox)
           return
         }
 
         // Create a sandbox and embed it into the the div #monaco-editor-embed
-        const playground = await sandbox.createTypeScriptSandbox({ text: initialCode, compilerOptions: {}, domID: "monaco-editor-embed", useJavaScript: false }, main, window.ts)
-        playground.editor.focus()
-      });
+        const sandboxConfig = {
+          text: initialCode,
+          compilerOptions: {},
+          domID: 'monaco-editor-embed',
+        }
+
+        tsSandbox.createTypeScriptSandbox(sandboxConfig, main, window.ts).then(sandbox => {
+          sandbox.editor.focus()
+        })
+      })
     }
 
-    document.body.appendChild(getLoaderScript);
+    document.body.appendChild(getLoaderScript)
   </script>
 </html>
 ```
diff --git a/packages/sandbox/package.json b/packages/sandbox/package.json
@@ -10,7 +10,7 @@
   "scripts": {
     "bootstrap": "node script/downloadReleases.js; yarn build",
     "build": "tsc",
-    "test": "jest"
+    "test": "tsdx test"
   },
   "devDependencies": {
     "@types/jest": "^24.0.24",