Provide autocompletion in Monaco using .d.ts files generated from jsdoc

Question

I'm building a website where users write javascript code inside an instance of Monaco editor. I provide them some custom js libraries and I want to also provide auto completion for those libraries.

My custom libraries are written in javascript and annotated using jsdoc, so I'm using the typescript compiler to generate .d.ts files. This is my tsconfig.json

{
  "include": ["src/**/*.js"],
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "declaration": true,
    "emitDeclarationOnly": true,
    "lib": [
      "ES2015",
      "DOM"
    ],
    "outDir": "docs/",
    "types": [
      "node"
    ]
  },

When I run npx tsc on this simple javascript file

import { a } from './v0/JsA';
import { b } from './v0/JsB';

export const myLib = { a, b }

I obtain .d.ts files like the following

// myLib.d.ts
export namespace myLib {
    export { a };
    export { b };
}
import { a } from "./v0/JsA";
import { b } from "./v0/JsB";

that I provide to Monaco using

monaco.languages.typescript.javascriptDefaults.addExtraLib(dtsFileContentAsString, '')

Unfortunately this does not trigger autocompletion in Monaco when I start writing myLib..

However I found out that manually changing the content of myLib.d.ts file to

declare namespace myLib {
    let x = a;
    let y = b;
}
import { a } from "./v0/JsA";
import { b } from "./v0/JsB";

does trigger auto completion.

Any help to make this work? (either on the monaco side or the typescript compiler side)

Hatem Hatem · Accepted Answer · 2021-02-13T05:09:59

I have found the library dts-bundle to be useful in this context https://www.npmjs.com/package/dts-bundle#command-line

Also bundles multiple .d.ts files to a single file to be used by monaco editor

Provide autocompletion in Monaco using .d.ts files generated from jsdoc

1 Answers