{"id":24838592,"url":"https://github.com/suren-atoyan/monaco-loader","last_synced_at":"2025-05-14T16:13:28.271Z","repository":{"id":37451877,"uuid":"326474202","full_name":"suren-atoyan/monaco-loader","owner":"suren-atoyan","description":"The utility to easy setup monaco-editor into your browser","archived":false,"fork":false,"pushed_at":"2025-02-13T16:02:50.000Z","size":137,"stargazers_count":200,"open_issues_count":14,"forks_count":39,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-06T05:04:53.481Z","etag":null,"topics":["monaco-editor","vscode"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/suren-atoyan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":"suren_atoyan","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2021-01-03T18:28:42.000Z","updated_at":"2025-03-26T03:52:19.000Z","dependencies_parsed_at":"2024-02-23T09:31:11.864Z","dependency_job_id":"dd481406-f378-4fd5-9385-d450bbac9c12","html_url":"https://github.com/suren-atoyan/monaco-loader","commit_stats":{"total_commits":41,"total_committers":5,"mean_commits":8.2,"dds":0.09756097560975607,"last_synced_commit":"ead5fddd50628134af00181209aaf27d73760149"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suren-atoyan%2Fmonaco-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suren-atoyan%2Fmonaco-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suren-atoyan%2Fmonaco-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suren-atoyan%2Fmonaco-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suren-atoyan","download_url":"https://codeload.github.com/suren-atoyan/monaco-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688543,"owners_count":21145763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["monaco-editor","vscode"],"created_at":"2025-01-31T06:21:04.364Z","updated_at":"2025-04-13T08:54:29.265Z","avatar_url":"https://github.com/suren-atoyan.png","language":"JavaScript","funding_links":["https://patreon.com/suren_atoyan"],"categories":["Browser editor"],"sub_categories":[],"readme":"# @monaco-editor/loader \u0026middot; [![monthly downloads](https://img.shields.io/npm/dm/@monaco-editor/loader)](https://www.npmjs.com/package/@monaco-editor/loader) [![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/suren-atoyan/monaco-loader/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/@monaco-editor/loader.svg?style=flat)](https://www.npmjs.com/package/@monaco-editor/loader) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/suren-atoyan/monaco-loader/pulls)\n\nThe utility to easy setup `monaco-editor` into your browser\n\n## Synopsis\n\nConfigure and download monaco sources via its loader script, without needing to use webpack's (or any other module bundler's) configuration files\n\n## Motivation\n\nIt's been a while we are working with `monaco editor`. It's a great library and provides a powerful editor out of the box. Anyway, there were couple of problems related to the setup process. The main problem is the need to do some additional `webpack` configuration; that's not bad, but some quite useful tools, like `CRA`, aren't happy with that fact. The library [`@monaco-editor/react`](https://github.com/suren-atoyan/monaco-react) was being created to solve that problem - `monaco editor wrapper for easy/one-line integration with React applications without needing to use webpack's (or any other module bundler's) configuration files`. In that library, there was a utility that cares about the initialization process of monaco and overcomes the additional use of webpack configuration. That utility grows over time and now it's a separate library. Now, you can easily setup monaco into your browser, create your own editors, wrappers for React/Vue/Angular of whatever you want.\n\n## How it works\n\nMonaco editor provides a script called `loader`, which itself provides tooling to download monaco sources. The library, under the hood, handles the configuration and loading part and gives us an easy-to-use API to interact with it\n\n## Documentation\n\n#### Contents\n\n* [Installation](#installation)\n* [Introduction](#introduction)\n* [Usage](#usage)\n  * [.config](#config)\n  * [.init](#init)\n* [Notes](#notes)\n  * [For `electron` users](#for-electron-users)\n  * [For `Next.js` users](#for-nextjs-users)\n\n### Installation\n\n```bash\nnpm install @monaco-editor/loader\n```\n\nor\n\n```bash\nyarn add @monaco-editor/loader\n```\n\nNOTE: For TypeScript type definitions, this package uses the [monaco-editor](https://www.npmjs.com/package/monaco-editor) package as a peer dependency. So, if you need types and don't already have the [monaco-editor](https://www.npmjs.com/package/monaco-editor) package installed, you will need to do so.\n\n### Introduction\n\nThe library exports types and the utility called `loader`, the last one has two methods\n\n* [.config](#config)\n* [.init](#init)\n\n### Usage\n\n```javascript\nimport loader from '@monaco-editor/loader';\n\nloader.init().then(monaco =\u003e {\n  monaco.editor.create(/* editor container, e.g. document.body */, {\n    value: '// some comment',\n    language: 'javascript',\n  });\n});\n```\n\n[codesandbox](https://codesandbox.io/s/simple-usage-os49p)\n\n#### .config\n\nBy using the `.config` method we can configure the monaco loader. By default all sources come from CDN, you can change that behavior and load them from wherever you want\n\n```javascript\nimport loader from '@monaco-editor/loader';\n\n// you can change the source of the monaco files\nloader.config({ paths: { vs: '...' } });\n\n// you can configure the locales\nloader.config({ 'vs/nls': { availableLanguages: { '*': 'de' } } });\n\n// or\nloader.config({\n  paths: {\n    vs: '...',\n  },\n  'vs/nls' : {\n    availableLanguages: {\n      '*': 'de',\n    },\n  },\n});\n\nloader.init().then(monaco =\u003e { /* ... */ });\n```\n\n[codesandbox](https://codesandbox.io/s/config-o6zn6)\n\n#### Configure the loader to load the monaco as an npm package\n\n```javascript\nimport loader from '@monaco-editor/loader';\nimport * as monaco from 'monaco-editor';\n\nloader.config({ monaco });\n\nloader.init().then(monacoInstance =\u003e { /* ... */ });\n```\n\n[codesandbox](https://codesandbox.io/s/npm-gswrvh)\n\n#### .init\n\nThe `.init` method handles the initialization process. It returns the monaco instance, wrapped with cancelable promise\n\n```javascript\nimport loader from '@monaco-editor/loader';\n\nloader.init().then(monaco =\u003e {\n  console.log('Here is the monaco instance', monaco);\n});\n```\n\n[codesandbox](https://codesandbox.io/s/init-q2ipt)\n\n```javascript\nimport loader from '@monaco-editor/loader';\n\nconst cancelable = loader.init();\n\ncancelable.then(monaco =\u003e {\n  console.log('You will not see it, as it is canceled');\n});\n\ncancelable.cancel();\n```\n\n[codesandbox](https://codesandbox.io/s/init-cancelable-9o42y)\n\n#### Notes\n\n##### For `electron` users\n\nIn general it works fine with electron, but there are several cases that developers usually face to and sometimes it can be confusing. Here they are:\n\n1) **Download process fails** or if you use @monaco-editor/react **You see loading screen stuck**\nUsually, it's because your environment doesn't allow you to load external sources. By default, it loads monaco sources from CDN. You can see the [default configuration](https://github.com/suren-atoyan/monaco-loader/blob/master/src/config/index.js#L3). But sure you can change that behavior; the library is fully configurable. Read about it [here](https://github.com/suren-atoyan/monaco-loader#config). So, if you want to download it from your local files, you can do it like this:\n\n```javascript\nimport loader from '@monaco-editor/loader';\n\nloader.config({ paths: { vs: '../path-to-monaco' } });\n```\n\nor, if you want to use it as an npm package, you can do it like this:\n\n```javascript\nimport loader from '@monaco-editor/loader';\nimport * as monaco from 'monaco-editor';\n\nloader.config({ monaco });\n\nloader.init().then(monacoInstance =\u003e { /* ... */ });\n```\n\n2) **Based on your electron environment it can be required to have an absolute URL**\nThe utility function taken from [here](https://github.com/microsoft/monaco-editor-samples/blob/master/electron-amd-nodeIntegration/electron-index.html) can help you to achieve that. Let's imagine you have `monaco-editor` package installed and you want to load monaco from the `node_modules` rather than from CDN: in that case, you can write something like this:\n\n```javascript\nfunction ensureFirstBackSlash(str) {\n    return str.length \u003e 0 \u0026\u0026 str.charAt(0) !== '/'\n        ? '/' + str\n        : str;\n}\n\nfunction uriFromPath(_path) {\n    const pathName = path.resolve(_path).replace(/\\\\/g, '/');\n    return encodeURI('file://' + ensureFirstBackSlash(pathName));\n}\n\nloader.config({\n  paths: {\n    vs: uriFromPath(\n      path.join(__dirname, '../node_modules/monaco-editor/min/vs')\n    )\n  }\n});\n```\n\nor, just use it as an npm package.\n\nThere were several issues about this topic that can be helpful too - [1](https://github.com/suren-atoyan/monaco-react/issues/48) [2](https://github.com/suren-atoyan/monaco-react/issues/12) [3](https://github.com/suren-atoyan/monaco-react/issues/58) [4](https://github.com/suren-atoyan/monaco-react/issues/87)\n\nAnd if you use `electron` with `monaco` and have faced an issue different than the above-discribed ones, please let us know to make this section more helpful.\n\n##### For `Next.js` users\n\nThe part of the source that should be pre-parsed is optimized for server-side rendering, so, in usual cases, it will work fine, but if you want to have access, for example, to [`monacoInstance`](#config) you should be aware that it wants to access the `document` object, and it requires browser environment. Basically you just need to avoid running that part out of browser environment, there are several ways to do that. One of them is described [here](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr).\n\nAnd if you use `monaco` with `Next.js` and have faced an issue different than the above-described one, please let us know to make this section more helpful.\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuren-atoyan%2Fmonaco-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuren-atoyan%2Fmonaco-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuren-atoyan%2Fmonaco-loader/lists"}