From ed96675e0af9d1b7e1d26da321dc5bcc192dbfed Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:09:05 +1100 Subject: [PATCH 01/32] Implement code style --- package.json | 53 ++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 45 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 5ec5534..ec19dfc 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,11 @@ "url": "git+https://github.com/envato/react-breakpoints.git" }, "keywords": [ + "resize-observer", + "media-queries", + "element-queries", + "container-queries", + "breakpoints", "react-hooks", "hooks", "react", @@ -28,18 +33,50 @@ }, "homepage": "https://github.com/envato/react-breakpoints#readme", "peerDependencies": { - "react": "^16.12.0", - "react-dom": "^16.12.0" + "react": ">=16.8.0", + "react-dom": ">=16.8.0" }, "devDependencies": { - "@babel/cli": "^7.8.4", - "@babel/core": "^7.8.6", - "@babel/preset-env": "^7.7.7", - "@babel/preset-react": "^7.8.3", - "react": "^16.12.0", - "react-dom": "^16.12.0" + "@typescript-eslint/eslint-plugin": "^2.34.0", + "@typescript-eslint/parser": "^2.34.0", + "babel-eslint": "^10.1.0", + "eslint": "^6.8.0", + "eslint-config-react-app": "^5.2.1", + "eslint-plugin-flowtype": "^4.7.0", + "eslint-plugin-import": "^2.22.1", + "eslint-plugin-jsx-a11y": "^6.4.1", + "eslint-plugin-react": "^7.22.0", + "eslint-plugin-react-hooks": "^2.5.1", + "husky": "^4.3.7", + "lint-staged": "^10.5.3", + "prettier": "^2.2.1", + "react": "^17.0.1", + "react-dom": "^17.0.1" }, "dependencies": { "@envato/react-resize-observer-hook": "^1.0.1" + }, + "eslintConfig": { + "extends": "react-app" + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, + "lint-staged": { + "**/*.{js,ts,tsx}": [ + "eslint --cache --fix", + "prettier --write" + ] + }, + "prettier": { + "arrowParens": "avoid", + "jsxSingleQuote": true, + "printWidth": 120, + "quoteProps": "preserve", + "semi": true, + "singleQuote": true, + "trailingComma": "none" } } From fd4471e1e27cec6b0e12435bb9f2d97ce6a7263b Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:16:34 +1100 Subject: [PATCH 02/32] Update dependencies --- .babelrc | 6 - .gitignore | 3 + .npmrc | 1 + LICENSE | 2 +- package-lock.json | 3717 --------------------------------------------- package.json | 16 +- 6 files changed, 14 insertions(+), 3731 deletions(-) delete mode 100644 .babelrc create mode 100644 .npmrc delete mode 100644 package-lock.json diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 4f06b0c..0000000 --- a/.babelrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "presets": [ - "@babel/preset-env", - "@babel/preset-react" - ] -} diff --git a/.gitignore b/.gitignore index 8cf68a3..81115fe 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,8 @@ /node_modules /.pnp .pnp.js +package-lock.json +yarn.lock # testing /coverage @@ -16,6 +18,7 @@ .env.development.local .env.test.local .env.production.local +.eslintcache npm-debug.log* yarn-debug.log* diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..43c97e7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/LICENSE b/LICENSE index 16687e1..7fb1757 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019-2020 Envato +Copyright (c) 2019-2021 Envato Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index c51d054..0000000 --- a/package-lock.json +++ /dev/null @@ -1,3717 +0,0 @@ -{ - "name": "@envato/react-breakpoints", - "version": "1.0.2", - "lockfileVersion": 1, - "requires": true, - "dependencies": { - "@babel/cli": { - "version": "7.8.4", - "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.8.4.tgz", - "integrity": "sha512-XXLgAm6LBbaNxaGhMAznXXaxtCWfuv6PIDJ9Alsy9JYTOh+j2jJz+L/162kkfU1j/pTSxK1xGmlwI4pdIMkoag==", - "dev": true, - "requires": { - "chokidar": "^2.1.8", - "commander": "^4.0.1", - "convert-source-map": "^1.1.0", - "fs-readdir-recursive": "^1.1.0", - "glob": "^7.0.0", - "lodash": "^4.17.13", - "make-dir": "^2.1.0", - "slash": "^2.0.0", - "source-map": "^0.5.0" - } - }, - "@babel/code-frame": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz", - "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==", - "dev": true, - "requires": { - "@babel/highlight": "^7.0.0" - } - }, - "@babel/core": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.6.tgz", - "integrity": "sha512-Sheg7yEJD51YHAvLEV/7Uvw95AeWqYPL3Vk3zGujJKIhJ+8oLw2ALaf3hbucILhKsgSoADOvtKRJuNVdcJkOrg==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.8.3", - "@babel/generator": "^7.8.6", - "@babel/helpers": "^7.8.4", - "@babel/parser": "^7.8.6", - "@babel/template": "^7.8.6", - "@babel/traverse": "^7.8.6", - "@babel/types": "^7.8.6", - "convert-source-map": "^1.7.0", - "debug": "^4.1.0", - "gensync": "^1.0.0-beta.1", - "json5": "^2.1.0", - "lodash": "^4.17.13", - "resolve": "^1.3.2", - "semver": "^5.4.1", - "source-map": "^0.5.0" - }, - "dependencies": { - "@babel/code-frame": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz", - "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==", - "dev": true, - "requires": { - "@babel/highlight": "^7.8.3" - } - }, - "@babel/generator": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.6.tgz", - "integrity": "sha512-4bpOR5ZBz+wWcMeVtcf7FbjcFzCp+817z2/gHNncIRcM9MmKzUhtWCYAq27RAfUrAFwb+OCG1s9WEaVxfi6cjg==", - "dev": true, - "requires": { - "@babel/types": "^7.8.6", - "jsesc": "^2.5.1", - "lodash": "^4.17.13", - "source-map": "^0.5.0" - } - }, - "@babel/helper-function-name": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz", - "integrity": "sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==", - "dev": true, - "requires": { - "@babel/helper-get-function-arity": "^7.8.3", - "@babel/template": "^7.8.3", - "@babel/types": "^7.8.3" - } - }, - "@babel/helper-get-function-arity": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz", - "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==", - "dev": true, - "requires": { - "@babel/types": "^7.8.3" - } - }, - "@babel/helper-split-export-declaration": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz", - "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==", - "dev": true, - "requires": { - "@babel/types": "^7.8.3" - } - }, - "@babel/highlight": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.8.3.tgz", - "integrity": "sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==", - "dev": true, - "requires": { - "chalk": "^2.0.0", - "esutils": "^2.0.2", - "js-tokens": "^4.0.0" - } - }, - "@babel/parser": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.6.tgz", - "integrity": "sha512-trGNYSfwq5s0SgM1BMEB8hX3NDmO7EP2wsDGDexiaKMB92BaRpS+qZfpkMqUBhcsOTBwNy9B/jieo4ad/t/z2g==", - "dev": true - }, - "@babel/template": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz", - "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.8.3", - "@babel/parser": "^7.8.6", - "@babel/types": "^7.8.6" - } - }, - "@babel/traverse": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.6.tgz", - "integrity": "sha512-2B8l0db/DPi8iinITKuo7cbPznLCEk0kCxDoB9/N6gGNg/gxOXiR/IcymAFPiBwk5w6TtQ27w4wpElgp9btR9A==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.8.3", - "@babel/generator": "^7.8.6", - "@babel/helper-function-name": "^7.8.3", - "@babel/helper-split-export-declaration": "^7.8.3", - "@babel/parser": "^7.8.6", - "@babel/types": "^7.8.6", - "debug": "^4.1.0", - "globals": "^11.1.0", - "lodash": "^4.17.13" - } - }, - "@babel/types": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.6.tgz", - "integrity": "sha512-wqz7pgWMIrht3gquyEFPVXeXCti72Rm8ep9b5tQKz9Yg9LzJA3HxosF1SB3Kc81KD1A3XBkkVYtJvCKS2Z/QrA==", - "dev": true, - "requires": { - "esutils": "^2.0.2", - "lodash": "^4.17.13", - "to-fast-properties": "^2.0.0" - } - } - } - }, - "@babel/generator": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.4.tgz", - "integrity": "sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg==", - "dev": true, - "requires": { - "@babel/types": "^7.7.4", - "jsesc": "^2.5.1", - "lodash": "^4.17.13", - "source-map": "^0.5.0" - } - }, - "@babel/helper-annotate-as-pure": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz", - "integrity": "sha512-2BQmQgECKzYKFPpiycoF9tlb5HA4lrVyAmLLVK177EcQAqjVLciUb2/R+n1boQ9y5ENV3uz2ZqiNw7QMBBw1Og==", - "dev": true, - "requires": { - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-builder-binary-assignment-operator-visitor": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.7.4.tgz", - "integrity": "sha512-Biq/d/WtvfftWZ9Uf39hbPBYDUo986m5Bb4zhkeYDGUllF43D+nUe5M6Vuo6/8JDK/0YX/uBdeoQpyaNhNugZQ==", - "dev": true, - "requires": { - "@babel/helper-explode-assignable-expression": "^7.7.4", - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-builder-react-jsx": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.8.3.tgz", - "integrity": "sha512-JT8mfnpTkKNCboTqZsQTdGo3l3Ik3l7QIt9hh0O9DYiwVel37VoJpILKM4YFbP2euF32nkQSb+F9cUk9b7DDXQ==", - "dev": true, - "requires": { - "@babel/types": "^7.8.3", - "esutils": "^2.0.0" - }, - "dependencies": { - "@babel/types": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.6.tgz", - "integrity": "sha512-wqz7pgWMIrht3gquyEFPVXeXCti72Rm8ep9b5tQKz9Yg9LzJA3HxosF1SB3Kc81KD1A3XBkkVYtJvCKS2Z/QrA==", - "dev": true, - "requires": { - "esutils": "^2.0.2", - "lodash": "^4.17.13", - "to-fast-properties": "^2.0.0" - } - } - } - }, - "@babel/helper-call-delegate": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-call-delegate/-/helper-call-delegate-7.7.4.tgz", - "integrity": "sha512-8JH9/B7J7tCYJ2PpWVpw9JhPuEVHztagNVuQAFBVFYluRMlpG7F1CgKEgGeL6KFqcsIa92ZYVj6DSc0XwmN1ZA==", - "dev": true, - "requires": { - "@babel/helper-hoist-variables": "^7.7.4", - "@babel/traverse": "^7.7.4", - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-create-regexp-features-plugin": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.7.4.tgz", - "integrity": "sha512-Mt+jBKaxL0zfOIWrfQpnfYCN7/rS6GKx6CCCfuoqVVd+17R8zNDlzVYmIi9qyb2wOk002NsmSTDymkIygDUH7A==", - "dev": true, - "requires": { - "@babel/helper-regex": "^7.4.4", - "regexpu-core": "^4.6.0" - } - }, - "@babel/helper-define-map": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.7.4.tgz", - "integrity": "sha512-v5LorqOa0nVQUvAUTUF3KPastvUt/HzByXNamKQ6RdJRTV7j8rLL+WB5C/MzzWAwOomxDhYFb1wLLxHqox86lg==", - "dev": true, - "requires": { - "@babel/helper-function-name": "^7.7.4", - "@babel/types": "^7.7.4", - "lodash": "^4.17.13" - } - }, - "@babel/helper-explode-assignable-expression": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.7.4.tgz", - "integrity": "sha512-2/SicuFrNSXsZNBxe5UGdLr+HZg+raWBLE9vC98bdYOKX/U6PY0mdGlYUJdtTDPSU0Lw0PNbKKDpwYHJLn2jLg==", - "dev": true, - "requires": { - "@babel/traverse": "^7.7.4", - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-function-name": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz", - "integrity": "sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ==", - "dev": true, - "requires": { - "@babel/helper-get-function-arity": "^7.7.4", - "@babel/template": "^7.7.4", - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-get-function-arity": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz", - "integrity": "sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA==", - "dev": true, - "requires": { - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-hoist-variables": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.4.tgz", - "integrity": "sha512-wQC4xyvc1Jo/FnLirL6CEgPgPCa8M74tOdjWpRhQYapz5JC7u3NYU1zCVoVAGCE3EaIP9T1A3iW0WLJ+reZlpQ==", - "dev": true, - "requires": { - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-member-expression-to-functions": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.7.4.tgz", - "integrity": "sha512-9KcA1X2E3OjXl/ykfMMInBK+uVdfIVakVe7W7Lg3wfXUNyS3Q1HWLFRwZIjhqiCGbslummPDnmb7vIekS0C1vw==", - "dev": true, - "requires": { - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-module-imports": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz", - "integrity": "sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ==", - "dev": true, - "requires": { - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-module-transforms": { - "version": "7.7.5", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.7.5.tgz", - "integrity": "sha512-A7pSxyJf1gN5qXVcidwLWydjftUN878VkalhXX5iQDuGyiGK3sOrrKKHF4/A4fwHtnsotv/NipwAeLzY4KQPvw==", - "dev": true, - "requires": { - "@babel/helper-module-imports": "^7.7.4", - "@babel/helper-simple-access": "^7.7.4", - "@babel/helper-split-export-declaration": "^7.7.4", - "@babel/template": "^7.7.4", - "@babel/types": "^7.7.4", - "lodash": "^4.17.13" - } - }, - "@babel/helper-optimise-call-expression": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.7.4.tgz", - "integrity": "sha512-VB7gWZ2fDkSuqW6b1AKXkJWO5NyNI3bFL/kK79/30moK57blr6NbH8xcl2XcKCwOmJosftWunZqfO84IGq3ZZg==", - "dev": true, - "requires": { - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-plugin-utils": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz", - "integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==", - "dev": true - }, - "@babel/helper-regex": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.5.5.tgz", - "integrity": "sha512-CkCYQLkfkiugbRDO8eZn6lRuR8kzZoGXCg3149iTk5se7g6qykSpy3+hELSwquhu+TgHn8nkLiBwHvNX8Hofcw==", - "dev": true, - "requires": { - "lodash": "^4.17.13" - } - }, - "@babel/helper-remap-async-to-generator": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.7.4.tgz", - "integrity": "sha512-Sk4xmtVdM9sA/jCI80f+KS+Md+ZHIpjuqmYPk1M7F/upHou5e4ReYmExAiu6PVe65BhJPZA2CY9x9k4BqE5klw==", - "dev": true, - "requires": { - "@babel/helper-annotate-as-pure": "^7.7.4", - "@babel/helper-wrap-function": "^7.7.4", - "@babel/template": "^7.7.4", - "@babel/traverse": "^7.7.4", - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-replace-supers": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.7.4.tgz", - "integrity": "sha512-pP0tfgg9hsZWo5ZboYGuBn/bbYT/hdLPVSS4NMmiRJdwWhP0IznPwN9AE1JwyGsjSPLC364I0Qh5p+EPkGPNpg==", - "dev": true, - "requires": { - "@babel/helper-member-expression-to-functions": "^7.7.4", - "@babel/helper-optimise-call-expression": "^7.7.4", - "@babel/traverse": "^7.7.4", - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-simple-access": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.7.4.tgz", - "integrity": "sha512-zK7THeEXfan7UlWsG2A6CI/L9jVnI5+xxKZOdej39Y0YtDYKx9raHk5F2EtK9K8DHRTihYwg20ADt9S36GR78A==", - "dev": true, - "requires": { - "@babel/template": "^7.7.4", - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-split-export-declaration": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz", - "integrity": "sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug==", - "dev": true, - "requires": { - "@babel/types": "^7.7.4" - } - }, - "@babel/helper-wrap-function": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz", - "integrity": "sha512-VsfzZt6wmsocOaVU0OokwrIytHND55yvyT4BPB9AIIgwr8+x7617hetdJTsuGwygN5RC6mxA9EJztTjuwm2ofg==", - "dev": true, - "requires": { - "@babel/helper-function-name": "^7.7.4", - "@babel/template": "^7.7.4", - "@babel/traverse": "^7.7.4", - "@babel/types": "^7.7.4" - } - }, - "@babel/helpers": { - "version": "7.8.4", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.8.4.tgz", - "integrity": "sha512-VPbe7wcQ4chu4TDQjimHv/5tj73qz88o12EPkO2ValS2QiQS/1F2SsjyIGNnAD0vF/nZS6Cf9i+vW6HIlnaR8w==", - "dev": true, - "requires": { - "@babel/template": "^7.8.3", - "@babel/traverse": "^7.8.4", - "@babel/types": "^7.8.3" - }, - "dependencies": { - "@babel/code-frame": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz", - "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==", - "dev": true, - "requires": { - "@babel/highlight": "^7.8.3" - } - }, - "@babel/generator": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.6.tgz", - "integrity": "sha512-4bpOR5ZBz+wWcMeVtcf7FbjcFzCp+817z2/gHNncIRcM9MmKzUhtWCYAq27RAfUrAFwb+OCG1s9WEaVxfi6cjg==", - "dev": true, - "requires": { - "@babel/types": "^7.8.6", - "jsesc": "^2.5.1", - "lodash": "^4.17.13", - "source-map": "^0.5.0" - } - }, - "@babel/helper-function-name": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz", - "integrity": "sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==", - "dev": true, - "requires": { - "@babel/helper-get-function-arity": "^7.8.3", - "@babel/template": "^7.8.3", - "@babel/types": "^7.8.3" - } - }, - "@babel/helper-get-function-arity": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz", - "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==", - "dev": true, - "requires": { - "@babel/types": "^7.8.3" - } - }, - "@babel/helper-split-export-declaration": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz", - "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==", - "dev": true, - "requires": { - "@babel/types": "^7.8.3" - } - }, - "@babel/highlight": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.8.3.tgz", - "integrity": "sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==", - "dev": true, - "requires": { - "chalk": "^2.0.0", - "esutils": "^2.0.2", - "js-tokens": "^4.0.0" - } - }, - "@babel/parser": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.6.tgz", - "integrity": "sha512-trGNYSfwq5s0SgM1BMEB8hX3NDmO7EP2wsDGDexiaKMB92BaRpS+qZfpkMqUBhcsOTBwNy9B/jieo4ad/t/z2g==", - "dev": true - }, - "@babel/template": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz", - "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.8.3", - "@babel/parser": "^7.8.6", - "@babel/types": "^7.8.6" - } - }, - "@babel/traverse": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.6.tgz", - "integrity": "sha512-2B8l0db/DPi8iinITKuo7cbPznLCEk0kCxDoB9/N6gGNg/gxOXiR/IcymAFPiBwk5w6TtQ27w4wpElgp9btR9A==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.8.3", - "@babel/generator": "^7.8.6", - "@babel/helper-function-name": "^7.8.3", - "@babel/helper-split-export-declaration": "^7.8.3", - "@babel/parser": "^7.8.6", - "@babel/types": "^7.8.6", - "debug": "^4.1.0", - "globals": "^11.1.0", - "lodash": "^4.17.13" - } - }, - "@babel/types": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.6.tgz", - "integrity": "sha512-wqz7pgWMIrht3gquyEFPVXeXCti72Rm8ep9b5tQKz9Yg9LzJA3HxosF1SB3Kc81KD1A3XBkkVYtJvCKS2Z/QrA==", - "dev": true, - "requires": { - "esutils": "^2.0.2", - "lodash": "^4.17.13", - "to-fast-properties": "^2.0.0" - } - } - } - }, - "@babel/highlight": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz", - "integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==", - "dev": true, - "requires": { - "chalk": "^2.0.0", - "esutils": "^2.0.2", - "js-tokens": "^4.0.0" - } - }, - "@babel/parser": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.7.4.tgz", - "integrity": "sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==", - "dev": true - }, - "@babel/plugin-proposal-async-generator-functions": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz", - "integrity": "sha512-1ypyZvGRXriY/QP668+s8sFr2mqinhkRDMPSQLNghCQE+GAkFtp+wkHVvg2+Hdki8gwP+NFzJBJ/N1BfzCCDEw==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/helper-remap-async-to-generator": "^7.7.4", - "@babel/plugin-syntax-async-generators": "^7.7.4" - } - }, - "@babel/plugin-proposal-dynamic-import": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.7.4.tgz", - "integrity": "sha512-StH+nGAdO6qDB1l8sZ5UBV8AC3F2VW2I8Vfld73TMKyptMU9DY5YsJAS8U81+vEtxcH3Y/La0wG0btDrhpnhjQ==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/plugin-syntax-dynamic-import": "^7.7.4" - } - }, - "@babel/plugin-proposal-json-strings": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.7.4.tgz", - "integrity": "sha512-wQvt3akcBTfLU/wYoqm/ws7YOAQKu8EVJEvHip/mzkNtjaclQoCCIqKXFP5/eyfnfbQCDV3OLRIK3mIVyXuZlw==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/plugin-syntax-json-strings": "^7.7.4" - } - }, - "@babel/plugin-proposal-object-rest-spread": { - "version": "7.7.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.7.tgz", - "integrity": "sha512-3qp9I8lelgzNedI3hrhkvhaEYree6+WHnyA/q4Dza9z7iEIs1eyhWyJnetk3jJ69RT0AT4G0UhEGwyGFJ7GUuQ==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/plugin-syntax-object-rest-spread": "^7.7.4" - } - }, - "@babel/plugin-proposal-optional-catch-binding": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.7.4.tgz", - "integrity": "sha512-DyM7U2bnsQerCQ+sejcTNZh8KQEUuC3ufzdnVnSiUv/qoGJp2Z3hanKL18KDhsBT5Wj6a7CMT5mdyCNJsEaA9w==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/plugin-syntax-optional-catch-binding": "^7.7.4" - } - }, - "@babel/plugin-proposal-unicode-property-regex": { - "version": "7.7.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.7.tgz", - "integrity": "sha512-80PbkKyORBUVm1fbTLrHpYdJxMThzM1UqFGh0ALEhO9TYbG86Ah9zQYAB/84axz2vcxefDLdZwWwZNlYARlu9w==", - "dev": true, - "requires": { - "@babel/helper-create-regexp-features-plugin": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-syntax-async-generators": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.7.4.tgz", - "integrity": "sha512-Li4+EjSpBgxcsmeEF8IFcfV/+yJGxHXDirDkEoyFjumuwbmfCVHUt0HuowD/iGM7OhIRyXJH9YXxqiH6N815+g==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-syntax-dynamic-import": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.7.4.tgz", - "integrity": "sha512-jHQW0vbRGvwQNgyVxwDh4yuXu4bH1f5/EICJLAhl1SblLs2CDhrsmCk+v5XLdE9wxtAFRyxx+P//Iw+a5L/tTg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-syntax-json-strings": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.7.4.tgz", - "integrity": "sha512-QpGupahTQW1mHRXddMG5srgpHWqRLwJnJZKXTigB9RPFCCGbDGCgBeM/iC82ICXp414WeYx/tD54w7M2qRqTMg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-syntax-jsx": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz", - "integrity": "sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.8.3" - }, - "dependencies": { - "@babel/helper-plugin-utils": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", - "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", - "dev": true - } - } - }, - "@babel/plugin-syntax-object-rest-spread": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.7.4.tgz", - "integrity": "sha512-mObR+r+KZq0XhRVS2BrBKBpr5jqrqzlPvS9C9vuOf5ilSwzloAl7RPWLrgKdWS6IreaVrjHxTjtyqFiOisaCwg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-syntax-optional-catch-binding": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.7.4.tgz", - "integrity": "sha512-4ZSuzWgFxqHRE31Glu+fEr/MirNZOMYmD/0BhBWyLyOOQz/gTAl7QmWm2hX1QxEIXsr2vkdlwxIzTyiYRC4xcQ==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-syntax-top-level-await": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.4.tgz", - "integrity": "sha512-wdsOw0MvkL1UIgiQ/IFr3ETcfv1xb8RMM0H9wbiDyLaJFyiDg5oZvDLCXosIXmFeIlweML5iOBXAkqddkYNizg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-arrow-functions": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.7.4.tgz", - "integrity": "sha512-zUXy3e8jBNPiffmqkHRNDdZM2r8DWhCB7HhcoyZjiK1TxYEluLHAvQuYnTT+ARqRpabWqy/NHkO6e3MsYB5YfA==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-async-to-generator": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.7.4.tgz", - "integrity": "sha512-zpUTZphp5nHokuy8yLlyafxCJ0rSlFoSHypTUWgpdwoDXWQcseaect7cJ8Ppk6nunOM6+5rPMkod4OYKPR5MUg==", - "dev": true, - "requires": { - "@babel/helper-module-imports": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/helper-remap-async-to-generator": "^7.7.4" - } - }, - "@babel/plugin-transform-block-scoped-functions": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.7.4.tgz", - "integrity": "sha512-kqtQzwtKcpPclHYjLK//3lH8OFsCDuDJBaFhVwf8kqdnF6MN4l618UDlcA7TfRs3FayrHj+svYnSX8MC9zmUyQ==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-block-scoping": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.7.4.tgz", - "integrity": "sha512-2VBe9u0G+fDt9B5OV5DQH4KBf5DoiNkwFKOz0TCvBWvdAN2rOykCTkrL+jTLxfCAm76l9Qo5OqL7HBOx2dWggg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "lodash": "^4.17.13" - } - }, - "@babel/plugin-transform-classes": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.7.4.tgz", - "integrity": "sha512-sK1mjWat7K+buWRuImEzjNf68qrKcrddtpQo3swi9j7dUcG6y6R6+Di039QN2bD1dykeswlagupEmpOatFHHUg==", - "dev": true, - "requires": { - "@babel/helper-annotate-as-pure": "^7.7.4", - "@babel/helper-define-map": "^7.7.4", - "@babel/helper-function-name": "^7.7.4", - "@babel/helper-optimise-call-expression": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/helper-replace-supers": "^7.7.4", - "@babel/helper-split-export-declaration": "^7.7.4", - "globals": "^11.1.0" - } - }, - "@babel/plugin-transform-computed-properties": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.7.4.tgz", - "integrity": "sha512-bSNsOsZnlpLLyQew35rl4Fma3yKWqK3ImWMSC/Nc+6nGjC9s5NFWAer1YQ899/6s9HxO2zQC1WoFNfkOqRkqRQ==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-destructuring": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.7.4.tgz", - "integrity": "sha512-4jFMXI1Cu2aXbcXXl8Lr6YubCn6Oc7k9lLsu8v61TZh+1jny2BWmdtvY9zSUlLdGUvcy9DMAWyZEOqjsbeg/wA==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-dotall-regex": { - "version": "7.7.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.7.tgz", - "integrity": "sha512-b4in+YlTeE/QmTgrllnb3bHA0HntYvjz8O3Mcbx75UBPJA2xhb5A8nle498VhxSXJHQefjtQxpnLPehDJ4TRlg==", - "dev": true, - "requires": { - "@babel/helper-create-regexp-features-plugin": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-duplicate-keys": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.7.4.tgz", - "integrity": "sha512-g1y4/G6xGWMD85Tlft5XedGaZBCIVN+/P0bs6eabmcPP9egFleMAo65OOjlhcz1njpwagyY3t0nsQC9oTFegJA==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-exponentiation-operator": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.7.4.tgz", - "integrity": "sha512-MCqiLfCKm6KEA1dglf6Uqq1ElDIZwFuzz1WH5mTf8k2uQSxEJMbOIEh7IZv7uichr7PMfi5YVSrr1vz+ipp7AQ==", - "dev": true, - "requires": { - "@babel/helper-builder-binary-assignment-operator-visitor": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-for-of": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.7.4.tgz", - "integrity": "sha512-zZ1fD1B8keYtEcKF+M1TROfeHTKnijcVQm0yO/Yu1f7qoDoxEIc/+GX6Go430Bg84eM/xwPFp0+h4EbZg7epAA==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-function-name": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.7.4.tgz", - "integrity": "sha512-E/x09TvjHNhsULs2IusN+aJNRV5zKwxu1cpirZyRPw+FyyIKEHPXTsadj48bVpc1R5Qq1B5ZkzumuFLytnbT6g==", - "dev": true, - "requires": { - "@babel/helper-function-name": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-literals": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.7.4.tgz", - "integrity": "sha512-X2MSV7LfJFm4aZfxd0yLVFrEXAgPqYoDG53Br/tCKiKYfX0MjVjQeWPIhPHHsCqzwQANq+FLN786fF5rgLS+gw==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-member-expression-literals": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.7.4.tgz", - "integrity": "sha512-9VMwMO7i69LHTesL0RdGy93JU6a+qOPuvB4F4d0kR0zyVjJRVJRaoaGjhtki6SzQUu8yen/vxPKN6CWnCUw6bA==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-modules-amd": { - "version": "7.7.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.7.5.tgz", - "integrity": "sha512-CT57FG4A2ZUNU1v+HdvDSDrjNWBrtCmSH6YbbgN3Lrf0Di/q/lWRxZrE72p3+HCCz9UjfZOEBdphgC0nzOS6DQ==", - "dev": true, - "requires": { - "@babel/helper-module-transforms": "^7.7.5", - "@babel/helper-plugin-utils": "^7.0.0", - "babel-plugin-dynamic-import-node": "^2.3.0" - } - }, - "@babel/plugin-transform-modules-commonjs": { - "version": "7.7.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.7.5.tgz", - "integrity": "sha512-9Cq4zTFExwFhQI6MT1aFxgqhIsMWQWDVwOgLzl7PTWJHsNaqFvklAU+Oz6AQLAS0dJKTwZSOCo20INwktxpi3Q==", - "dev": true, - "requires": { - "@babel/helper-module-transforms": "^7.7.5", - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/helper-simple-access": "^7.7.4", - "babel-plugin-dynamic-import-node": "^2.3.0" - } - }, - "@babel/plugin-transform-modules-systemjs": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.7.4.tgz", - "integrity": "sha512-y2c96hmcsUi6LrMqvmNDPBBiGCiQu0aYqpHatVVu6kD4mFEXKjyNxd/drc18XXAf9dv7UXjrZwBVmTTGaGP8iw==", - "dev": true, - "requires": { - "@babel/helper-hoist-variables": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0", - "babel-plugin-dynamic-import-node": "^2.3.0" - } - }, - "@babel/plugin-transform-modules-umd": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.7.4.tgz", - "integrity": "sha512-u2B8TIi0qZI4j8q4C51ktfO7E3cQ0qnaXFI1/OXITordD40tt17g/sXqgNNCcMTcBFKrUPcGDx+TBJuZxLx7tw==", - "dev": true, - "requires": { - "@babel/helper-module-transforms": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-named-capturing-groups-regex": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.7.4.tgz", - "integrity": "sha512-jBUkiqLKvUWpv9GLSuHUFYdmHg0ujC1JEYoZUfeOOfNydZXp1sXObgyPatpcwjWgsdBGsagWW0cdJpX/DO2jMw==", - "dev": true, - "requires": { - "@babel/helper-create-regexp-features-plugin": "^7.7.4" - } - }, - "@babel/plugin-transform-new-target": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.7.4.tgz", - "integrity": "sha512-CnPRiNtOG1vRodnsyGX37bHQleHE14B9dnnlgSeEs3ek3fHN1A1SScglTCg1sfbe7sRQ2BUcpgpTpWSfMKz3gg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-object-super": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.7.4.tgz", - "integrity": "sha512-ho+dAEhC2aRnff2JCA0SAK7V2R62zJd/7dmtoe7MHcso4C2mS+vZjn1Pb1pCVZvJs1mgsvv5+7sT+m3Bysb6eg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/helper-replace-supers": "^7.7.4" - } - }, - "@babel/plugin-transform-parameters": { - "version": "7.7.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.7.7.tgz", - "integrity": "sha512-OhGSrf9ZBrr1fw84oFXj5hgi8Nmg+E2w5L7NhnG0lPvpDtqd7dbyilM2/vR8CKbJ907RyxPh2kj6sBCSSfI9Ew==", - "dev": true, - "requires": { - "@babel/helper-call-delegate": "^7.7.4", - "@babel/helper-get-function-arity": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-property-literals": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.7.4.tgz", - "integrity": "sha512-MatJhlC4iHsIskWYyawl53KuHrt+kALSADLQQ/HkhTjX954fkxIEh4q5slL4oRAnsm/eDoZ4q0CIZpcqBuxhJQ==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-react-display-name": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz", - "integrity": "sha512-3Jy/PCw8Fe6uBKtEgz3M82ljt+lTg+xJaM4og+eyu83qLT87ZUSckn0wy7r31jflURWLO83TW6Ylf7lyXj3m5A==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.8.3" - }, - "dependencies": { - "@babel/helper-plugin-utils": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", - "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", - "dev": true - } - } - }, - "@babel/plugin-transform-react-jsx": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.8.3.tgz", - "integrity": "sha512-r0h+mUiyL595ikykci+fbwm9YzmuOrUBi0b+FDIKmi3fPQyFokWVEMJnRWHJPPQEjyFJyna9WZC6Viv6UHSv1g==", - "dev": true, - "requires": { - "@babel/helper-builder-react-jsx": "^7.8.3", - "@babel/helper-plugin-utils": "^7.8.3", - "@babel/plugin-syntax-jsx": "^7.8.3" - }, - "dependencies": { - "@babel/helper-plugin-utils": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", - "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", - "dev": true - } - } - }, - "@babel/plugin-transform-react-jsx-self": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.8.3.tgz", - "integrity": "sha512-01OT7s5oa0XTLf2I8XGsL8+KqV9lx3EZV+jxn/L2LQ97CGKila2YMroTkCEIE0HV/FF7CMSRsIAybopdN9NTdg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.8.3", - "@babel/plugin-syntax-jsx": "^7.8.3" - }, - "dependencies": { - "@babel/helper-plugin-utils": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", - "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", - "dev": true - } - } - }, - "@babel/plugin-transform-react-jsx-source": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.8.3.tgz", - "integrity": "sha512-PLMgdMGuVDtRS/SzjNEQYUT8f4z1xb2BAT54vM1X5efkVuYBf5WyGUMbpmARcfq3NaglIwz08UVQK4HHHbC6ag==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.8.3", - "@babel/plugin-syntax-jsx": "^7.8.3" - }, - "dependencies": { - "@babel/helper-plugin-utils": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", - "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", - "dev": true - } - } - }, - "@babel/plugin-transform-regenerator": { - "version": "7.7.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.7.5.tgz", - "integrity": "sha512-/8I8tPvX2FkuEyWbjRCt4qTAgZK0DVy8QRguhA524UH48RfGJy94On2ri+dCuwOpcerPRl9O4ebQkRcVzIaGBw==", - "dev": true, - "requires": { - "regenerator-transform": "^0.14.0" - } - }, - "@babel/plugin-transform-reserved-words": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.7.4.tgz", - "integrity": "sha512-OrPiUB5s5XvkCO1lS7D8ZtHcswIC57j62acAnJZKqGGnHP+TIc/ljQSrgdX/QyOTdEK5COAhuc820Hi1q2UgLQ==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-shorthand-properties": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.7.4.tgz", - "integrity": "sha512-q+suddWRfIcnyG5YiDP58sT65AJDZSUhXQDZE3r04AuqD6d/XLaQPPXSBzP2zGerkgBivqtQm9XKGLuHqBID6Q==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-spread": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.7.4.tgz", - "integrity": "sha512-8OSs0FLe5/80cndziPlg4R0K6HcWSM0zyNhHhLsmw/Nc5MaA49cAsnoJ/t/YZf8qkG7fD+UjTRaApVDB526d7Q==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-sticky-regex": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.7.4.tgz", - "integrity": "sha512-Ls2NASyL6qtVe1H1hXts9yuEeONV2TJZmplLONkMPUG158CtmnrzW5Q5teibM5UVOFjG0D3IC5mzXR6pPpUY7A==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/helper-regex": "^7.0.0" - } - }, - "@babel/plugin-transform-template-literals": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.7.4.tgz", - "integrity": "sha512-sA+KxLwF3QwGj5abMHkHgshp9+rRz+oY9uoRil4CyLtgEuE/88dpkeWgNk5qKVsJE9iSfly3nvHapdRiIS2wnQ==", - "dev": true, - "requires": { - "@babel/helper-annotate-as-pure": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-typeof-symbol": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.7.4.tgz", - "integrity": "sha512-KQPUQ/7mqe2m0B8VecdyaW5XcQYaePyl9R7IsKd+irzj6jvbhoGnRE+M0aNkyAzI07VfUQ9266L5xMARitV3wg==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/plugin-transform-unicode-regex": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.4.tgz", - "integrity": "sha512-N77UUIV+WCvE+5yHw+oks3m18/umd7y392Zv7mYTpFqHtkpcc+QUz+gLJNTWVlWROIWeLqY0f3OjZxV5TcXnRw==", - "dev": true, - "requires": { - "@babel/helper-create-regexp-features-plugin": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0" - } - }, - "@babel/preset-env": { - "version": "7.7.7", - "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.7.7.tgz", - "integrity": "sha512-pCu0hrSSDVI7kCVUOdcMNQEbOPJ52E+LrQ14sN8uL2ALfSqePZQlKrOy+tM4uhEdYlCHi4imr8Zz2cZe9oSdIg==", - "dev": true, - "requires": { - "@babel/helper-module-imports": "^7.7.4", - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/plugin-proposal-async-generator-functions": "^7.7.4", - "@babel/plugin-proposal-dynamic-import": "^7.7.4", - "@babel/plugin-proposal-json-strings": "^7.7.4", - "@babel/plugin-proposal-object-rest-spread": "^7.7.7", - "@babel/plugin-proposal-optional-catch-binding": "^7.7.4", - "@babel/plugin-proposal-unicode-property-regex": "^7.7.7", - "@babel/plugin-syntax-async-generators": "^7.7.4", - "@babel/plugin-syntax-dynamic-import": "^7.7.4", - "@babel/plugin-syntax-json-strings": "^7.7.4", - "@babel/plugin-syntax-object-rest-spread": "^7.7.4", - "@babel/plugin-syntax-optional-catch-binding": "^7.7.4", - "@babel/plugin-syntax-top-level-await": "^7.7.4", - "@babel/plugin-transform-arrow-functions": "^7.7.4", - "@babel/plugin-transform-async-to-generator": "^7.7.4", - "@babel/plugin-transform-block-scoped-functions": "^7.7.4", - "@babel/plugin-transform-block-scoping": "^7.7.4", - "@babel/plugin-transform-classes": "^7.7.4", - "@babel/plugin-transform-computed-properties": "^7.7.4", - "@babel/plugin-transform-destructuring": "^7.7.4", - "@babel/plugin-transform-dotall-regex": "^7.7.7", - "@babel/plugin-transform-duplicate-keys": "^7.7.4", - "@babel/plugin-transform-exponentiation-operator": "^7.7.4", - "@babel/plugin-transform-for-of": "^7.7.4", - "@babel/plugin-transform-function-name": "^7.7.4", - "@babel/plugin-transform-literals": "^7.7.4", - "@babel/plugin-transform-member-expression-literals": "^7.7.4", - "@babel/plugin-transform-modules-amd": "^7.7.5", - "@babel/plugin-transform-modules-commonjs": "^7.7.5", - "@babel/plugin-transform-modules-systemjs": "^7.7.4", - "@babel/plugin-transform-modules-umd": "^7.7.4", - "@babel/plugin-transform-named-capturing-groups-regex": "^7.7.4", - "@babel/plugin-transform-new-target": "^7.7.4", - "@babel/plugin-transform-object-super": "^7.7.4", - "@babel/plugin-transform-parameters": "^7.7.7", - "@babel/plugin-transform-property-literals": "^7.7.4", - "@babel/plugin-transform-regenerator": "^7.7.5", - "@babel/plugin-transform-reserved-words": "^7.7.4", - "@babel/plugin-transform-shorthand-properties": "^7.7.4", - "@babel/plugin-transform-spread": "^7.7.4", - "@babel/plugin-transform-sticky-regex": "^7.7.4", - "@babel/plugin-transform-template-literals": "^7.7.4", - "@babel/plugin-transform-typeof-symbol": "^7.7.4", - "@babel/plugin-transform-unicode-regex": "^7.7.4", - "@babel/types": "^7.7.4", - "browserslist": "^4.6.0", - "core-js-compat": "^3.6.0", - "invariant": "^2.2.2", - "js-levenshtein": "^1.1.3", - "semver": "^5.5.0" - } - }, - "@babel/preset-react": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.8.3.tgz", - "integrity": "sha512-9hx0CwZg92jGb7iHYQVgi0tOEHP/kM60CtWJQnmbATSPIQQ2xYzfoCI3EdqAhFBeeJwYMdWQuDUHMsuDbH9hyQ==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.8.3", - "@babel/plugin-transform-react-display-name": "^7.8.3", - "@babel/plugin-transform-react-jsx": "^7.8.3", - "@babel/plugin-transform-react-jsx-self": "^7.8.3", - "@babel/plugin-transform-react-jsx-source": "^7.8.3" - }, - "dependencies": { - "@babel/helper-plugin-utils": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz", - "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==", - "dev": true - } - } - }, - "@babel/template": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.4.tgz", - "integrity": "sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.4", - "@babel/types": "^7.7.4" - } - }, - "@babel/traverse": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.7.4.tgz", - "integrity": "sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.5.5", - "@babel/generator": "^7.7.4", - "@babel/helper-function-name": "^7.7.4", - "@babel/helper-split-export-declaration": "^7.7.4", - "@babel/parser": "^7.7.4", - "@babel/types": "^7.7.4", - "debug": "^4.1.0", - "globals": "^11.1.0", - "lodash": "^4.17.13" - } - }, - "@babel/types": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz", - "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==", - "dev": true, - "requires": { - "esutils": "^2.0.2", - "lodash": "^4.17.13", - "to-fast-properties": "^2.0.0" - } - }, - "@envato/react-resize-observer-hook": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@envato/react-resize-observer-hook/-/react-resize-observer-hook-1.0.1.tgz", - "integrity": "sha512-y7E9TYtofzKd64RW07KlM4QfcSyxOG1q4lRlO+wL3KtkmzlHjTJuuKSshHGKuT4ml5pg4oqMpLjQDDnIb6XWog==" - }, - "ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, - "requires": { - "color-convert": "^1.9.0" - } - }, - "anymatch": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz", - "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==", - "dev": true, - "optional": true, - "requires": { - "micromatch": "^3.1.4", - "normalize-path": "^2.1.1" - }, - "dependencies": { - "normalize-path": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", - "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", - "dev": true, - "optional": true, - "requires": { - "remove-trailing-separator": "^1.0.1" - } - } - } - }, - "arr-diff": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", - "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=", - "dev": true, - "optional": true - }, - "arr-flatten": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz", - "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==", - "dev": true, - "optional": true - }, - "arr-union": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz", - "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=", - "dev": true, - "optional": true - }, - "array-unique": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", - "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", - "dev": true, - "optional": true - }, - "assign-symbols": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", - "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=", - "dev": true, - "optional": true - }, - "async-each": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz", - "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==", - "dev": true, - "optional": true - }, - "atob": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", - "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", - "dev": true, - "optional": true - }, - "babel-plugin-dynamic-import-node": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz", - "integrity": "sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==", - "dev": true, - "requires": { - "object.assign": "^4.1.0" - } - }, - "balanced-match": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true - }, - "base": { - "version": "0.11.2", - "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz", - "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==", - "dev": true, - "optional": true, - "requires": { - "cache-base": "^1.0.1", - "class-utils": "^0.3.5", - "component-emitter": "^1.2.1", - "define-property": "^1.0.0", - "isobject": "^3.0.1", - "mixin-deep": "^1.2.0", - "pascalcase": "^0.1.1" - }, - "dependencies": { - "define-property": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", - "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", - "dev": true, - "optional": true, - "requires": { - "is-descriptor": "^1.0.0" - } - }, - "is-accessor-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", - "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-data-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", - "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-descriptor": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", - "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "dev": true, - "optional": true, - "requires": { - "is-accessor-descriptor": "^1.0.0", - "is-data-descriptor": "^1.0.0", - "kind-of": "^6.0.2" - } - } - } - }, - "binary-extensions": { - "version": "1.13.1", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz", - "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==", - "dev": true, - "optional": true - }, - "bindings": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", - "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "dev": true, - "optional": true, - "requires": { - "file-uri-to-path": "1.0.0" - } - }, - "brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dev": true, - "requires": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "braces": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", - "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", - "dev": true, - "optional": true, - "requires": { - "arr-flatten": "^1.1.0", - "array-unique": "^0.3.2", - "extend-shallow": "^2.0.1", - "fill-range": "^4.0.0", - "isobject": "^3.0.1", - "repeat-element": "^1.1.2", - "snapdragon": "^0.8.1", - "snapdragon-node": "^2.0.1", - "split-string": "^3.0.2", - "to-regex": "^3.0.1" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "optional": true, - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "browserslist": { - "version": "4.8.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.2.tgz", - "integrity": "sha512-+M4oeaTplPm/f1pXDw84YohEv7B1i/2Aisei8s4s6k3QsoSHa7i5sz8u/cGQkkatCPxMASKxPualR4wwYgVboA==", - "dev": true, - "requires": { - "caniuse-lite": "^1.0.30001015", - "electron-to-chromium": "^1.3.322", - "node-releases": "^1.1.42" - } - }, - "cache-base": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz", - "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==", - "dev": true, - "optional": true, - "requires": { - "collection-visit": "^1.0.0", - "component-emitter": "^1.2.1", - "get-value": "^2.0.6", - "has-value": "^1.0.0", - "isobject": "^3.0.1", - "set-value": "^2.0.0", - "to-object-path": "^0.3.0", - "union-value": "^1.0.0", - "unset-value": "^1.0.0" - } - }, - "caniuse-lite": { - "version": "1.0.30001015", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001015.tgz", - "integrity": "sha512-/xL2AbW/XWHNu1gnIrO8UitBGoFthcsDgU9VLK1/dpsoxbaD5LscHozKze05R6WLsBvLhqv78dAPozMFQBYLbQ==", - "dev": true - }, - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - } - }, - "chokidar": { - "version": "2.1.8", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz", - "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==", - "dev": true, - "optional": true, - "requires": { - "anymatch": "^2.0.0", - "async-each": "^1.0.1", - "braces": "^2.3.2", - "fsevents": "^1.2.7", - "glob-parent": "^3.1.0", - "inherits": "^2.0.3", - "is-binary-path": "^1.0.0", - "is-glob": "^4.0.0", - "normalize-path": "^3.0.0", - "path-is-absolute": "^1.0.0", - "readdirp": "^2.2.1", - "upath": "^1.1.1" - } - }, - "class-utils": { - "version": "0.3.6", - "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz", - "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==", - "dev": true, - "optional": true, - "requires": { - "arr-union": "^3.1.0", - "define-property": "^0.2.5", - "isobject": "^3.0.0", - "static-extend": "^0.1.1" - }, - "dependencies": { - "define-property": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", - "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "dev": true, - "optional": true, - "requires": { - "is-descriptor": "^0.1.0" - } - } - } - }, - "collection-visit": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", - "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=", - "dev": true, - "optional": true, - "requires": { - "map-visit": "^1.0.0", - "object-visit": "^1.0.0" - } - }, - "color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true - }, - "commander": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", - "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", - "dev": true - }, - "component-emitter": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", - "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", - "dev": true, - "optional": true - }, - "concat-map": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true - }, - "convert-source-map": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", - "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==", - "dev": true, - "requires": { - "safe-buffer": "~5.1.1" - } - }, - "copy-descriptor": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", - "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=", - "dev": true, - "optional": true - }, - "core-js-compat": { - "version": "3.6.2", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.2.tgz", - "integrity": "sha512-+G28dzfYGtAM+XGvB1C5AS1ZPKfQ47HLhcdeIQdZgQnJVdp7/D0m+W/TErwhgsX6CujRUk/LebB6dCrKrtJrvQ==", - "dev": true, - "requires": { - "browserslist": "^4.8.3", - "semver": "7.0.0" - }, - "dependencies": { - "browserslist": { - "version": "4.8.3", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz", - "integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==", - "dev": true, - "requires": { - "caniuse-lite": "^1.0.30001017", - "electron-to-chromium": "^1.3.322", - "node-releases": "^1.1.44" - } - }, - "caniuse-lite": { - "version": "1.0.30001019", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001019.tgz", - "integrity": "sha512-6ljkLtF1KM5fQ+5ZN0wuyVvvebJxgJPTmScOMaFuQN2QuOzvRJnWSKfzQskQU5IOU4Gap3zasYPIinzwUjoj/g==", - "dev": true - }, - "node-releases": { - "version": "1.1.44", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.44.tgz", - "integrity": "sha512-NwbdvJyR7nrcGrXvKAvzc5raj/NkoJudkarh2yIpJ4t0NH4aqjUDz/486P+ynIW5eokKOfzGNRdYoLfBlomruw==", - "dev": true, - "requires": { - "semver": "^6.3.0" - }, - "dependencies": { - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true - } - } - }, - "semver": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz", - "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==", - "dev": true - } - } - }, - "core-util-is": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", - "dev": true, - "optional": true - }, - "debug": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", - "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", - "dev": true, - "requires": { - "ms": "^2.1.1" - } - }, - "decode-uri-component": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", - "dev": true, - "optional": true - }, - "define-properties": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", - "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", - "dev": true, - "requires": { - "object-keys": "^1.0.12" - } - }, - "define-property": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz", - "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==", - "dev": true, - "optional": true, - "requires": { - "is-descriptor": "^1.0.2", - "isobject": "^3.0.1" - }, - "dependencies": { - "is-accessor-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", - "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-data-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", - "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-descriptor": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", - "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "dev": true, - "optional": true, - "requires": { - "is-accessor-descriptor": "^1.0.0", - "is-data-descriptor": "^1.0.0", - "kind-of": "^6.0.2" - } - } - } - }, - "electron-to-chromium": { - "version": "1.3.322", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.322.tgz", - "integrity": "sha512-Tc8JQEfGQ1MzfSzI/bTlSr7btJv/FFO7Yh6tanqVmIWOuNCu6/D1MilIEgLtmWqIrsv+o4IjpLAhgMBr/ncNAA==", - "dev": true - }, - "escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true - }, - "esutils": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", - "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", - "dev": true - }, - "expand-brackets": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", - "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=", - "dev": true, - "optional": true, - "requires": { - "debug": "^2.3.3", - "define-property": "^0.2.5", - "extend-shallow": "^2.0.1", - "posix-character-classes": "^0.1.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.1" - }, - "dependencies": { - "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "optional": true, - "requires": { - "ms": "2.0.0" - } - }, - "define-property": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", - "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "dev": true, - "optional": true, - "requires": { - "is-descriptor": "^0.1.0" - } - }, - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "optional": true, - "requires": { - "is-extendable": "^0.1.0" - } - }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true, - "optional": true - } - } - }, - "extend-shallow": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", - "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=", - "dev": true, - "optional": true, - "requires": { - "assign-symbols": "^1.0.0", - "is-extendable": "^1.0.1" - }, - "dependencies": { - "is-extendable": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz", - "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", - "dev": true, - "optional": true, - "requires": { - "is-plain-object": "^2.0.4" - } - } - } - }, - "extglob": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz", - "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==", - "dev": true, - "optional": true, - "requires": { - "array-unique": "^0.3.2", - "define-property": "^1.0.0", - "expand-brackets": "^2.1.4", - "extend-shallow": "^2.0.1", - "fragment-cache": "^0.2.1", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.1" - }, - "dependencies": { - "define-property": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", - "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", - "dev": true, - "optional": true, - "requires": { - "is-descriptor": "^1.0.0" - } - }, - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "optional": true, - "requires": { - "is-extendable": "^0.1.0" - } - }, - "is-accessor-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", - "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-data-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", - "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-descriptor": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", - "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "dev": true, - "optional": true, - "requires": { - "is-accessor-descriptor": "^1.0.0", - "is-data-descriptor": "^1.0.0", - "kind-of": "^6.0.2" - } - } - } - }, - "file-uri-to-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "dev": true, - "optional": true - }, - "fill-range": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", - "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", - "dev": true, - "optional": true, - "requires": { - "extend-shallow": "^2.0.1", - "is-number": "^3.0.0", - "repeat-string": "^1.6.1", - "to-regex-range": "^2.1.0" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "optional": true, - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "for-in": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", - "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=", - "dev": true, - "optional": true - }, - "fragment-cache": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz", - "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=", - "dev": true, - "optional": true, - "requires": { - "map-cache": "^0.2.2" - } - }, - "fs-readdir-recursive": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", - "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==", - "dev": true - }, - "fs.realpath": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", - "dev": true - }, - "fsevents": { - "version": "1.2.11", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.11.tgz", - "integrity": "sha512-+ux3lx6peh0BpvY0JebGyZoiR4D+oYzdPZMKJwkZ+sFkNJzpL7tXc/wehS49gUAxg3tmMHPHZkA8JU2rhhgDHw==", - "dev": true, - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1", - "node-pre-gyp": "*" - }, - "dependencies": { - "abbrev": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "ansi-regex": { - "version": "2.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "aproba": { - "version": "1.2.0", - "bundled": true, - "dev": true, - "optional": true - }, - "are-we-there-yet": { - "version": "1.1.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "delegates": "^1.0.0", - "readable-stream": "^2.0.6" - } - }, - "balanced-match": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "brace-expansion": { - "version": "1.1.11", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "chownr": { - "version": "1.1.3", - "bundled": true, - "dev": true, - "optional": true - }, - "code-point-at": { - "version": "1.1.0", - "bundled": true, - "dev": true, - "optional": true - }, - "concat-map": { - "version": "0.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "console-control-strings": { - "version": "1.1.0", - "bundled": true, - "dev": true, - "optional": true - }, - "core-util-is": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "debug": { - "version": "3.2.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ms": "^2.1.1" - } - }, - "deep-extend": { - "version": "0.6.0", - "bundled": true, - "dev": true, - "optional": true - }, - "delegates": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "detect-libc": { - "version": "1.0.3", - "bundled": true, - "dev": true, - "optional": true - }, - "fs-minipass": { - "version": "1.2.7", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minipass": "^2.6.0" - } - }, - "fs.realpath": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "gauge": { - "version": "2.7.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "aproba": "^1.0.3", - "console-control-strings": "^1.0.0", - "has-unicode": "^2.0.0", - "object-assign": "^4.1.0", - "signal-exit": "^3.0.0", - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wide-align": "^1.1.0" - } - }, - "glob": { - "version": "7.1.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - }, - "has-unicode": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "iconv-lite": { - "version": "0.4.24", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safer-buffer": ">= 2.1.2 < 3" - } - }, - "ignore-walk": { - "version": "3.0.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minimatch": "^3.0.4" - } - }, - "inflight": { - "version": "1.0.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "inherits": { - "version": "2.0.4", - "bundled": true, - "dev": true, - "optional": true - }, - "ini": { - "version": "1.3.5", - "bundled": true, - "dev": true, - "optional": true - }, - "is-fullwidth-code-point": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "number-is-nan": "^1.0.0" - } - }, - "isarray": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "minimatch": { - "version": "3.0.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "brace-expansion": "^1.1.7" - } - }, - "minimist": { - "version": "0.0.8", - "bundled": true, - "dev": true, - "optional": true - }, - "minipass": { - "version": "2.9.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "^5.1.2", - "yallist": "^3.0.0" - } - }, - "minizlib": { - "version": "1.3.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minipass": "^2.9.0" - } - }, - "mkdirp": { - "version": "0.5.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minimist": "0.0.8" - } - }, - "ms": { - "version": "2.1.2", - "bundled": true, - "dev": true, - "optional": true - }, - "needle": { - "version": "2.4.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "debug": "^3.2.6", - "iconv-lite": "^0.4.4", - "sax": "^1.2.4" - } - }, - "node-pre-gyp": { - "version": "0.14.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "detect-libc": "^1.0.2", - "mkdirp": "^0.5.1", - "needle": "^2.2.1", - "nopt": "^4.0.1", - "npm-packlist": "^1.1.6", - "npmlog": "^4.0.2", - "rc": "^1.2.7", - "rimraf": "^2.6.1", - "semver": "^5.3.0", - "tar": "^4.4.2" - } - }, - "nopt": { - "version": "4.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "abbrev": "1", - "osenv": "^0.1.4" - } - }, - "npm-bundled": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "npm-normalize-package-bin": "^1.0.1" - } - }, - "npm-normalize-package-bin": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "npm-packlist": { - "version": "1.4.7", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ignore-walk": "^3.0.1", - "npm-bundled": "^1.0.1" - } - }, - "npmlog": { - "version": "4.1.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "are-we-there-yet": "~1.1.2", - "console-control-strings": "~1.1.0", - "gauge": "~2.7.3", - "set-blocking": "~2.0.0" - } - }, - "number-is-nan": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "object-assign": { - "version": "4.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "once": { - "version": "1.4.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "wrappy": "1" - } - }, - "os-homedir": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "os-tmpdir": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "osenv": { - "version": "0.1.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "os-homedir": "^1.0.0", - "os-tmpdir": "^1.0.0" - } - }, - "path-is-absolute": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "process-nextick-args": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "rc": { - "version": "1.2.8", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "deep-extend": "^0.6.0", - "ini": "~1.3.0", - "minimist": "^1.2.0", - "strip-json-comments": "~2.0.1" - }, - "dependencies": { - "minimist": { - "version": "1.2.0", - "bundled": true, - "dev": true, - "optional": true - } - } - }, - "readable-stream": { - "version": "2.3.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - }, - "rimraf": { - "version": "2.7.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "glob": "^7.1.3" - } - }, - "safe-buffer": { - "version": "5.1.2", - "bundled": true, - "dev": true, - "optional": true - }, - "safer-buffer": { - "version": "2.1.2", - "bundled": true, - "dev": true, - "optional": true - }, - "sax": { - "version": "1.2.4", - "bundled": true, - "dev": true, - "optional": true - }, - "semver": { - "version": "5.7.1", - "bundled": true, - "dev": true, - "optional": true - }, - "set-blocking": { - "version": "2.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "signal-exit": { - "version": "3.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "string-width": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" - } - }, - "string_decoder": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "~5.1.0" - } - }, - "strip-ansi": { - "version": "3.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ansi-regex": "^2.0.0" - } - }, - "strip-json-comments": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "tar": { - "version": "4.4.13", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "chownr": "^1.1.1", - "fs-minipass": "^1.2.5", - "minipass": "^2.8.6", - "minizlib": "^1.2.1", - "mkdirp": "^0.5.0", - "safe-buffer": "^5.1.2", - "yallist": "^3.0.3" - } - }, - "util-deprecate": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "wide-align": { - "version": "1.1.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "string-width": "^1.0.2 || 2" - } - }, - "wrappy": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "yallist": { - "version": "3.1.1", - "bundled": true, - "dev": true, - "optional": true - } - } - }, - "function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true - }, - "gensync": { - "version": "1.0.0-beta.1", - "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz", - "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==", - "dev": true - }, - "get-value": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", - "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=", - "dev": true, - "optional": true - }, - "glob": { - "version": "7.1.6", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", - "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", - "dev": true, - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - }, - "glob-parent": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", - "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=", - "dev": true, - "optional": true, - "requires": { - "is-glob": "^3.1.0", - "path-dirname": "^1.0.0" - }, - "dependencies": { - "is-glob": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz", - "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", - "dev": true, - "optional": true, - "requires": { - "is-extglob": "^2.1.0" - } - } - } - }, - "globals": { - "version": "11.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true - }, - "graceful-fs": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz", - "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==", - "dev": true, - "optional": true - }, - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, - "has-symbols": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", - "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", - "dev": true - }, - "has-value": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz", - "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=", - "dev": true, - "optional": true, - "requires": { - "get-value": "^2.0.6", - "has-values": "^1.0.0", - "isobject": "^3.0.0" - } - }, - "has-values": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz", - "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=", - "dev": true, - "optional": true, - "requires": { - "is-number": "^3.0.0", - "kind-of": "^4.0.0" - }, - "dependencies": { - "kind-of": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz", - "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=", - "dev": true, - "optional": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "inflight": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", - "dev": true, - "requires": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "inherits": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true - }, - "invariant": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", - "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, - "requires": { - "loose-envify": "^1.0.0" - } - }, - "is-accessor-descriptor": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", - "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "optional": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "is-binary-path": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz", - "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=", - "dev": true, - "optional": true, - "requires": { - "binary-extensions": "^1.0.0" - } - }, - "is-buffer": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", - "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", - "dev": true, - "optional": true - }, - "is-data-descriptor": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", - "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "optional": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "is-descriptor": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz", - "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==", - "dev": true, - "optional": true, - "requires": { - "is-accessor-descriptor": "^0.1.6", - "is-data-descriptor": "^0.1.4", - "kind-of": "^5.0.0" - }, - "dependencies": { - "kind-of": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz", - "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==", - "dev": true, - "optional": true - } - } - }, - "is-extendable": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", - "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=", - "dev": true, - "optional": true - }, - "is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "dev": true, - "optional": true - }, - "is-glob": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", - "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", - "dev": true, - "optional": true, - "requires": { - "is-extglob": "^2.1.1" - } - }, - "is-number": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", - "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "optional": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "is-plain-object": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", - "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", - "dev": true, - "optional": true, - "requires": { - "isobject": "^3.0.1" - } - }, - "is-windows": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", - "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==", - "dev": true, - "optional": true - }, - "isarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", - "dev": true, - "optional": true - }, - "isobject": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", - "dev": true, - "optional": true - }, - "js-levenshtein": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz", - "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==", - "dev": true - }, - "js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true - }, - "jsesc": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", - "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "dev": true - }, - "json5": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.1.tgz", - "integrity": "sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==", - "dev": true, - "requires": { - "minimist": "^1.2.0" - } - }, - "kind-of": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", - "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", - "dev": true, - "optional": true - }, - "lodash": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", - "dev": true - }, - "loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, - "requires": { - "js-tokens": "^3.0.0 || ^4.0.0" - } - }, - "make-dir": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", - "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", - "dev": true, - "requires": { - "pify": "^4.0.1", - "semver": "^5.6.0" - } - }, - "map-cache": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", - "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=", - "dev": true, - "optional": true - }, - "map-visit": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz", - "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=", - "dev": true, - "optional": true, - "requires": { - "object-visit": "^1.0.0" - } - }, - "micromatch": { - "version": "3.1.10", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", - "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", - "dev": true, - "optional": true, - "requires": { - "arr-diff": "^4.0.0", - "array-unique": "^0.3.2", - "braces": "^2.3.1", - "define-property": "^2.0.2", - "extend-shallow": "^3.0.2", - "extglob": "^2.0.4", - "fragment-cache": "^0.2.1", - "kind-of": "^6.0.2", - "nanomatch": "^1.2.9", - "object.pick": "^1.3.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.2" - } - }, - "minimatch": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "dev": true, - "requires": { - "brace-expansion": "^1.1.7" - } - }, - "minimist": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", - "dev": true - }, - "mixin-deep": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", - "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==", - "dev": true, - "optional": true, - "requires": { - "for-in": "^1.0.2", - "is-extendable": "^1.0.1" - }, - "dependencies": { - "is-extendable": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz", - "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", - "dev": true, - "optional": true, - "requires": { - "is-plain-object": "^2.0.4" - } - } - } - }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true - }, - "nan": { - "version": "2.14.0", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz", - "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==", - "dev": true, - "optional": true - }, - "nanomatch": { - "version": "1.2.13", - "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", - "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==", - "dev": true, - "optional": true, - "requires": { - "arr-diff": "^4.0.0", - "array-unique": "^0.3.2", - "define-property": "^2.0.2", - "extend-shallow": "^3.0.2", - "fragment-cache": "^0.2.1", - "is-windows": "^1.0.2", - "kind-of": "^6.0.2", - "object.pick": "^1.3.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.1" - } - }, - "node-releases": { - "version": "1.1.42", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.42.tgz", - "integrity": "sha512-OQ/ESmUqGawI2PRX+XIRao44qWYBBfN54ImQYdWVTQqUckuejOg76ysSqDBK8NG3zwySRVnX36JwDQ6x+9GxzA==", - "dev": true, - "requires": { - "semver": "^6.3.0" - }, - "dependencies": { - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true - } - } - }, - "normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, - "optional": true - }, - "object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true - }, - "object-copy": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz", - "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=", - "dev": true, - "optional": true, - "requires": { - "copy-descriptor": "^0.1.0", - "define-property": "^0.2.5", - "kind-of": "^3.0.3" - }, - "dependencies": { - "define-property": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", - "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "dev": true, - "optional": true, - "requires": { - "is-descriptor": "^0.1.0" - } - }, - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "optional": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "object-keys": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", - "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", - "dev": true - }, - "object-visit": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz", - "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=", - "dev": true, - "optional": true, - "requires": { - "isobject": "^3.0.0" - } - }, - "object.assign": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz", - "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==", - "dev": true, - "requires": { - "define-properties": "^1.1.2", - "function-bind": "^1.1.1", - "has-symbols": "^1.0.0", - "object-keys": "^1.0.11" - } - }, - "object.pick": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz", - "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=", - "dev": true, - "optional": true, - "requires": { - "isobject": "^3.0.1" - } - }, - "once": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "dev": true, - "requires": { - "wrappy": "1" - } - }, - "pascalcase": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz", - "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=", - "dev": true, - "optional": true - }, - "path-dirname": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz", - "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=", - "dev": true, - "optional": true - }, - "path-is-absolute": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", - "dev": true - }, - "path-parse": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", - "dev": true - }, - "pify": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", - "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", - "dev": true - }, - "posix-character-classes": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", - "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=", - "dev": true, - "optional": true - }, - "private": { - "version": "0.1.8", - "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", - "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==", - "dev": true - }, - "process-nextick-args": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", - "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", - "dev": true, - "optional": true - }, - "prop-types": { - "version": "15.7.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", - "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "dev": true, - "requires": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.8.1" - } - }, - "react": { - "version": "16.12.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz", - "integrity": "sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==", - "dev": true, - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2" - } - }, - "react-dom": { - "version": "16.12.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz", - "integrity": "sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==", - "dev": true, - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.18.0" - } - }, - "react-is": { - "version": "16.12.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", - "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==", - "dev": true - }, - "readable-stream": { - "version": "2.3.7", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", - "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", - "dev": true, - "optional": true, - "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - }, - "readdirp": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz", - "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==", - "dev": true, - "optional": true, - "requires": { - "graceful-fs": "^4.1.11", - "micromatch": "^3.1.10", - "readable-stream": "^2.0.2" - } - }, - "regenerate": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", - "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==", - "dev": true - }, - "regenerate-unicode-properties": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz", - "integrity": "sha512-LGZzkgtLY79GeXLm8Dp0BVLdQlWICzBnJz/ipWUgo59qBaZ+BHtq51P2q1uVZlppMuUAT37SDk39qUbjTWB7bA==", - "dev": true, - "requires": { - "regenerate": "^1.4.0" - } - }, - "regenerator-transform": { - "version": "0.14.1", - "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.1.tgz", - "integrity": "sha512-flVuee02C3FKRISbxhXl9mGzdbWUVHubl1SMaknjxkFB1/iqpJhArQUvRxOOPEc/9tAiX0BaQ28FJH10E4isSQ==", - "dev": true, - "requires": { - "private": "^0.1.6" - } - }, - "regex-not": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz", - "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==", - "dev": true, - "optional": true, - "requires": { - "extend-shallow": "^3.0.2", - "safe-regex": "^1.1.0" - } - }, - "regexpu-core": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.6.0.tgz", - "integrity": "sha512-YlVaefl8P5BnFYOITTNzDvan1ulLOiXJzCNZxduTIosN17b87h3bvG9yHMoHaRuo88H4mQ06Aodj5VtYGGGiTg==", - "dev": true, - "requires": { - "regenerate": "^1.4.0", - "regenerate-unicode-properties": "^8.1.0", - "regjsgen": "^0.5.0", - "regjsparser": "^0.6.0", - "unicode-match-property-ecmascript": "^1.0.4", - "unicode-match-property-value-ecmascript": "^1.1.0" - } - }, - "regjsgen": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.1.tgz", - "integrity": "sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg==", - "dev": true - }, - "regjsparser": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.0.tgz", - "integrity": "sha512-RQ7YyokLiQBomUJuUG8iGVvkgOLxwyZM8k6d3q5SAXpg4r5TZJZigKFvC6PpD+qQ98bCDC5YelPeA3EucDoNeQ==", - "dev": true, - "requires": { - "jsesc": "~0.5.0" - }, - "dependencies": { - "jsesc": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz", - "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=", - "dev": true - } - } - }, - "remove-trailing-separator": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz", - "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=", - "dev": true, - "optional": true - }, - "repeat-element": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz", - "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==", - "dev": true, - "optional": true - }, - "repeat-string": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", - "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=", - "dev": true, - "optional": true - }, - "resolve": { - "version": "1.15.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz", - "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==", - "dev": true, - "requires": { - "path-parse": "^1.0.6" - } - }, - "resolve-url": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", - "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=", - "dev": true, - "optional": true - }, - "ret": { - "version": "0.1.15", - "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz", - "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==", - "dev": true, - "optional": true - }, - "safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true - }, - "safe-regex": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", - "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", - "dev": true, - "optional": true, - "requires": { - "ret": "~0.1.10" - } - }, - "scheduler": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz", - "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==", - "dev": true, - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, - "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", - "dev": true - }, - "set-value": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz", - "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==", - "dev": true, - "optional": true, - "requires": { - "extend-shallow": "^2.0.1", - "is-extendable": "^0.1.1", - "is-plain-object": "^2.0.3", - "split-string": "^3.0.1" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "optional": true, - "requires": { - "is-extendable": "^0.1.0" - } - } - } - }, - "slash": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", - "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", - "dev": true - }, - "snapdragon": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", - "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==", - "dev": true, - "optional": true, - "requires": { - "base": "^0.11.1", - "debug": "^2.2.0", - "define-property": "^0.2.5", - "extend-shallow": "^2.0.1", - "map-cache": "^0.2.2", - "source-map": "^0.5.6", - "source-map-resolve": "^0.5.0", - "use": "^3.1.0" - }, - "dependencies": { - "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "optional": true, - "requires": { - "ms": "2.0.0" - } - }, - "define-property": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", - "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "dev": true, - "optional": true, - "requires": { - "is-descriptor": "^0.1.0" - } - }, - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "optional": true, - "requires": { - "is-extendable": "^0.1.0" - } - }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true, - "optional": true - } - } - }, - "snapdragon-node": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz", - "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==", - "dev": true, - "optional": true, - "requires": { - "define-property": "^1.0.0", - "isobject": "^3.0.0", - "snapdragon-util": "^3.0.1" - }, - "dependencies": { - "define-property": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", - "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", - "dev": true, - "optional": true, - "requires": { - "is-descriptor": "^1.0.0" - } - }, - "is-accessor-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", - "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-data-descriptor": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", - "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^6.0.0" - } - }, - "is-descriptor": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", - "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "dev": true, - "optional": true, - "requires": { - "is-accessor-descriptor": "^1.0.0", - "is-data-descriptor": "^1.0.0", - "kind-of": "^6.0.2" - } - } - } - }, - "snapdragon-util": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz", - "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^3.2.0" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "optional": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true - }, - "source-map-resolve": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz", - "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==", - "dev": true, - "optional": true, - "requires": { - "atob": "^2.1.2", - "decode-uri-component": "^0.2.0", - "resolve-url": "^0.2.1", - "source-map-url": "^0.4.0", - "urix": "^0.1.0" - } - }, - "source-map-url": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz", - "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", - "dev": true, - "optional": true - }, - "split-string": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", - "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==", - "dev": true, - "optional": true, - "requires": { - "extend-shallow": "^3.0.0" - } - }, - "static-extend": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz", - "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=", - "dev": true, - "optional": true, - "requires": { - "define-property": "^0.2.5", - "object-copy": "^0.1.0" - }, - "dependencies": { - "define-property": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", - "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "dev": true, - "optional": true, - "requires": { - "is-descriptor": "^0.1.0" - } - } - } - }, - "string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "~5.1.0" - } - }, - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - }, - "to-object-path": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz", - "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=", - "dev": true, - "optional": true, - "requires": { - "kind-of": "^3.0.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "optional": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, - "to-regex": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz", - "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==", - "dev": true, - "optional": true, - "requires": { - "define-property": "^2.0.2", - "extend-shallow": "^3.0.2", - "regex-not": "^1.0.2", - "safe-regex": "^1.1.0" - } - }, - "to-regex-range": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz", - "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=", - "dev": true, - "optional": true, - "requires": { - "is-number": "^3.0.0", - "repeat-string": "^1.6.1" - } - }, - "unicode-canonical-property-names-ecmascript": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", - "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==", - "dev": true - }, - "unicode-match-property-ecmascript": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz", - "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==", - "dev": true, - "requires": { - "unicode-canonical-property-names-ecmascript": "^1.0.4", - "unicode-property-aliases-ecmascript": "^1.0.4" - } - }, - "unicode-match-property-value-ecmascript": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz", - "integrity": "sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g==", - "dev": true - }, - "unicode-property-aliases-ecmascript": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz", - "integrity": "sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw==", - "dev": true - }, - "union-value": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", - "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==", - "dev": true, - "optional": true, - "requires": { - "arr-union": "^3.1.0", - "get-value": "^2.0.6", - "is-extendable": "^0.1.1", - "set-value": "^2.0.1" - } - }, - "unset-value": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz", - "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=", - "dev": true, - "optional": true, - "requires": { - "has-value": "^0.3.1", - "isobject": "^3.0.0" - }, - "dependencies": { - "has-value": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz", - "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=", - "dev": true, - "optional": true, - "requires": { - "get-value": "^2.0.3", - "has-values": "^0.1.4", - "isobject": "^2.0.0" - }, - "dependencies": { - "isobject": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz", - "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=", - "dev": true, - "optional": true, - "requires": { - "isarray": "1.0.0" - } - } - } - }, - "has-values": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz", - "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=", - "dev": true, - "optional": true - } - } - }, - "upath": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz", - "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==", - "dev": true, - "optional": true - }, - "urix": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", - "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", - "dev": true, - "optional": true - }, - "use": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", - "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==", - "dev": true, - "optional": true - }, - "util-deprecate": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", - "dev": true, - "optional": true - }, - "wrappy": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true - } - } -} diff --git a/package.json b/package.json index ec19dfc..1bfbd4e 100644 --- a/package.json +++ b/package.json @@ -37,21 +37,23 @@ "react-dom": ">=16.8.0" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^2.34.0", - "@typescript-eslint/parser": "^2.34.0", + "@types/react": "^17.0.0", + "@typescript-eslint/eslint-plugin": "^4.13.0", + "@typescript-eslint/parser": "^4.13.0", "babel-eslint": "^10.1.0", - "eslint": "^6.8.0", - "eslint-config-react-app": "^5.2.1", - "eslint-plugin-flowtype": "^4.7.0", + "eslint": "^7.17.0", + "eslint-config-react-app": "^6.0.0", + "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.22.0", - "eslint-plugin-react-hooks": "^2.5.1", + "eslint-plugin-react-hooks": "^4.2.0", "husky": "^4.3.7", "lint-staged": "^10.5.3", "prettier": "^2.2.1", "react": "^17.0.1", - "react-dom": "^17.0.1" + "react-dom": "^17.0.1", + "typescript": "^4.2.0-beta" }, "dependencies": { "@envato/react-resize-observer-hook": "^1.0.1" From f3f7e5ad842681cb90cdc32e6872d31fcd49cb94 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:17:49 +1100 Subject: [PATCH 03/32] Create tsconfig.json --- tsconfig.json | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 tsconfig.json diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..52f5d32 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "jsx": "react-jsx", + "declaration": true, + "declarationMap": true, + "sourceMap": true, + "outDir": "./dist", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true + }, + "include": ["./src/**/*"] +} From 7b949782c29ffbcb0ed265ccdfef4084b7fa6258 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:17:52 +1100 Subject: [PATCH 04/32] Delete index.d.ts --- src/index.d.ts | 55 -------------------------------------------------- 1 file changed, 55 deletions(-) delete mode 100644 src/index.d.ts diff --git a/src/index.d.ts b/src/index.d.ts deleted file mode 100644 index fa17268..0000000 --- a/src/index.d.ts +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -type BoxOptions = 'border-box' | 'content-box' | 'device-pixel-content-box'; - -interface ResizeObserverBoxSize { - readonly inlineSize: number; - readonly blockSize: number; -} - -interface ResizeObserverEntry { - readonly target: Element; - readonly contentRect: DOMRectReadOnly; - readonly borderBoxSize: Array | ResizeObserverBoxSize; - readonly contentBoxSize: Array | ResizeObserverBoxSize; - readonly devicePixelContentBoxSize: Array | ResizeObserverBoxSize; -} - -interface Breakpoints { - [key: number]: any; -} - -interface BreakpointsOptions { - box?: BoxOptions; - widths?: Breakpoints; - heights?: Breakpoints; - fragment?: number; -} - -interface ObservedElementProps { - ref: () => React.RefObject; -} - -interface ObserveRenderArgs { - observedElementProps: ObservedElementProps; - widthMatch: any; - heightMatch: any; -} - -interface ObserveProps { - box?: BoxOptions; - breakpoints?: BreakpointsOptions; - render: ({ - observedElementProps, - widthMatch, - heightMatch - }: ObserveRenderArgs) => React.ReactNode; -} - -export const Observe: (props: ObserveProps) => React.ReactNode; - -export const useBreakpoints: (options: BreakpointsOptions, injectResizeObserverEntry?: ResizeObserverEntry) => [any, any]; - -export const useResizeObserverEntry: (injectResizeObserverEntry?: ResizeObserverEntry) => ResizeObserverEntry | null; - -export const Context: React.Context; From dbb80d6da7bf176a959419555716153cda0e4d49 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:18:28 +1100 Subject: [PATCH 05/32] Rename index.js --- src/{index.js => index.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{index.js => index.ts} (100%) diff --git a/src/index.js b/src/index.ts similarity index 100% rename from src/index.js rename to src/index.ts From 9e2b0e19723893a7957028edf3d344693c39b74f Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:18:52 +1100 Subject: [PATCH 06/32] Rename Context.js --- src/{Context.js => Context.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{Context.js => Context.ts} (100%) diff --git a/src/Context.js b/src/Context.ts similarity index 100% rename from src/Context.js rename to src/Context.ts From 460e689800e742ed2dfdfc8aacd7efa9b82699b0 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:21:01 +1100 Subject: [PATCH 07/32] Add interfaces --- src/ExtendedResizeObserverEntry.ts | 5 +++++ src/ObservedElement.ts | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 src/ExtendedResizeObserverEntry.ts create mode 100644 src/ObservedElement.ts diff --git a/src/ExtendedResizeObserverEntry.ts b/src/ExtendedResizeObserverEntry.ts new file mode 100644 index 0000000..48a5949 --- /dev/null +++ b/src/ExtendedResizeObserverEntry.ts @@ -0,0 +1,5 @@ +import { ObservedElement } from './ObservedElement'; + +export interface ExtendedResizeObserverEntry extends ResizeObserverEntry { + target: ObservedElement; +} diff --git a/src/ObservedElement.ts b/src/ObservedElement.ts new file mode 100644 index 0000000..a2011ef --- /dev/null +++ b/src/ObservedElement.ts @@ -0,0 +1,5 @@ +import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry'; + +export interface ObservedElement extends Element { + onResizeObservation?: (resizeObserverEntry: ExtendedResizeObserverEntry) => void; +} From bbdca4443267766f5a40b92277cc81a4c8babf46 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:22:21 +1100 Subject: [PATCH 08/32] Add types --- src/Context.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Context.ts b/src/Context.ts index d8de05e..b13da22 100644 --- a/src/Context.ts +++ b/src/Context.ts @@ -1,5 +1,4 @@ import { createContext } from 'react'; +import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry'; -const Context = createContext(null); - -export { Context }; +export const Context = createContext(null); From 56fc8fe50c44b3e98117b7d81fb0cb23b301f0c8 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:23:06 +1100 Subject: [PATCH 09/32] Rename useResizeObserverEntry.js --- src/{useResizeObserverEntry.js => useResizeObserverEntry.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{useResizeObserverEntry.js => useResizeObserverEntry.ts} (100%) diff --git a/src/useResizeObserverEntry.js b/src/useResizeObserverEntry.ts similarity index 100% rename from src/useResizeObserverEntry.js rename to src/useResizeObserverEntry.ts From 6e16b20d075c0d19b7d038f2a6675c0b311d0343 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:40:27 +1100 Subject: [PATCH 10/32] Add types and improve docs --- src/useResizeObserverEntry.ts | 30 +++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/src/useResizeObserverEntry.ts b/src/useResizeObserverEntry.ts index 313c9b4..9f47110 100644 --- a/src/useResizeObserverEntry.ts +++ b/src/useResizeObserverEntry.ts @@ -1,15 +1,31 @@ import { useContext } from 'react'; import { Context } from './Context'; +import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry'; /** - * Returns the ResizeObserverEntry from nearest Context. - * @argument {ResizeObserverEntry} [injectResizeObserverEntry] - Explicitly set the ResizeObserverEntry to use instead of fetching it from Context. - * @returns {(ResizeObserverEntry|null)} + * See API Docs: {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#useresizeobserverentry|useResizeObserverEntry} + * + * Returns the `ResizeObserverEntry` from the nearest Context. + * + * You can also pass in a `ResizeObserverEntry`, which will be returned verbatim. + * You will almost certainly never need to do this, but because you may not + * conditionally call hooks, it can be useful to pass in the `ResizeObserverEntry` + * you receive from + * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#useresizeobserver|useResizeObserver} + * in the same component instead of relying on the value from the nearest Context. + * + * This is how + * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#observe|Observe} + * component combines the + * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#useresizeobserver|useResizeObserver} + * hook and the + * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#useresizeobserverentry|useResizeObserverEntry} + * hook. */ -const useResizeObserverEntry = injectResizeObserverEntry => { - const resizeObserverEntry = useContext(Context); +export const useResizeObserverEntry = ( + injectResizeObserverEntry?: ExtendedResizeObserverEntry +): ExtendedResizeObserverEntry | null => { + const resizeObserverEntry = useContext(Context); return injectResizeObserverEntry || resizeObserverEntry; }; - -export { useResizeObserverEntry }; From e879140efb171141fc7849c49a7b850b4ec417a3 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:41:04 +1100 Subject: [PATCH 11/32] Rename useBreakpoints.js --- src/{useBreakpoints.js => useBreakpoints.ts} | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) rename src/{useBreakpoints.js => useBreakpoints.ts} (89%) diff --git a/src/useBreakpoints.js b/src/useBreakpoints.ts similarity index 89% rename from src/useBreakpoints.js rename to src/useBreakpoints.ts index 2db5bcf..a4e1f66 100644 --- a/src/useBreakpoints.js +++ b/src/useBreakpoints.ts @@ -35,12 +35,15 @@ const findBreakpoint = (breakpoints, entrySize) => { * @argument {ResizeObserverEntry} [injectResizeObserverEntry] - Explicitly set the ResizeObserverEntry to use instead of fetching it from Context. * @returns {Array} Array of matching width value, and matching height value. */ -const useBreakpoints = ({ - widths = {}, - heights = {}, - box = undefined, - fragment = 0 // https://github.com/w3c/csswg-drafts/pull/4529 -}, injectResizeObserverEntry = undefined) => { +const useBreakpoints = ( + { + widths = {}, + heights = {}, + box = undefined, + fragment = 0 // https://github.com/w3c/csswg-drafts/pull/4529 + }, + injectResizeObserverEntry = undefined +) => { const resizeObserverEntry = useResizeObserverEntry(injectResizeObserverEntry); const [width, setWidth] = useState(undefined); @@ -63,7 +66,8 @@ const useBreakpoints = ({ break; case boxOptions.DEVICE_PIXEL_CONTENT_BOX: - entryBox = resizeObserverEntry.devicePixelContentBoxSize[fragment] || resizeObserverEntry.devicePixelContentBoxSize; + entryBox = + resizeObserverEntry.devicePixelContentBoxSize[fragment] || resizeObserverEntry.devicePixelContentBoxSize; entryWidth = entryBox.inlineSize; entryHeight = entryBox.blockSize; break; From 463ccbfc9cdb1e55c0f17601cbdbe4242d10011a Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:41:39 +1100 Subject: [PATCH 12/32] Update build script --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 1bfbd4e..3da1327 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,8 @@ "version": "1.0.2", "description": "Respond to changes in a DOM element's size. With React Breakpoints, element queries are no longer \"web design's unicorn\" 🦄", "main": "dist/index.js", - "types": "src/index.d.ts", "scripts": { - "build": "babel src/ -d dist/ --source-maps", + "build": "tsc -b", "prepare": "npm run build" }, "repository": { From 316f3ce8a8ccf279c4a975d85c34e6e4b6acd537 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 16:45:25 +1100 Subject: [PATCH 13/32] Move findBreakpoint to its own file --- src/findBreakpoint.ts | 17 +++++++++++++++++ src/useBreakpoints.ts | 19 +------------------ 2 files changed, 18 insertions(+), 18 deletions(-) create mode 100644 src/findBreakpoint.ts diff --git a/src/findBreakpoint.ts b/src/findBreakpoint.ts new file mode 100644 index 0000000..59d86bb --- /dev/null +++ b/src/findBreakpoint.ts @@ -0,0 +1,17 @@ +/** + * Find the breakpoint matching the given entry size. + * @argument {Object} breakpoints - Map of sizes with their return values. + * @argument {Number} entrySize - Size of entry to check breakpoints against. + * @returns {*} Value of `breakpoints` at matching breakpoint. + */ +export const findBreakpoint = (breakpoints, entrySize) => { + let breakpoint; + const sizes = Object.keys(breakpoints); + + for (const next of sizes) { + if (entrySize < Number(next)) break; + breakpoint = next; + } + + return breakpoints[breakpoint]; +}; diff --git a/src/useBreakpoints.ts b/src/useBreakpoints.ts index a4e1f66..c96190b 100644 --- a/src/useBreakpoints.ts +++ b/src/useBreakpoints.ts @@ -1,5 +1,6 @@ import { useState, useEffect } from 'react'; import { useResizeObserverEntry } from './useResizeObserverEntry'; +import { findBreakpoint } from './findBreakpoint'; const boxOptions = { BORDER_BOX: 'border-box', // https://caniuse.com/#feat=mdn-api_resizeobserverentry_borderboxsize @@ -7,24 +8,6 @@ const boxOptions = { DEVICE_PIXEL_CONTENT_BOX: 'device-pixel-content-box' // https://github.com/w3c/csswg-drafts/issues/3554 }; -/** - * Find the breakpoint matching the given entry size. - * @argument {Object} breakpoints - Map of sizes with their return values. - * @argument {Number} entrySize - Size of entry to check breakpoints against. - * @returns {*} Value of `breakpoints` at matching breakpoint. - */ -const findBreakpoint = (breakpoints, entrySize) => { - let breakpoint; - const sizes = Object.keys(breakpoints); - - for (const next of sizes) { - if (entrySize < Number(next)) break; - breakpoint = next; - } - - return breakpoints[breakpoint]; -}; - /** * Returns mapped value for width and height of nearest Context. * @argument {Object} options From 69e389bbdb62794f6f7a186b8a894b4f27ad8ddb Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 15 Jan 2021 17:02:51 +1100 Subject: [PATCH 14/32] Update documentation --- src/useResizeObserverEntry.ts | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/useResizeObserverEntry.ts b/src/useResizeObserverEntry.ts index 9f47110..395a6fc 100644 --- a/src/useResizeObserverEntry.ts +++ b/src/useResizeObserverEntry.ts @@ -14,13 +14,22 @@ import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry'; * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#useresizeobserver|useResizeObserver} * in the same component instead of relying on the value from the nearest Context. * - * This is how + * This is allowed to facilitate the abstraction in + * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#usebreakpoints|useBreakpoints} + * which is used in the * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#observe|Observe} - * component combines the - * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#useresizeobserver|useResizeObserver} - * hook and the - * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#useresizeobserverentry|useResizeObserverEntry} - * hook. + * component. + * + * @example + * // MyObservingComponent + * return ( + * + * + * + * ); + * + * // MyConsumingComponent + * const someResizeObserverEntry = useResizeObserverEntry(); */ export const useResizeObserverEntry = ( injectResizeObserverEntry?: ExtendedResizeObserverEntry From fa7944237bc5ec55cfb38c3cb6a50a424511af78 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Tue, 2 Mar 2021 15:06:21 +0800 Subject: [PATCH 15/32] Update typescript package --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3da1327..f19763c 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "prettier": "^2.2.1", "react": "^17.0.1", "react-dom": "^17.0.1", - "typescript": "^4.2.0-beta" + "typescript": "^4.2.2" }, "dependencies": { "@envato/react-resize-observer-hook": "^1.0.1" From e97db6b9e3aa15a05c045fe3a64b1a2d2027ceae Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Tue, 2 Mar 2021 15:06:30 +0800 Subject: [PATCH 16/32] Update peer dependency versions --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f19763c..0457b70 100644 --- a/package.json +++ b/package.json @@ -32,8 +32,8 @@ }, "homepage": "https://github.com/envato/react-breakpoints#readme", "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" + "react": "16.8 - 17", + "react-dom": "16.8 - 17" }, "devDependencies": { "@types/react": "^17.0.0", From 4858ac3ec5a789bc74ada84075d8eb66a74aaee4 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Tue, 2 Mar 2021 15:07:25 +0800 Subject: [PATCH 17/32] Prettier --- README.md | 27 ++++++++++----------------- 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index e4ab499..ea65c8b 100644 --- a/README.md +++ b/README.md @@ -17,19 +17,20 @@ `react-breakpoints` allows you to respond to changes in a DOM element's size. You can change the evaluated logic and rendered output of components based on observed size changes in DOM elements. For example, you can change a dropdown menu to a horizontal list menu based on its parent container's width without using CSS media queries. ## 📦 What's in the box? + > No polling. No event listening. No sentinel elements. **Just a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)!** This package provides you with: -* a [``](/docs/api.md#provider) to instantiate the ResizeObserver; -* an [``](/docs/api.md#observe) component to observe changes in a DOM element; -* a [`useBreakpoints()`](/docs/api.md#usebreakpoints) hook to change a component's behaviour based on the observed size information in the nearest parent ``. +- a [``](/docs/api.md#provider) to instantiate the ResizeObserver; +- an [``](/docs/api.md#observe) component to observe changes in a DOM element; +- a [`useBreakpoints()`](/docs/api.md#usebreakpoints) hook to change a component's behaviour based on the observed size information in the nearest parent ``. For power users this package also provides: -* a [``](/docs/api.md#context) on which you can assign a `ResizeObserverEntry` value to update any nested components that are using `useBreakpoints()`; -* a [`useResizeObserver()`](/docs/api.md#useresizeobserver) hook to connect a DOM element in your component to the instantiated `ResizeObserver` on ``; -* a [`useResizeObserverEntry()`](/docs/api.md#useresizeobserverentry) hook to retrieve the `ResizeObserverEntry` put on the nearest ``. This is what `useBreakpoints()` uses under the hood. +- a [``](/docs/api.md#context) on which you can assign a `ResizeObserverEntry` value to update any nested components that are using `useBreakpoints()`; +- a [`useResizeObserver()`](/docs/api.md#useresizeobserver) hook to connect a DOM element in your component to the instantiated `ResizeObserver` on ``; +- a [`useResizeObserverEntry()`](/docs/api.md#useresizeobserverentry) hook to retrieve the `ResizeObserverEntry` put on the nearest ``. This is what `useBreakpoints()` uses under the hood. # 🚧 Developer status @@ -48,11 +49,7 @@ npm install @envato/react-breakpoints ```javascript import { Provider as ResizeObserverProvider } from '@envato/react-breakpoints'; -const App = () => ( - - ... - -) +const App = () => ...; ``` ⚠️ **Caution** — You may need to pass some props to `` to increase browser support. Please refer to the [API Docs](/docs/api.md#provider). @@ -93,11 +90,7 @@ const MyResponsiveComponent = () => { const [label] = useBreakpoints(options); - return ( -
- This element is currently within the {label} range. -
- ); + return
This element is currently within the {label} range.
; }; ``` @@ -115,7 +108,7 @@ See [Server-Side Rendering](/docs/server-side-rendering.md) for more information # Maintainers -* [Marc Dingena](https://github.com/mdingena) (owner) +- [Marc Dingena](https://github.com/mdingena) (owner) # Contributing From 4e79a1c7b9b86393fe092b3c524ff567a3097e3e Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Tue, 2 Mar 2021 15:07:38 +0800 Subject: [PATCH 18/32] Update badge --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ea65c8b..1426155 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@

dependent repositories npm version - react version + react version license contributor covenant v2.0 adopted

From 21a99a953886b17940694d581dafc792ec0fb9c3 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Wed, 3 Mar 2021 15:29:19 +0800 Subject: [PATCH 19/32] Update react-resize-observer-hook dependency --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0457b70..12cea54 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "typescript": "^4.2.2" }, "dependencies": { - "@envato/react-resize-observer-hook": "^1.0.1" + "@envato/react-resize-observer-hook": "^1.1.3" }, "eslintConfig": { "extends": "react-app" From bb1f4de9f102672e2049236dd9d4bd2360c17d23 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Wed, 3 Mar 2021 15:31:24 +0800 Subject: [PATCH 20/32] Update types with new interfaces from typescript v4.2 and react-resize-observer-hook v1.1.3 --- src/Breakpoints.ts | 3 + src/Context.ts | 2 +- src/ExtendedResizeObserverEntry.ts | 5 -- src/Observe.js | 29 ------- src/Observe.tsx | 51 ++++++++++++ src/ObservedElement.ts | 5 -- src/findBreakpoint.ts | 30 ++++--- src/useBreakpoints.ts | 122 ++++++++++++++++++++--------- src/useResizeObserverEntry.ts | 4 +- 9 files changed, 164 insertions(+), 87 deletions(-) create mode 100644 src/Breakpoints.ts delete mode 100644 src/ExtendedResizeObserverEntry.ts delete mode 100644 src/Observe.js create mode 100644 src/Observe.tsx delete mode 100644 src/ObservedElement.ts diff --git a/src/Breakpoints.ts b/src/Breakpoints.ts new file mode 100644 index 0000000..8eae541 --- /dev/null +++ b/src/Breakpoints.ts @@ -0,0 +1,3 @@ +export interface Breakpoints { + [breakpoint: number]: any; +} diff --git a/src/Context.ts b/src/Context.ts index b13da22..0eb43dd 100644 --- a/src/Context.ts +++ b/src/Context.ts @@ -1,4 +1,4 @@ import { createContext } from 'react'; -import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry'; +import { ExtendedResizeObserverEntry } from '@envato/react-resize-observer-hook'; export const Context = createContext(null); diff --git a/src/ExtendedResizeObserverEntry.ts b/src/ExtendedResizeObserverEntry.ts deleted file mode 100644 index 48a5949..0000000 --- a/src/ExtendedResizeObserverEntry.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { ObservedElement } from './ObservedElement'; - -export interface ExtendedResizeObserverEntry extends ResizeObserverEntry { - target: ObservedElement; -} diff --git a/src/Observe.js b/src/Observe.js deleted file mode 100644 index bf2d090..0000000 --- a/src/Observe.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { useResizeObserver } from '@envato/react-resize-observer-hook'; -import { Context } from './Context'; -import { useBreakpoints } from './useBreakpoints'; - -const Observe = ({ - box = undefined, - breakpoints = {}, - render -}) => { - const observeOptions = box ? { box } : {}; - - const [ref, observedEntry] = useResizeObserver(observeOptions); - const [widthMatch, heightMatch] = useBreakpoints(breakpoints, observedEntry); - - const renderOptions = { - observedElementProps: { ref }, - widthMatch, - heightMatch - }; - - return ( - - {render(renderOptions)} - - ); -}; - -export { Observe }; diff --git a/src/Observe.tsx b/src/Observe.tsx new file mode 100644 index 0000000..36b5c22 --- /dev/null +++ b/src/Observe.tsx @@ -0,0 +1,51 @@ +import { ReactNode } from 'react'; +import { ObservedElement, useResizeObserver } from '@envato/react-resize-observer-hook'; +import { Context } from './Context'; +import { UseBreakpointsOptions, useBreakpoints } from './useBreakpoints'; + +interface ObservedElementProps { + ref: React.RefCallback; +} + +interface RenderOptions { + observedElementProps: ObservedElementProps; + widthMatch: any; + heightMatch: any; +} + +interface BaseObserveProps { + box?: ResizeObserverBoxOptions; + breakpoints: UseBreakpointsOptions; +} + +interface ObserveViaRenderProp extends BaseObserveProps { + children?: never; + render: (args: RenderOptions) => ReactNode; +} + +interface ObserveViaChildrenProp extends BaseObserveProps { + children: (args: RenderOptions) => ReactNode; + render?: never; +} + +/* Allow use of `render` or `children` props, but not both. */ +type ObserveProps = ObserveViaRenderProp | ObserveViaChildrenProp; + +export const Observe = ({ box = undefined, breakpoints, children, render }: ObserveProps): JSX.Element => { + const observeOptions = box ? { box } : {}; + + const [ref, observedEntry] = useResizeObserver(observeOptions); + const { widthMatch, heightMatch } = useBreakpoints(breakpoints, observedEntry); + + const renderOptions: RenderOptions = { + observedElementProps: { ref }, + widthMatch, + heightMatch + }; + + return ( + + {children ? children(renderOptions) : render ? render(renderOptions) : null} + + ); +}; diff --git a/src/ObservedElement.ts b/src/ObservedElement.ts deleted file mode 100644 index a2011ef..0000000 --- a/src/ObservedElement.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry'; - -export interface ObservedElement extends Element { - onResizeObservation?: (resizeObserverEntry: ExtendedResizeObserverEntry) => void; -} diff --git a/src/findBreakpoint.ts b/src/findBreakpoint.ts index 59d86bb..6a75928 100644 --- a/src/findBreakpoint.ts +++ b/src/findBreakpoint.ts @@ -1,17 +1,29 @@ +import { Breakpoints } from './Breakpoints'; + /** - * Find the breakpoint matching the given entry size. - * @argument {Object} breakpoints - Map of sizes with their return values. - * @argument {Number} entrySize - Size of entry to check breakpoints against. - * @returns {*} Value of `breakpoints` at matching breakpoint. + * From a `breakpoints` object, find the first key that is equal to or greater than + * `observedSize` and return the corresponding value. + * + * @example + * const widths = { + * 0: 'mobile', + * 769: 'laptop', + * 1025: 'desktop', + * 1441: 'widescreen' + * }; + * + * const matchedValue = findBreakpoint(widths, 1280); + * // matchedValue => 'desktop' + * */ -export const findBreakpoint = (breakpoints, entrySize) => { - let breakpoint; - const sizes = Object.keys(breakpoints); +export const findBreakpoint = (breakpoints: Breakpoints, observedSize: number): any => { + let breakpoint: number | undefined; + const sizes = Object.keys(breakpoints).map(key => Number(key)); for (const next of sizes) { - if (entrySize < Number(next)) break; + if (observedSize < next) break; breakpoint = next; } - return breakpoints[breakpoint]; + return typeof breakpoint === 'undefined' ? undefined : breakpoints[breakpoint]; }; diff --git a/src/useBreakpoints.ts b/src/useBreakpoints.ts index c96190b..d658d59 100644 --- a/src/useBreakpoints.ts +++ b/src/useBreakpoints.ts @@ -1,72 +1,122 @@ import { useState, useEffect } from 'react'; +import { ExtendedResizeObserverEntry } from '@envato/react-resize-observer-hook'; +import { Breakpoints } from './Breakpoints'; import { useResizeObserverEntry } from './useResizeObserverEntry'; import { findBreakpoint } from './findBreakpoint'; +interface BaseOptions { + box?: ResizeObserverBoxOptions; + fragment?: number; +} + +interface HeightsOptions extends BaseOptions { + widths?: Breakpoints; + heights: Breakpoints; +} + +interface WidthsOptions extends BaseOptions { + widths: Breakpoints; + heights?: Breakpoints; +} + +export type UseBreakpointsOptions = HeightsOptions | WidthsOptions; + +export type UseBreakpointsResult = [any, any] & { widthMatch: any; heightMatch: any }; + const boxOptions = { - BORDER_BOX: 'border-box', // https://caniuse.com/#feat=mdn-api_resizeobserverentry_borderboxsize - CONTENT_BOX: 'content-box', // https://caniuse.com/#feat=mdn-api_resizeobserverentry_contentboxsize - DEVICE_PIXEL_CONTENT_BOX: 'device-pixel-content-box' // https://github.com/w3c/csswg-drafts/issues/3554 + BORDER_BOX: 'border-box', // https://caniuse.com/mdn-api_resizeobserverentry_borderboxsize + CONTENT_BOX: 'content-box', // https://caniuse.com/mdn-api_resizeobserverentry_contentboxsize + DEVICE_PIXEL_CONTENT_BOX: 'device-pixel-content-box' // https://github.com/w3c/csswg-drafts/pull/4476 }; /** - * Returns mapped value for width and height of nearest Context. - * @argument {Object} options - * @argument {Object} [options.widths] - Map of minWidths and their return values. - * @argument {Object} [options.heights] - Map of minHeights and their return values. - * @argument {String} [options.box] - Name of element's box you want to match your breakpoints against. One of ['border-box', 'content-box', 'device-pixel-content-box']. - * @argument {Number} [options.fragment] - Index of fragment to return from array of observed box fragments. - * @argument {ResizeObserverEntry} [injectResizeObserverEntry] - Explicitly set the ResizeObserverEntry to use instead of fetching it from Context. - * @returns {Array} Array of matching width value, and matching height value. + * See API Docs: {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#usebreakpoints|useBreakpoints} + * + * Pass in an options object with at least one of the following properties: + * - `widths`: objects with width breakpoints as keys and anything as their values; + * - `heights`: objects with height breakpoints as keys and anything as their values. + * + * You may also pass the following additional optional properties: + * - `box`: the box to measure on the observed element, one of `'border-box' | 'content-box' | 'device-pixel-content-box'`; + * - `fragment`: index of {@link https://github.com/w3c/csswg-drafts/pull/4529|fragment} of the observed element to measure (default `0`). + * + * Optionally pass in a `ResizeObserverEntry` as the second argument to override fetching one from context. + * + * @example + * const options = { + * widths: { + * 0: 'mobile', + * 769: 'tablet', + * 1025: 'desktop' + * } + * }; + + * const { widthMatch: label } = useBreakpoints(options); + + * return ( + *
+ * This element is currently within the {label} range. + *
+ * ); */ -const useBreakpoints = ( +export const useBreakpoints = ( { widths = {}, heights = {}, box = undefined, fragment = 0 // https://github.com/w3c/csswg-drafts/pull/4529 - }, - injectResizeObserverEntry = undefined -) => { + }: UseBreakpointsOptions, + injectResizeObserverEntry?: ExtendedResizeObserverEntry | null +): UseBreakpointsResult => { const resizeObserverEntry = useResizeObserverEntry(injectResizeObserverEntry); - const [width, setWidth] = useState(undefined); - const [height, setHeight] = useState(undefined); + const [widthMatch, setWidthMatch] = useState(undefined); + const [heightMatch, setHeightMatch] = useState(undefined); - let entryBox, entryWidth, entryHeight; + let boxSize: ResizeObserverSize, + inlineSize: number = 0, + blockSize: number = 0; if (resizeObserverEntry) { switch (box) { case boxOptions.BORDER_BOX: - entryBox = resizeObserverEntry.borderBoxSize[fragment] || resizeObserverEntry.borderBoxSize; - entryWidth = entryBox.inlineSize; - entryHeight = entryBox.blockSize; + boxSize = resizeObserverEntry.borderBoxSize[fragment] || resizeObserverEntry.borderBoxSize; + inlineSize = boxSize.inlineSize; + blockSize = boxSize.blockSize; break; case boxOptions.CONTENT_BOX: - entryBox = resizeObserverEntry.contentBoxSize[fragment] || resizeObserverEntry.contentBoxSize; - entryWidth = entryBox.inlineSize; - entryHeight = entryBox.blockSize; + boxSize = resizeObserverEntry.contentBoxSize[fragment] || resizeObserverEntry.contentBoxSize; + inlineSize = boxSize.inlineSize; + blockSize = boxSize.blockSize; break; case boxOptions.DEVICE_PIXEL_CONTENT_BOX: - entryBox = - resizeObserverEntry.devicePixelContentBoxSize[fragment] || resizeObserverEntry.devicePixelContentBoxSize; - entryWidth = entryBox.inlineSize; - entryHeight = entryBox.blockSize; + if (typeof resizeObserverEntry.devicePixelContentBoxSize !== 'undefined') { + boxSize = + resizeObserverEntry.devicePixelContentBoxSize[fragment] || resizeObserverEntry.devicePixelContentBoxSize; + inlineSize = boxSize.inlineSize; + blockSize = boxSize.blockSize; + } else { + throw Error('resizeObserverEntry does not contain devicePixelContentBoxSize.'); + } break; default: - entryWidth = resizeObserverEntry.contentRect.width; - entryHeight = resizeObserverEntry.contentRect.height; + inlineSize = resizeObserverEntry.contentRect.width; + blockSize = resizeObserverEntry.contentRect.height; } } useEffect(() => { - setWidth(findBreakpoint(widths, entryWidth)); - setHeight(findBreakpoint(heights, entryHeight)); - }, [widths, entryWidth, heights, entryHeight]); + setWidthMatch(findBreakpoint(widths, inlineSize)); + setHeightMatch(findBreakpoint(heights, blockSize)); + }, [widths, inlineSize, heights, blockSize]); - return [width, height]; -}; + /* Support both array and object destructuring. */ + const result = [widthMatch, heightMatch] as UseBreakpointsResult; + result.widthMatch = widthMatch; + result.heightMatch = heightMatch; -export { useBreakpoints }; + return result; +}; diff --git a/src/useResizeObserverEntry.ts b/src/useResizeObserverEntry.ts index 395a6fc..7dbb46c 100644 --- a/src/useResizeObserverEntry.ts +++ b/src/useResizeObserverEntry.ts @@ -1,6 +1,6 @@ import { useContext } from 'react'; +import { ExtendedResizeObserverEntry } from '@envato/react-resize-observer-hook'; import { Context } from './Context'; -import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry'; /** * See API Docs: {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#useresizeobserverentry|useResizeObserverEntry} @@ -32,7 +32,7 @@ import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry'; * const someResizeObserverEntry = useResizeObserverEntry(); */ export const useResizeObserverEntry = ( - injectResizeObserverEntry?: ExtendedResizeObserverEntry + injectResizeObserverEntry?: ExtendedResizeObserverEntry | null ): ExtendedResizeObserverEntry | null => { const resizeObserverEntry = useContext(Context); From 916220d2823da94a84ea451a967ae21b411912a5 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Wed, 3 Mar 2021 15:50:31 +0800 Subject: [PATCH 21/32] Update boxSize documentation --- README.md | 4 +- docs/api.md | 163 +++++++++++++++++++++++------------------------ docs/boxSizes.md | 71 +++++++++++++++++++++ docs/boxes.md | 78 ----------------------- 4 files changed, 154 insertions(+), 162 deletions(-) create mode 100644 docs/boxSizes.md delete mode 100644 docs/boxes.md diff --git a/README.md b/README.md index 1426155..cda4aa6 100644 --- a/README.md +++ b/README.md @@ -98,9 +98,9 @@ However, `` supports additional props allowing you to observe **and** c See the [API Docs](/docs/api.md) for reference guides and usage examples. -# Observing vs. Consuming boxes +# Observing vs. Consuming `ResizeObserverSize` -There is an important distinction between the `box` you observe and the `box` you consume for triggering breakpoints. See [Observing vs. Consuming Boxes](/docs/boxes.md) for more information. +There is an important distinction between the `ResizeObserverSize` you observe and the `ResizeObserverSize` you consume for triggering breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](/docs/boxSizes.md) for more information. # Server-Side Rendering diff --git a/docs/api.md b/docs/api.md index facb6c7..79b755a 100644 --- a/docs/api.md +++ b/docs/api.md @@ -2,15 +2,15 @@ Common usage: -* [``](#provider) -* [``](#observe) -* [`useBreakpoints()`](#usebreakpoints) +- [``](#provider) +- [``](#observe) +- [`useBreakpoints()`](#usebreakpoints) Advanced usage: -* [``](#context) -* [`useResizeObserver()`](#useresizeobserver) -* [`useResizeObserverEntry()`](#useresizeobserverentry) +- [``](#context) +- [`useResizeObserver()`](#useresizeobserver) +- [`useResizeObserverEntry()`](#useresizeobserverentry) --- @@ -33,6 +33,7 @@ Your app must include a ``. It creates a React context with a `ResizeO ponyfill — optional ResizeObserver constructor ⚠️ **Caution** — `Provider` instantiates a `window.ResizeObserver` by default. [`window.ResizeObserver` currently has weak browser support](https://caniuse.com/#feat=mdn-api_resizeobserver_resizeobserver). You may pass a `ResizeObserver` constructor to `Provider` to use instead of `window.ResizeObserver`. I recommend [ponyfilling](https://ponyfill.com) using [`@juggle/resize-observer`](https://github.com/juggle/resize-observer). You can also [monkey patch](https://en.wikipedia.org/wiki/Monkey_patch) `window.ResizeObserver` and use `Provider` without the `ponyfill` prop. + ## Usage @@ -41,11 +42,7 @@ Your app must include a ``. It creates a React context with a `ResizeO import { Provider as ResizeObserverProvider } from '@envato/react-breakpoints'; import { ResizeObserver } from '@juggle/resize-observer'; // Ponyfill -const App = () => ( - - ... - -); +const App = () => ...; ``` --- @@ -54,7 +51,7 @@ const App = () => ( You can observe size changes of an element's `box` by rendering it through ``'s `render` prop. Your render function receives a `observedElementProps` argument that you spread onto the DOM element you wish to observe. It also receives `widthMatch` and `heightMatch` arguments which match the values you assigned via ``'s `breakpoints` prop. -⚠️ **Important** — There is an important distinction between the `box` you observe and the `box` you consume for triggering breakpoints. See [Observing vs. Consuming Boxes](boxes.md) for more information. +⚠️ **Important** — There is an important distinction between the `ResizeObserverSize` you observe and the `ResizeObserverSize` you consume for triggering breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. ## Reference guide @@ -115,19 +112,21 @@ Depending on your implementation of `ResizeObserver`, the [internal `ResizeObser This library supports observing the following `box` options (but your browser may not!): -* [`'border-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_borderboxsize) -* [`'content-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_contentboxsize) -* [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/issues/3554) +- [`'border-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_borderboxsize) +- [`'content-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_contentboxsize) +- [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/issues/3554) If `box` is left `undefined` or set to any value other than those listed above, `` will default to using information from `ResizeObserverEntry.contentRect`. -⚠️ **Important** — There is an important distinction between the `box` you observe and the `box` you consume for triggering breakpoints. See [Observing vs. Consuming Boxes](boxes.md) for more information. +⚠️ **Important** — There is an important distinction between the `ResizeObserverSize` you observe and the `ResizeObserverSize` you consume for triggering breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. +
breakpoints — optional Object This prop accepts an object with a shape identical to the `options` object of [`useBreakpoints()`](#usebreakpoints). +
@@ -135,14 +134,15 @@ This prop accepts an object with a shape identical to the `options` object of [` A render prop that takes a function with three arguments. -* `observedElementProps` — Object +- `observedElementProps` — Object Using the `...` spread operator, you apply this object to the DOM element you want to observe. -* `widthMatch` — any +- `widthMatch` — any If you passed an object with a `widths` property to the `breakpoints` prop, this argument contains the currently matching width breakpoint value. -* `heightMatch` — any +- `heightMatch` — any If you passed an object with a `heights` property to the `breakpoints` prop, this argument contains the currently matching height breakpoint value. Your function should at least return some JSX with `{...observedElementProps}` applied to a DOM element. +
## Usage @@ -171,13 +171,10 @@ const MyObservingComponent = () => ( <> {/* this element is given a class based on a child sidebar's width */}
- {/* this sidebar is observed */} {/* this component receives one of the `heights` strings defined above based on the sidebar's height */} @@ -214,33 +211,35 @@ const [ /* second element is the matched value from `heights` */ heightValue -] = useBreakpoints({ - /* (optional) target a box size of the observed element to match widths and heights on */ - box: 'border-box', - - /* (optional) must be specified if `heights` is not specified */ - widths: { - /* keys must be numbers and are treated like CSS's @media (min-width) */ - 0: 'small', /* value can be of any type */ - 769: 'medium', - 1025: 'large' - }, +] = useBreakpoints( + { + /* (optional) target a box size of the observed element to match widths and heights on */ + box: 'border-box', - /* (optional) must be specified if `widths` is not specified */ - heights: { - /* keys must be numbers and are treated like CSS's @media (min-height) */ - 0: 'SD', /* value can be of any type */ - 720: 'HD Ready', - 1080: 'Full HD', - 2160: '4K' + /* (optional) must be specified if `heights` is not specified */ + widths: { + /* keys must be numbers and are treated like CSS's @media (min-width) */ + 0: 'small' /* value can be of any type */, + 769: 'medium', + 1025: 'large' + }, + + /* (optional) must be specified if `widths` is not specified */ + heights: { + /* keys must be numbers and are treated like CSS's @media (min-height) */ + 0: 'SD' /* value can be of any type */, + 720: 'HD Ready', + 1080: 'Full HD', + 2160: '4K' + }, + + /* (optional) the box size fragment index to match widths and heights on (default 0) */ + fragment: 0 }, - /* (optional) the box size fragment index to match widths and heights on (default 0) */ - fragment: 0 -}, - -/* (optional) a ResizeObserverEntry to use instead of the one provided on context */ -injectResizeObserverEntry); + /* (optional) a ResizeObserverEntry to use instead of the one provided on context */ + injectResizeObserverEntry +); ```
@@ -250,13 +249,14 @@ Depending on your implementation of `ResizeObserver`, the [internal `ResizeObser This library supports the following `box` options (but your browser may not!): -* [`'border-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_borderboxsize) -* [`'content-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_contentboxsize) -* [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/issues/3554) +- [`'border-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_borderboxsize) +- [`'content-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_contentboxsize) +- [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/issues/3554) If `box` is left `undefined` or set to any value other than those listed above, `useBreakpoints()` will default to using information from `ResizeObserverEntry.contentRect`. -⚠️ **Important** — There is an important distinction between the `box` you observe and the `box` you consume for triggering breakpoints. See [Observing vs. Consuming Boxes](boxes.md) for more information. +⚠️ **Important** — There is an important distinction between the `ResizeObserverSize` you observe and the `ResizeObserverSize` you consume for triggering breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. +
@@ -313,6 +313,7 @@ const [Component] = useBreakpoints({ } }); ``` +
@@ -334,6 +335,7 @@ heights: { ⚠️ **Caution**: If you do not provide `0` as a key for `heights`, you risk receiving `undefined` as a return value. This is intended behaviour, but makes it difficult to distinguish between receiving `undefined` because of a [Server-Side Rendering](server-side-rendering.md) scenario, or because the observed height is less than the next matching height. Values can be of _any_ type, you are not restricted to return `string` values. See example in `widths` section above. +
@@ -342,12 +344,14 @@ Values can be of _any_ type, you are not restricted to return `string` values. S The box sizes are exposed as sequences in order to support elements that have multiple fragments, which occur in multi-column scenarios. You can specify which fragment's size information to use for matching `widths` and `heights` by setting this prop. Defaults to the first fragment. See the [W3C Editor's Draft](https://drafts.csswg.org/resize-observer-1/#resize-observer-entry-interface) for more information about fragments. +
injectResizeObserverEntry — optional ResizeObserverEntry Allows you to force `useBreakpoints()` to use the `ResizeObserverEntry` you pass here in its calculations rather than retrieving the entry that's on the closest [``](#context). +
## Usage @@ -366,11 +370,7 @@ const MyResponsiveComponent = () => { const [label] = useBreakpoints(options); - return ( -
- This element is currently within the {label} range. -
- ); + return
This element is currently within the {label} range.
; }; ``` @@ -389,15 +389,17 @@ const MyResponsiveComponent = () => { ## Usage `parent.js` + ```javascript import { Context } from '@envato/react-breakpoints'; /* children with access to `myResizeObserverEntry` */ - +; ``` `child.js` + ```javascript import { useContext } from 'react'; import { Context } from '@envato/react-breakpoints'; @@ -415,8 +417,9 @@ const MyChildComponent = () => { # `useResizeObserver()` ⚠️ **Advanced usage** — This hook is used internally in [``](#observe) to: -* start and stop observing an element by passing a `ref` to a DOM element; -* bind a standardised callback to all observations, and set the `observedEntry` on a [``](#context). + +- start and stop observing an element by passing a `ref` to a DOM element; +- bind a standardised callback to all observations, and set the `observedEntry` on a [``](#context). This hook takes an optional `options` object argument, which currently only supports a `box` option. @@ -445,11 +448,12 @@ Depending on your implementation of `ResizeObserver`, you may observe one of mul This library supports the following `box` options (but your browser may not!): -* [`'border-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_borderboxsize) -* [`'content-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_contentboxsize) -* [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/issues/3554) +- [`'border-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_borderboxsize) +- [`'content-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_contentboxsize) +- [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/issues/3554) + +⚠️ **Important** — There is an important distinction between the `ResizeObserverSize` you observe and the `ResizeObserverSize` you consume for triggering breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. -⚠️ **Important** — There is an important distinction between the `box` you observe and the `box` you consume for triggering breakpoints. See [Observing vs. Consuming Boxes](boxes.md) for more information. ## Usage @@ -481,7 +485,7 @@ const MyObservedComponent = () => {
This is an observed element
); -} +}; ``` ⚠️ **Hint** — This is for when you really need advanced behaviour. This is completely abstracted away for your convenience by [``](#observe). @@ -504,22 +508,17 @@ const resizeObserverEntry = useResizeObserverEntry( const fragmentIndex = 0; /* retrieve width and height from legacy `contentRect` property */ -const { - contentRectWidth: width, - contentRectHeight: height -} = resizeObserverEntry.contentRect; +const { contentRectWidth: width, contentRectHeight: height } = resizeObserverEntry.contentRect; /* retrieve width and height from `borderBoxSize` property of first fragment */ -const { - borderBoxSizeWidth: inlineSize, - borderBoxSizeHeight: blockSize -} = resizeObserverEntry.borderBoxSize[fragmentIndex]; +const { borderBoxSizeWidth: inlineSize, borderBoxSizeHeight: blockSize } = resizeObserverEntry.borderBoxSize[ + fragmentIndex +]; /* retrieve width and height from `contentBoxSize` property of first fragment */ -const { - contentBoxSizeWidth: inlineSize, - contentBoxSizeHeight: blockSize -} = resizeObserverEntry.contentBoxSize[fragmentIndex]; +const { contentBoxSizeWidth: inlineSize, contentBoxSizeHeight: blockSize } = resizeObserverEntry.contentBoxSize[ + fragmentIndex +]; /* retrieve width and height from `devicePixelContentBoxSize` property of first fragment */ const { @@ -540,13 +539,15 @@ const MyResponsiveComponent = () => { * Falsey if element from Context has not been observed yet. * This is mostly the case when doing Server-Side Rendering. */ - if (!resizeObserverEntry) { /* ... */ }; + if (!resizeObserverEntry) { + /* ... */ + } const { inlineSize: width, blockSize: height } = resizeObserverEntry.borderBoxSize[0]; let className; - if (width >= 1025 ) { + if (width >= 1025) { className = 'large'; } else if (width >= 769) { className = 'medium'; @@ -555,11 +556,9 @@ const MyResponsiveComponent = () => { } return ( -
- {/* this element's className changes based on its observed border-box width */} -
- ) -} +
{/* this element's className changes based on its observed border-box width */}
+ ); +}; ``` ⚠️ **Hint** — You probably don't need this hook, because [`useBreakpoints()`](#usebreakpoints) abstracts the above implementation away for your convenience. You'll likely only need this hook if you need a property from `ResizeObserverEntry` which is not `contentRect` or one of `box`'s options. diff --git a/docs/boxSizes.md b/docs/boxSizes.md new file mode 100644 index 0000000..2d01c60 --- /dev/null +++ b/docs/boxSizes.md @@ -0,0 +1,71 @@ +# Observing vs. Consuming `ResizeObserverSize` + +There is an important distinction between the `boxSize` you observe and the `boxSize` you consume for triggering breakpoints. + +> You can observe a `boxSize` on an element, and then respond to changes in **another** `boxSize` of that same element. + +There might be cases where observing the same box you're matching breakpoints against is not desirable. **This package supports observing and consuming different boxes on the same element.** + +
+What's happening under the hood? + +Consider this example code and chain of events: + +```jsx +import { Observe, useBreakpoints } from '@envato/react-breakpoints'; + +const MyObservedElementComponent = () => ( + /* observed changes to `contentBoxSize` will update Observe's context */ + + {({ observedElementProps }) => ( +
+ +
+ )} + +); + +const ChildComponent = () => { + const options = { + widths: { + 0: 'foo', + 1000: 'bar' + }, + + /* above widths are matched against `devicePixelContentBoxSize` */ + box: 'device-pixel-content-box' + }; + + const { widthMatch: label } = useBreakpoints(options); + + return
This element is currently within the {label} range.
; +}; +``` + +1. You start observing an element's `contentBoxSize`. `` puts a `ResizeObserverEntry` on its context. **This object contains all box sizes of the observed element.** +1. `` is aware of **all of the element's box sizes** via ``'s context. You decide you want to apply your breakpoints using the `devicePixelContentBoxSize` information. +1. A moment later, the element's `contentBoxSize` changes. +1. `` updates the `ResizeObserverEntry` on its context, and `` responds accordingly. +1. Then, the element's `borderBoxSize` changes, but **not** its `contentBoxSize` (for example, when a CSS animation adds additional padding to an element). +1. Because `borderBoxSize` is not observed, ``'s context does not get updated, and therefore `` does not update. +1. Finally, after a while longer, the element's `devicePixelContentBoxSize` changes. +1. Even though `` uses this box's size, `` is not observing changes on this box, and does not update its context to inform ``. +
+ +# ⚠️ Important + +A change in one given `boxSize` does not always mean that the element's other `boxSize`s have also changed. + +Consider the [CSS box model](https://en.wikipedia.org/wiki/CSS_box_model#/media/File:Boxmodell-detail.png): + +![CSS Box Model](css-box-model.png) + +When padding or border increase in thickness, the content's size will remain unaffected. If you are observing changes in `contentBoxSize`, those padding and border changes **will not trigger any updates**. + +Similarly, let's say you have the following element: + +```html +
...
+``` + +Then you change that element's `padding` to `0`. If you are observing changes in this element's `borderBoxSize`, this padding change **will not trigger any updates** because the `borderBoxSize` did not change. diff --git a/docs/boxes.md b/docs/boxes.md deleted file mode 100644 index d411505..0000000 --- a/docs/boxes.md +++ /dev/null @@ -1,78 +0,0 @@ -# Observing vs. Consuming boxes - -There is an important distinction between the `box` you observe and the `box` you consume for triggering breakpoints. - -> You can observe a box on an element, and then respond to changes in **another** box of that element. - -There might be cases where observing the same box you're matching breakpoints against is not desirable. **This package supports observing and consuming different boxes on the same element.** - -
-What's happening under the hood? - - -Consider this example code and chain of events: - -```javascript -import { Observe, useBreakpoints } from '@envato/react-breakpoints'; - -const MyObservedElementComponent = () => ( - ( -
- -
- )} - - /* changes to this box's size will update Observe's context */ - box='content-box' - /> -); - -const ChildComponent = () => { - const [label] = useBreakpoints({ - widths: { - 0: 'foo', - 1000: 'bar' - }, - - /* above widths are matches against this box */ - box: 'device-pixel-content-box' - }); - - return ( -
- This element is currently within the {label} range. -
- ); -}; -``` - -1. You start observing an element's `content-box` size. `` puts a `ResizeObserverEntry` on its context. **This object contains all box sizes of the observed element.** -1. `` is aware of **all of the element's box sizes** via ``'s context. You decide you want to apply your breakpoints using the `device-pixel-content-box` information. -1. A moment later, the element's `content-box` size changes. -1. `` updates the `ResizeObserverEntry` on its context, and `` responds accordingly. -1. Then, the element's `border-box` size changes, but **not** its `content-box`. -1. Because `border-box` is not observed, ``'s context does not get updated, and therefore `` does not update. -1. Finally, after a while longer, the element's `device-pixel-content-box` size changes. -1. Even though `` uses this box's size, `` is not observing changes on this box, and does not update its context to inform ``. -
- -# ⚠️ Important - -A change in the size of one given `box` does not always mean that the element's other `box`es have also changed size. - -Consider the [CSS box model](https://en.wikipedia.org/wiki/CSS_box_model#/media/File:Boxmodell-detail.png): - -![CSS Box Model](css-box-model.png) - -When padding or border increase in thickness, the content's size will remain unaffected. If you are observing changes in `content-box`'s size, those padding and border changes **will not trigger any updates**. - -Similarly, let's say you have the following element: - -```html -
- ... -
-``` - -Then you change that element's `padding` to `0`. If you are observing changes in this element's `border-box` size, this padding change **will not trigger any updates** because the `border-box` did not change size. From c17abb2a36c4b7c279bac8bfd2ebc33186fd14a5 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Wed, 3 Mar 2021 18:06:51 +0800 Subject: [PATCH 22/32] Update boxSize documentation --- README.md | 2 +- docs/api.md | 8 ++++---- docs/boxSizes.md | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index cda4aa6..0cabdaa 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,7 @@ See the [API Docs](/docs/api.md) for reference guides and usage examples. # Observing vs. Consuming `ResizeObserverSize` -There is an important distinction between the `ResizeObserverSize` you observe and the `ResizeObserverSize` you consume for triggering breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](/docs/boxSizes.md) for more information. +There is an important distinction between the `boxSize` you observe and the `boxSize` you pass to your breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](/docs/boxSizes.md) for more information. # Server-Side Rendering diff --git a/docs/api.md b/docs/api.md index 79b755a..62c651f 100644 --- a/docs/api.md +++ b/docs/api.md @@ -51,7 +51,7 @@ const App = () => ...`'s `render` prop. Your render function receives a `observedElementProps` argument that you spread onto the DOM element you wish to observe. It also receives `widthMatch` and `heightMatch` arguments which match the values you assigned via ``'s `breakpoints` prop. -⚠️ **Important** — There is an important distinction between the `ResizeObserverSize` you observe and the `ResizeObserverSize` you consume for triggering breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. +⚠️ **Important** — There is an important distinction between the `boxSize` you observe and the `boxSize` you pass to your breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. ## Reference guide @@ -118,7 +118,7 @@ This library supports observing the following `box` options (but your browser ma If `box` is left `undefined` or set to any value other than those listed above, `` will default to using information from `ResizeObserverEntry.contentRect`. -⚠️ **Important** — There is an important distinction between the `ResizeObserverSize` you observe and the `ResizeObserverSize` you consume for triggering breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. +⚠️ **Important** — There is an important distinction between the `boxSize` you observe and the `boxSize` you pass to your breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. @@ -255,7 +255,7 @@ This library supports the following `box` options (but your browser may not!): If `box` is left `undefined` or set to any value other than those listed above, `useBreakpoints()` will default to using information from `ResizeObserverEntry.contentRect`. -⚠️ **Important** — There is an important distinction between the `ResizeObserverSize` you observe and the `ResizeObserverSize` you consume for triggering breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. +⚠️ **Important** — There is an important distinction between the `boxSize` you observe and the `boxSize` you pass to your breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. @@ -452,7 +452,7 @@ This library supports the following `box` options (but your browser may not!): - [`'content-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_contentboxsize) - [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/issues/3554) -⚠️ **Important** — There is an important distinction between the `ResizeObserverSize` you observe and the `ResizeObserverSize` you consume for triggering breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. +⚠️ **Important** — There is an important distinction between the `boxSize` you observe and the `boxSize` you pass to your breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. diff --git a/docs/boxSizes.md b/docs/boxSizes.md index 2d01c60..effa7fe 100644 --- a/docs/boxSizes.md +++ b/docs/boxSizes.md @@ -1,6 +1,6 @@ # Observing vs. Consuming `ResizeObserverSize` -There is an important distinction between the `boxSize` you observe and the `boxSize` you consume for triggering breakpoints. +There is an important distinction between the `boxSize` you observe and the `boxSize` you pass to your breakpoints. > You can observe a `boxSize` on an element, and then respond to changes in **another** `boxSize` of that same element. From b9d8696af569eeb76f2c4aad0945650f927a307e Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Wed, 3 Mar 2021 18:10:55 +0800 Subject: [PATCH 23/32] breakpoints is an optional prop --- src/Observe.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Observe.tsx b/src/Observe.tsx index 36b5c22..51f6248 100644 --- a/src/Observe.tsx +++ b/src/Observe.tsx @@ -15,7 +15,7 @@ interface RenderOptions { interface BaseObserveProps { box?: ResizeObserverBoxOptions; - breakpoints: UseBreakpointsOptions; + breakpoints?: UseBreakpointsOptions; } interface ObserveViaRenderProp extends BaseObserveProps { From 6b9c02256ab5af176756a1d0708de59433fc635a Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Wed, 3 Mar 2021 18:11:36 +0800 Subject: [PATCH 24/32] Revert "breakpoints is an optional prop" This reverts commit b9d8696af569eeb76f2c4aad0945650f927a307e. --- src/Observe.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Observe.tsx b/src/Observe.tsx index 51f6248..36b5c22 100644 --- a/src/Observe.tsx +++ b/src/Observe.tsx @@ -15,7 +15,7 @@ interface RenderOptions { interface BaseObserveProps { box?: ResizeObserverBoxOptions; - breakpoints?: UseBreakpointsOptions; + breakpoints: UseBreakpointsOptions; } interface ObserveViaRenderProp extends BaseObserveProps { From 8a62f7a9e0dc5b07addd14689a131e6c750030b3 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Wed, 3 Mar 2021 18:12:32 +0800 Subject: [PATCH 25/32] breakpoints is an optional prop --- src/Observe.tsx | 2 +- src/useBreakpoints.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Observe.tsx b/src/Observe.tsx index 36b5c22..51f6248 100644 --- a/src/Observe.tsx +++ b/src/Observe.tsx @@ -15,7 +15,7 @@ interface RenderOptions { interface BaseObserveProps { box?: ResizeObserverBoxOptions; - breakpoints: UseBreakpointsOptions; + breakpoints?: UseBreakpointsOptions; } interface ObserveViaRenderProp extends BaseObserveProps { diff --git a/src/useBreakpoints.ts b/src/useBreakpoints.ts index d658d59..a2b2403 100644 --- a/src/useBreakpoints.ts +++ b/src/useBreakpoints.ts @@ -65,7 +65,7 @@ export const useBreakpoints = ( heights = {}, box = undefined, fragment = 0 // https://github.com/w3c/csswg-drafts/pull/4529 - }: UseBreakpointsOptions, + }: UseBreakpointsOptions = { widths: {}, heights: {} }, injectResizeObserverEntry?: ExtendedResizeObserverEntry | null ): UseBreakpointsResult => { const resizeObserverEntry = useResizeObserverEntry(injectResizeObserverEntry); From 04032f3f827cadfa9ce561c6f36a2922cee5dac6 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Wed, 3 Mar 2021 21:22:09 +0800 Subject: [PATCH 26/32] Optimise re-rendering --- src/useBreakpoints.ts | 116 +++++++++++++++++++++++------------------- 1 file changed, 65 insertions(+), 51 deletions(-) diff --git a/src/useBreakpoints.ts b/src/useBreakpoints.ts index a2b2403..53744df 100644 --- a/src/useBreakpoints.ts +++ b/src/useBreakpoints.ts @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useRef, useState, useEffect, useMemo } from 'react'; import { ExtendedResizeObserverEntry } from '@envato/react-resize-observer-hook'; import { Breakpoints } from './Breakpoints'; import { useResizeObserverEntry } from './useResizeObserverEntry'; @@ -21,7 +21,9 @@ interface WidthsOptions extends BaseOptions { export type UseBreakpointsOptions = HeightsOptions | WidthsOptions; -export type UseBreakpointsResult = [any, any] & { widthMatch: any; heightMatch: any }; +type Matches = { widthMatch: any; heightMatch: any }; + +export type UseBreakpointsResult = [any, any] & Matches; const boxOptions = { BORDER_BOX: 'border-box', // https://caniuse.com/mdn-api_resizeobserverentry_borderboxsize @@ -41,7 +43,7 @@ const boxOptions = { * - `fragment`: index of {@link https://github.com/w3c/csswg-drafts/pull/4529|fragment} of the observed element to measure (default `0`). * * Optionally pass in a `ResizeObserverEntry` as the second argument to override fetching one from context. - * + * * @example * const options = { * widths: { @@ -50,9 +52,9 @@ const boxOptions = { * 1025: 'desktop' * } * }; - + * * const { widthMatch: label } = useBreakpoints(options); - + * * return ( *
* This element is currently within the {label} range. @@ -67,56 +69,68 @@ export const useBreakpoints = ( fragment = 0 // https://github.com/w3c/csswg-drafts/pull/4529 }: UseBreakpointsOptions = { widths: {}, heights: {} }, injectResizeObserverEntry?: ExtendedResizeObserverEntry | null -): UseBreakpointsResult => { +) => { + const isMounted = useRef(true); + const matches = useRef({ widthMatch: undefined, heightMatch: undefined }); + const [changedMatches, changeMatches] = useState({ widthMatch: undefined, heightMatch: undefined }); + + /* Prevent further observation state changes if component is no longer mounted. */ + useEffect(() => { + return () => { + isMounted.current = false; + }; + }, []); + + const result = useMemo(() => { + /* Support both array and object destructuring. */ + const result = [changedMatches.widthMatch, changedMatches.heightMatch] as UseBreakpointsResult; + result.widthMatch = changedMatches.widthMatch; + result.heightMatch = changedMatches.heightMatch; + + return result; + }, [changedMatches.widthMatch, changedMatches.heightMatch]); + const resizeObserverEntry = useResizeObserverEntry(injectResizeObserverEntry); - const [widthMatch, setWidthMatch] = useState(undefined); - const [heightMatch, setHeightMatch] = useState(undefined); - - let boxSize: ResizeObserverSize, - inlineSize: number = 0, - blockSize: number = 0; - - if (resizeObserverEntry) { - switch (box) { - case boxOptions.BORDER_BOX: - boxSize = resizeObserverEntry.borderBoxSize[fragment] || resizeObserverEntry.borderBoxSize; - inlineSize = boxSize.inlineSize; - blockSize = boxSize.blockSize; - break; - - case boxOptions.CONTENT_BOX: - boxSize = resizeObserverEntry.contentBoxSize[fragment] || resizeObserverEntry.contentBoxSize; - inlineSize = boxSize.inlineSize; - blockSize = boxSize.blockSize; - break; - - case boxOptions.DEVICE_PIXEL_CONTENT_BOX: - if (typeof resizeObserverEntry.devicePixelContentBoxSize !== 'undefined') { - boxSize = - resizeObserverEntry.devicePixelContentBoxSize[fragment] || resizeObserverEntry.devicePixelContentBoxSize; - inlineSize = boxSize.inlineSize; - blockSize = boxSize.blockSize; - } else { - throw Error('resizeObserverEntry does not contain devicePixelContentBoxSize.'); - } - break; - - default: - inlineSize = resizeObserverEntry.contentRect.width; - blockSize = resizeObserverEntry.contentRect.height; - } + if (!resizeObserverEntry) return result; + + let observedBoxSize: ResizeObserverSize; + + switch (box) { + case boxOptions.BORDER_BOX: + observedBoxSize = resizeObserverEntry.borderBoxSize[fragment] || resizeObserverEntry.borderBoxSize; + break; + + case boxOptions.CONTENT_BOX: + observedBoxSize = resizeObserverEntry.contentBoxSize[fragment] || resizeObserverEntry.contentBoxSize; + break; + + case boxOptions.DEVICE_PIXEL_CONTENT_BOX: + if (typeof resizeObserverEntry.devicePixelContentBoxSize !== 'undefined') { + observedBoxSize = + resizeObserverEntry.devicePixelContentBoxSize[fragment] || resizeObserverEntry.devicePixelContentBoxSize; + } else { + throw Error('resizeObserverEntry does not contain devicePixelContentBoxSize.'); + } + break; + + default: + observedBoxSize = { + inlineSize: resizeObserverEntry.contentRect.width, + blockSize: resizeObserverEntry.contentRect.height + }; } - useEffect(() => { - setWidthMatch(findBreakpoint(widths, inlineSize)); - setHeightMatch(findBreakpoint(heights, blockSize)); - }, [widths, inlineSize, heights, blockSize]); - - /* Support both array and object destructuring. */ - const result = [widthMatch, heightMatch] as UseBreakpointsResult; - result.widthMatch = widthMatch; - result.heightMatch = heightMatch; + const widthMatch = findBreakpoint(widths, observedBoxSize.inlineSize); + const heightMatch = findBreakpoint(heights, observedBoxSize.blockSize); + + if (widthMatch !== matches.current.widthMatch || heightMatch !== matches.current.heightMatch) { + matches.current = { widthMatch, heightMatch }; + + if (isMounted.current) { + changeMatches({ widthMatch, heightMatch }); + } + } return result; }; From 1e60c468d731b1d179c885276880079233b82d97 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Wed, 3 Mar 2021 21:40:16 +0800 Subject: [PATCH 27/32] Short-circuit if ResizeObserverEntry is undefined --- src/findBreakpoint.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/findBreakpoint.ts b/src/findBreakpoint.ts index 6a75928..43f67d8 100644 --- a/src/findBreakpoint.ts +++ b/src/findBreakpoint.ts @@ -16,7 +16,9 @@ import { Breakpoints } from './Breakpoints'; * // matchedValue => 'desktop' * */ -export const findBreakpoint = (breakpoints: Breakpoints, observedSize: number): any => { +export const findBreakpoint = (breakpoints: Breakpoints, observedSize?: number): any => { + if (typeof observedSize === 'undefined') return undefined; + let breakpoint: number | undefined; const sizes = Object.keys(breakpoints).map(key => Number(key)); From f81d245434030e34863fe08c9cd2156d5107e321 Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Wed, 3 Mar 2021 21:51:05 +0800 Subject: [PATCH 28/32] Add note about Cumulative Layout Shift --- docs/server-side-rendering.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/server-side-rendering.md b/docs/server-side-rendering.md index b2124fa..16b75ef 100644 --- a/docs/server-side-rendering.md +++ b/docs/server-side-rendering.md @@ -1,8 +1,16 @@ # Server-Side Rendering -The values returned from [`useBreakpoints()`](api.md#usebreakpoints) default to `undefined`, which is the case when: +The `widthMatch` and `heightMatch` values returned from [``](api.md#observe) and [`useBreakpoints()`](api.md#usebreakpoints) default to `undefined`. This is the case when: -* the observed min-size isn't specified in your [`options`](api.md#widths); -* rendering a component server-side. +- the observed min-size isn't specified in your [`options`](api.md#usebreakpoints); +- rendering a component server-side. -You can use this `undefined` value to display your component differently for SSR purposes. How you do it is up to you (loading component, default CSS styles, placeholder content, `null`, etc). +You can use this `undefined` value to display your component differently for SSR purposes. How you do it is up to you (loading spinner component, default CSS styles, placeholder content, `null`, etc). + +# ⚠️ Beware of [Cumulative Layout Shift](https://web.dev/cls/) + +Remember, this is a JavaScript solution to a CSS problem. If you use React Breakpoints to apply different styles to your component based on their size, and you are rendering some HTML server-side, you may end up applying styles to your components that do not match their computed styles once JavaScript loads on the client. This means you could introduce a flash of incorrectly styled content (FOISC?). + +Unfortunately, there is no easy way around it: this is the nature of the beast. If you care deeply about [CLS](https://web.dev/cls/) (and for public pages you probably should!), you need to keep this side-effect in mind. + +However, React Breakpoints truly shines when you're building highly-responsive dashboards with graphs and tables, each individually responsive and aware of their own sizes. Dashboards for signed-in users generally don't suffer from SEO penalties like CLS, because they are not indexed by search engines. From fef2a3285c6169497f7f2f731ca0729870bbd72c Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Wed, 3 Mar 2021 21:54:31 +0800 Subject: [PATCH 29/32] Move Context --- docs/api.md | 82 +++++++++++++++++++++++++++-------------------------- 1 file changed, 42 insertions(+), 40 deletions(-) diff --git a/docs/api.md b/docs/api.md index 62c651f..5d68737 100644 --- a/docs/api.md +++ b/docs/api.md @@ -4,13 +4,13 @@ Common usage: - [``](#provider) - [``](#observe) -- [`useBreakpoints()`](#usebreakpoints) Advanced usage: -- [``](#context) +- [`useBreakpoints()`](#usebreakpoints) - [`useResizeObserver()`](#useresizeobserver) - [`useResizeObserverEntry()`](#useresizeobserverentry) +- [``](#context) --- @@ -193,6 +193,8 @@ const MyObservingComponent = () => ( # `useBreakpoints()` +⚠️ **Advanced usage** — This hook is used internally in [``](#observe) to enable the use of the optional `breakpoints` prop. + Components inside an "[``](#observe) scope" have access to its observations. The observed element's sizes are available on a [context](#context) via the `useBreakpoints()` hook. The hook takes an `options` object as its first argument, which must include a `widths` or `heights` key (or both) with an object as its value. That object must have a shape of numbers as keys, and a value of any type. The value you set here is what will eventually be returned by `useBreakpoints()`. @@ -376,44 +378,6 @@ const MyResponsiveComponent = () => { --- -# `` - -⚠️ **Advanced usage** — This React context is used internally by [`useBreakpoints()`](#usebreakpoints). You may use this context with `React.useContext()` to access the information stored in the context provider, which is typically a `ResizeObserverEntry` set internally by [``](#observe). - -## Reference guide - -```javascript - -``` - -## Usage - -`parent.js` - -```javascript -import { Context } from '@envato/react-breakpoints'; - - - /* children with access to `myResizeObserverEntry` */ -; -``` - -`child.js` - -```javascript -import { useContext } from 'react'; -import { Context } from '@envato/react-breakpoints'; - -const MyChildComponent = () => { - const myResizeObserverEntry = useContext(Context); - /* ... */ -}; -``` - -⚠️ **Hint** — Instead of manually implementing the `child.js` portion as above, you may want to use [`useResizeObserverEntry()`](#useresizeobserverentry) instead. - ---- - # `useResizeObserver()` ⚠️ **Advanced usage** — This hook is used internally in [``](#observe) to: @@ -562,3 +526,41 @@ const MyResponsiveComponent = () => { ``` ⚠️ **Hint** — You probably don't need this hook, because [`useBreakpoints()`](#usebreakpoints) abstracts the above implementation away for your convenience. You'll likely only need this hook if you need a property from `ResizeObserverEntry` which is not `contentRect` or one of `box`'s options. + +--- + +# `` + +⚠️ **Internal usage, you probably don't need this!** — This React context is used internally by [`useBreakpoints()`](#usebreakpoints). You may use this context with `React.useContext()` to access the information stored in the context provider, which is typically a `ResizeObserverEntry` set internally by [``](#observe). + +## Reference guide + +```javascript + +``` + +## Usage + +`parent.js` + +```javascript +import { Context } from '@envato/react-breakpoints'; + + + /* children with access to `myResizeObserverEntry` */ +; +``` + +`child.js` + +```javascript +import { useContext } from 'react'; +import { Context } from '@envato/react-breakpoints'; + +const MyChildComponent = () => { + const myResizeObserverEntry = useContext(Context); + /* ... */ +}; +``` + +⚠️ **Hint** — Instead of manually implementing the `child.js` portion as above, you may want to use [`useResizeObserverEntry()`](#useresizeobserverentry) instead. From bea779aaeb07ddd8733213a312e453f1f238b48a Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 5 Mar 2021 11:32:15 +0800 Subject: [PATCH 30/32] Remove non-array ResizeObserverSize, because it's not part of the spec anymore --- src/useBreakpoints.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/useBreakpoints.ts b/src/useBreakpoints.ts index 53744df..41e6c3a 100644 --- a/src/useBreakpoints.ts +++ b/src/useBreakpoints.ts @@ -98,17 +98,16 @@ export const useBreakpoints = ( switch (box) { case boxOptions.BORDER_BOX: - observedBoxSize = resizeObserverEntry.borderBoxSize[fragment] || resizeObserverEntry.borderBoxSize; + observedBoxSize = resizeObserverEntry.borderBoxSize[fragment]; break; case boxOptions.CONTENT_BOX: - observedBoxSize = resizeObserverEntry.contentBoxSize[fragment] || resizeObserverEntry.contentBoxSize; + observedBoxSize = resizeObserverEntry.contentBoxSize[fragment]; break; case boxOptions.DEVICE_PIXEL_CONTENT_BOX: if (typeof resizeObserverEntry.devicePixelContentBoxSize !== 'undefined') { - observedBoxSize = - resizeObserverEntry.devicePixelContentBoxSize[fragment] || resizeObserverEntry.devicePixelContentBoxSize; + observedBoxSize = resizeObserverEntry.devicePixelContentBoxSize[fragment]; } else { throw Error('resizeObserverEntry does not contain devicePixelContentBoxSize.'); } From e7071ce82968dc4793c03a5f7cb29e64a97efabe Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 5 Mar 2021 11:33:02 +0800 Subject: [PATCH 31/32] Upgrade @envato/react-resize-observer-hook --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 12cea54..9b8b792 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "typescript": "^4.2.2" }, "dependencies": { - "@envato/react-resize-observer-hook": "^1.1.3" + "@envato/react-resize-observer-hook": "^1.2.0" }, "eslintConfig": { "extends": "react-app" From 78d626905882698c8369de28fb5634a4e18b9cca Mon Sep 17 00:00:00 2001 From: Marc Dingena Date: Fri, 5 Mar 2021 11:33:18 +0800 Subject: [PATCH 32/32] Update with API changes --- README.md | 73 +++++++++--------- docs/api.md | 211 ++++++++++++++++++++++++++++------------------------ 2 files changed, 146 insertions(+), 138 deletions(-) diff --git a/README.md b/README.md index 0cabdaa..b30311f 100644 --- a/README.md +++ b/README.md @@ -16,25 +16,32 @@ `react-breakpoints` allows you to respond to changes in a DOM element's size. You can change the evaluated logic and rendered output of components based on observed size changes in DOM elements. For example, you can change a dropdown menu to a horizontal list menu based on its parent container's width without using CSS media queries. -## 📦 What's in the box? +# 📦 What's in the box? > No polling. No event listening. No sentinel elements. **Just a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)!** This package provides you with: -- a [``](/docs/api.md#provider) to instantiate the ResizeObserver; -- an [``](/docs/api.md#observe) component to observe changes in a DOM element; -- a [`useBreakpoints()`](/docs/api.md#usebreakpoints) hook to change a component's behaviour based on the observed size information in the nearest parent ``. +- a [``](/docs/api.md#provider) to instantiate the `ResizeObserver`; +- an [``](/docs/api.md#observe) component to observe changes in a DOM element and respond to them. For power users this package also provides: -- a [``](/docs/api.md#context) on which you can assign a `ResizeObserverEntry` value to update any nested components that are using `useBreakpoints()`; +- a [`useBreakpoints()`](/docs/api.md#usebreakpoints) hook to change a component's behaviour based on the observed size information in the nearest parent ``; - a [`useResizeObserver()`](/docs/api.md#useresizeobserver) hook to connect a DOM element in your component to the instantiated `ResizeObserver` on ``; - a [`useResizeObserverEntry()`](/docs/api.md#useresizeobserverentry) hook to retrieve the `ResizeObserverEntry` put on the nearest ``. This is what `useBreakpoints()` uses under the hood. -# 🚧 Developer status +# 🐉 Be careful using this package when… -Several projects within Envato are currently using this package, giving me confidence that the API is clear and the code adds value. The package is still in an early stage, but exposure to "the wild" will help reveal more edge-cases and hopefully make the package more robust overall. +- …all you want is the low-level API stuff. See [@envato/react-resize-observer-hook](https://github.com/envato/react-resize-observer-hook). +- …you want _real_ CSS Element Queries. At the end of the day, this is still a JS solution. +- …you care deeply about [Cumulative Layout Shift](https://web.dev/cls/) on public pages. **Keep reading though, this package may still be of value to you!** + +# 🏅 This package is _really good_ at… + +- …following the latest [draft spec](https://drafts.csswg.org/resize-observer/), giving you access to cutting edge features like `devicePixelContentBoxSize` and [per-fragment](https://drafts.csswg.org/css-break-3/) observation. +- …performantly observing many elements with a single `ResizeObserver` instance. None of that "a new `ResizeObserver` instance per observed element" bloat that [some](https://github.com/ZeeCoder/use-resize-observer/blob/314b29c33cfcd2c51b8854b775b0a2a5c325d94a/src/index.ts#L151-L157) alternative packages implement. +- …building highly-responsive private dashboards 📊. One key thing this package (and every other `ResizeObserver` package out there) can contribute negatively to is [Cumulative Layout Shifting](https://web.dev/cls/). At Envato we've had great success using this package on pages that are only visible after signing in, like our Author Dashboard. We've had less success using it in places where search engines can go, on components with responsive styles that changed the layout vertically. One of our company values is "Tell It Like It Is", so we're letting you know to **be mindful of when and how you use `ResizeObserver` for responsive layouts.** # ⚡️ Quick start @@ -44,9 +51,9 @@ Follow these **minimum required steps** to get started with `react-breakpoints`. npm install @envato/react-breakpoints ``` -## Set up the provider +## Wrap your component tree with the provider -```javascript +```jsx import { Provider as ResizeObserverProvider } from '@envato/react-breakpoints'; const App = () => ...; @@ -54,33 +61,12 @@ const App = () => ...; ⚠️ **Caution** — You may need to pass some props to `` to increase browser support. Please refer to the [API Docs](/docs/api.md#provider). -## Observe an element - -Everything you render through `` becomes aware of the size of the element that is given `{...observedElementProps}`. This is called an "Observe Scope". +## Observe an element and use the results -```javascript +```jsx import { Observe } from '@envato/react-breakpoints'; -const MyObservingComponent = () => ( - ( - - )} - /> -); -``` - -## Consume the observation - -Components that are rendered within the "Observe Scope" can consume observation results via `useBreakpoints()`: - -```javascript -import { useBreakpoints } from '@envato/react-breakpoints'; - -const MyResponsiveComponent = () => { - const options = { +const exampleBreakpoints = { widths: { 0: 'mobile', 769: 'tablet', @@ -88,20 +74,29 @@ const MyResponsiveComponent = () => { } }; - const [label] = useBreakpoints(options); - - return
This element is currently within the {label} range.
; -}; +export const ExampleComponent = () => ( + + {({ observedElementProps, widthMatch = 'ssr' }) => ( +
+
+
+ )} + +); ``` -However, `` supports additional props allowing you to observe **and** consume observations — no `useBreakpoints()` required! - See the [API Docs](/docs/api.md) for reference guides and usage examples. # Observing vs. Consuming `ResizeObserverSize` There is an important distinction between the `boxSize` you observe and the `boxSize` you pass to your breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](/docs/boxSizes.md) for more information. +# Re-rendering + +Using [`useResizeObserver()`](/docs/api.md#useresizeobserver), [`useResizeObserverEntry()`](/docs/api.md#useresizeobserverentry) or [`useBreakpoints()`](/docs/api.md#usebreakpoints) in your components causes them to re-render **every time a resize is observed**. + +In some cases, you may want to optimise this. If you only want to re-render your components when the returned breakpoint values actually change, use `React.useMemo` or `React.memo`. + # Server-Side Rendering See [Server-Side Rendering](/docs/server-side-rendering.md) for more information. diff --git a/docs/api.md b/docs/api.md index 5d68737..e15a8ef 100644 --- a/docs/api.md +++ b/docs/api.md @@ -16,11 +16,11 @@ Advanced usage: # `` -Your app must include a ``. It creates a React context with a `ResizeObserver` instance as its value. This allows components nested under `` to be observed for changes in size. +Your app must include a ``. It creates a React context provider with a `ResizeObserver` instance as its value. This allows components nested under `` to be observed for size changes. ## Reference guide -```javascript +```jsx `. It creates a React context with a `ResizeO ```
-ponyfill — optional ResizeObserver constructor +ponyfill — optional typeof ResizeObserver -⚠️ **Caution** — `Provider` instantiates a `window.ResizeObserver` by default. [`window.ResizeObserver` currently has weak browser support](https://caniuse.com/#feat=mdn-api_resizeobserver_resizeobserver). You may pass a `ResizeObserver` constructor to `Provider` to use instead of `window.ResizeObserver`. I recommend [ponyfilling](https://ponyfill.com) using [`@juggle/resize-observer`](https://github.com/juggle/resize-observer). You can also [monkey patch](https://en.wikipedia.org/wiki/Monkey_patch) `window.ResizeObserver` and use `Provider` without the `ponyfill` prop. +⚠️ **Caution** — `Provider` instantiates a `window.ResizeObserver` by default. [`window.ResizeObserver` currently has fair browser support](https://caniuse.com/mdn-api_resizeobserver_resizeobserver). You may pass a `ResizeObserver` constructor to `Provider` to use instead of `window.ResizeObserver`. I recommend [ponyfilling](https://ponyfill.com) using [`@juggle/resize-observer`](https://github.com/juggle/resize-observer). You can also [monkey patch](https://en.wikipedia.org/wiki/Monkey_patch) `window.ResizeObserver` and use `Provider` without the `ponyfill` prop.
## Usage -```javascript +```jsx import { Provider as ResizeObserverProvider } from '@envato/react-breakpoints'; -import { ResizeObserver } from '@juggle/resize-observer'; // Ponyfill +import { ResizeObserver } from '@juggle/resize-observer'; // optional ponyfill const App = () => ...; ``` @@ -49,24 +49,25 @@ const App = () => ...` -You can observe size changes of an element's `box` by rendering it through ``'s `render` prop. Your render function receives a `observedElementProps` argument that you spread onto the DOM element you wish to observe. It also receives `widthMatch` and `heightMatch` arguments which match the values you assigned via ``'s `breakpoints` prop. +You can observe changes of an element's `boxSize` by rendering it through ``'s `children`. Your child function receives a `observedElementProps` argument that you spread onto the DOM element you wish to observe. If you passed the `breakpoints` prop, the child function also receives `widthMatch` and `heightMatch` arguments which match the values you assigned to this prop. ⚠️ **Important** — There is an important distinction between the `boxSize` you observe and the `boxSize` you pass to your breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. ## Reference guide -```javascript +```jsx + {/* pass a child function */} + { ({ /* object of props to spread onto the element you wish to observe */ observedElementProps, @@ -94,7 +95,7 @@ You can observe size changes of an element's `box` by rendering it through ` - {/* component without useBreakpoints() can still be told about breakpoints */} + {/* component without useBreakpoints() can still be told about breakpoint values */} ) } -/> + ```
-box — optional String +box — optional ResizeObserverBoxOptions Depending on your implementation of `ResizeObserver`, the [internal `ResizeObserverEntry`](#useresizeobserverentry) can contain size information about multiple "boxes" of the observed element. @@ -114,7 +115,7 @@ This library supports observing the following `box` options (but your browser ma - [`'border-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_borderboxsize) - [`'content-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_contentboxsize) -- [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/issues/3554) +- [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/pull/4476) If `box` is left `undefined` or set to any value other than those listed above, `` will default to using information from `ResizeObserverEntry.contentRect`. @@ -123,14 +124,52 @@ If `box` is left `undefined` or set to any value other than those listed above,
-breakpoints — optional Object +breakpoints — optional object This prop accepts an object with a shape identical to the `options` object of [`useBreakpoints()`](#usebreakpoints).
-render — Function +children — (args: RenderOptions) => ReactNode + +```javascript +interface RenderOptions { + observedElementProps: { + ref: React.RefCallback + }; + widthMatch: any; + heightMatch: any; +} +``` + +The children prop takes a function with three arguments. + +- `observedElementProps` — object + Using the `...` spread operator, you apply this object to the DOM element you want to observe. +- `widthMatch` — any + If you passed an object with a `widths` property to the `breakpoints` prop, this argument contains the currently matching width breakpoint value. +- `heightMatch` — any + If you passed an object with a `heights` property to the `breakpoints` prop, this argument contains the currently matching height breakpoint value. + +Your function should at least return some JSX with `{...observedElementProps}` applied to a DOM element. + +
+ +
+render — (args: RenderOptions) => ReactNode + +If you prefer a render prop over `children`, you may use `render`. Note that if both provided, `` will use `children`. + +```javascript +interface RenderOptions { + observedElementProps: { + ref: React.RefCallback + }; + widthMatch: any; + heightMatch: any; +} +``` A render prop that takes a function with three arguments. @@ -147,7 +186,7 @@ Your function should at least return some JSX with `{...observedElementProps}` a ## Usage -```javascript +```jsx import { Observe } from '@envato/react-breakpoints'; const MyObservingComponent = () => ( @@ -167,7 +206,8 @@ const MyObservingComponent = () => ( 2160: '4K' } }} - render={({ observedElementProps, widthMatch, heightMatch }) => ( + > + {({ observedElementProps, widthMatch, heightMatch }) => ( <> {/* this element is given a class based on a child sidebar's width */}
@@ -181,11 +221,11 @@ const MyObservingComponent = () => (
- {/* this component also uses `useBreakpoints()` to adapt to the sidebar's size, but from outside the sidebar */} + {/* this component also uses useBreakpoints() to adapt to the sidebar's size, but from outside the sidebar */} )} - /> + ); ``` @@ -193,36 +233,36 @@ const MyObservingComponent = () => ( # `useBreakpoints()` -⚠️ **Advanced usage** — This hook is used internally in [``](#observe) to enable the use of the optional `breakpoints` prop. +⚠️ **Advanced usage** — This hook is used internally in [``](#observe) to enable the use of its optional `breakpoints` prop. Components inside an "[``](#observe) scope" have access to its observations. The observed element's sizes are available on a [context](#context) via the `useBreakpoints()` hook. The hook takes an `options` object as its first argument, which must include a `widths` or `heights` key (or both) with an object as its value. That object must have a shape of numbers as keys, and a value of any type. The value you set here is what will eventually be returned by `useBreakpoints()`. -Optionally, you can include a `box` property, which — depending on your implementation of `ResizeObserver` — can target different observable "boxes" of an element. By default, the legacy `contentRect` property will be used by `useBreakpoints()`. +Optionally, you can include a `box` property, which — depending on your implementation of `ResizeObserver` — can target different observable "boxes" of an element. By default, the legacy `contentRect` property will be used by `useBreakpoints()`, but I recommend you use one of the spec's new `ResizeObserverSize` box sizes. -The hook takes an optional `ResizeObserverEntry` as its second argument. **If you pass one, `useBreakpoints()` will not fetch it from the [context](#context), so use caution!** +The hook takes an optional `ResizeObserverEntry` as its second argument. **You probably don't need this, but know that if you pass one, `useBreakpoints()` will not fetch the entry from the [context](#context), so use caution!** ## Reference guide ```javascript /* returns an array of matched breakpoint values */ -const [ - /* first element is the matched value from `widths` */ - widthValue, +const { + /* matched value from `options.widths` */ + widthMatch, - /* second element is the matched value from `heights` */ - heightValue -] = useBreakpoints( + /* matched value from `options.heights` */ + heightMatch +} = useBreakpoints( { - /* (optional) target a box size of the observed element to match widths and heights on */ + /* (optional) the boxSize of the observed element to pass to the breakpoint matching logic */ box: 'border-box', /* (optional) must be specified if `heights` is not specified */ widths: { /* keys must be numbers and are treated like CSS's @media (min-width) */ 0: 'small' /* value can be of any type */, - 769: 'medium', + 769: 'medium' /* keys are evaluated in order */, 1025: 'large' }, @@ -230,12 +270,12 @@ const [ heights: { /* keys must be numbers and are treated like CSS's @media (min-height) */ 0: 'SD' /* value can be of any type */, - 720: 'HD Ready', + 720: 'HD Ready' /* keys are evaluated in order */, 1080: 'Full HD', 2160: '4K' }, - /* (optional) the box size fragment index to match widths and heights on (default 0) */ + /* (optional) the boxSize fragment index to match widths and heights on (default 0) */ fragment: 0 }, @@ -245,7 +285,7 @@ const [ ```
-options.box — optional String +options.box — optional ResizeObserverBoxOptions Depending on your implementation of `ResizeObserver`, the [internal `ResizeObserverEntry`](#useresizeobserverentry) can contain size information about multiple "boxes" of the observed element. @@ -253,7 +293,7 @@ This library supports the following `box` options (but your browser may not!): - [`'border-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_borderboxsize) - [`'content-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_contentboxsize) -- [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/issues/3554) +- [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/pull/4476) If `box` is left `undefined` or set to any value other than those listed above, `useBreakpoints()` will default to using information from `ResizeObserverEntry.contentRect`. @@ -262,9 +302,9 @@ If `box` is left `undefined` or set to any value other than those listed above,
-options.widths — optional Object +options.widths — optional object -`widths` must be an object with numbers as its keys. The numbers represent the minimum width the `box` must have for that key's value to be returned. The value of the highest matching width will be returned. +`widths` must be an object with numbers as its keys. The numbers represent the minimum width the observed `boxSize.inlineSize` must be for that key's value to be returned. The value of the highest matching width will be returned, as if using multiple CSS `@media (min-width)` queries. For example, when a width of `960` is observed, using the following `widths` object would return `'medium'`: @@ -276,7 +316,7 @@ widths: { } ``` -⚠️ **Caution** — If you do not provide `0` as a key for `widths`, you risk receiving `undefined` as a return value. This is intended behaviour, but makes it difficult to distinguish between receiving `undefined` because of a [Server-Side Rendering](server-side-rendering.md) scenario, or because the observed width is less than the next matching width. +⚠️ **Caution** — If you do not provide `0` as a key for `widths`, you risk receiving `undefined` as a return value. This is intended behaviour, but makes it difficult to distinguish between receiving `undefined` because of a [Server-Side Rendering](server-side-rendering.md) scenario, or because the observed width is less than the lowest defined width. For example, when a width of `360` is observed, using the following `widths` object would return `undefined`: @@ -287,41 +327,14 @@ widths: { } ``` -Values can be of _any_ type, you are not restricted to return `string` values. - -```javascript -// Numbers -const [visibleCarouselItems] = useBreakpoints({ - widths: { - 0: 1, - 769: 3, - 1025: 4 - } -}); - -// Booleans -const [showDropdown] = useBreakpoints({ - widths: { - 0: true, - 961: false - } -}); - -// Components -const [Component] = useBreakpoints({ - widths: { - 0: HamburgerMenu, - 1381: HorizontalMenu - } -}); -``` +Values can be of _any_ type, you are not restricted to return `string` values, and value types can be mixed for different keys.
-options.heights — optional Object +options.heights — optional object -`heights` must be an object with numbers as its keys. The numbers represent the minimum height the `box` must have for that key's value to be returned. The value of the highest matching height will be returned. +`heights` must be an object with numbers as its keys. The numbers represent the minimum height the observed `boxSize.blockSize` must be for that key's value to be returned. The value of the highest matching height will be returned, as if using multiple CSS `@media (min-height)` queries. For example, when a height of `1440` is observed, using the following `heights` object would return `'Full HD'`: @@ -334,14 +347,14 @@ heights: { } ``` -⚠️ **Caution**: If you do not provide `0` as a key for `heights`, you risk receiving `undefined` as a return value. This is intended behaviour, but makes it difficult to distinguish between receiving `undefined` because of a [Server-Side Rendering](server-side-rendering.md) scenario, or because the observed height is less than the next matching height. +⚠️ **Caution**: If you do not provide `0` as a key for `heights`, you risk receiving `undefined` as a return value. This is intended behaviour, but makes it difficult to distinguish between receiving `undefined` because of a [Server-Side Rendering](server-side-rendering.md) scenario, or because the observed height is less than the lowest defined height. -Values can be of _any_ type, you are not restricted to return `string` values. See example in `widths` section above. +Values can be of _any_ type, you are not restricted to return `string` values, and value types can be mixed for different keys.
-options.fragment — optional Number +options.fragment — optional number The box sizes are exposed as sequences in order to support elements that have multiple fragments, which occur in multi-column scenarios. You can specify which fragment's size information to use for matching `widths` and `heights` by setting this prop. Defaults to the first fragment. @@ -352,17 +365,18 @@ See the [W3C Editor's Draft](https://drafts.csswg.org/resize-observer-1/#resize-
injectResizeObserverEntry — optional ResizeObserverEntry -Allows you to force `useBreakpoints()` to use the `ResizeObserverEntry` you pass here in its calculations rather than retrieving the entry that's on the closest [``](#context). +Allows you to force `useBreakpoints()` to use the `ResizeObserverEntry` you pass here in its calculations rather than retrieving the entry that's on the closest [``](#context). Because of the Rules of Hooks, `React.useContext()` will still be called but its returned value is ignored.
## Usage -```javascript +```jsx import { useBreakpoints } from '@envato/react-breakpoints'; const MyResponsiveComponent = () => { const options = { + box: 'border-box', widths: { 0: 'mobile', 769: 'tablet', @@ -370,7 +384,7 @@ const MyResponsiveComponent = () => { } }; - const [label] = useBreakpoints(options); + const { widthMatch: label } = useBreakpoints(options); return
This element is currently within the {label} range.
; }; @@ -391,10 +405,10 @@ This hook takes an optional `options` object argument, which currently only supp ```javascript const [ - /* ref to set on the element you want to observe */ + /* ref callback to set on the element you want to observe */ ref, - /* all of the observed element's box sizes */ + /* all of the observed element's boxSizes */ observedEntry ] = useResizeObserver( /* (optional) options object */ @@ -406,7 +420,7 @@ const [ ```
-options.box — optional String +options.box — optional ResizeObserverBoxOptions Depending on your implementation of `ResizeObserver`, you may observe one of multiple "boxes" of an element to trigger an update of `observedEntry`. By default this option is not set, and the size information of the observed element comes from the legacy `contentRect` property. @@ -414,7 +428,7 @@ This library supports the following `box` options (but your browser may not!): - [`'border-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_borderboxsize) - [`'content-box'`](https://caniuse.com/#feat=mdn-api_resizeobserverentry_contentboxsize) -- [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/issues/3554) +- [`'device-pixel-content-box'`](https://github.com/w3c/csswg-drafts/pull/4476) ⚠️ **Important** — There is an important distinction between the `boxSize` you observe and the `boxSize` you pass to your breakpoints. See [Observing vs. Consuming `ResizeObserverSize`](boxSizes.md) for more information. @@ -422,7 +436,7 @@ This library supports the following `box` options (but your browser may not!): ## Usage -```javascript +```jsx import { useEffect } from 'react'; import { useResizeObserver, Context } from '@envato/react-breakpoints'; @@ -452,7 +466,7 @@ const MyObservedComponent = () => { }; ``` -⚠️ **Hint** — This is for when you really need advanced behaviour. This is completely abstracted away for your convenience by [``](#observe). +⚠️ **Hint** — This is for when you really need advanced behaviour, such as calculating logic based on the absolute width and height values rather than a few breakpoint values. The latter is completely abstracted away for your convenience by [``](#observe). --- @@ -469,38 +483,33 @@ const resizeObserverEntry = useResizeObserverEntry( /* (optional) a ResizeObserverEntry to use instead of the one provided on context */ injectResizeObserverEntry ); -const fragmentIndex = 0; /* retrieve width and height from legacy `contentRect` property */ const { contentRectWidth: width, contentRectHeight: height } = resizeObserverEntry.contentRect; /* retrieve width and height from `borderBoxSize` property of first fragment */ -const { borderBoxSizeWidth: inlineSize, borderBoxSizeHeight: blockSize } = resizeObserverEntry.borderBoxSize[ - fragmentIndex -]; +const { borderBoxSizeWidth: inlineSize, borderBoxSizeHeight: blockSize } = resizeObserverEntry.borderBoxSize[0]; /* retrieve width and height from `contentBoxSize` property of first fragment */ -const { contentBoxSizeWidth: inlineSize, contentBoxSizeHeight: blockSize } = resizeObserverEntry.contentBoxSize[ - fragmentIndex -]; +const { contentBoxSizeWidth: inlineSize, contentBoxSizeHeight: blockSize } = resizeObserverEntry.contentBoxSize[0]; /* retrieve width and height from `devicePixelContentBoxSize` property of first fragment */ const { - devicePixelContentBoxSizeWidth: inlineSize, - devicePixelContentBoxSizeHeight: blockSize -} = resizeObserverEntry.devicePixelContentBoxSize[fragmentIndex]; + inlineSize: devicePixelContentBoxSizeWidth, + blockSize: devicePixelContentBoxSizeHeight +} = resizeObserverEntry.devicePixelContentBoxSize[0]; ``` ## Usage -```javascript +```jsx import { useResizeObserverEntry } from '@envato/react-breakpoints'; const MyResponsiveComponent = () => { const resizeObserverEntry = useResizeObserverEntry(); /** - * Falsey if element from Context has not been observed yet. + * `null` if element from Context has not been observed yet. * This is mostly the case when doing Server-Side Rendering. */ if (!resizeObserverEntry) { @@ -520,12 +529,16 @@ const MyResponsiveComponent = () => { } return ( -
{/* this element's className changes based on its observed border-box width */}
+ <> + {/* this element's className changes based on its observed border-box width */} + {/* CAUTION - beware of creating a circular dependency by changing the observed sizes within your classnames! */} +
I'm being observed!
+ ); }; ``` -⚠️ **Hint** — You probably don't need this hook, because [`useBreakpoints()`](#usebreakpoints) abstracts the above implementation away for your convenience. You'll likely only need this hook if you need a property from `ResizeObserverEntry` which is not `contentRect` or one of `box`'s options. +⚠️ **Hint** — You probably don't need this hook, because [`useBreakpoints()`](#usebreakpoints) abstracts the above implementation away for your convenience. You'll likely only need this hook if you need a property from `ResizeObserverEntry` which is not `contentRect` or one of the `ResizeObserverBoxOptions`. --- @@ -535,7 +548,7 @@ const MyResponsiveComponent = () => { ## Reference guide -```javascript +```jsx ``` @@ -543,17 +556,17 @@ const MyResponsiveComponent = () => { `parent.js` -```javascript +```jsx import { Context } from '@envato/react-breakpoints'; - /* children with access to `myResizeObserverEntry` */ + {/* children with access to `myResizeObserverEntry` */} ; ``` `child.js` -```javascript +```jsx import { useContext } from 'react'; import { Context } from '@envato/react-breakpoints';