Change:
Right now we expose an API to cells, and to webviews, but we don't publish types for this. The webview API is very simple, but the renderer will be somewhat more complex. We should consider either publishing these in or in a separate package.
This would be helpful for I think a or something would be a good place for it. Aside, it'd be cool if ts s could be contributed to... Right now we'd need a whole separate NPM scope to have separate I believe.
We can just PR a package called The naming of packages is only constrained by the maintainers' policy, and there are types that don't correspond to single packages, e.g.
Poor wording, I mean the project would need a different and for the client code vs the extension host code. (Or just know not call acquireApi outside of the client context of course. )
Oh, yea. In the sample renderer/code generator I'm using project references to keep things separated -- that also lets us use only in the renderer and output es6 modules (only) for webpack.
PR submitted

Discussion:
const HOVER_DELAY = 300; const LAUNCH_JSON_REGEX = /launch.json$/; <del> const REMOVE_INLINE_VALUES_DELAY = 100; </del> <ins> const UPDATE_INLINE_VALUE_DECORATIONS_DELAY = 200; const REMOVE_INLINE_VALUE_DECORATIONS_DELAY = 100; </ins> const INLINE_VALUE_DECORATION_KEY = 'inlinevaluedecoration'; const MAX_NUM_INLINE_VALUES = 100; // JS Global scope can have 700+ entries. We want to limit ourselves for perf reasons const MAX_INLINE_DECORATOR_LENGTH = 150; // Max string length of each inline decorator when debugging. If exceeded ... is added

private hoverWidget: DebugHoverWidget; private showHoverScheduler: RunOnceScheduler; private hideHoverScheduler: RunOnceScheduler; <del> private removeInlineValuesScheduler: RunOnceScheduler; </del> <ins> private updateInlineValueDecorationsScheduler: RunOnceScheduler; private removeInlineValueDecorationsScheduler: RunOnceScheduler; </ins> private hoverRange: Range; private breakpointHintDecoration: string[];

this.toDispose = []; this.showHoverScheduler = new RunOnceScheduler(() => this.showHover(this.hoverRange, false), HOVER_DELAY); this.hideHoverScheduler = new RunOnceScheduler(() => this.hoverWidget.hide(), HOVER_DELAY); <del> this.removeInlineValuesScheduler = new RunOnceScheduler(() => this.editor.removeDecorations(INLINE_VALUE_DECORATION_KEY), REMOVE_INLINE_VALUES_DELAY); </del> <ins> this.updateInlineValueDecorationsScheduler = new RunOnceScheduler( () => { this.wordToLineNumbersMap = null; this.updateInlineValueDecorations(this.debugService.getViewModel().focusedStackFrame); }, UPDATE_INLINE_VALUE_DECORATIONS_DELAY ); this.removeInlineValueDecorationsScheduler = new RunOnceScheduler( () => this.editor.removeDecorations(INLINE_VALUE_DECORATION_KEY), REMOVE_INLINE_VALUE_DECORATIONS_DELAY ); </ins> this.registerListeners(); this.breakpointWidgetVisible = CONTEXT_BREAKPOINT_WIDGET_VISIBLE.bindTo(contextKeyService); this.updateConfigurationWidgetVisibility();

})); this.toDispose.push(this.editor.onKeyDown((e: IKeyboardEvent) => this.onKeyDown(e))); this.toDispose.push(this.editor.onDidChangeModelContent(() => { <del> this.wordToLineNumbersMap = null; </del> <ins> this.updateInlineValueDecorationsScheduler.schedule(); </ins> })); this.toDispose.push(this.editor.onDidChangeModel(() => { <del> const sf = this.debugService.getViewModel().focusedStackFrame; </del> <ins> const stackFrame = this.debugService.getViewModel().focusedStackFrame; </ins> const model = this.editor.getModel(); <del> this.editor.updateOptions({ hover: !sf || !model || model.uri.toString() !== sf.source.uri.toString() }); </del> <ins> this.editor.updateOptions({ hover: !stackFrame || !model || model.uri.toString() !== stackFrame.source.uri.toString() }); </ins> this.closeBreakpointWidget(); this.toggleExceptionWidget(); this.hideHoverWidget(); this.updateConfigurationWidgetVisibility(); <del> this.wordToLineNumbersMap = null; this.updateInlineDecorations(sf); </del> <ins> this.updateInlineValueDecorationsScheduler.schedule(); </ins> })); this.toDispose.push(this.editor.onDidScrollChange(() => this.hideHoverWidget)); this.toDispose.push(this.debugService.onDidChangeState((state: State) => {

this.hideHoverWidget(); } <del> this.updateInlineDecorations(sf); </del> <ins> this.updateInlineValueDecorations(sf); </ins> } private hideHoverWidget(): void {

}; // Inline Decorations <del> private updateInlineDecorations(stackFrame: IStackFrame): void { </del> <ins> private updateInlineValueDecorations(stackFrame: IStackFrame): void { </ins> const model = this.editor.getModel(); if (!this.configurationService.getValue<IDebugConfiguration>('debug').inlineValues || !model || !stackFrame || model.uri.toString() !== stackFrame.source.uri.toString()) { <del> if (!this.removeInlineValuesScheduler.isScheduled()) { this.removeInlineValuesScheduler.schedule(); </del> <ins> if (!this.removeInlineValueDecorationsScheduler.isScheduled()) { this.removeInlineValueDecorationsScheduler.schedule(); </ins> } return; } <del> this.removeInlineValuesScheduler.cancel(); </del> <ins> this.removeInlineValueDecorationsScheduler.cancel(); </ins> stackFrame.getMostSpecificScopes(stackFrame.range) // Get all top level children in the scope chain