react-sane-contenteditable - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

example/index.js

@@ -6,10 +6,6 @@ import ReactDOM from 'react-dom';
 class App extends Component {
-  constructor(props) {
-    super(props);
+  state = {
+    title: 'Title here',
+  };
 
-    this.state = {
-      title: 'Title here',
-    };
-  }
-
   handleChange = (ev, value) => {
@@ -37,3 +33,2 @@ this.setState({ title: value });
           caretPosition="end"
-          onKeyDown={this.handleKeyDown}
         />
@@ -40,0 +35,0 @@

jest.config.js

@@ -121,3 +121,3 @@ // For a detailed explanation regarding each configuration property, visit:
   // The path to a module that runs some code to configure or set up the testing framework before each test
-  setupTestFrameworkScriptFile: "<rootDir>/test-setup.js",
+  setupTestFrameworkScriptFile: "<rootDir>/jest.setup.js",
 
@@ -124,0 +124,0 @@ // A list of paths to snapshot serializer modules Jest should use for snapshot testing

package.json

 {
   "name": "react-sane-contenteditable",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "React component with sane defaults to make any element contentEditable",
-  "main": "lib/index.js",
+  "main": "lib/cjs/react-sane-contenteditable.js",
+  "module": "lib/esm/react-sane-contenteditable.js",
   "repository": {
@@ -18,5 +19,3 @@ "type": "git",
   "dependencies": {
-    "lodash": "^4.17.10",
-    "prop-types": "^15.6.0",
-    "react": "^16.0.0"
+    "@babel/runtime": "^7.1.2"
   },
@@ -26,4 +25,4 @@ "devDependencies": {
     "@babel/core": "^7.0.0-rc.1",
-    "@babel/plugin-external-helpers": "^7.0.0-rc.1",
     "@babel/plugin-proposal-class-properties": "^7.0.0-rc.1",
+    "@babel/plugin-transform-runtime": "^7.1.0",
     "@babel/plugin-transform-spread": "^7.0.0-rc.1",
@@ -33,12 +32,19 @@ "@babel/preset-env": "^7.0.0-rc.1",
     "babel-core": "^7.0.0-0",
-    "babel-eslint": "^8.2.6",
     "babel-jest": "^23.4.2",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.15",
+    "cross-env": "^5.2.0",
     "enzyme": "^3.4.0",
     "enzyme-adapter-react-16": "^1.2.0",
+    "husky": "1.0.0-rc.13",
     "jest": "^23.4.2",
     "jsdom": "^11.12.0",
     "prettier": "1.14.2",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.2",
     "react-dom": "^16.3.2",
-    "rollup": "^0.58.2",
+    "rimraf": "^2.6.2",
+    "rollup": "^0.66.6",
     "rollup-plugin-babel": "^4.0.0-beta.8",
+    "rollup-plugin-babel-minify": "^5.0.0",
     "rollup-plugin-commonjs": "^9.1.3",
@@ -49,12 +55,29 @@ "rollup-plugin-jsx": "^1.0.3",
     "rollup-plugin-serve": "^0.4.2",
+    "rollup-plugin-size-snapshot": "^0.7.0",
+    "rollup-plugin-uglify": "^6.0.0",
     "styled-components": "^3.4.2"
   },
+  "peerDependencies": {
+    "prop-types": "^15.6.2",
+    "react": "^16.4.2"
+  },
   "scripts": {
-    "build": "./node_modules/.bin/babel src/react-sane-contenteditable.js --out-file lib/index.js",
+    "build": "yarn run build:clean && yarn run build:esm && yarn run build:cjs && yarn run build:umd",
+    "build:clean": "rimraf dist/ && rimraf lib/",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir lib/cjs",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --out-dir lib/esm",
+    "build:umd": "rollup -c && rimraf dist/index.esm.js",
     "prepublish": "yarn build",
-    "demo": "./node_modules/rollup/bin/rollup --config example/rollup.config.js",
+    "demo": "rollup -c rollup.config.demo.js",
     "dev": "yarn run demo -w",
-    "test": "jest --watch",
+    "dev:test": "jest --watch --verbose false",
+    "test": "jest",
     "lint": "./node_modules/prettier/bin-prettier.js --write src/**/*"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn run lint && yarn run build && git add lib/* .size-snapshot.json",
+      "pre-push": "yarn test"
+    }
+  },
   "bugs": {
@@ -61,0 +84,0 @@ "url": "https://github.com/ashleyw/react-sane-contenteditable/issues"

src/__tests__/react-sane-contenteditable.test.js

@@ -91,2 +91,7 @@ import React from 'react';
 
+  it('attributes and customProps are passed down', () => {
+    const wrapper = shallow(<ContentEditable foo="bar" />);
+    expect(wrapper.prop('foo')).toEqual('bar');
+  });
+
   it('props.styled={true} sets innerRef handler', () => {
@@ -133,5 +138,13 @@ const wrapper = mount(<ContentEditable styled tagName={Wrapper} />);
   it('shouldComponentUpdate returns false when props are the same', () => {
-    const wrapper = mount(<ContentEditable multiLine />);
-    const shouldUpdate = wrapper.instance().shouldComponentUpdate(wrapper.props());
-    expect(shouldUpdate).toBe(false);
+    const wrapper = mount(<ContentEditable multiLine foo={{}} innerRef={() => null} />);
+    const instance = wrapper.instance();
+    jest.spyOn(instance, 'shouldComponentUpdate');
+    wrapper.setProps({
+      multiLine: true,
+      foo: {},
+      innerRef: () => null,
+    });
+    wrapper.update();
+
+    expect(instance.shouldComponentUpdate).toHaveReturnedWith(false);
   });
@@ -141,4 +154,8 @@
     const wrapper = mount(<ContentEditable multiLine />);
-    const shouldUpdate = wrapper.instance().shouldComponentUpdate({ ...wrapper.props(), sanitise: false });
-    expect(shouldUpdate).toBe(true);
+    const instance = wrapper.instance();
+    jest.spyOn(instance, 'shouldComponentUpdate');
+    wrapper.setProps({ ...wrapper.props(), sanitise: false });
+    wrapper.update();
+
+    expect(instance.shouldComponentUpdate).toHaveReturnedWith(true);
   });
@@ -158,3 +175,5 @@
     const mockHandler = jest.fn();
-    const wrapper = mount(<ContentEditable content="foo" onChange={mockHandler} sanitise={false} />);
+    const wrapper = mount(
+      <ContentEditable content="foo" onChange={mockHandler} sanitise={false} />,
+    );
     const nextInput = 'foo&nbsp;bar';
@@ -279,3 +298,4 @@
 
-        wrapper.instance()._element.innerText = "foo <script>console.log('XSS vulnerability')</script>";
+        wrapper.instance()._element.innerText =
+          "foo <script>console.log('XSS vulnerability')</script>";
         focusThenBlur(wrapper);
@@ -282,0 +302,0 @@ expect(wrapper.state('value')).toEqual(content);

src/react-sane-contenteditable.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { omit, isEqual, pick, without } from 'lodash';
 
+const reduceTargetKeys = (target, keys, predicate) => Object.keys(target).reduce(predicate, {});
+
+const omit = (target = {}, keys = []) =>
+  reduceTargetKeys(target, keys, (acc, key) => keys.some(omitKey => omitKey === key) ? acc : { ...acc, [key]: target[key] });
+
+const pick = (target = {}, keys = []) =>
+  reduceTargetKeys(target, keys, (acc, key) => keys.some(pickKey => pickKey === key) ? { ...acc, [key]: target[key] } : acc);
+
+const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
 const propTypes = {
@@ -41,3 +50,3 @@ content: PropTypes.string,
   constructor(props) {
-    super(props);
+    super();
 
@@ -61,3 +70,3 @@ this.state = {
   shouldComponentUpdate(nextProps) {
-    const propKeys = without(Object.keys(nextProps), 'content');
+    const propKeys = Object.keys(nextProps).filter(key => key !== 'content');
     return !isEqual(pick(nextProps, propKeys), pick(this.props, propKeys));
@@ -81,3 +90,4 @@ }
     if (caretPosition && this._element) {
-      const offset = caretPosition === 'end' ? 1 : 0;
+      const { value } = this.state;
+      const offset = value.length && caretPosition === 'end' ? 1 : 0;
       const range = document.createRange();
@@ -84,0 +94,0 @@ const selection = window.getSelection();

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

280685

increased by524.27%

Number of package files

18

increased by28.57%

Lines of code

1351

increased by42.21%

Worsened metrics

Dev dependency count

33

increased by37.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/runtime@^7.1.2

• + Added@babel/runtime@7.24.4(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• - Removedlodash@^4.17.10

• - Removedprop-types@^15.6.0

• - Removedreact@^16.0.0

• - Removedlodash@4.17.21(transitive)