react-codemirror2 - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+4.2.0
+==================
+* add notion of UnControlled#detach => [`editorDidAttach`, `editorDidDetach`] (related to #37)
+
 4.1.0
@@ -2,0 +6,0 @@ ==================

index.d.ts

@@ -68,2 +68,5 @@ /// <reference types="codemirror" />
 export interface IUnControlledCodeMirror extends ICodeMirror {
+    detach?: boolean;
+    editorDidAttach?: (editor: IInstance) => void;
+    editorDidDetach?: (editor: IInstance) => void;
     onBeforeChange?: (editor: IInstance, data: codemirror.EditorChange, value: string, next: () => void) => void;
@@ -70,0 +73,0 @@ value?: string;

index.js

@@ -412,2 +412,3 @@ 'use strict';
         _this.continueChange = false;
+        _this.detached = false;
         _this.hydrated = false;
@@ -456,2 +457,3 @@ _this.initCb = function () {
             return;
+        this.detached = (this.props.detach === true);
         if (this.props.defineMode) {
@@ -522,3 +524,15 @@ if (this.props.defineMode.name && this.props.defineMode.fn) {
     UnControlled.prototype.componentWillReceiveProps = function (nextProps) {
-        if (SERVER_RENDERED)
+        if (this.detached && (nextProps.detach === false)) {
+            this.detached = false;
+            if (this.props.editorDidAttach) {
+                this.props.editorDidAttach(this.editor);
+            }
+        }
+        if (!this.detached && (nextProps.detach === true)) {
+            this.detached = true;
+            if (this.props.editorDidDetach) {
+                this.props.editorDidDetach(this.editor);
+            }
+        }
+        if (SERVER_RENDERED || this.detached)
             return;
@@ -552,3 +566,8 @@ var preserved = { cursor: null };
     UnControlled.prototype.shouldComponentUpdate = function (nextProps, nextState) {
-        return !SERVER_RENDERED;
+        var update = true;
+        if (SERVER_RENDERED)
+            update = false;
+        if (this.detached)
+            update = false;
+        return update;
     };
@@ -555,0 +574,0 @@ UnControlled.prototype.render = function () {

package.json

 {
   "name": "react-codemirror2",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "a tiny react codemirror component wrapper",
@@ -11,3 +11,3 @@ "main": "index.js",
     "prewebpack": "npm run transpile",
-    "webpack": "webpack-cli --mode development --display-error-details --optimize-minimize --config docs/webpack.config.js",
+    "webpack": "webpack-cli --mode production --display-error-details --optimize-minimize --config docs/webpack.config.js",
     "transpile": "tsc",
@@ -20,3 +20,2 @@ "posttranspile": "gulp ts-scrub",
     "collectCoverage": true,
-    "mapCoverage": true,
     "collectCoverageFrom": [
@@ -65,6 +64,6 @@ "src/**"
     "@types/codemirror": "0.0.55",
-    "@types/jest": "21.1.5",
+    "@types/jest": "22.2.0",
     "@types/react": "16.0.40",
     "babel-core": "6.26.0",
-    "babel-loader": "7.1.3",
+    "babel-loader": "7.1.4",
     "babel-preset-es2015": "6.24.1",
@@ -77,10 +76,10 @@ "babel-preset-react": "6.24.1",
     "enzyme-adapter-react-16": "1.1.1",
-    "express": "4.16.2",
+    "express": "4.16.3",
     "gulp": "3.9.1",
     "gulp-replace": "0.6.1",
-    "jest": "21.2.1",
+    "jest": "22.4.2",
     "js-beautify": "1.7.5",
     "node-sass": "4.7.2",
     "open": "0.0.5",
-    "prismjs": "1.11.0",
+    "prismjs": "1.12.2",
     "raf": "3.4.0",
@@ -94,10 +93,10 @@ "react": "16.2.0",
     "sass-loader": "6.0.7",
-    "sinon": "4.4.2",
-    "style-loader": "0.20.2",
-    "ts-jest": "21.1.4",
+    "sinon": "4.4.5",
+    "style-loader": "0.20.3",
+    "ts-jest": "22.4.1",
     "typescript": "2.7.2",
     "typescript-formatter": "7.1.0",
-    "webpack": "4.1.0",
-    "webpack-cli": "2.0.10"
+    "webpack": "4.1.1",
+    "webpack-cli": "2.0.12"
   }
 }

README.md

@@ -72,14 +72,12 @@ [![Build Status](https://img.shields.io/travis/scniro/react-codemirror2.svg?style=flat-square)](https://travis-ci.org/scniro/react-codemirror2)
 
-- `autoCursor`
-> `boolean` if `false`, allow the defaulted internal codemirror cursor position to reset should a new `value` prop be set. Default: `true`
-- `autoFocus`
-> `boolean` if `true`, set focus to the instance `onSet`. Will be invoked within the `componentDidMount` lifecycle stage. Default: `false`
-- `autoScroll`
-> `boolean` if `true`, scroll the cursor position into view automatically. Default: `false`
-- `className` - sets `class="react-codemirror2 yourClassName"`
-- `defineMode`
-> pass a custom mode object `{name: 'custom', fn: myModeFn}`
-- `options` - see codemirror [configuration](https://codemirror.net/doc/manual.html#config)
-- `value` - set component value through props
-> must be managed for controlled components
+| prop         | type *`default`*  | components                        | description                                                                                                           |
+|--------------|-------------------|-----------------------------------|-----------------------------------------------------------------------------------------------------------------------|
+| `autoCursor` | boolean *`true`*  | `Controlled` `UnControlled`       | should component cursor position correct when `value` changed                                                         |
+| `autoFocus`  | boolean *`false`* | `Controlled` `UnControlled`       | should component focus on mount                                                                                       |
+| `autoScroll` | boolean *`true`*  | `Controlled` `UnControlled`       | should component scroll cursor position into view when `value` changed                                                |
+| `className`  | string            | `Controlled` `UnControlled`       | pass through class *`class="react-codemirror2 className"`*                                                            |
+| `defineMode` | object            | `Controlled` `UnControlled`       | pass a [custom mode](http://marijnhaverbeke.nl/blog/codemirror-mode-system.html) via `{name: 'custom', fn: myModeFn}` |
+| `detach`     | boolean           | `UnControlled`                    | should component ignore new props                                                                                     |
+| `options`    | object            | `Controlled` `UnControlled`       | [codemirror configuration](https://codemirror.net/doc/manual.html#config)                                             |
+| `value`      | string            | _**`Controlled`**_ `UnControlled` | component value _**must be managed for controlled components**_                                                       |
 
@@ -127,12 +125,11 @@ ## props cont. (wrapped codemirror [programming api](https://codemirror.net/doc/manual.html#api))
 
-- `editorDidConfigure(editor)`
-- `editorDidMount(editor, next)`
-> invoking optional `next()` will trigger `editorDidConfigure`
-- `editorWillMount()`
-- `editorWillUnmount(editor)`
-- `onBeforeChange(editor, data, value)` **[controlled]**
-> required - hook to manage state and update `value`
-- `onBeforeChange(editor, data, value, next)` **[uncontrolled]**
-> optional - if defined, `next()` must be invoked to trigger `onChange`.
-- `onChange(editor, data, value)`
+| event                | returns                         | components                        | description                                                                                                 |
+|----------------------|---------------------------------|-----------------------------------|-------------------------------------------------------------------------------------------------------------|
+| `editorDidAttach`    | editor                          | `UnControlled`                    | component is now **responding** to new props                                                                |
+| `editorDidConfigure` | editor                          | `Controlled` `UnControlled`       | component configuration has been set                                                                        |
+| `editorDidDetach`    | editor                          | `UnControlled`                    | component is now **ignoring** new props                                                                     |
+| `editorDidMount`     | editor, _**next**_              | `Controlled` `UnControlled`       | **invoking optional `next` will trigger `editorDidConfigure`**                                              |
+| `editorWillUnmount`  | editor                          | `Controlled` `UnControlled`       | invoked before [`componentWillUnmount`](https://reactjs.org/docs/react-component.html#componentwillunmount) |
+| `onBeforeChange`     | editor, data, value, _**next**_ | `Controlled` _**`UnControlled`**_ | if used, `next` is returned via `UnControlled` and *must* be invoked to trigger onChange                    |
+| `onChange`           | editor, data, value             | `Controlled` `UnControlled`       | the component value has been changed                                                                        |
 
@@ -139,0 +136,0 @@ ## events cont. [wrapped codemirror events](https://codemirror.net/doc/manual.html#events)

No alert changes

Improved metrics

Total package byte prevSize

42704

increased by9.19%

Number of package files

7

increased by16.67%

Lines of code

656

increased by3.47%

Worsened metrics

Number of lines in readme file

174

decreased by-1.69%

No dependency changes