yeet
This commit is contained in:
21
node_modules/use-subscription/LICENSE
generated
vendored
Normal file
21
node_modules/use-subscription/LICENSE
generated
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) Facebook, Inc. and its affiliates.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
132
node_modules/use-subscription/README.md
generated
vendored
Normal file
132
node_modules/use-subscription/README.md
generated
vendored
Normal file
@ -0,0 +1,132 @@
|
||||
# use-subscription
|
||||
|
||||
React hook that safely manages subscriptions in concurrent mode.
|
||||
|
||||
This utility can be used for subscriptions to a single value that are typically only read in one place and may update frequently (e.g. a component that subscribes to a geolocation API to show a dot on a map).
|
||||
|
||||
## When should you NOT use this?
|
||||
|
||||
Most other cases have **better long-term solutions**:
|
||||
* Redux/Flux stores should use the [context API](https://reactjs.org/docs/context.html) instead.
|
||||
* I/O subscriptions (e.g. notifications) that update infrequently should use a mechanism like [`react-cache`](https://github.com/facebook/react/blob/master/packages/react-cache/README.md) instead.
|
||||
* Complex libraries like Relay/Apollo should manage subscriptions manually with the same techniques which this library uses under the hood (as referenced [here](https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3)) in a way that is most optimized for their library usage.
|
||||
|
||||
## Limitations in concurrent mode
|
||||
|
||||
`use-subscription` is safe to use in concurrent mode. However, [it achieves correctness by sometimes de-opting to synchronous mode](https://github.com/facebook/react/issues/13186#issuecomment-403959161), obviating the benefits of concurrent rendering. This is an inherent limitation of storing state outside of React's managed state queue and rendering in response to a change event.
|
||||
|
||||
The effect of de-opting to sync mode is that the main thread may periodically be blocked (in the case of CPU-bound work), and placeholders may appear earlier than desired (in the case of IO-bound work).
|
||||
|
||||
For **full compatibility** with concurrent rendering, including both **time-slicing** and **React Suspense**, the suggested longer-term solution is to move to one of the patterns described in the previous section.
|
||||
|
||||
## What types of subscriptions can this support?
|
||||
|
||||
This abstraction can handle a variety of subscription types, including:
|
||||
* Event dispatchers like `HTMLInputElement`.
|
||||
* Custom pub/sub components like Relay's `FragmentSpecResolver`.
|
||||
* Observable types like RxJS `BehaviorSubject` and `ReplaySubject`. (Types like RxJS `Subject` or `Observable` are not supported, because they provide no way to read the "current" value after it has been emitted.)
|
||||
|
||||
Note that JavaScript promises are also **not supported** because they provide no way to synchronously read the "current" value.
|
||||
|
||||
# Installation
|
||||
|
||||
```sh
|
||||
# Yarn
|
||||
yarn add use-subscription
|
||||
|
||||
# NPM
|
||||
npm install use-subscription
|
||||
```
|
||||
|
||||
# Usage
|
||||
|
||||
To configure a subscription, you must provide two methods: `getCurrentValue` and `subscribe`.
|
||||
|
||||
In order to avoid removing and re-adding subscriptions each time this hook is called, the parameters passed to this hook should be memoized. This can be done by wrapping the entire subscription with `useMemo()`, or by wrapping the individual callbacks with `useCallback()`.
|
||||
|
||||
## Subscribing to event dispatchers
|
||||
|
||||
Below is an example showing how `use-subscription` can be used to subscribe to event dispatchers such as DOM elements.
|
||||
|
||||
```js
|
||||
import React, { useMemo } from "react";
|
||||
import { useSubscription } from "use-subscription";
|
||||
|
||||
// In this example, "input" is an event dispatcher (e.g. an HTMLInputElement)
|
||||
// but it could be anything that emits an event and has a readable current value.
|
||||
function Example({ input }) {
|
||||
|
||||
// Memoize to avoid removing and re-adding subscriptions each time this hook is called.
|
||||
const subscription = useMemo(
|
||||
() => ({
|
||||
getCurrentValue: () => input.value,
|
||||
subscribe: callback => {
|
||||
input.addEventListener("change", callback);
|
||||
return () => input.removeEventListener("change", callback);
|
||||
}
|
||||
}),
|
||||
|
||||
// Re-subscribe any time our input changes
|
||||
// (e.g. we get a new HTMLInputElement prop to subscribe to)
|
||||
[input]
|
||||
);
|
||||
|
||||
// The value returned by this hook reflects the input's current value.
|
||||
// Our component will automatically be re-rendered when that value changes.
|
||||
const value = useSubscription(subscription);
|
||||
|
||||
// Your rendered output goes here ...
|
||||
}
|
||||
```
|
||||
|
||||
## Subscribing to observables
|
||||
|
||||
Below are examples showing how `use-subscription` can be used to subscribe to certain types of observables (e.g. RxJS `BehaviorSubject` and `ReplaySubject`).
|
||||
|
||||
**Note** that it is not possible to support all observable types (e.g. RxJS `Subject` or `Observable`) because some provide no way to read the "current" value after it has been emitted.
|
||||
|
||||
### `BehaviorSubject`
|
||||
```js
|
||||
const subscription = useMemo(
|
||||
() => ({
|
||||
getCurrentValue: () => behaviorSubject.getValue(),
|
||||
subscribe: callback => {
|
||||
const subscription = behaviorSubject.subscribe(callback);
|
||||
return () => subscription.unsubscribe();
|
||||
}
|
||||
}),
|
||||
|
||||
// Re-subscribe any time the behaviorSubject changes
|
||||
[behaviorSubject]
|
||||
);
|
||||
|
||||
const value = useSubscription(subscription);
|
||||
```
|
||||
|
||||
### `ReplaySubject`
|
||||
```js
|
||||
const subscription = useMemo(
|
||||
() => ({
|
||||
getCurrentValue: () => {
|
||||
let currentValue;
|
||||
// ReplaySubject does not have a sync data getter,
|
||||
// So we need to temporarily subscribe to retrieve the most recent value.
|
||||
replaySubject
|
||||
.subscribe(value => {
|
||||
currentValue = value;
|
||||
})
|
||||
.unsubscribe();
|
||||
return currentValue;
|
||||
},
|
||||
subscribe: callback => {
|
||||
const subscription = replaySubject.subscribe(callback);
|
||||
return () => subscription.unsubscribe();
|
||||
}
|
||||
}),
|
||||
|
||||
// Re-subscribe any time the replaySubject changes
|
||||
[replaySubject]
|
||||
);
|
||||
|
||||
const value = useSubscription(subscription);
|
||||
```
|
123
node_modules/use-subscription/cjs/use-subscription.development.js
generated
vendored
Normal file
123
node_modules/use-subscription/cjs/use-subscription.development.js
generated
vendored
Normal file
@ -0,0 +1,123 @@
|
||||
/** @license React vundefined
|
||||
* use-subscription.development.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
if (process.env.NODE_ENV !== "production") {
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var _assign = require('object-assign');
|
||||
var react = require('react');
|
||||
|
||||
//
|
||||
// In order to avoid removing and re-adding subscriptions each time this hook is called,
|
||||
// the parameters passed to this hook should be memoized in some way–
|
||||
// either by wrapping the entire params object with useMemo()
|
||||
// or by wrapping the individual callbacks with useCallback().
|
||||
|
||||
function useSubscription(_ref) {
|
||||
var getCurrentValue = _ref.getCurrentValue,
|
||||
subscribe = _ref.subscribe;
|
||||
|
||||
// Read the current value from our subscription.
|
||||
// When this value changes, we'll schedule an update with React.
|
||||
// It's important to also store the hook params so that we can check for staleness.
|
||||
// (See the comment in checkForUpdates() below for more info.)
|
||||
var _useState = react.useState(function () {
|
||||
return {
|
||||
getCurrentValue: getCurrentValue,
|
||||
subscribe: subscribe,
|
||||
value: getCurrentValue()
|
||||
};
|
||||
}),
|
||||
state = _useState[0],
|
||||
setState = _useState[1];
|
||||
|
||||
var valueToReturn = state.value; // If parameters have changed since our last render, schedule an update with its current value.
|
||||
|
||||
if (state.getCurrentValue !== getCurrentValue || state.subscribe !== subscribe) {
|
||||
// If the subscription has been updated, we'll schedule another update with React.
|
||||
// React will process this update immediately, so the old subscription value won't be committed.
|
||||
// It is still nice to avoid returning a mismatched value though, so let's override the return value.
|
||||
valueToReturn = getCurrentValue();
|
||||
setState({
|
||||
getCurrentValue: getCurrentValue,
|
||||
subscribe: subscribe,
|
||||
value: valueToReturn
|
||||
});
|
||||
} // Display the current value for this hook in React DevTools.
|
||||
|
||||
|
||||
react.useDebugValue(valueToReturn); // It is important not to subscribe while rendering because this can lead to memory leaks.
|
||||
// (Learn more at reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)
|
||||
// Instead, we wait until the commit phase to attach our handler.
|
||||
//
|
||||
// We intentionally use a passive effect (useEffect) rather than a synchronous one (useLayoutEffect)
|
||||
// so that we don't stretch the commit phase.
|
||||
// This also has an added benefit when multiple components are subscribed to the same source:
|
||||
// It allows each of the event handlers to safely schedule work without potentially removing an another handler.
|
||||
// (Learn more at https://codesandbox.io/s/k0yvr5970o)
|
||||
|
||||
react.useEffect(function () {
|
||||
var didUnsubscribe = false;
|
||||
|
||||
var checkForUpdates = function () {
|
||||
// It's possible that this callback will be invoked even after being unsubscribed,
|
||||
// if it's removed as a result of a subscription event/update.
|
||||
// In this case, React will log a DEV warning about an update from an unmounted component.
|
||||
// We can avoid triggering that warning with this check.
|
||||
if (didUnsubscribe) {
|
||||
return;
|
||||
} // We use a state updater function to avoid scheduling work for a stale source.
|
||||
// However it's important to eagerly read the currently value,
|
||||
// so that all scheduled work shares the same value (in the event of multiple subscriptions).
|
||||
// This avoids visual "tearing" when a mutation happens during a (concurrent) render.
|
||||
|
||||
|
||||
var value = getCurrentValue();
|
||||
setState(function (prevState) {
|
||||
// Ignore values from stale sources!
|
||||
// Since we subscribe an unsubscribe in a passive effect,
|
||||
// it's possible that this callback will be invoked for a stale (previous) subscription.
|
||||
// This check avoids scheduling an update for that stale subscription.
|
||||
if (prevState.getCurrentValue !== getCurrentValue || prevState.subscribe !== subscribe) {
|
||||
return prevState;
|
||||
} // Some subscriptions will auto-invoke the handler, even if the value hasn't changed.
|
||||
// If the value hasn't changed, no update is needed.
|
||||
// Return state as-is so React can bail out and avoid an unnecessary render.
|
||||
|
||||
|
||||
if (prevState.value === value) {
|
||||
return prevState;
|
||||
}
|
||||
|
||||
return _assign({}, prevState, {
|
||||
value: value
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var unsubscribe = subscribe(checkForUpdates); // Because we're subscribing in a passive effect,
|
||||
// it's possible that an update has occurred between render and our effect handler.
|
||||
// Check for this and schedule an update if work has occurred.
|
||||
|
||||
checkForUpdates();
|
||||
return function () {
|
||||
didUnsubscribe = true;
|
||||
unsubscribe();
|
||||
};
|
||||
}, [getCurrentValue, subscribe]); // Return the current value for our caller to use while rendering.
|
||||
|
||||
return valueToReturn;
|
||||
}
|
||||
|
||||
exports.useSubscription = useSubscription;
|
||||
})();
|
||||
}
|
10
node_modules/use-subscription/cjs/use-subscription.production.min.js
generated
vendored
Normal file
10
node_modules/use-subscription/cjs/use-subscription.production.min.js
generated
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
/** @license React vundefined
|
||||
* use-subscription.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
'use strict';var e=require("object-assign"),g=require("react");
|
||||
exports.useSubscription=function(a){var c=a.getCurrentValue,d=a.subscribe,b=g.useState(function(){return{getCurrentValue:c,subscribe:d,value:c()}});a=b[0];var f=b[1];b=a.value;if(a.getCurrentValue!==c||a.subscribe!==d)b=c(),f({getCurrentValue:c,subscribe:d,value:b});g.useDebugValue(b);g.useEffect(function(){function b(){if(!a){var b=c();f(function(a){return a.getCurrentValue!==c||a.subscribe!==d||a.value===b?a:e({},a,{value:b})})}}var a=!1,h=d(b);b();return function(){a=!0;h()}},[c,d]);return b};
|
7
node_modules/use-subscription/index.js
generated
vendored
Normal file
7
node_modules/use-subscription/index.js
generated
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
'use strict';
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports = require('./cjs/use-subscription.production.min.js');
|
||||
} else {
|
||||
module.exports = require('./cjs/use-subscription.development.js');
|
||||
}
|
27
node_modules/use-subscription/package.json
generated
vendored
Normal file
27
node_modules/use-subscription/package.json
generated
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "use-subscription",
|
||||
"description": "Reusable hooks",
|
||||
"version": "1.5.1",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/facebook/react.git",
|
||||
"directory": "packages/use-subscription"
|
||||
},
|
||||
"files": [
|
||||
"LICENSE",
|
||||
"README.md",
|
||||
"build-info.json",
|
||||
"index.js",
|
||||
"cjs/"
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"object-assign": "^4.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"rxjs": "^5.5.6"
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user