⬅️ Back to Table of Contents

📄 createProvideTwoslashInlay

📊 Analysis Summary

Metric	Count
🔧 Functions	4
📦 Imports	2
⚡ Async/Await Patterns	3

📚 Table of Contents

• Imports
• Async/Await Patterns
• Functions

🛠️ File Location:

📂 packages/website/src/components/editor/createProvideTwoslashInlay.ts

📦 Imports

Name	Source
Monaco	monaco-editor
SandboxInstance	./useSandboxServices

---

Async/Await Patterns

Type	Function	Await Expressions	Promise Chains
promise-chain	createTwoslashInlayProvider	none	Promise.all
await-expression	createTwoslashInlayProvider	sandbox.getWorkerProcess(), Promise.all( queryMatches.map(q => resolveInlayHi...	none
async-function	resolveInlayHint	(worker.getQuickInfoAtPosition( file://${model.uri.path}, inspectionOff, ) ...	none

---

Functions

createTwoslashInlayProvider(sandbox: SandboxInstance): Monaco.languages.InlayHintsProvider

Parameters:

• sandbox SandboxInstance

Returns: Monaco.languages.InlayHintsProvider

Calls:

• sandbox.getWorkerProcess
• model.isDisposed
• findTwoslashQueries
• model.getValue
• Promise.all
• queryMatches.map
• resolveInlayHint
• results.push
• model.getPositionAt
• model.getOffsetAt
• worker.getQuickInfoAtPosition
• hint.displayParts .map(d => d.text) .join('') .replaceAll
• text.slice

Code

export function createTwoslashInlayProvider(
  sandbox: SandboxInstance,
): Monaco.languages.InlayHintsProvider {
  return {
    provideInlayHints: async (
      model,
      _,
      cancel,
    ): Promise<Monaco.languages.InlayHintList> => {
      const worker = await sandbox.getWorkerProcess();
      if (model.isDisposed() || cancel.isCancellationRequested) {
        return {
          dispose(): void {
            /* nop */
          },
          hints: [],
        };
      }

      const queryMatches = findTwoslashQueries(model.getValue());

      const results: Monaco.languages.InlayHint[] = [];

      for (const result of await Promise.all(
        queryMatches.map(q => resolveInlayHint(q)),
      )) {
        if (result) {
          results.push(result);
        }
      }

      return {
        dispose(): void {
          /* nop */
        },
        hints: results,
      };

      async function resolveInlayHint(
        queryMatch: RegExpExecArray,
      ): Promise<Monaco.languages.InlayHint | undefined> {
        const end = queryMatch.index + queryMatch[1].length - 1;
        const endPos = model.getPositionAt(end);
        const inspectionPos = new sandbox.monaco.Position(
          endPos.lineNumber - 1,
          endPos.column,
        );
        const inspectionOff = model.getOffsetAt(inspectionPos);

        const hint = await (worker.getQuickInfoAtPosition(
          `file://${model.uri.path}`,
          inspectionOff,
        ) as Promise<ts.QuickInfo | undefined>);
        if (!hint?.displayParts) {
          return;
        }

        let text = hint.displayParts
          .map(d => d.text)
          .join('')
          .replaceAll(/\r?\n\s*/g, ' ');
        if (text.length > 120) {
          text = `${text.slice(0, 119)}...`;
        }

        return {
          kind: sandbox.monaco.languages.InlayHintKind.Type,
          label: text,
          paddingLeft: true,
          position: new sandbox.monaco.Position(
            endPos.lineNumber,
            endPos.column + 1,
          ),
        };
      }
    },
  };
}

findTwoslashQueries(code: string): RegExpExecArray[]

Parameters:

• code string

Returns: RegExpExecArray[]

Calls:

• code.matchAll

Internal Comments:

// RegExp that matches '^<spaces>//?<spaces>$' (x2)

Code

function findTwoslashQueries(code: string): RegExpExecArray[] {
  // RegExp that matches '^<spaces>//?<spaces>$'
  const twoslashQueryRegex = /^(\s*\/\/\s*\^\?)\s*$/gm;
  return [...code.matchAll(twoslashQueryRegex)];
}

Internal helpers

Declared inside another function in this file.

provideInlayHints(model: any, _: any, cancel: any): Promise<Monaco.languages.InlayHintList>

Parameters:

• model any
• _ any
• cancel any

Returns: Promise<Monaco.languages.InlayHintList>

Calls:

• sandbox.getWorkerProcess
• model.isDisposed
• findTwoslashQueries
• model.getValue
• Promise.all
• queryMatches.map
• resolveInlayHint
• results.push
• model.getPositionAt
• model.getOffsetAt
• worker.getQuickInfoAtPosition
• hint.displayParts .map(d => d.text) .join('') .replaceAll
• text.slice

Code

async (
      model,
      _,
      cancel,
    ): Promise<Monaco.languages.InlayHintList> => {
      const worker = await sandbox.getWorkerProcess();
      if (model.isDisposed() || cancel.isCancellationRequested) {
        return {
          dispose(): void {
            /* nop */
          },
          hints: [],
        };
      }

      const queryMatches = findTwoslashQueries(model.getValue());

      const results: Monaco.languages.InlayHint[] = [];

      for (const result of await Promise.all(
        queryMatches.map(q => resolveInlayHint(q)),
      )) {
        if (result) {
          results.push(result);
        }
      }

      return {
        dispose(): void {
          /* nop */
        },
        hints: results,
      };

      async function resolveInlayHint(
        queryMatch: RegExpExecArray,
      ): Promise<Monaco.languages.InlayHint | undefined> {
        const end = queryMatch.index + queryMatch[1].length - 1;
        const endPos = model.getPositionAt(end);
        const inspectionPos = new sandbox.monaco.Position(
          endPos.lineNumber - 1,
          endPos.column,
        );
        const inspectionOff = model.getOffsetAt(inspectionPos);

        const hint = await (worker.getQuickInfoAtPosition(
          `file://${model.uri.path}`,
          inspectionOff,
        ) as Promise<ts.QuickInfo | undefined>);
        if (!hint?.displayParts) {
          return;
        }

        let text = hint.displayParts
          .map(d => d.text)
          .join('')
          .replaceAll(/\r?\n\s*/g, ' ');
        if (text.length > 120) {
          text = `${text.slice(0, 119)}...`;
        }

        return {
          kind: sandbox.monaco.languages.InlayHintKind.Type,
          label: text,
          paddingLeft: true,
          position: new sandbox.monaco.Position(
            endPos.lineNumber,
            endPos.column + 1,
          ),
        };
      }
    }

resolveInlayHint(queryMatch: RegExpExecArray): Promise<Monaco.languages.InlayHint | undefined>

Parameters:

• queryMatch RegExpExecArray

Returns: Promise<Monaco.languages.InlayHint | undefined>

Calls:

• model.getPositionAt
• model.getOffsetAt
• worker.getQuickInfoAtPosition
• hint.displayParts .map(d => d.text) .join('') .replaceAll
• text.slice

Code

async function resolveInlayHint(
        queryMatch: RegExpExecArray,
      ): Promise<Monaco.languages.InlayHint | undefined> {
        const end = queryMatch.index + queryMatch[1].length - 1;
        const endPos = model.getPositionAt(end);
        const inspectionPos = new sandbox.monaco.Position(
          endPos.lineNumber - 1,
          endPos.column,
        );
        const inspectionOff = model.getOffsetAt(inspectionPos);

        const hint = await (worker.getQuickInfoAtPosition(
          `file://${model.uri.path}`,
          inspectionOff,
        ) as Promise<ts.QuickInfo | undefined>);
        if (!hint?.displayParts) {
          return;
        }

        let text = hint.displayParts
          .map(d => d.text)
          .join('')
          .replaceAll(/\r?\n\s*/g, ' ');
        if (text.length > 120) {
          text = `${text.slice(0, 119)}...`;
        }

        return {
          kind: sandbox.monaco.languages.InlayHintKind.Type,
          label: text,
          paddingLeft: true,
          position: new sandbox.monaco.Position(
            endPos.lineNumber,
            endPos.column + 1,
          ),
        };
      }

---

Generated by Syntax Scribe