react-ace - npm Package Compare versions

Comparing version 6.1.4 to 6.2.0

CHANGELOG.md

@@ -8,2 +8,9 @@ # Changelog
 
+## 6.2.0
+
+* Support for React 17
+* Upgraded dependencies
+* AceOptions interface adds debounceChangePeriod
+* update types
+
 ## 6.1.4
@@ -10,0 +17,0 @@

docs/FAQ.md

@@ -156,3 +156,3 @@ # Frequently Asked Questions
         bindKey: {win: 'Ctrl-X', mac: 'Command-X'}, //key combination used for the command.
-        exec: () => 'removeline'  // name of the command to rebind
+        exec: 'removeline'  // name of the command to rebind
       }]}
@@ -159,0 +159,0 @@ />

lib/ace.js

@@ -166,5 +166,6 @@ 'use strict';
   }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var oldProps = this.props;
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      var oldProps = prevProps;
+      var nextProps = this.props;
 
@@ -239,12 +240,8 @@ for (var i = 0; i < _editorOptions.editorOptions.length; i++) {
 
-      if (nextProps.focus && !oldProps.focus) {
-        this.editor.focus();
-      }
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
       if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) {
         this.editor.resize();
       }
+      if (this.props.focus && !prevProps.focus) {
+        this.editor.focus();
+      }
     }
