react-clock - npm Package Compare versions

Comparing version 2.4.0 to 3.0.0-beta

package.json

 {
   "name": "react-clock",
-  "version": "2.4.0",
+  "version": "3.0.0-beta",
   "description": "An analog clock for your React app.",
-  "main": "dist/entry.js",
-  "source": "src/entry.js",
-  "types": "./index.d.ts",
+  "main": "dist/umd/index.js",
+  "module": "dist/esm/index.js",
+  "source": "src/index.js",
+  "sideEffects": false,
   "scripts": {
-    "build": "yarn build-js && yarn copy-styles && yarn build-styles",
-    "build-js": "babel src -d dist --ignore **/__tests__,**/**/__tests__",
+    "build": "yarn build-js-all && yarn copy-styles && yarn build-styles",
+    "build-js-all": "yarn build-js-esm && yarn build-js-umd",
+    "build-js-esm": "cross-env BABEL_ENV=production-esm babel src -d dist/esm --ignore **/*.spec.js,**/*.spec.jsx",
+    "build-js-umd": "cross-env BABEL_ENV=production-umd babel src -d dist/umd --ignore **/*.spec.js,**/*.spec.jsx",
     "build-styles": "lessc ./dist/Clock.less ./dist/Clock.css",
@@ -26,4 +29,3 @@ "clean": "rimraf dist",
       "**/src/**.{js,jsx}",
-      "!**/src/entry.js",
-      "!**/src/entry.nostyle.js"
+      "!**/src/index.js"
     ]
@@ -50,2 +52,3 @@ },
   "dependencies": {
+    "@wojtekmaj/date-utils": "^1.0.0",
     "merge-class-names": "^1.1.1",
@@ -55,16 +58,18 @@ "prop-types": "^15.6.0"
   "devDependencies": {
-    "@babel/cli": "^7.5.0",
-    "@babel/core": "^7.5.0",
-    "@babel/plugin-proposal-class-properties": "^7.5.0",
-    "@babel/preset-env": "^7.5.0",
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.0",
     "babel-jest": "^24.0.0",
+    "cross-env": "^6.0.3",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.18.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.14.2",
+    "eslint": "^6.1.0",
+    "eslint-config-airbnb": "^18.0.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "jest": "^24.8.0",
@@ -75,3 +80,3 @@ "less": "^3.8.1",
     "react-test-renderer": "^16.7.0",
-    "rimraf": "^2.6.2"
+    "rimraf": "^3.0.0"
   },
@@ -85,3 +90,2 @@ "peerDependencies": {
     "README.md",
-    "index.d.ts",
     "dist/",
@@ -88,0 +92,0 @@ "src/"

README.md

@@ -59,4 +59,8 @@ ![downloads](https://img.shields.io/npm/dt/react-clock.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-clock/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-clock.svg
 
-If you don't want to use default React-Clock styling to build upon it, you can import React-Clock by using `import Clock from 'react-clock/dist/entry.nostyle';` instead.
+If you want to use default React-Clock styling to build upon it, you can import React-Clock's styles by using:
 
+```js
+import 'react-clock/dist/Clock.css';
+```
+
 ## User guide
@@ -63,0 +67,0 @@

src/Clock.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 import mergeClassNames from 'merge-class-names';
+import { getHours, getMinutes, getSeconds } from '@wojtekmaj/date-utils';
 
@@ -8,7 +9,2 @@ import Hand from './Hand';
 
-import {
-  getHours,
-  getMinutes,
-  getSeconds,
-} from './shared/dates';
 
@@ -25,21 +21,21 @@ import {
   className,
-  hourHandLength,
+  hourHandLength = 50,
   hourHandOppositeLength,
-  hourHandWidth,
-  hourMarksLength,
-  hourMarksWidth,
-  minuteHandLength,
+  hourHandWidth = 4,
+  hourMarksLength = 10,
+  hourMarksWidth = 3,
+  minuteHandLength = 70,
   minuteHandOppositeLength,
-  minuteHandWidth,
-  minuteMarksLength,
-  minuteMarksWidth,
-  renderHourMarks,
-  renderMinuteHand,
-  renderMinuteMarks,
+  minuteHandWidth = 2,
+  minuteMarksLength = 6,
+  minuteMarksWidth = 1,
+  renderHourMarks = true,
+  renderMinuteHand = true,
+  renderMinuteMarks = true,
   renderNumbers,
-  renderSecondHand,
-  secondHandLength,
+  renderSecondHand = true,
+  secondHandLength = 90,
   secondHandOppositeLength,
-  secondHandWidth,
-  size,
+  secondHandWidth = 1,
+  size = 150,
   value,
@@ -179,20 +175,2 @@ }) {
 
-Clock.defaultProps = {
-  hourHandLength: 50,
-  hourHandWidth: 4,
-  hourMarksLength: 10,
-  hourMarksWidth: 3,
-  minuteHandLength: 70,
-  minuteHandWidth: 2,
-  minuteMarksLength: 6,
-  minuteMarksWidth: 1,
-  renderHourMarks: true,
-  renderMinuteHand: true,
-  renderMinuteMarks: true,
-  renderSecondHand: true,
-  secondHandLength: 90,
-  secondHandWidth: 1,
-  size: 150,
-};
-
 Clock.propTypes = {
@@ -199,0 +177,0 @@ className: PropTypes.oneOfType([

src/Hand.jsx

@@ -7,7 +7,7 @@ import React from 'react';
 export default function Hand({
-  angle,
+  angle = 0,
   name,
-  length,
-  oppositeLength,
-  width,
+  length = 100,
+  oppositeLength = 10,
+  width = 1,
 }) {
@@ -33,9 +33,2 @@ return (
 
-Hand.defaultProps = {
-  angle: 0,
-  length: 100,
-  oppositeLength: 10,
-  width: 1,
-};
-
 Hand.propTypes = {
@@ -42,0 +35,0 @@ angle: PropTypes.number,

src/Mark.jsx

@@ -7,6 +7,6 @@ import React from 'react';
 export default function Mark({
-  angle,
-  length,
+  angle = 0,
+  length = 10,
   name,
-  width,
+  width = 1,
   number,
@@ -44,8 +44,2 @@ }) {
 
-Mark.defaultProps = {
-  angle: 0,
-  length: 10,
-  width: 1,
-};
-
 Mark.propTypes = {
@@ -52,0 +46,0 @@ angle: PropTypes.number,

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54385

9.66%

Lines of code

1274

0.39%

Number of lines in readme file

115

3.6%

Worsened metrics

Dependency count

5

25%

Dev dependency count

22

10%

Number of low quality alerts

2

100%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @wojtekmaj/date-utils@^1.0.0

• + Added

  @wojtekmaj/date-utils@1.5.1
  (transitive)