@accessible/visually-hidden - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

dist/main/index.js

@@ -1,58 +0,19 @@
-'use strict'
+"use strict";
 
-exports.__esModule = true
-exports.default = exports.visuallyHidden = void 0
+exports.__esModule = true;
+exports.visuallyHidden = exports.VisuallyHidden = void 0;
 
-var React = /*#__PURE__*/ _interopRequireWildcard(
-  /*#__PURE__*/ require('react')
-)
+var React = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 
-function _getRequireWildcardCache() {
-  if (typeof WeakMap !== 'function') return null
-  var cache = new WeakMap()
-  _getRequireWildcardCache = function () {
-    return cache
-  }
-  return cache
-}
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) {
-  if (obj && obj.__esModule) {
-    return obj
-  }
-  if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
-    return {default: obj}
-  }
-  var cache = _getRequireWildcardCache()
-  if (cache && cache.has(obj)) {
-    return cache.get(obj)
-  }
-  var newObj = {}
-  var hasPropertyDescriptor =
-    Object.defineProperty && Object.getOwnPropertyDescriptor
-  for (var key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      var desc = hasPropertyDescriptor
-        ? Object.getOwnPropertyDescriptor(obj, key)
-        : null
-      if (desc && (desc.get || desc.set)) {
-        Object.defineProperty(newObj, key, desc)
-      } else {
-        newObj[key] = obj[key]
-      }
-    }
-  }
-  newObj.default = obj
-  if (cache) {
-    cache.set(obj, newObj)
-  }
-  return newObj
-}
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const VisuallyHidden = ({children}) =>
-  /*#__PURE__*/ React.cloneElement(children, {
-    ...children.props,
-    style: {...visuallyHidden, ...children.props.style},
-  })
+const VisuallyHidden = ({
+  children
+}) => /*#__PURE__*/React.cloneElement(children, Object.assign({}, children.props, {
+  style: Object.assign({}, visuallyHidden, children.props.style)
+}));
 
+exports.VisuallyHidden = VisuallyHidden;
 const visuallyHidden = {
@@ -66,11 +27,8 @@ border: 0,
   overflow: 'hidden',
-  position: 'absolute',
-}
-exports.visuallyHidden = visuallyHidden
+  position: 'absolute'
+};
+exports.visuallyHidden = visuallyHidden;
 
 if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
-  VisuallyHidden.displayName = 'VisuallyHidden'
-}
-
-var _default = VisuallyHidden
-exports.default = _default
+  VisuallyHidden.displayName = 'VisuallyHidden';
+}

dist/module/index.js

@@ -1,9 +0,7 @@
-import * as React from 'react'
-
-const VisuallyHidden = ({children}) =>
-  /*#__PURE__*/ React.cloneElement(children, {
-    ...children.props,
-    style: {...visuallyHidden, ...children.props.style},
-  })
-
+import * as React from 'react';
+export const VisuallyHidden = ({
+  children
+}) => /*#__PURE__*/React.cloneElement(children, Object.assign({}, children.props, {
+  style: Object.assign({}, visuallyHidden, children.props.style)
+}));
 export const visuallyHidden = {
@@ -17,9 +15,7 @@ border: 0,
   overflow: 'hidden',
-  position: 'absolute',
-}
+  position: 'absolute'
+};
 
 if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
-  VisuallyHidden.displayName = 'VisuallyHidden'
-}
-
-export default VisuallyHidden
+  VisuallyHidden.displayName = 'VisuallyHidden';
+}

package.json

 {
   "name": "@accessible/visually-hidden",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "homepage": "https://github.com/accessible-ui/visually-hidden#readme",
@@ -22,9 +22,5 @@ "repository": "github:accessible-ui/visually-hidden",
   "module": "dist/module/index.js",
+  "unpkg": "dist/umd/visually-hidden.js",
   "source": "src/index.tsx",
   "types": "types/index.d.ts",
-  "files": [
-    "/dist",
-    "/src",
-    "/types"
-  ],
   "exports": {
@@ -35,2 +31,3 @@ ".": {
       "require": "./dist/main/index.js",
+      "umd": "./dist/umd/visually-hidden.js",
       "source": "./src/index.tsx",
@@ -43,20 +40,24 @@ "types": "./types/index.d.ts",
   },
+  "files": [
+    "/dist",
+    "/src",
+    "/types"
+  ],
   "sideEffects": false,
   "scripts": {
-    "build": "npm run build-esm && npm run build-main && npm run build-module && npm run build-types",
-    "build-esm": "npm run compile -- -d dist/esm --env-name esm --out-file-extension .mjs",
-    "build-main": "npm run compile -- -d dist/main --env-name main",
-    "build-module": "npm run compile -- -d dist/module --env-name module",
-    "build-types": "tsc -p tsconfig.json -d --outDir types --emitDeclarationOnly",
-    "check-types": "tsc --noEmit -p tsconfig.json",
-    "compile": "babel src -x .ts,.tsx --ignore \"**/*.test.ts\",\"**/*.test.tsx\" --delete-dir-on-start",
-    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,md,yml,json,eslintrc,prettierrc}\"",
+    "build": "lundle build",
+    "check-types": "lundle check-types",
+    "dev": "lundle build -f module,cjs -w",
+    "format": "prettier --write \"{,!(node_modules|dist|coverage)/**/}*.{ts,tsx,js,jsx,md,yml,json}\"",
     "lint": "eslint . --ext .ts,.tsx",
-    "prepublishOnly": "npm run lint && npm run test && npm run build && npm run format",
+    "prepublishOnly": "cli-confirm \"Did you run 'yarn release' first? (y/N)\"",
+    "prerelease": "npm run validate && npm run build",
+    "release": "git add . && standard-version -a",
     "test": "jest",
-    "validate": "npm run check-types && npm run lint && npm run test -- --coverage"
+    "validate": "lundle check-types && npm run lint && jest --coverage"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run build-types && git add types && lint-staged"
+      "pre-commit": "lundle check-types && lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
@@ -69,9 +70,58 @@ },
     ],
