Skip to content

Instantly share code, notes, and snippets.

@aztack

aztack/index.md

Forked from cdrini/index.md
Created November 24, 2024 11:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aztack/11ab0e970e23a605226b1f171fe29ccd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aztack/11ab0e970e23a605226b1f171fe29ccd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @cdrini cdrini revised this gist Oct 16, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    Well that was a headache! This is certainly not an elegant solution, but it works. Hopefully someone can use these notes to save themselves a bunch of time, and maybe use that time to try to improve on the solution.
    Well that was a headache! This is certainly not an elegant solution, but it works. Hopefully someone can use these notes to save themselves a bunch of time.

    Known issues:
    - This does not scale easily to any other library
  2. @cdrini cdrini revised this gist Oct 16, 2020. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -59,7 +59,9 @@ Note:
    ## References/External Links
    - The (largely useless) docs: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.languageservicedefaults.html#addextralib
    - GH Issues: https://github.com/microsoft/monaco-editor/issues/758 , https://github.com/microsoft/monaco-editor/issues/754
    - GH Issues:
    - [#758: monaco-typescript not picking up configured modules from addExtraLib](https://github.com/microsoft/monaco-editor/issues/758)
    - [#754: Cannot require contents of '.d.ts' files as string in browser for addExtraLib method](https://github.com/microsoft/monaco-editor/issues/754)
    - StackOverflow Questions:
    - [Adding Typescript Type Declarations to Monaco Editor](https://stackoverflow.com/questions/52290727/adding-typescript-type-declarations-to-monaco-editor)
    - Monaco demo using `addExtraLib`: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults
  3. @cdrini cdrini revised this gist Oct 16, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -58,6 +58,7 @@ Note:
    ## References/External Links
    - The (largely useless) docs: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.languageservicedefaults.html#addextralib
    - GH Issues: https://github.com/microsoft/monaco-editor/issues/758 , https://github.com/microsoft/monaco-editor/issues/754
    - StackOverflow Questions:
    - [Adding Typescript Type Declarations to Monaco Editor](https://stackoverflow.com/questions/52290727/adding-typescript-type-declarations-to-monaco-editor)
  4. @cdrini cdrini created this gist Oct 16, 2020.
    73 changes: 73 additions & 0 deletions index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    Well that was a headache! This is certainly not an elegant solution, but it works. Hopefully someone can use these notes to save themselves a bunch of time, and maybe use that time to try to improve on the solution.

    Known issues:
    - This does not scale easily to any other library
    - Requires some internal knowledge of lodash's types library which might break on a lodash update

    ### Add `raw-loader` and `@types/lodash`

    ```sh
    npm install --save-dev @types/lodash raw-loader
    ```

    (as of writing, these are at 4.14.162 and 4.0.2, respectively)

    ### Import and register the .d.ts files

    Looking at [@types/lodash/index.d.ts](https://unpkg.com/browse/@types/[email protected]/index.d.ts), copy all the `common` references and import them. :

    ```js
    import LODASH_index from '!raw-loader!@types/lodash/index.d.ts';
    import LODASH_common from '!raw-loader!@types/lodash/common/common.d.ts';
    import LODASH_array from '!raw-loader!@types/lodash/common/array.d.ts';
    import LODASH_collection from '!raw-loader!@types/lodash/common/collection.d.ts';
    import LODASH_date from '!raw-loader!@types/lodash/common/date.d.ts';
    import LODASH_function from '!raw-loader!@types/lodash/common/function.d.ts';
    import LODASH_lang from '!raw-loader!@types/lodash/common/lang.d.ts';
    import LODASH_math from '!raw-loader!@types/lodash/common/math.d.ts';
    import LODASH_number from '!raw-loader!@types/lodash/common/number.d.ts';
    import LODASH_object from '!raw-loader!@types/lodash/common/object.d.ts';
    import LODASH_seq from '!raw-loader!@types/lodash/common/seq.d.ts';
    import LODASH_string from '!raw-loader!@types/lodash/common/string.d.ts';
    import LODASH_util from '!raw-loader!@types/lodash/common/util.d.ts';
    ```

    - Note: Vetur will complain in VS Code about importing `.d.ts` files, but won't error.

    Then register them into monaco (wherever monaco is in your project):

    ```js
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_index, '@types/lodash/index.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_common, '@types/lodash/common/common.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_array, '@types/lodash/common/array.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_collection, '@types/lodash/common/collection.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_date, '@types/lodash/common/date.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_function, '@types/lodash/common/function.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_lang, '@types/lodash/common/lang.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_math, '@types/lodash/common/math.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_number, '@types/lodash/common/number.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_object, '@types/lodash/common/object.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_seq, '@types/lodash/common/seq.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_string, '@types/lodash/common/string.d.ts');
    window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_util, '@types/lodash/common/util.d.ts');
    ```
    Note:
    - The file names matter here (somehow); removing the `.d.ts` extension causes them to break.
    ## References/External Links
    - GH Issues: https://github.com/microsoft/monaco-editor/issues/758 , https://github.com/microsoft/monaco-editor/issues/754
    - StackOverflow Questions:
    - [Adding Typescript Type Declarations to Monaco Editor](https://stackoverflow.com/questions/52290727/adding-typescript-type-declarations-to-monaco-editor)
    - Monaco demo using `addExtraLib`: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults
    - @types/lodash at unpkg, if you want to see the .d.ts files directly: https://unpkg.com/browse/@types/[email protected]/
    - GH Search for uses of `addExtraLib`: https://github.com/search?l=JavaScript&q=addExtraLib&type=Code
    ## Open Questions
    - What does the filename actually do? Also, what are the protocol prefixes for?