How to load type definitions automatically in a monaco worker?

[elchininet]

Hi,
I am using @volar/monaco/worker to create a language service for monaco-editor.

With the default monaco-editor TypeScript worker I can use addExtraLib to add an extra type definition so I can define some globals types that do not require to be imported (check the next screenshot using a React code)

Type definition	Editor

During the creation of the language service, I wanted to use my own dtsHost here:

createLanguageService({
    config: resolveConfig(
        {
            services: {
                typescript: createTsService({
                    dtsHost:  myOwnDtsHost, // <-here
                },
             }
        }
    }
}

But I noticed that the types are fetched once the package is required in the code, it is not fetched by default. Debugging, I also noticed that typescript, vue, csstype and other modules are loaded automatically. Is there a way to achieve the same with my custom library and custom type definitions?

Regards and thanks in advance.

[johnsoncodehk]

We are changing the API design, dtsHost has been removed in the current version, you now need to modify the readFile behavior through decorateServiceEnvironment to customize the project file (node_modules files) provider.

Automatic type acquisition is achieved through createJsDelivrFs + decorateServiceEnvironment.

https://github.com/vuejs/repl/blob/4cb6212d89e18340cc96c2e35e10fb72bf3ea00e/src/monaco/vue.worker.ts#L76

For custom node_modules files provider, in theory you can imitate createJsDelivrFs to achieve it, but I am still considering a simpler architecture.

volar.js/packages/cdn/lib/cdns/jsdelivr.ts

Line 48 in 355b839

export function createJsDelivrFs(onReadFile?: (uri: string, content: string) => void): FileSystem {

I'm currently refactoring the relevant architecture, so we can keep this issue open.

[elchininet]

Hi @johnsoncodehk,
That sounds great, looking forward to the final implementation.
Regards

[elchininet]

By the way, about this comment:

For custom node_modules files provider, in theory you can imitate createJsDelivrFs to achieve it, but I am still considering a simpler architecture.

At the moment, can this be used to have the files provided automatically without writing imports to the packages?

[zh-lx]

We are changing the API design, dtsHost has been removed in the current version, you now need to modify the readFile behavior through decorateServiceEnvironment to customize the project file (node_modules files) provider.

Automatic type acquisition is achieved through createJsDelivrFs + decorateServiceEnvironment.

https://github.com/vuejs/repl/blob/4cb6212d89e18340cc96c2e35e10fb72bf3ea00e/src/monaco/vue.worker.ts#L76

For custom node_modules files provider, in theory you can imitate createJsDelivrFs to achieve it, but I am still considering a simpler architecture.

volar.js/packages/cdn/lib/cdns/jsdelivr.ts

Line 48 in 355b839

export function createJsDelivrFs(onReadFile?: (uri: string, content: string) => void): FileSystem {

I'm currently refactoring the relevant architecture, so we can keep this issue open.

I find that automatic type acquisition only supports for package with .d.ts in itemself. But packages whose ts definiton is in @types/package rather than in itemself aren't supported. Would you consider to support this case?🙏🏻

[elchininet]

Hi @johnsoncodehk,

I decided to give it a try. I have updated @volar/monaco, @volar/typescript, @vue/language-service to the versions used in repl, I have replaced my implementation using dtsHost by the approach using the ServiceEnvironment. I have created my own createJsDelivrFs and I see my methods stat, readDirectory and readFile being called correctly but I don‘t find any way to "auto-load" my custom global d.ts file in the same way that all these types are automatically loaded at the beginning:

I tried to use the dependencies object that is sent to createJsDelivrUriResolver but nothing changes, the only moment that my custom definition reaches the readFile method is if I import it in the code, but this is not what I am trying to achieve.

Any tip?

Thanks in advance.

[theniceangel]

When third-party modules is self-hosted, fetch assets from CDN is disallowed, so can we make customized fetching dts logic, or support addExtraLib api like the default typscript language service in monaco-editor.

[johnsoncodehk]

API refactor is finish in 2.0, now you should use activateAutomaticTypeAcquisition(), see https://github.com/volarjs/volar.js/tree/master/packages/monaco#add-ata-support-for-typescript.

[elchininet]

Thanks @johnsoncodehk,
I'll check it out 👍🏼
Regards