New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-async-hook
Advanced tools
react-async-hook - npm Package Compare versions
Comparing version 1.0.0 to 2.0.0-alpha.1
@@ -1,182 +0,8 @@ | ||
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| 'use strict' | ||
| var react = require('react'); | ||
| var _extends = Object.assign || function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| var slicedToArray = function () { | ||
| function sliceIterator(arr, i) { | ||
| var _arr = []; | ||
| var _n = true; | ||
| var _d = false; | ||
| var _e = undefined; | ||
| try { | ||
| for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { | ||
| _arr.push(_s.value); | ||
| if (i && _arr.length === i) break; | ||
| } | ||
| } catch (err) { | ||
| _d = true; | ||
| _e = err; | ||
| } finally { | ||
| try { | ||
| if (!_n && _i["return"]) _i["return"](); | ||
| } finally { | ||
| if (_d) throw _e; | ||
| } | ||
| } | ||
| return _arr; | ||
| } | ||
| return function (arr, i) { | ||
| if (Array.isArray(arr)) { | ||
| return arr; | ||
| } else if (Symbol.iterator in Object(arr)) { | ||
| return sliceIterator(arr, i); | ||
| } else { | ||
| throw new TypeError("Invalid attempt to destructure non-iterable instance"); | ||
| } | ||
| }; | ||
| }(); | ||
| var InitialAsyncState = { | ||
| loading: true, | ||
| result: undefined, | ||
| error: undefined | ||
| }; | ||
| var defaultSetLoading = function defaultSetLoading(asyncState) { | ||
| return InitialAsyncState; | ||
| }; | ||
| var defaultSetResult = function defaultSetResult(result, asyncState) { | ||
| return { | ||
| loading: false, | ||
| result: result, | ||
| error: undefined | ||
| }; | ||
| }; | ||
| var defaultSetError = function defaultSetError(error, asyncState) { | ||
| return { | ||
| loading: false, | ||
| result: undefined, | ||
| error: error | ||
| }; | ||
| }; | ||
| var DefaultOptions = { | ||
| setLoading: defaultSetLoading, | ||
| setResult: defaultSetResult, | ||
| setError: defaultSetError | ||
| }; | ||
| var normalizeOptions = function normalizeOptions(options) { | ||
| return _extends({}, DefaultOptions, options); | ||
| }; | ||
| var useAsyncState = function useAsyncState(options) { | ||
| var _useState = react.useState(InitialAsyncState), | ||
| _useState2 = slicedToArray(_useState, 2), | ||
| value = _useState2[0], | ||
| setValue = _useState2[1]; | ||
| return { | ||
| value: value, | ||
| setLoading: function setLoading() { | ||
| return setValue(options.setLoading(value)); | ||
| }, | ||
| setResult: function setResult(result) { | ||
| return setValue(options.setResult(result, value)); | ||
| }, | ||
| setError: function setError(error) { | ||
| return setValue(options.setError(error, value)); | ||
| } | ||
| }; | ||
| }; | ||
| var useIsMounted = function useIsMounted() { | ||
| var mounted = true; | ||
| react.useEffect(function () { | ||
| return function () { | ||
| return mounted = false; | ||
| }; | ||
| }, []); | ||
| return mounted; | ||
| }; | ||
| var useCurrentPromise = function useCurrentPromise() { | ||
| var ref = react.useRef(null); | ||
| return { | ||
| set: function set$$1(promise) { | ||
| return ref.current = promise; | ||
| }, | ||
| is: function is(promise) { | ||
| return ref.current === promise; | ||
| } | ||
| }; | ||
| }; | ||
| var useAsync = function useAsync(asyncFunction) { | ||
| var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; | ||
| var options = arguments[2]; | ||
| options = normalizeOptions(options); | ||
| var AsyncState = useAsyncState(options); | ||
| var isMounted = useIsMounted(); | ||
| var CurrentPromise = useCurrentPromise(); | ||
| // We only want to handle the promise result/error | ||
| // if it is the last operation and the comp is still mounted | ||
| var shouldHandlePromise = function shouldHandlePromise(p) { | ||
| return isMounted && CurrentPromise.is(p); | ||
| }; | ||
| var executeAsyncOperation = function executeAsyncOperation() { | ||
| var promise = asyncFunction(params); | ||
| CurrentPromise.set(promise); | ||
| AsyncState.setLoading(); | ||
| promise.then(function (result) { | ||
| if (shouldHandlePromise(promise)) { | ||
| AsyncState.setResult(result); | ||
| } | ||
| }, function (error) { | ||
| if (shouldHandlePromise(promise)) { | ||
| AsyncState.setError(error); | ||
| } | ||
| }); | ||
| }; | ||
| react.useEffect(function () { | ||
| executeAsyncOperation(); | ||
| }, params); | ||
| var result = _extends({}, AsyncState.value, { | ||
| execute: function execute() { | ||
| return executeAsyncOperation(); | ||
| } | ||
| }); | ||
| return result; | ||
| }; | ||
| exports.useAsync = useAsync; | ||
| //# sourceMappingURL=index.js.map | ||
| if (process.env.NODE_ENV === 'production') { | ||
| module.exports = require('./react-async-hook.cjs.production.js') | ||
| } else { | ||
| module.exports = require('./react-async-hook.cjs.development.js') | ||
| } |
| { | ||
| "name": "react-async-hook", | ||
| "version": "1.0.0", | ||
| "description": "", | ||
| "version": "2.0.0-alpha.1", | ||
| "description": "Async hook", | ||
| "author": "Sébastien Lorber", | ||
| "license": "MIT", | ||
| "repository": "http://github.com/slorber/react-async-hook", | ||
| "main": "dist/index.js", | ||
| "module": "dist/index.es.js", | ||
| "jsnext:main": "dist/index.es.js", | ||
| "engines": { | ||
@@ -15,45 +12,41 @@ "node": ">=8", | ||
| }, | ||
| "main": "dist/index.js", | ||
| "umd:main": "dist/react-async-hook.umd.production.js", | ||
| "module": "dist/react-async-hook.es.production.js", | ||
| "typings": "dist/index.d.ts", | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "scripts": { | ||
| "test": "cross-env CI=1 react-scripts test --env=jsdom", | ||
| "test:watch": "react-scripts test --env=jsdom", | ||
| "build": "rollup -c", | ||
| "start": "rollup -c -w", | ||
| "prepare": "yarn run build", | ||
| "predeploy": "cd example && yarn install && yarn run build", | ||
| "deploy": "gh-pages -d example/build" | ||
| "start": "tsdx watch", | ||
| "build": "tsdx build", | ||
| "test": "tsdx test --env=jsdom" | ||
| }, | ||
| "peerDependencies": { | ||
| "prop-types": "^15.5.4", | ||
| "react": "^16.7.0-alpha.0", | ||
| "react-dom": "^16.7.0-alpha.0" | ||
| "react": ">=16.8" | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "pretty-quick --staged" | ||
| } | ||
| }, | ||
| "prettier": { | ||
| "printWidth": 80, | ||
| "semi": true, | ||
| "singleQuote": true, | ||
| "trailingComma": "es5" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-core": "^6.26.3", | ||
| "babel-eslint": "^8.2.5", | ||
| "babel-plugin-external-helpers": "^6.22.0", | ||
| "babel-preset-env": "^1.7.0", | ||
| "babel-preset-react": "^6.24.1", | ||
| "babel-preset-stage-0": "^6.24.1", | ||
| "cross-env": "^5.1.4", | ||
| "eslint": "^5.0.1", | ||
| "eslint-config-standard": "^11.0.0", | ||
| "eslint-config-standard-react": "^6.0.0", | ||
| "eslint-plugin-import": "^2.13.0", | ||
| "eslint-plugin-node": "^7.0.1", | ||
| "eslint-plugin-promise": "^4.0.0", | ||
| "eslint-plugin-react": "^7.10.0", | ||
| "eslint-plugin-standard": "^3.1.0", | ||
| "gh-pages": "^1.2.0", | ||
| "react-scripts": "^1.1.4", | ||
| "rollup": "^0.64.1", | ||
| "rollup-plugin-babel": "^3.0.7", | ||
| "rollup-plugin-commonjs": "^9.1.3", | ||
| "rollup-plugin-node-resolve": "^3.3.0", | ||
| "rollup-plugin-peer-deps-external": "^2.2.0", | ||
| "rollup-plugin-postcss": "^1.6.2", | ||
| "rollup-plugin-url": "^1.4.0" | ||
| }, | ||
| "files": [ | ||
| "dist" | ||
| ] | ||
| "@types/jest": "^24.0.12", | ||
| "@types/react": "^16.8.16", | ||
| "@types/react-dom": "^16.8.4", | ||
| "husky": "^2.2.0", | ||
| "prettier": "^1.17.0", | ||
| "pretty-quick": "^1.10.0", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6", | ||
| "tsdx": "^0.5.7", | ||
| "tslib": "^1.9.3", | ||
| "typescript": "^3.4.5" | ||
| } | ||
| } |
@@ -27,2 +27,15 @@ # react-async-hook | ||
| ``` | ||
| const fetchStarwarsHero = id => fetch(`https://swapi.co/api/people/${id}/`).then(result => { | ||
| if ( result.status !== 200 ) { | ||
| throw new Error("bad status = " + result.status); | ||
| } | ||
| return result.json(); | ||
| }); | ||
| ``` | ||
| # Warning | ||
| I'm not sure yet if this library makes any sense. Suspense is probably a better approach that solves the same usecases. | ||
| # Why | ||
@@ -45,9 +58,4 @@ | ||
| # TODO | ||
| - document API | ||
| - make it compatible with suspense | ||
| # License | ||
| MIT |
New alerts
Major refactor
Supply chain riskPackage 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
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Minified code
QualityThis 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
No v1
QualityPackage 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
- increased by100.91%
41607
- Dependency count
- decreased by-66.67%
1
- Dev dependency count
- decreased by-54.17%
11
- Number of package files
- increased by133.33%
14
- Number of lines in readme file
- increased by15.38%
60
Worsened metrics
- Lines of code
- decreased by-29.93%
213
- Number of low quality alerts
- increased by300%
4
- Number of low supply chain risk alerts
- increased by100%
2
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes