volarjs / volar.js

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.

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.

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

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?

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?🙏🏻

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.

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.

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.

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

How to load type definitions automatically in a monaco worker?