@monaco-editor/react - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

CHANGELOG.md

 ### Versions
 
+## 1.0.5
+###### *July 19, 2019*
+
+- Add a possibility to interact with Editor before it is mounted
+
 ## 1.0.4
@@ -4,0 +9,0 @@ ###### *July 13, 2019*

lib/Editor/Editor.js

@@ -49,7 +49,12 @@ "use strict";
 
-  var _useState = (0, _react.useState)(true),
+  var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      isLoading = _useState2[0],
-      setIsLoading = _useState2[1];
+      isEditorReady = _useState2[0],
+      setIsEditorReady = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isMonacoMounting = _useState4[0],
+      setIsMonacoMounting = _useState4[1];
+
   var editorRef = (0, _react.useRef)();
@@ -60,3 +65,5 @@ var monacoRef = (0, _react.useRef)();
     _utils.monaco.init().then(function (monaco) {
-      return (monacoRef.current = monaco) && createEditor();
+      return (monacoRef.current = monaco) && setIsMonacoMounting(false);
+    }).catch(function (error) {
+      return console.error('An error occurred during initialization of Monaco: ', error);
     });
@@ -68,6 +75,6 @@
     editorRef.current.setValue(value);
-  }, [value]);
+  }, [value], isEditorReady);
   (0, _hooks.useUpdate)(function (_) {
     monacoRef.current.editor.setModelLanguage(editorRef.current.getModel(), language);
-  }, [language]);
+  }, [language], isEditorReady);
   (0, _hooks.useUpdate)(function (_) {
@@ -77,11 +84,10 @@ editorRef.current.setScrollPosition({
     });
-  }, [line]);
+  }, [line], isEditorReady);
   (0, _hooks.useUpdate)(function (_) {
     monacoRef.current.editor.setTheme(theme);
-  }, [theme]);
+  }, [theme], isEditorReady);
   (0, _hooks.useUpdate)(function (_) {
     editorRef.current.updateOptions(options);
-  }, [options]);
-
-  function createEditor() {
+  }, [options], isEditorReady);
+  var createEditor = (0, _react.useCallback)(function (_) {
     editorRef.current = monacoRef.current.editor.create(containerRef.current, _objectSpread({
@@ -95,8 +101,11 @@ value: value,
     monacoRef.current.editor.setTheme(theme);
-    setIsLoading(false);
-  }
+    setIsEditorReady(true);
+  }, [editorDidMount, language, options, theme, value]);
+  (0, _react.useEffect)(function (_) {
+    !isMonacoMounting && !isEditorReady && createEditor();
+  }, [isMonacoMounting, isEditorReady, createEditor]);
 
-  function removeEditor() {
-    editorRef.current.dispose();
-  }
+  var removeEditor = function removeEditor(_) {
+    return editorRef.current.dispose();
+  };
 
@@ -108,7 +117,7 @@ return _react.default.createElement("section", {
     })
-  }, isLoading && _react.default.createElement(_Loading.default, {
+  }, !isEditorReady && _react.default.createElement(_Loading.default, {
     content: loading
   }), _react.default.createElement("div", {
     ref: containerRef,
-    style: _objectSpread({}, _styles.default.fullWidth, isLoading && _styles.default.hide)
+    style: _objectSpread({}, _styles.default.fullWidth, !isEditorReady && _styles.default.hide)
   }));
@@ -115,0 +124,0 @@ };

lib/utils/hooks/useUpdate/index.js

@@ -11,4 +11,5 @@ "use strict";
 var useUpdate = function useUpdate(effect, deps) {
+  var applyChanges = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   var isInitialMount = (0, _react.useRef)(true);
-  (0, _react.useEffect)(isInitialMount.current ? function (_) {
+  (0, _react.useEffect)(isInitialMount.current || !applyChanges ? function (_) {
     isInitialMount.current = false;
@@ -15,0 +16,0 @@ } : effect, deps);

lib/utils/monaco.js

@@ -71,3 +71,3 @@ "use strict";
       var mainScript = this.createScript();
-      mainScript.innerHTML = "\n      require.config({ paths: { 'vs': '".concat(_config.default.urls.monacoBase, "' }});\n      require(['vs/editor/editor.main'], function() {\n        document.dispatchEvent(new Event('monaco_init'));\n      });\n    ");
+      mainScript.innerHTML = "\n      require.config({ paths: { 'vs': '".concat(_config.default.urls.monacoBase, "' } });\n      require(['vs/editor/editor.main'], function() {\n        document.dispatchEvent(new Event('monaco_init'));\n      });\n    ");
       mainScript.onerror = this.reject;
@@ -74,0 +74,0 @@ return mainScript;

package.json

 {
   "name": "@monaco-editor/react",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "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",

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44669

2.03%

Lines of code

682

1.49%

No dependency changes