How can I get code completition/IntelliSense for library in Monaco editor?

32 views Asked by At

I've built a library (written in TypeScript, built with Vite) that is intended to be a browser-based library. I've also built a companion "playground" application (think CodePen, TypeScript playground, etc) to experiment with the library. The editor portion of the playground is implemented using the Monaco editor. The editor renders fine and nicely provides basic IntelliSense and syntax highlighting, but I'd like for the editor to also show IntelliSense/code completion for the classes/functions inside of my library.

During the build process, Vite produces .d.ts files that look like the following:

declare class MyCoolClass {
    static func(x: number): number;
}

export { MyCoolClass };

From what I can gather, I can reference those .d.ts files and call the addExtraLib function in the Monaco library:

const typeDefinitions = `
declare class MyCoolClass {
    static func(x: number): number;
}

export { MyCoolClass };`;

monaco.languages.typescript.javascriptDefaults.addExtraLib(typeDefinitions, 'easing.d.ts');
monaco.languages.typescript.typescriptDefaults.addExtraLib(typeDefinitions, 'easing.d.ts');

const editor = monaco.editor.create(aDomNode, {
    automaticLayout: true,
    value: '',
    language: 'typescript',
});

However, when typing into the editor, I don't see any code completion suggestions. However, if I remove export { MyCoolClass }; from the type definitions, I see suggestions. I'm assuming this is because without an export, the declaration is treated as global, which is precisely what I want in this playground.

How can I use the generated .d.ts files to provide suggestions, without manually going through and stripping them of exports or post-processing them? I feel like maybe I'm missing something simple.

0

There are 0 answers