-    "**/*.{md,yml,json,eslintrc,prettierrc}": [
+    "**/*.{md,yml,json}": [
       "prettier --write"
     ]
   },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "eslintConfig": {
+    "extends": [
+      "lunde"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules",
+    "coverage",
+    "dist",
+    "/types",
+    "test",
+    "*.config.js"
+  ],
+  "jest": {
+    "moduleDirectories": [
+      "node_modules",
+      "src",
+      "test"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/?(*.)test.{ts,tsx}"
+    ],
+    "collectCoverageFrom": [
+      "**/src/**/*.{ts,tsx}"
+    ],
+    "setupFilesAfterEnv": [
+      "./test/setup.js"
+    ],
+    "snapshotResolver": "./test/resolve-snapshot.js",
+    "globals": {
+      "__DEV__": true
+    }
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "bracketSpacing": false
+  },
   "devDependencies": {
-    "@babel/preset-react": "latest",
-    "@lunde/babel-preset-es": "latest",
+    "@commitlint/cli": "latest",
+    "@commitlint/config-conventional": "latest",
     "@testing-library/jest-dom": "latest",
@@ -84,14 +134,11 @@ "@testing-library/react": "latest",
     "@types/react-dom": "latest",
-    "@typescript-eslint/eslint-plugin": "latest",
-    "@typescript-eslint/parser": "latest",
-    "babel-plugin-annotate-pure-calls": "latest",
-    "babel-plugin-optimize-react": "latest",
+    "babel-jest": "latest",
+    "cli-confirm": "latest",
+    "cz-conventional-changelog": "latest",
     "eslint": "latest",
-    "eslint-import-resolver-jest": "latest",
-    "eslint-plugin-jest": "latest",
-    "eslint-plugin-react": "latest",
-    "eslint-plugin-react-hooks": "latest",
+    "eslint-config-lunde": "latest",
     "husky": "latest",
     "jest": "latest",
     "lint-staged": "latest",
+    "lundle": "latest",
     "prettier": "latest",
@@ -101,3 +148,3 @@ "react": "latest",
     "react-test-renderer": "latest",
-    "ts-jest": "latest",
+    "standard-version": "latest",
     "typescript": "latest"
@@ -107,5 +154,4 @@ },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=16.8"
   }
 }

README.md

@@ -40,7 +40,9 @@ <hr>
 ```jsx harmony
-import VisuallyHidden from '@accessible/visually-hidden'
+// VisuallyHidden is the component
+// visuallyHidden is a style object
+import {VisuallyHidden, visuallyHidden} from '@accessible/visually-hidden'
 
 export default (props) => (
   <VisuallyHidden>
-    <input type="checkbox" {...props} />
+    <input type='checkbox' {...props} />
   </VisuallyHidden>
@@ -47,0 +49,0 @@ )

types/index.d.ts

@@ -1,16 +0,18 @@
-import * as React from 'react'
-declare const VisuallyHidden: React.FC<VisuallyHiddenProps>
+import * as React from 'react';
+export declare const VisuallyHidden: {
+    ({ children }: VisuallyHiddenProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    displayName: string;
+};
 export declare const visuallyHidden: {
-  border: number
-  clip: string
-  height: number
-  width: number
-  margin: number
-  padding: number
-  overflow: string
-  position: string
-}
+    border: number;
+    clip: string;
+    height: number;
+    width: number;
+    margin: number;
+    padding: number;
+    overflow: string;
+    position: string;
+};
 export interface VisuallyHiddenProps {
-  children: React.ReactElement | JSX.Element
+    children: React.ReactElement | JSX.Element;
 }
-export default VisuallyHidden

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed 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

Improved metrics

Total package byte prevSize

21447

increased by86.79%

Dependency count

1

decreased by-50%

Dev dependency count

24

decreased by-11.11%

Number of package files

18

increased by80%

Lines of code

182

increased by9.64%

Number of lines in readme file

55

increased by3.77%

Number of low supply chain risk alerts

3

decreased by-25%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes