@harelpls/use-pusher
Version:
A wrapper around pusher-js for easy-as hooks in React.
470 lines (433 loc) • 17.1 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var Pusher = require('pusher-js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Pusher__default = /*#__PURE__*/_interopDefaultLegacy(Pusher);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
var has = Object.prototype.hasOwnProperty;
function find(iter, tar, key) {
for (key of iter.keys()) {
if (dequal(key, tar)) return key;
}
}
function dequal(foo, bar) {
var ctor, len, tmp;
if (foo === bar) return true;
if (foo && bar && (ctor=foo.constructor) === bar.constructor) {
if (ctor === Date) return foo.getTime() === bar.getTime();
if (ctor === RegExp) return foo.toString() === bar.toString();
if (ctor === Array) {
if ((len=foo.length) === bar.length) {
while (len-- && dequal(foo[len], bar[len]));
}
return len === -1;
}
if (ctor === Set) {
if (foo.size !== bar.size) {
return false;
}
for (len of foo) {
tmp = len;
if (tmp && typeof tmp === 'object') {
tmp = find(bar, tmp);
if (!tmp) return false;
}
if (!bar.has(tmp)) return false;
}
return true;
}
if (ctor === Map) {
if (foo.size !== bar.size) {
return false;
}
for (len of foo) {
tmp = len[0];
if (tmp && typeof tmp === 'object') {
tmp = find(bar, tmp);
if (!tmp) return false;
}
if (!dequal(len[1], bar.get(tmp))) {
return false;
}
}
return true;
}
if (ctor === ArrayBuffer) {
foo = new Uint8Array(foo);
bar = new Uint8Array(bar);
} else if (ctor === DataView) {
if ((len=foo.byteLength) === bar.byteLength) {
while (len-- && foo.getInt8(len) === bar.getInt8(len));
}
return len === -1;
}
if (ArrayBuffer.isView(foo)) {
if ((len=foo.byteLength) === bar.byteLength) {
while (len-- && foo[len] === bar[len]);
}
return len === -1;
}
if (!ctor || typeof foo === 'object') {
len = 0;
for (ctor in foo) {
if (has.call(foo, ctor) && ++len && !has.call(bar, ctor)) return false;
if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor])) return false;
}
return Object.keys(bar).length === len;
}
}
return foo !== foo && bar !== bar;
}
// context setup
var PusherContext = React__default['default'].createContext({});
var __PusherContext = PusherContext;
/**
* Provider that creates your pusher instance and provides it to child hooks throughout your app.
* Note, you can pass in value={{}} as a prop if you'd like to override the pusher client passed.
* This is handy when simulating pusher locally, or for testing.
* @param props Config for Pusher client
*/
var CorePusherProvider = function (_a) {
var clientKey = _a.clientKey, cluster = _a.cluster, triggerEndpoint = _a.triggerEndpoint, _b = _a.defer, defer = _b === void 0 ? false : _b, children = _a.children, _PusherRuntime = _a._PusherRuntime, props = __rest(_a, ["clientKey", "cluster", "triggerEndpoint", "defer", "children", "_PusherRuntime"]);
// errors when required props are not passed.
React.useEffect(function () {
if (!clientKey)
console.error("A client key is required for pusher");
if (!cluster)
console.error("A cluster is required for pusher");
}, [clientKey, cluster]);
var config = __assign({ cluster: cluster }, props);
// track config for comparison
var previousConfig = React.useRef(props);
React.useEffect(function () {
previousConfig.current = props;
});
var _c = React.useState(), client = _c[0], setClient = _c[1];
React.useEffect(function () {
// Skip creation of client if deferring, a value prop is passed, or config props are the same.
if (!_PusherRuntime ||
defer ||
props.value ||
(dequal(previousConfig.current, props) && client !== undefined)) {
return;
}
// @ts-ignore
setClient(new _PusherRuntime(clientKey, config));
}, [client, clientKey, props, defer]);
return (React__default['default'].createElement(PusherContext.Provider, __assign({ value: {
client: client,
triggerEndpoint: triggerEndpoint,
}, children: children }, props)));
};
/**
* Provides access to the pusher client instance.
*
* @returns a `MutableRefObject<Pusher|undefined>`. The instance is held by a `useRef()` hook.
* @example
* ```javascript
* const { client } = usePusher();
* client.current.subscribe('my-channel');
* ```
*/
function usePusher() {
var context = React.useContext(__PusherContext);
React.useEffect(function () {
if (!Object.keys(context).length)
console.warn(NOT_IN_CONTEXT_WARNING);
}, [context]);
return context;
}
var NOT_IN_CONTEXT_WARNING = "No Pusher context. Did you forget to wrap your app in a <PusherProvider />?";
/**
* Subscribe to a channel
*
* @param channelName The name of the channel you want to subscribe to.
* @typeparam Type of channel you're subscribing to. Can be one of `Channel` or `PresenceChannel` from `pusher-js`.
* @returns Instance of the channel you just subscribed to.
*
* @example
* ```javascript
* const channel = useChannel("my-channel")
* channel.bind('some-event', () => {})
* ```
*/
var NO_CHANNEL_NAME_WARNING = "No channel name passed to useChannel. No channel has been subscribed to.";
function useChannel(channelName) {
var client = usePusher().client;
var _a = React.useState(), channel = _a[0], setChannel = _a[1];
React.useEffect(function () {
/** Return early if there's no client */
if (!client)
return;
/** Return early and warn if there's no channel */
if (!channelName) {
console.warn(NO_CHANNEL_NAME_WARNING);
return;
}
/** Subscribe to channel and set it in state */
var pusherChannel = client.subscribe(channelName);
setChannel(pusherChannel);
/** Cleanup on unmount/re-render */
return function () { return client === null || client === void 0 ? void 0 : client.unsubscribe(channelName); };
}, [channelName, client]);
/** Return the channel for use. */
return channel;
}
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Use invariant() to assert state which your program assumes to be true.
*
* Provide sprintf-style format (only %s is supported) and arguments
* to provide information about what broke and what you were
* expecting.
*
* The invariant message will be stripped in production, but the invariant
* will remain to ensure logic does not differ in production.
*/
var NODE_ENV = process.env.NODE_ENV;
var invariant = function(condition, format, a, b, c, d, e, f) {
if (NODE_ENV !== 'production') {
if (format === undefined) {
throw new Error('invariant requires an error message argument');
}
}
if (!condition) {
var error;
if (format === undefined) {
error = new Error(
'Minified exception occurred; use the non-minified dev environment ' +
'for the full error message and additional helpful warnings.'
);
} else {
var args = [a, b, c, d, e, f];
var argIndex = 0;
error = new Error(
format.replace(/%s/g, function() { return args[argIndex++]; })
);
error.name = 'Invariant Violation';
}
error.framesToPop = 1; // we don't care about invariant's own frame
throw error;
}
};
var invariant_1 = invariant;
/** Presence channel reducer to keep track of state */
var SET_STATE = "set-state";
var ADD_MEMBER = "add-member";
var REMOVE_MEMBER = "remove-member";
var presenceChannelReducer = function (state, _a) {
var _b;
var type = _a.type, payload = _a.payload;
switch (type) {
/** Generic setState */
case SET_STATE:
return __assign(__assign({}, state), payload);
/** Member added */
case ADD_MEMBER:
var _c = payload, addedMemberId = _c.id, info = _c.info;
return __assign(__assign({}, state), { count: state.count + 1, members: __assign(__assign({}, state.members), (_b = {}, _b[addedMemberId] = info, _b)) });
/** Member removed */
case REMOVE_MEMBER:
var removedMemberId = payload.id;
var members = __assign({}, state.members);
delete members[removedMemberId];
return __assign(__assign({}, state), { count: state.count - 1, members: __assign({}, members) });
}
};
function usePresenceChannel(channelName) {
// errors for missing arguments
if (channelName) {
invariant_1(channelName.includes("presence-"), "Presence channels should use prefix 'presence-' in their name. Use the useChannel hook instead.");
}
/** Store internal channel state */
var _a = React.useReducer(presenceChannelReducer, {
members: {},
me: undefined,
myID: undefined,
count: 0,
}), state = _a[0], dispatch = _a[1];
// bind and unbind member events events on our channel
var channel = useChannel(channelName);
React.useEffect(function () {
if (channel) {
// Get membership info on successful subscription
var handleSubscriptionSuccess_1 = function (members) {
dispatch({
type: SET_STATE,
payload: {
members: members.members,
myID: members.myID,
me: members.me,
count: Object.keys(members.members).length,
},
});
};
// Add member to the members object
var handleAdd_1 = function (member) {
dispatch({
type: ADD_MEMBER,
payload: member,
});
};
// Remove member from the members object
var handleRemove_1 = function (member) {
dispatch({
type: REMOVE_MEMBER,
payload: member,
});
};
// bind to all member addition/removal events
channel.bind("pusher:subscription_succeeded", handleSubscriptionSuccess_1);
channel.bind("pusher:member_added", handleAdd_1);
channel.bind("pusher:member_removed", handleRemove_1);
// cleanup
return function () {
channel.unbind("pusher:subscription_succeeded", handleSubscriptionSuccess_1);
channel.unbind("pusher:member_added", handleAdd_1);
channel.unbind("pusher:member_removed", handleRemove_1);
};
}
// to make typescript happy.
return function () { };
}, [channel]);
return __assign({ channel: channel }, state);
}
/**
* Subscribes to a channel event and registers a callback.
* @param channel Pusher channel to bind to
* @param eventName Name of event to bind to
* @param callback Callback to call on a new event
*/
function useEvent(channel, eventName, callback) {
// error when required arguments aren't passed.
invariant_1(eventName, "Must supply eventName and callback to onEvent");
invariant_1(callback, "Must supply callback to onEvent");
// bind and unbind events whenever the channel, eventName or callback changes.
React.useEffect(function () {
if (channel === undefined) {
return;
}
else
channel.bind(eventName, callback);
return function () {
channel.unbind(eventName, callback);
};
}, [channel, eventName, callback]);
}
/**
*
* @param channel the channel you'd like to trigger clientEvents on. Get this from [[useChannel]] or [[usePresenceChannel]].
* @typeparam TData shape of the data you're sending with the event.
* @returns A memoized trigger function that will perform client events on the channel.
* @example
* ```javascript
* const channel = useChannel('my-channel');
* const trigger = useClientTrigger(channel)
*
* const handleClick = () => trigger('some-client-event', {});
* ```
*/
function useClientTrigger(channel) {
channel &&
invariant_1(channel.name.match(/(private-|presence-)/gi), "Channel provided to useClientTrigger wasn't private or presence channel. Client events only work on these types of channels.");
// memoize trigger so it's not being created every render
var trigger = React.useCallback(function (eventName, data) {
invariant_1(eventName, "Must pass event name to trigger a client event.");
channel && channel.trigger(eventName, data);
}, [channel]);
return trigger;
}
/**
* Hook to provide a trigger function that calls the server defined in `PusherProviderProps.triggerEndpoint` using `fetch`.
* Any `auth?.headers` in the config object will be passed with the `fetch` call.
*
* @param channelName name of channel to call trigger on
* @typeparam TData shape of the data you're sending with the event
*
* @example
* ```typescript
* const trigger = useTrigger<{message: string}>('my-channel');
* trigger('my-event', {message: 'hello'});
* ```
*/
function useTrigger(channelName) {
var _a = usePusher(), client = _a.client, triggerEndpoint = _a.triggerEndpoint;
// you can't use this if you haven't supplied a triggerEndpoint.
invariant_1(triggerEndpoint, "No trigger endpoint specified to <PusherProvider />. Cannot trigger an event.");
// subscribe to the channel we'll be triggering to.
useChannel(channelName);
// memoized trigger function to return
var trigger = React.useCallback(function (eventName, data) {
var _a;
var fetchOptions = {
method: "POST",
body: JSON.stringify({ channelName: channelName, eventName: eventName, data: data })
};
if (client && ((_a = client.config) === null || _a === void 0 ? void 0 : _a.auth)) {
fetchOptions.headers = client.config.auth.headers;
}
else {
console.warn(NO_AUTH_HEADERS_WARNING);
}
return fetch(triggerEndpoint, fetchOptions);
}, [client, triggerEndpoint, channelName]);
return trigger;
}
var NO_AUTH_HEADERS_WARNING = "No auth parameters supplied to <PusherProvider />. Your events will be unauthenticated.";
/** Wrapper around the core PusherProvider that passes in the Pusher lib */
var PusherProvider = function (props) { return (React__default['default'].createElement(CorePusherProvider, __assign({ _PusherRuntime: Pusher__default['default'] }, props))); };
exports.ADD_MEMBER = ADD_MEMBER;
exports.NOT_IN_CONTEXT_WARNING = NOT_IN_CONTEXT_WARNING;
exports.NO_AUTH_HEADERS_WARNING = NO_AUTH_HEADERS_WARNING;
exports.NO_CHANNEL_NAME_WARNING = NO_CHANNEL_NAME_WARNING;
exports.PusherProvider = PusherProvider;
exports.REMOVE_MEMBER = REMOVE_MEMBER;
exports.SET_STATE = SET_STATE;
exports.__PusherContext = __PusherContext;
exports.presenceChannelReducer = presenceChannelReducer;
exports.useChannel = useChannel;
exports.useClientTrigger = useClientTrigger;
exports.useEvent = useEvent;
exports.usePresenceChannel = usePresenceChannel;
exports.usePusher = usePusher;
exports.useTrigger = useTrigger;
//# sourceMappingURL=index.js.map