Convince Monaco/TSC a TS file is actually a function body?

[TedDriggs]

monaco-editor version: 0.16.2
Browser: Chrome/Firefox
OS: macOS

Steps or JS usage snippet reproducing the issue:

if (!Flow.server.device) {
    return;
 // ^^^^^^ error: A 'return' statement can only be used within a function body.
}

Our product is embedding Monaco to let users edit JS code that we then wrap in a function and run in V8. We've successfully gotten full type and syntax checking working, but we've run into a new issue: Early returns are being flagged as errors.

Because we know that the code will be wrapped inside a function, the return is actually safe. However, we'd strongly prefer not to show users that wrapper function, and based on #664 it looks like adding hidden and non-editable content "around" the displayed text is either unsupported or undocumented.

Is there a way to do this? Ideally, we'd do it in a way that keeps the type narrowing effect of the return statements, but we could settle for an approach that silenced that particular diagnostic if that was the only option.

[spahnke]

We had the same problem a while back (see #1069) and currently we just filter out this special diagnostic. But I would be happier if there were a compiler option (though I guess that would need to be implemented directly in the TypeScript compiler).

[CosmoMyzrailGorynych]

@TedDriggs Could you tell how did you solve the problem with type checking? I'm developing a game editor and need to tell monaco the context of the edited code (the meaning of this, so users can see instance's methods through this.blahBlah). Did you have a similar need to change the top-level this?

[spahnke]

I opened a PR that allows to ignore diagnostics by code. The narrowing effect is unaffected by that. Tested with the following JS code:

/** 
 * @typedef {object} Success 
 * @property {"success"} type
 * @property {number} result
 */

/** 
 * @typedef {object} Failure 
 * @property {"failure"} type
 * @property {string} message
 */

/**
 * @type {Success | Failure}
 */
let foo;

if (foo.type === "success")
    return foo.result;
return foo.message;

[CosmoMyzrailGorynych]

And I wrote tons of hacks that actually wrap code into a function.

For my game editor ct.js, I ended up with tons of hacks that establish hidden and uneditable lines around the code: https://github.com/ct-js/ct-js/blob/develop/src/js/codeEditorHelpers.js#L74
Beware: it uses several unofficial APIs and this is not a solution to the original issue, but a collection of hacks due to the absence of better alternatives.

The hacks block direct editing from a keyboard, manage cursors and selectors, handle "Replace all" command, and hide the first and the last lines. Some constants are hard-coded, so you will need to improve the code for multiple hidden lines. The known issue is that you can view and delete the hidden code in the peek view, as it creates additional editors.