@@ -251,0 +248,0 @@ }, {

lib/diff.js

@@ -50,5 +50,5 @@ 'use strict';
   _createClass(DiffComponent, [{
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(props) {
-      var value = props.value;
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      var value = this.props.value;
 
@@ -55,0 +55,0 @@

lib/split.js

@@ -185,7 +185,8 @@ 'use strict';
   }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
       var _this3 = this;
 
-      var oldProps = this.props;
+      var oldProps = prevProps;
+      var nextProps = this.props;
 
@@ -192,0 +193,0 @@ var split = this.editor.env.split;

package.json

 {
   "name": "react-ace",
-  "version": "6.1.4",
+  "version": "6.2.0",
   "description": "A react component for Ace Editor",
@@ -27,7 +27,7 @@ "main": "lib/index.js",
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
-    "babel-eslint": "^8.0.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^9.0.0",
     "babel-loader": "^7.0.0",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
@@ -37,20 +37,20 @@ "babel-preset-react": "^6.24.1",
     "chai": "^4.1.2",
-    "coveralls": "^3.0.0",
-    "enzyme": "^3.0.0",
-    "enzyme-adapter-react-16": "^1.0.1",
-    "eslint": "5.0.1",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^6.0.0",
-    "eslint-plugin-react": "7.10.0",
-    "jsdom": "^11.0.0",
+    "coveralls": "^3.0.2",
+    "enzyme": "^3.6.0",
+    "enzyme-adapter-react-16": "^1.5.0",
+    "eslint": "5.6.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "7.11.1",
+    "jsdom": "^12.0.0",
     "mocha": "5.2.0",
-    "nyc": "12.0.2",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0",
+    "nyc": "13.0.1",
+    "react": "^16.5.1",
+    "react-dom": "^16.5.1",
+    "react-test-renderer": "^16.5.1",
     "rimraf": "2.6.2",
     "sinon": "6.0.1",
-    "webpack": "4.14.0",
-    "webpack-cli": "^3.0.2",
-    "webpack-dev-server": "^3.1.3"
+    "webpack": "4.19.1",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.8"
   },
@@ -65,7 +65,7 @@ "keywords": [
   "dependencies": {
-    "brace": "^0.11.0",
-    "diff-match-patch": "^1.0.0",
+    "brace": "^0.11.1",
+    "diff-match-patch": "^1.0.4",
     "lodash.get": "^4.4.2",
-    "lodash.isequal": "^4.1.1",
-    "prop-types": "^15.5.8"
+    "lodash.isequal": "^4.5.0",
+    "prop-types": "^15.6.2"
   },
@@ -72,0 +72,0 @@ "peerDependencies": {

src/ace.js

@@ -125,4 +125,5 @@ import ace from 'brace'
 
-  componentWillReceiveProps(nextProps) {
-    const oldProps = this.props;
+  componentDidUpdate(prevProps) {
+    const oldProps = prevProps;
+    const nextProps = this.props;
 
@@ -197,11 +198,8 @@ for (let i = 0; i < editorOptions.length; i++) {
 
-    if (nextProps.focus && !oldProps.focus) {
-      this.editor.focus();
-    }
-  }
-
-  componentDidUpdate(prevProps) {
     if(prevProps.height !== this.props.height || prevProps.width !== this.props.width){
       this.editor.resize();
     }
+    if (this.props.focus && !prevProps.focus) {
+      this.editor.focus();
+    }
   }
@@ -208,0 +206,0 @@

src/diff.js

@@ -16,4 +16,4 @@ import SplitEditor from './split.js';
 
-  componentWillReceiveProps(props) {
-    const {value} = props;
+  componentDidUpdate() {
+    const {value} = this.props;
 
@@ -20,0 +20,0 @@ if (value !== this.state.value) {

src/split.js

@@ -140,4 +140,5 @@ import ace from 'brace'
 
-  componentWillReceiveProps(nextProps) {
-    const oldProps = this.props;
+  componentDidUpdate(prevProps) {
+    const oldProps = prevProps;
+    const nextProps = this.props;
 
@@ -144,0 +145,0 @@ const split = this.editor.env.split

tests/src/ace.spec.js

@@ -252,3 +252,3 @@ import { expect } from 'chai';
       wrapper.unmount();
-      expect(wrapper.getElement()).to.equal(null);
+      expect(wrapper.get(0)).to.not.exist;
     });
@@ -500,5 +500,5 @@
 
-  describe('ComponentWillReceiveProps', () => {
+  describe('ComponentDidUpdate', () => {
 
-    it('should update the editorOptions on componentWillReceiveProps', () => {
+    it('should update the editorOptions on componentDidUpdate', () => {
       const options = {
@@ -513,3 +513,3 @@ printMargin: 80
 
-      // Now trigger the componentWillReceiveProps
+      // Now trigger the componentDidUpdate
       const newOptions = {
@@ -524,3 +524,3 @@ printMargin: 200,
 
-    it('should update the editorOptions on componentWillReceiveProps', () => {
+    it('should update the editorOptions on componentDidUpdate', () => {
 
@@ -539,3 +539,3 @@ const wrapper = mount(<AceEditor minLines={1} />, mountOptions);
 
-    it('should update the mode on componentWillReceiveProps', () => {
+    it('should update the mode on componentDidUpdate', () => {
 
@@ -555,3 +555,3 @@ const wrapper = mount(<AceEditor mode="javascript" />, mountOptions);
 
-    it('should update many props on componentWillReceiveProps', () => {
+    it('should update many props on componentDidUpdate', () => {
 
@@ -589,3 +589,3 @@ const wrapper = mount((
 
-    it('should update the className on componentWillReceiveProps', () => {
+    it('should update the className on componentDidUpdate', () => {
       const className = 'old-class';
@@ -598,3 +598,3 @@ const wrapper = mount(<AceEditor className={className}/>, mountOptions);
 
-      // Now trigger the componentWillReceiveProps
+      // Now trigger the componentDidUpdate
       const newClassName = 'new-class';
@@ -607,3 +607,3 @@ wrapper.setProps({className: newClassName});
 
-    it('should update the value on componentWillReceiveProps', () => {
+    it('should update the value on componentDidUpdate', () => {
       const startValue = 'start value';
@@ -616,3 +616,3 @@ const wrapper = mount(<AceEditor value={startValue}/>, mountOptions);
 
-      // Now trigger the componentWillReceiveProps
+      // Now trigger the componentDidUpdate
       const newValue = 'updated value';
@@ -624,3 +624,3 @@ wrapper.setProps({value: newValue});
 
-    it('should trigger the focus on componentWillReceiveProps', () => {
+    it('should trigger the focus on componentDidUpdate', () => {
       const onFocusCallback = sinon.spy();
@@ -632,3 +632,3 @@ const wrapper = mount(<AceEditor onFocus={onFocusCallback}/>, mountOptions);
 
-      // Now trigger the componentWillReceiveProps
+      // Now trigger the componentDidUpdate
       wrapper.setProps({focus: true});
@@ -635,0 +635,0 @@ expect(onFocusCallback.callCount).to.equal(1);

tests/src/split.spec.js

@@ -54,3 +54,3 @@ import { expect } from 'chai';
 
-    it('should update the orientation on componentWillReceiveProps', () => {
+    it('should update the orientation on componentDidUpdate', () => {
       let orientation = 'below';
@@ -63,3 +63,3 @@ const wrapper = mount(<SplitEditor orientation={orientation} splits={2}/>, mountOptions);
 
-      // Now trigger the componentWillReceiveProps
+      // Now trigger the componentDidUpdate
       orientation = 'beside';
@@ -71,3 +71,3 @@ wrapper.setProps({orientation});
 
-    it('should update the orientation on componentWillReceiveProps', () => {
+    it('should update the orientation on componentDidUpdate', () => {
       const wrapper = mount(<SplitEditor  splits={2}/>, mountOptions);
@@ -79,3 +79,3 @@
 
-      // Now trigger the componentWillReceiveProps
+      // Now trigger the componentDidUpdate
       wrapper.setProps({splits: 4});
@@ -151,3 +151,3 @@ editor = wrapper.instance().split;
       wrapper.unmount();
-      expect(wrapper.getElement()).to.equal(null);
+      expect(wrapper.get(0)).to.not.exist;
     });
@@ -222,3 +222,3 @@
       const onSelectionChangeCallback = sinon.spy();
-      const wrapper = mount(<SplitEditor onSelectionChange={onSelectionChangeCallback}/>, mountOptions);
+      const wrapper = mount(<SplitEditor onSelectionChange={onSelectionChangeCallback} value="some value"/>, mountOptions);
 
@@ -273,5 +273,5 @@ // Check is not previously called
   });
-  describe('ComponentWillReceiveProps', () => {
+  describe('ComponentDidUpdate', () => {
 
-    it('should update the editorOptions on componentWillReceiveProps', () => {
+    it('should update the editorOptions on componentDidUpdate', () => {
       const options = {
@@ -286,3 +286,3 @@ printMargin: 80
 
-      // Now trigger the componentWillReceiveProps
+      // Now trigger the componentDidUpdate
       const newOptions = {
@@ -296,3 +296,3 @@ printMargin: 200,
     });
-    it('should update the editorOptions on componentWillReceiveProps', () => {
+    it('should update the editorOptions on componentDidUpdate', () => {
 
@@ -311,3 +311,3 @@ const wrapper = mount(<SplitEditor minLines={1} />, mountOptions);
 
-    it('should update the mode on componentWillReceiveProps', () => {
+    it('should update the mode on componentDidUpdate', () => {
 
@@ -327,3 +327,3 @@ const wrapper = mount(<SplitEditor mode="javascript" />, mountOptions);
 
-    it('should update many props on componentWillReceiveProps', () => {
+    it('should update many props on componentDidUpdate', () => {
 
@@ -361,3 +361,3 @@ const wrapper = mount((
 
-    it('should update the className on componentWillReceiveProps', () => {
+    it('should update the className on componentDidUpdate', () => {
       const className = 'old-class';
@@ -370,3 +370,3 @@ const wrapper = mount(<SplitEditor className={className}/>, mountOptions);
 
-      // Now trigger the componentWillReceiveProps
+      // Now trigger the componentDidUpdate
       const newClassName = 'new-class';
@@ -379,3 +379,3 @@ wrapper.setProps({className: newClassName});
 
-    it('should update the value on componentWillReceiveProps', () => {
+    it('should update the value on componentDidUpdate', () => {
       const startValue = 'start value';
@@ -391,3 +391,3 @@ const anotherStartValue = 'another start value';
 
-      // Now trigger the componentWillReceiveProps
+      // Now trigger the componentDidUpdate
       const newValue = 'updated value';
@@ -492,3 +492,3 @@ const anotherNewValue = 'another updated value';
 
-    it('should trigger the focus on componentWillReceiveProps', () => {
+    it('should trigger the focus on componentDidUpdate', () => {
       const onFocusCallback = sinon.spy();
@@ -500,3 +500,3 @@ const wrapper = mount(<SplitEditor onFocus={onFocusCallback}/>, mountOptions);
 
-      // Now trigger the componentWillReceiveProps
+      // Now trigger the componentDidUpdate
       wrapper.setProps({focus: true});
@@ -503,0 +503,0 @@ expect(onFocusCallback.callCount).to.equal(1);

types.d.ts

@@ -94,2 +94,3 @@ // Type definitions for react-ace 4.1.3
     useElasticTabstops?: boolean
+    debounceChangePeriod?: number
 }
@@ -154,2 +155,3 @@
     onChange?: (value: string, event?: any) => void
+    onInput?: (value: string, event?: any) => void
     onSelection?: (selectedText: string, event?: any) => void
@@ -156,0 +158,0 @@ onCopy?: (value: string) => void

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1674960

decreased by-19.25%

Number of package files

38

decreased by-37.7%

Lines of code

8288

decreased by-10.72%

Dependency changes

• Updatedbrace@^0.11.1

• Updateddiff-match-patch@^1.0.4

• Updatedlodash.isequal@^4.5.0

• Updatedprop-types@^15.6.2