I am in the process of creating a website that allows users to write JavaScript code using the Monaco editor. I have developed custom JavaScript libraries for them and want to enable auto-completion for these libraries.
The custom libraries are written in JavaScript and documented using JSDoc, so I am utilizing the TypeScript compiler to generate .d.ts files. Here is my tsconfig.json configuration:
{
"include": ["src/**/*.js"],
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"declaration": true,
"emitDeclarationOnly": true,
"lib": [
"ES2015",
"DOM"
],
"ourDir": "docs/",
"types": [
"node"
]
},
After running npx tsc on a simple JavaScript file like this:
import { a } from './v0/JsA';
import { b } from './v0/JsB';
export const myLib = { a, b }
I obtain .d.ts files as shown below:
// myLib.d.ts
export namespace myLib {
export { a };
export { b };
}
import { a } from "./v0/JsA";
import { b } from "./v0/JsB";
To provide these .d.ts files to Monaco, I use the following method:
monaco.languages.typescript.javascriptDefaults.addExtraLib(dtsFileContentAsString, '')
However, this method does not activate auto-completion in Monaco when writing myLib..
Upon further investigation, I discovered that manually modifying the content of myLib.d.ts file to look like this:
declare namespace myLib {
let x = a;
let y = b;
}
import { a } from "./v0/JsA";
import { b } from "./v0/JsB";
does trigger auto completion. Can anyone provide assistance on how to make this work? (either through adjustments on the Monaco side or the TypeScript compiler side)