@monaco-editor/react - npm Package Compare versions

Comparing version 3.4.2 to 3.5.0

CHANGELOG.md

 ### Versions
 
+## 3.5.0
+###### *July 30, 2020*
+
+- utilities (monaco): redesign utility `monaco`; get rid of class, make it more fp
+- utilities: create `compose` utility
+- utilities: create `store` utility; for internal usage (in other utilities)
+
 ## 3.4.2
@@ -4,0 +11,0 @@ ###### *July 15, 2020*

lib/utils/index.js

@@ -8,12 +8,12 @@ "use strict";
 });
-Object.defineProperty(exports, "monaco", {
+Object.defineProperty(exports, "noop", {
   enumerable: true,
   get: function get() {
-    return _monaco.default;
+    return _noop.default;
   }
 });
-Object.defineProperty(exports, "noop", {
+Object.defineProperty(exports, "compose", {
   enumerable: true,
   get: function get() {
-    return _noop.default;
+    return _compose.default;
   }
@@ -33,9 +33,25 @@ });
 });
+Object.defineProperty(exports, "store", {
+  enumerable: true,
+  get: function get() {
+    return _store.default;
+  }
+});
+Object.defineProperty(exports, "monaco", {
+  enumerable: true,
+  get: function get() {
+    return _monaco.default;
+  }
+});
 
-var _monaco = _interopRequireDefault(require("./monaco"));
-
 var _noop = _interopRequireDefault(require("./noop"));
 
+var _compose = _interopRequireDefault(require("./compose"));
+
 var _deepMerge = _interopRequireDefault(require("./deepMerge"));
 
-var _makeCancelable = _interopRequireDefault(require("./makeCancelable"));
+var _makeCancelable = _interopRequireDefault(require("./makeCancelable"));
+
+var _store = _interopRequireDefault(require("./store"));
+
+var _monaco = _interopRequireDefault(require("./monaco"));

lib/utils/monaco.js

@@ -12,132 +12,115 @@ "use strict";
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _config2 = _interopRequireDefault(require("../config"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _utils = require("../utils");
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _store = (0, _utils.store)({
+  config: _config2.default,
+  isInitialized: false,
+  configScriptSrc: null,
+  resolve: null,
+  reject: null
+}),
+    state = _store.state,
+    setState = _store.setState;
 
-var _config2 = _interopRequireDefault(require("../config"));
+var MONACO_INIT = 'monaco_init';
 
-var _utils = require("../utils");
+function config(_ref) {
+  var src = _ref.src,
+      _config = (0, _objectWithoutProperties2.default)(_ref, ["src"]);
 
-var Monaco =
-/*#__PURE__*/
-function () {
-  function Monaco(_ref) {
-    var _this = this;
+  setState({
+    configScriptSrc: src,
+    config: (0, _utils.deepMerge)(_config2.default, validateConfig(config))
+  });
+}
 
-    var src = _ref.src,
-        config = (0, _objectWithoutProperties2.default)(_ref, ["src"]);
-    (0, _classCallCheck2.default)(this, Monaco);
-    (0, _defineProperty2.default)(this, "handleConfigScriptLoad", function (_) {
-      document.removeEventListener('monaco_init', _this.handleConfigScriptLoad);
+function init() {
+  if (!state.isInitialized) {
+    if (window.monaco && window.monaco.editor) {
+      return Promise.resolve(window.monaco);
+    }
 
-      _this.resolve(window.monaco);
+    document.addEventListener(MONACO_INIT, handleConfigScriptLoad);
+    (0, _utils.compose)(injectScriptsIntoBody, createMonacoLoaderScript, createConfigScript)();
+    setState({
+      isInitialized: true
     });
-    (0, _defineProperty2.default)(this, "isInitialized", false);
-    (0, _defineProperty2.default)(this, "wrapperPromise", new Promise(function (res, rej) {
-      _this.resolve = res;
-      _this.reject = rej;
-    }));
-    this.configScriptSrc = src;
-    this.__config = config;
   }
 
-  (0, _createClass2.default)(Monaco, [{
-    key: "config",
-    value: function config() {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _utils.makeCancelable)(wrapperPromise);
+}
 
-      var src = _ref2.src,
-          _config = (0, _objectWithoutProperties2.default)(_ref2, ["src"]);
-
-      this.configScriptSrc = src;
-      this.__config = (0, _utils.deepMerge)(this.__config, this.validateConfig(_config));
-      return this;
-    }
-  }, {
-    key: "validateConfig",
-    value: function validateConfig(config) {
-      if (config.urls) {
-        this.informAboutDepreciation();
-        return {
-          paths: {
-            vs: config.urls.monacoBase
-          }
-        };
+function validateConfig(config) {
+  if (config.urls) {
+    informAboutDepreciation();
+    return {
+      paths: {
+        vs: config.urls.monacoBase
       }
+    };
+  }
 
-      return config;
-    }
-  }, {
-    key: "informAboutDepreciation",
-    value: function informAboutDepreciation() {
-      console.warn("Deprecation warning!\n      You are using deprecated way of configuration.\n\n      Instead of using\n        monaco.config({ urls: { monacoBase: '...' } })\n      use\n        monaco.config({ paths: { vs: '...' } })\n\n      For more please check the link https://github.com/suren-atoyan/monaco-react#config\n    ");
-    }
-  }, {
-    key: "injectScripts",
-    value: function injectScripts(script) {
-      document.body.appendChild(script);
-    }
-  }, {
-    key: "createScript",
-    value: function createScript(src) {
-      var script = document.createElement('script');
-      return src && (script.src = src), script;
-    }
-  }, {
-    key: "createMonacoLoaderScript",
-    value: function createMonacoLoaderScript(configScript) {
-      var _this2 = this;
+  return config;
+}
 
-      var loaderScript = this.createScript("".concat(this.__config.paths.vs, "/loader.js"));
+function injectScripts(container) {
+  return function (script) {
+    return container.appendChild(script);
+  };
+}
 
-      loaderScript.onload = function (_) {
-        return _this2.injectScripts(configScript);
-      };
+var injectScriptsIntoBody = injectScripts(document.body);
 
-      loaderScript.onerror = this.reject;
-      return loaderScript;
-    }
-  }, {
-    key: "createConfigScript",
-    value: function createConfigScript() {
-      var configScript = this.createScript();
+function createScript(src) {
+  var script = document.createElement('script');
+  return src && (script.src = src), script;
+}
 
-      if (this.configScriptSrc) {
-        // it will be helpfull in case of CSP, which doesn't allow
-        // inline script execution
-        configScript.src = this.configScriptSrc;
-      } else {
-        configScript.innerHTML = "\n        require.config(".concat(JSON.stringify(this.__config), ");\n        require(['vs/editor/editor.main'], function() {\n          document.dispatchEvent(new Event('monaco_init'));\n        });\n      ");
-      }
+function handleConfigScriptLoad() {
+  document.removeEventListener(MONACO_INIT, handleConfigScriptLoad);
+  state.resolve(window.monaco);
+}
 
-      configScript.onerror = this.reject;
-      return configScript;
-    }
-  }, {
-    key: "init",
-    value: function init() {
-      if (!this.isInitialized) {
-        if (window.monaco && window.monaco.editor) {
-          return new Promise(function (res, rej) {
-            return res(window.monaco);
-          });
-        }
+function createMonacoLoaderScript(configScript) {
+  var loaderScript = createScript("".concat(state.config.paths.vs, "/loader.js"));
 
-        document.addEventListener('monaco_init', this.handleConfigScriptLoad);
-        var configScript = this.createConfigScript();
-        var loaderScript = this.createMonacoLoaderScript(configScript);
-        this.injectScripts(loaderScript);
-      }
+  loaderScript.onload = function () {
+    return injectScriptsIntoBody(configScript);
+  };
 
-      this.isInitialized = true;
-      return (0, _utils.makeCancelable)(this.wrapperPromise);
-    }
-  }]);
-  return Monaco;
-}();
+  loaderScript.onerror = state.reject;
+  return loaderScript;
+}
 
-var _default = new Monaco(_config2.default);
+function createConfigScript() {
+  var configScript = createScript();
 
+  if (state.configScriptSrc) {
+    // it will be helpfull in case of CSP, which doesn't allow
+    // inline script execution
+    configScript.src = state.configScriptSrc;
+  } else {
+    configScript.innerHTML = "\n      require.config(".concat(JSON.stringify(state.config), ");\n      require(['vs/editor/editor.main'], function() {\n        document.dispatchEvent(new Event('monaco_init'));\n      });\n    ");
+  }
+
+  configScript.onerror = state.reject;
+  return configScript;
+}
+
+function informAboutDepreciation() {
+  console.warn("Deprecation warning!\n    You are using deprecated way of configuration.\n\n    Instead of using\n      monaco.config({ urls: { monacoBase: '...' } })\n    use\n      monaco.config({ paths: { vs: '...' } })\n\n    For more please check the link https://github.com/suren-atoyan/monaco-react#config\n  ");
+}
+
+var wrapperPromise = new Promise(function (resolve, reject) {
+  return setState({
+    resolve: resolve,
+    reject: reject
+  });
+});
+var _default = {
+  config: config,
+  init: init
+};
 exports.default = _default;

package.json

 {
   "name": "@monaco-editor/react",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "description": "Monaco editor wrapper for easy/one-line integration with React applications (e.g. powered by create-react-app) without need of webpack configuration files",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

65999

increased by1.53%

Number of package files

34

increased by6.25%

Lines of code

990

increased by5.1%

No dependency changes