Version 1.0

2026-07-21 22:24:25 +00:00
parent f3645fbfbc
commit 9edbfd3f77
4134 changed files with 1448752 additions and 1 deletions
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ]
+}
@@ -0,0 +1 @@
+npm test && npm run lint
@@ -0,0 +1,103 @@
+## 1.7.0
+###### *Nov 21, 2025*
+
+- loader: merged #61 - add backward compatibility for 0.53 and 0.54 versions
+- monaco-editor: update to the latest version (0.55.1)
+
+## 1.6.1
+###### *Oct 14, 2025*
+
+- eslint: use mjs for eslint config file
+- package: remove type field
+
+## 1.6.0
+###### *Oct 12, 2025*
+
+- monaco-editor: update to the latest version (0.54.0)
+- package: update all dependencies to the latest version
+- playground: update all dependencies to the latest version
+
+## 1.5.0
+###### *Feb 13, 2025*
+
+- monaco-editor: update to the latest version (0.52.2)
+- package: remove monaco-editor from peerDependencies
+
+## 1.4.0
+###### *Oct 1, 2023*
+
+- monaco-editor: update to the latest version (0.43.0)
+
+## 1.3.3
+###### *Apr 2, 2023*
+
+- monaco-editor: update to the latest version (0.36.1)
+
+## 1.3.2
+###### *May 11, 2022*
+
+- utility: resolve monaco instance in case of provided monaco instance and global availability
+
+## 1.3.1
+###### *Apr 23, 2022*
+
+- utility: implement isInitialized flag
+
+## 1.3.0
+###### *Mar 20, 2022*
+
+- types: add optional monaco type into config params
+- utility: implement optional monaco param for config
+- test: fix a test case according to the new changes
+- playground: create a playground for testing the library
+- monaco-editor: update to the latest version (0.33.0)
+
+## 1.2.0
+###### *Oct 3, 2021*
+
+- monaco-editor: update to the latest version (0.28.1)
+- types: fix CancelablePromise type
+
+## 1.1.1
+###### *Jun 21, 2021*
+
+- monaco-editor: update to the latest version (0.25.2)
+
+## 1.1.0
+###### *Jun 12, 2021*
+
+- monaco-editor: update to the latest version (0.25.0)
+
+## 1.0.1
+###### *Mar 18, 2021*
+
+- monaco-editor: update to the latest version (0.23.0)
+
+## 1.0.0
+###### *Jan 15, 2021*
+
+🎉 First stable release
+
+- utility: rename the main utility: monaco -> loader
+- helpers: create (+ named export) `__getMonacoInstance` internal helper
+
+## 0.1.3
+###### *Jan 8, 2021*
+
+- build: in `cjs` and `es` bundles `state-local` is marked as externam lib
+- build: in `cjs` and `es` modules structure is preserved - `output.preserveModules = true`
+
+## 0.1.2
+###### *Jan 7, 2021*
+
+- package: add jsdelivr source path
+
+## 0.1.1
+###### *Jan 7, 2021*
+
+- lib: rename scripts name (from 'core' to 'loader')
+
+## 0.1.0
+###### *Jan 6, 2021*
+
+🎉 First release
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Suren Atoyan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,201 @@
+# @monaco-editor/loader &middot; [![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)
+
+The utility to easy setup `monaco-editor` into your browser
+
+## Synopsis
+
+Configure and download monaco sources via its loader script, without needing to use webpack's (or any other module bundler's) configuration files
+
+## Motivation
+
+It'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.
+
+## How it works
+
+Monaco 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
+
+## Documentation
+
+#### Contents
+
+* [Installation](#installation)
+* [Introduction](#introduction)
+* [Usage](#usage)
+  * [.config](#config)
+  * [.init](#init)
+* [Notes](#notes)
+  * [For `electron` users](#for-electron-users)
+  * [For `Next.js` users](#for-nextjs-users)
+
+### Installation
+
+```bash
+npm install @monaco-editor/loader
+```
+
+or
+
+```bash
+yarn add @monaco-editor/loader
+```
+
+NOTE: 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.
+
+### Introduction
+
+The library exports types and the utility called `loader`, the last one has two methods
+
+* [.config](#config)
+* [.init](#init)
+
+### Usage
+
+```javascript
+import loader from '@monaco-editor/loader';
+
+loader.init().then(monaco => {
+  monaco.editor.create(/* editor container, e.g. document.body */, {
+    value: '// some comment',
+    language: 'javascript',
+  });
+});
+```
+
+[codesandbox](https://codesandbox.io/s/simple-usage-os49p)
+
+#### .config
+
+By 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
+
+```javascript
+import loader from '@monaco-editor/loader';
+
+// you can change the source of the monaco files
+loader.config({ paths: { vs: '...' } });
+
+// you can configure the locales
+loader.config({ 'vs/nls': { availableLanguages: { '*': 'de' } } });
+
+// or
+loader.config({
+  paths: {
+    vs: '...',
+  },
+  'vs/nls' : {
+    availableLanguages: {
+      '*': 'de',
+    },
+  },
+});
+
+loader.init().then(monaco => { /* ... */ });
+```
+
+[codesandbox](https://codesandbox.io/s/config-o6zn6)
+
+#### Configure the loader to load the monaco as an npm package
+
+```javascript
+import loader from '@monaco-editor/loader';
+import * as monaco from 'monaco-editor';
+
+loader.config({ monaco });
+
+loader.init().then(monacoInstance => { /* ... */ });
+```
+
+[codesandbox](https://codesandbox.io/s/npm-gswrvh)
+
+#### .init
+
+The `.init` method handles the initialization process. It returns the monaco instance, wrapped with cancelable promise
+
+```javascript
+import loader from '@monaco-editor/loader';
+
+loader.init().then(monaco => {
+  console.log('Here is the monaco instance', monaco);
+});
+```
+
+[codesandbox](https://codesandbox.io/s/init-q2ipt)
+
+```javascript
+import loader from '@monaco-editor/loader';
+
+const cancelable = loader.init();
+
+cancelable.then(monaco => {
+  console.log('You will not see it, as it is canceled');
+});
+
+cancelable.cancel();
+```
+
+[codesandbox](https://codesandbox.io/s/init-cancelable-9o42y)
+
+#### Notes
+
+##### For `electron` users
+
+In 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:
+
+1) **Download process fails** or if you use @monaco-editor/react **You see loading screen stuck**
+Usually, 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:
+
+```javascript
+import loader from '@monaco-editor/loader';
+
+loader.config({ paths: { vs: '../path-to-monaco' } });
+```
+
+or, if you want to use it as an npm package, you can do it like this:
+
+```javascript
+import loader from '@monaco-editor/loader';
+import * as monaco from 'monaco-editor';
+
+loader.config({ monaco });
+
+loader.init().then(monacoInstance => { /* ... */ });
+```
+
+2) **Based on your electron environment it can be required to have an absolute URL**
+The 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:
+
+```javascript
+function ensureFirstBackSlash(str) {
+    return str.length > 0 && str.charAt(0) !== '/'
+        ? '/' + str
+        : str;
+}
+
+function uriFromPath(_path) {
+    const pathName = path.resolve(_path).replace(/\\/g, '/');
+    return encodeURI('file://' + ensureFirstBackSlash(pathName));
+}
+
+loader.config({
+  paths: {
+    vs: uriFromPath(
+      path.join(__dirname, '../node_modules/monaco-editor/min/vs')
+    )
+  }
+});
+```
+
+or, just use it as an npm package.
+
+There 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)
+
+And 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.
+
+##### For `Next.js` users
+
+The 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).
+
+And 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.
+
+## License
+
+[MIT](./LICENSE)
@@ -0,0 +1,31 @@
+import js from '@eslint/js';
+
+export default [
+  js.configs.recommended,
+  {
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      globals: {
+        // Browser globals
+        window: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        console: 'readonly',
+        setTimeout: 'readonly',
+        clearTimeout: 'readonly',
+        setInterval: 'readonly',
+        clearInterval: 'readonly',
+        fetch: 'readonly',
+        Promise: 'readonly',
+        // ES2020 globals
+        globalThis: 'readonly',
+      },
+    },
+    rules: {},
+  },
+  {
+    ignores: ['**/spec.js', '**/*.spec.js', 'node_modules/**', 'lib/**'],
+  },
+];
+
@@ -0,0 +1,51 @@
+{
+  "name": "@monaco-editor/loader",
+  "version": "1.7.0",
+  "description": "the library aims to setup monaco editor into your browser",
+  "main": "lib/cjs/index.js",
+  "module": "lib/es/index.js",
+  "unpkg": "lib/umd/monaco-loader.min.js",
+  "jsdelivr": "lib/umd/monaco-loader.min.js",
+  "types": "lib/types.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/suren-atoyan/monaco-loader.git"
+  },
+  "homepage": "https://github.com/suren-atoyan/monaco-loader.git",
+  "author": "Suren Atoyan <contact@surenatoyan.com>",
+  "license": "MIT",
+  "scripts": {
+    "test": "jest",
+    "test-watch": "npm run build && jest --watch",
+    "coverage": "jest --collect-coverage",
+    "lint": "npx eslint src",
+    "prepublishOnly": "npm test && npm run lint && npm run build",
+    "build": "rollup -c && cp ./src/types.d.ts ./lib/",
+    "prepare": "husky"
+  },
+  "keywords": [
+    "monaco",
+    "editor",
+    "loader",
+    "monaco-editor",
+    "monaco editor"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.25.0",
+    "@babel/preset-env": "^7.25.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.2.1",
+    "eslint": "^9.14.0",
+    "husky": "^9.1.6",
+    "jest": "^29.7.0",
+    "rollup": "^4.24.0"
+  },
+  "dependencies": {
+    "state-local": "^1.0.6"
+  }
+}
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Monaco Loader: Playground</title>
+  </head>
+  <body style="height: 100vh">
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
@@ -0,0 +1,35 @@
+import loader from '../src'
+
+// import * as monaco from 'monaco-editor';
+// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+// self.MonacoEnvironment = {
+//   getWorker(_, label) {
+//     if (label === 'json') {
+//       return new jsonWorker()
+//     }
+//     if (label === 'css' || label === 'scss' || label === 'less') {
+//       return new cssWorker()
+//     }
+//     if (label === 'html' || label === 'handlebars' || label === 'razor') {
+//       return new htmlWorker()
+//     }
+//     if (label === 'typescript' || label === 'javascript') {
+//       return new tsWorker()
+//     }
+//     return new editorWorker()
+//   }
+// }
+
+// loader.config({ monaco });
+loader.config({ paths: {
+  vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.47.0/min/vs',
+} });
+loader.init().then(monaco => monaco.editor.create(document.body, {
+  value: '// some comment',
+  language: 'javascript',
+}));
@@ -0,0 +1,16 @@
+{
+  "name": "monaco-loader",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^6.0.0"
+  },
+  "dependencies": {
+    "monaco-editor": "^0.55.1"
+  }
+}
@@ -0,0 +1,78 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+import replace from '@rollup/plugin-replace';
+import commonjs from '@rollup/plugin-commonjs';
+import babel from '@rollup/plugin-babel';
+
+const defaultNodeResolveConfig = {};
+const nodeResolvePlugin = nodeResolve(defaultNodeResolveConfig);
+
+const commonPlugins = [
+  nodeResolvePlugin,
+  babel({
+    presets: ['@babel/preset-env'],
+    babelHelpers: 'bundled',
+  }),
+  commonjs(),
+];
+
+const developmentPlugins = [
+  ...commonPlugins,
+  replace({
+    'process.env.NODE_ENV': JSON.stringify('development'),
+    preventAssignment: true,
+  }),
+];
+
+const productionPlugins = [
+  ...commonPlugins,
+  replace({
+    'process.env.NODE_ENV': JSON.stringify('production'),
+    preventAssignment: true,
+  }),
+  terser({ mangle: false }),
+];
+
+const external = ['state-local'];
+
+export default [
+  {
+    input: 'src/index.js',
+    external,
+    output: {
+      dir: 'lib/cjs/',
+      format: 'cjs',
+      exports: 'named',
+      preserveModules: true,
+    },
+    plugins: commonPlugins,
+  },
+  {
+    input: 'src/index.js',
+    external,
+    output: {
+      dir: 'lib/es/',
+      format: 'es',
+      preserveModules: true,
+    },
+    plugins: commonPlugins,
+  },
+  {
+    input: 'src/index.js',
+    output: {
+      file: 'lib/umd/monaco-loader.js',
+      format: 'umd',
+      name: 'monaco_loader',
+    },
+    plugins: developmentPlugins,
+  },
+  {
+    input: 'src/index.js',
+    output: {
+      file: 'lib/umd/monaco-loader.min.js',
+      format: 'umd',
+      name: 'monaco_loader',
+    },
+    plugins: productionPlugins,
+  },
+];
@@ -0,0 +1,6 @@
+# https://tea.xyz/what-is-this-file
+---
+version: 1.0.0
+codeOwners:
+  - '0x8958579fcDE99f81808e6c89aCFeEc3DF93Ad9bb'
+quorum: 1