Merge pull request #2105 from orta/inlays

Adds support for showing queries using inlay hints if it is available

Author: Orta Therox

packages/create-typescript-playground-plugin/template/package.json

@@ -26,7 +26,7 @@
     "@rollup/plugin-typescript": "^3.0.0",
     "@types/react": "^16.9.23",
     "concurrently": "^5.1.0",
-    "monaco-editor": "^0.19.3",
+    "monaco-editor": "^0.29.1",
     "node-fetch": "^2.6.0",
     "rollup": "^1.31.0",
     "serve": "^11.3.0",

packages/playground-worker/index.ts

@@ -108,7 +108,7 @@ const worker: import("./types").CustomTSWebWorkerFactory = (TypeScriptWorker, ts
         }
 
         // This is TypeScript asking 'whats the content of this file' - we want
-        // to override the underlaying TS vfs model with our twoslash multi-file 
+        // to override the underlying TS vfs model with our twoslash multi-file 
         // files when possible, otherwise pass it back to super
         override _getScriptText(fileName: string): string | undefined {
             const twoslashed = this.twoslashFiles.find(f => fileName === f.file)
@@ -168,8 +168,8 @@ const worker: import("./types").CustomTSWebWorkerFactory = (TypeScriptWorker, ts
 
         override async getCompletionsAtPosition(fileName: string, position: number) {
             const empty = Promise.resolve({ isGlobalCompletion: false, isMemberCompletion: false, isNewIdentifierLocation: false, entries: [] })
-            const complet = await this._overrideFileNamePos(super.getCompletionsAtPosition.bind(this), fileName, position, undefined, empty, (result) => result)
-            return complet
+            const completions = await this._overrideFileNamePos(super.getCompletionsAtPosition.bind(this), fileName, position, undefined, empty, (result) => result)
+            return completions
         }
 
         override async getCompletionEntryDetails(fileName: string, position: number, entry: string) {

packages/playground/package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "@types/jest": "^25.1.3",
     "jest": "*",
-    "monaco-editor": "~0.20.0",
+    "monaco-editor": "^0.29.1",
     "monaco-typescript": "^3.7.0",
     "typescript": "*"
   }

packages/playground/src/index.ts

@@ -24,6 +24,7 @@ import { createUtils, PluginUtils } from "./pluginUtils"
 import type React from "react"
 import { settingsPlugin, getPlaygroundPlugins } from "./sidebar/settings"
 import { gistPoweredNavBar } from "./navigation"
+import { createTwoslashInlayProvider } from "./twoslashInlays"
 
 export { PluginUtils } from "./pluginUtils"
 
@@ -78,8 +79,8 @@ export const setupPlayground = (
   react: typeof React
 ) => {
   const playgroundParent = sandbox.getDomNode().parentElement!.parentElement!.parentElement!
-  // UI to the left
 
+  // UI to the left
   const leftNav = createNavigationSection()
   playgroundParent.insertBefore(leftNav, sandbox.getDomNode().parentElement!.parentElement!)
 
@@ -224,15 +225,17 @@ export const setupPlayground = (
 
     // Add an outer package.json with 'module: type' and ensures all the
     // other settings are inline for ESM mode
-    const moduleNumber = sandbox.getCompilerOptions().module as number || 0
+    const moduleNumber = (sandbox.getCompilerOptions().module as number) || 0
     const isESMviaModule = moduleNumber > 99 && moduleNumber < 200
     const moduleResNumber = sandbox.getCompilerOptions().moduleResolution || 0
     const isESMviaModuleRes = moduleResNumber > 2 && moduleResNumber < 100
 
     if (isESMviaModule || isESMviaModuleRes) {
       if (isESMMode) return
       isESMMode = true
-      setTimeout(() => { ui.flashInfo(i("play_esm_mode")) }, 300)
+      setTimeout(() => {
+        ui.flashInfo(i("play_esm_mode"))
+      }, 300)
 
       const nextRes = moduleNumber === 199 ? 99 : 2
       sandbox.setCompilerSettings({ target: 99, moduleResolution: nextRes })
@@ -655,6 +658,10 @@ export const setupPlayground = (
     }
   }
 
+  if (monaco.languages.registerInlayHintsProvider) {
+    monaco.languages.registerInlayHintsProvider(sandbox.language, createTwoslashInlayProvider(sandbox))
+  }
+
   if (location.hash.startsWith("#show-examples")) {
     setTimeout(() => {
       document.getElementById("examples-button")?.click()

packages/playground/src/twoslashInlays.ts

@@ -0,0 +1,39 @@
+import { Sandbox } from "typescriptlang-org/static/js/sandbox"
+
+export const createTwoslashInlayProvider = (sandbox: Sandbox) => {
+  const provider: import("monaco-editor").languages.InlayHintsProvider = {
+    provideInlayHints: async (model, _, cancel) => {
+      const text = model.getValue()
+      const queryRegex = /^\s*\/\/\s*\^\?$/gm
+      let match
+      const results: import("monaco-editor").languages.InlayHint[] = []
+      const worker = await sandbox.getWorkerProcess()
+      if (model.isDisposed()) {
+        return []
+      }
+
+      while ((match = queryRegex.exec(text)) !== null) {
+        const end = match.index + match[0].length - 1
+        const endPos = model.getPositionAt(end)
+        const inspectionPos = new sandbox.monaco.Position(endPos.lineNumber - 1, endPos.column)
+        const inspectionOff = model.getOffsetAt(inspectionPos)
+
+        if (cancel.isCancellationRequested) return []
+
+        const hint = await worker.getQuickInfoAtPosition("file://" + model.uri.path, inspectionOff)
+        if (!hint || !hint.displayParts) continue
+
+        const inlay: import("monaco-editor").languages.InlayHint = {
+          // @ts-ignore
+          kind: 0,
+          position: new sandbox.monaco.Position(endPos.lineNumber, endPos.column + 1),
+          text: hint.displayParts.map(d => d.text).join(""),
+          whitespaceBefore: true,
+        }
+        results.push(inlay)
+      }
+      return results
+    },
+  }
+  return provider
+}

packages/sandbox/package.json

@@ -28,7 +28,7 @@
   "devDependencies": {
     "@types/jest": "^25.1.3",
     "jest": "*",
-    "monaco-editor": "~0.20.0",
+    "monaco-editor": "^0.29.1",
     "monaco-typescript": "^3.7.0",
     "ts-jest": "^26.4.4",
     "typescript": "*"

packages/sandbox/src/index.ts

@@ -48,9 +48,9 @@ export type SandboxConfig = {
     groupEnd: (...args: any[]) => void
   }
 } & (
-    | { /** the ID of a dom node to add monaco to */ domID: string }
-    | { /** the dom node to add monaco to */ elementToAppend: HTMLElement }
-  )
+  | { /** the ID of a dom node to add monaco to */ domID: string }
+  | { /** the dom node to add monaco to */ elementToAppend: HTMLElement }
+)
 
 const languageType = (config: SandboxConfig) => (config.filetype === "js" ? "javascript" : "typescript")
 
@@ -77,6 +77,9 @@ const sharedEditorOptions: import("monaco-editor").editor.IEditorOptions = {
   acceptSuggestionOnCommitCharacter: !isAndroid,
   acceptSuggestionOnEnter: !isAndroid ? "on" : "off",
   accessibilitySupport: !isAndroid ? "on" : "off",
+  inlayHints: {
+    enabled: true,
+  },
 }
 
 /** The default settings which we apply a partial over */
@@ -244,7 +247,7 @@ export const createTypeScriptSandbox = (
   defaults.setCompilerOptions(compilerOptions)
 
   // To let clients plug into compiler settings changes
-  let didUpdateCompilerSettings = (opts: CompilerOptions) => { }
+  let didUpdateCompilerSettings = (opts: CompilerOptions) => {}
 
   const updateCompilerSettings = (opts: CompilerOptions) => {
     const newKeys = Object.keys(opts)

yarn.lock

@@ -5550,7 +5550,7 @@ __metadata:
     "@typescript/sandbox": 0.1.0
     esbuild: ^0.13.4
     jest: "*"
-    monaco-editor: ~0.20.0
+    monaco-editor: ^0.29.1
     monaco-typescript: ^3.7.0
     typescript: "*"
   languageName: unknown
@@ -5564,7 +5564,7 @@ __metadata:
     "@typescript/ata": 0.9.2
     "@typescript/vfs": 1.3.5
     jest: "*"
-    monaco-editor: ~0.20.0
+    monaco-editor: ^0.29.1
     monaco-typescript: ^3.7.0
     ts-jest: ^26.4.4
     typescript: "*"
@@ -20172,10 +20172,10 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"monaco-editor@npm:~0.20.0":
-  version: 0.20.0
-  resolution: "monaco-editor@npm:0.20.0"
-  checksum: a7c7bf738bb8625812d40447be2fc085652fe40611a1a161f12983823d54f2d53b4ed5cf2b42841d8099ce3b536bd042fb6b781acce55a7183b99aa743a7ca39
+"monaco-editor@npm:^0.29.1":
+  version: 0.29.1
+  resolution: "monaco-editor@npm:0.29.1"
+  checksum: bc1df4f0c026073fdfc5b25487c58eabc82b7341653e75e5a5fa06c7754f823d0751d1eb5f4fb1cc4a0d5d0f1ca801b724b3997e0b5acc942e68358be9d70b71
   languageName: node
   linkType: hard