How to scope the editor models / typescriptDefaults

[ulrichb]

I've tried it at StackOverflow, but had no luck...

Any chance advise to scope the changes to monaco.languages.typescript or the "editor models".

Background: I want to host multiple Monaco editors with different sets of models (maybe also different typescriptDefaults).

[alexdima]

This is outside the scope of the monaco-typescript project. I recommend that you fork the project and implemented that on your side. Currently, that is built to have a single TypeScript language server host which exposes all the models together to typescript.

One alternative idea to cheat would be to think about user focus... i.e. an user can only work with at most 1 editor at a time. So you can use a different language id, e.g. ts2 for all editors until they gain focus. Once focus is gained, you can change the language to typescript and then the TS compiler will only see that one model. Once the editor is blurred, you can change the language id back to ts2.

Then, you can defined a monarch colorizer for ts2 which would be the same one as for TypeScript.... Diagnostics will be removed, but other than that this could simulate what you desire...

Good luck!

[ulrichb]

Okay, thanks for the info that this scenario is not supported at the moment.

About the thing with the second language id ("ts2"): Is what you mean with the "ts2" language a "fake" language without semantic model, but just a syntax highlighting enabled editor? => No error squiggles in the (non-focused) "ts2" editors, only in the focused "typescript" editor. And when changing the focus between the editors, I also need to switch the global editor models (dispose all, and create them for the focused editor).

[alexdima]

Is what you mean with the "ts2" language a "fake" language without semantic model, but just a syntax highlighting enabled editor

Yes

And when changing the focus between the editors, I also need to switch the global editor models (dispose all, and create them for the focused editor).

No, I think you just need to implement the following:

editors.forEach(function(editor) {
	editor.onDidBlurEditorWidget(() => {
        monaco.editor.setModelLanguage(editor.getModel(), 'ts2')
    });
    editor.onDidFocusEditorWidget(() => {
        monaco.editor.setModelLanguage(editor.getModel(), 'typescript')
    });
});

I'm not sure how well it's gonna work, but this is the cheapest I can think of to simulate something similar to what you describe.

[ulrichb]

@alexandrudima Each of my editors has a different (only partially overlapping) set of editor models (the one it displays and N non-visible/dependency models). This is why I think it's necessary to dispose all current editor models and loading "the current set" when switching focus. => To completely isolate them (avoid conflicts of duplicate type definitions, model URLs, ...).

[alexdima]

Each of my editors has a different (only partially overlapping) set of editor models (the one it displays and N non-visible/dependency models)

👍 Ok, I didn't know that.

[ulrichb]

@alexandrudima Again thanks for your support.

[tarb]

Is what you mean with the "ts2" language a "fake" language without semantic model, but just a syntax highlighting enabled editor

Yes

And when changing the focus between the editors, I also need to switch the global editor models (dispose all, and create them for the focused editor).

No, I think you just need to implement the following:

editors.forEach(function(editor) {
	editor.onDidBlurEditorWidget(() => {
        monaco.editor.setModelLanguage(editor.getModel(), 'ts2')
    });
    editor.onDidFocusEditorWidget(() => {
        monaco.editor.setModelLanguage(editor.getModel(), 'typescript')
    });
});

I'm not sure how well it's gonna work, but this is the cheapest I can think of to simulate something similar to what you describe.

Anybody get this to work? Im putting in a tabbed editor, (where you write seperate non related snippets of ts that control automation tasks) and changing the models language doest seem to remove it from being used by the language server? and I still get "cannot redeclare ... etc". The approach is similar to above, set all models to plaintext on tab change, except the tab your changing too - which you set back to ts. All the relevant events fire and indicate that all models have changed - so I dont think its as much me doing it wrong as it not being supported?

Ive looked at dispose removes the model from use in the language server like I want, and I could use this - but I would like to keep the undo history on tab change, and I cant see a way of doing this when you dispose all models and create the new model for the new tab each time.

Thanks, would love any other ideas for this

[thedanielhanke]

Any news on this topic?

[mnguyen081002]

Any update ?

[ProTip]

For those that have run into the suggestion not working:

The typescript worker will pick up any source files with matching extensions, based on the compiler options. Just changing the model language will not prevent suggestions from appearing across models.

There is also a long standing bug where variables declared in multiple files will conflict; the typescript worker doesn't auto-detect the files as being modules #2976 . Curiously that VSCode does not experience this problem.

I have worked around both issues by "cloning" the models and changing their extensions during editor focus/blur. There is information here on how to clone while maintaining the history: #3751 (comment) .

Here is a solution that seems to work for me so far based on the aforementioned clone function:

editor.onDidBlurEditorWidget(() => {
    const oldModel = editor.getModel()!
    const newModel = switchModelToNewUri(oldModel, monaco.Uri.parse(`${proj}.ts2`))
    editor.setModel(newModel)
    oldModel.dispose()
    context.current?.dispose()
})

editor.onDidFocusEditorWidget(() => {
    context.current = monaco.languages.typescript.typescriptDefaults.addExtraLib(...lib)
    setTimeout(() => {
        const pos = editor.getPosition()
        const oldModel = editor.getModel()!
        const newModel = switchModelToNewUri(oldModel, monaco.Uri.parse(`${proj}.ts`))
        editor.setModel(newModel)
        editor.focus()
        editor.setPosition(pos!)
        oldModel.dispose()
    }, 0)
})

setTimeout on Focus is critical to preventing a monaco mousedown handler from throwing due to the model being disposed.

This is all a huge PITA that could be alleviated by a few key enhancements to the public API. Cloning or otherwise changing model URIs could help. Somehow to change the typescript workers base project path, includes/excludes, or something along those lines would make it easier to create project "scopes". Unfortunately it seems like each individual problem or ask along these lines has gone unaddressed.