@harelpls/use-pusher - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

CHANGELOG.md

@@ -7,2 +7,8 @@ ### Changelog
 
+### [v4.0.0](https://github.com/mayteio/use-pusher/compare/v3.2.3...v4.0.0)
+
+> 21 February 2020
+
+- 🚨 breaking change - switch storage of pusher from useRef to useState. This allows apps to react to when the client gets instantiated each time. [`4af67de`](https://github.com/mayteio/use-pusher/commit/4af67de40eed766df66fa19341a562d9642e71cf)
+
 #### [v3.2.3](https://github.com/mayteio/use-pusher/compare/v3.2.2...v3.2.3)
@@ -30,2 +36,6 @@
 
+#### [v3.1.3](https://github.com/mayteio/use-pusher/compare/v3.1.2...v3.1.3)
+
+> 13 February 2020
+
 - udpate docs [`ac90b4d`](https://github.com/mayteio/use-pusher/commit/ac90b4d9cfe4513eaf998c8898f5ba7f1c95c620)
@@ -89,3 +99,3 @@ - 🏷♻️ improved types, refactored hooks for simplicity [`0d77035`](https://github.com/mayteio/use-pusher/commit/0d7703584d6cd6a498c135fe00acb5ea43928654)
 
-- ♻️ improve DX:  `useEvent<T>(data?: T)` [`42bb95a`](https://github.com/mayteio/use-pusher/commit/42bb95a48bb8b42c038166b5b557fea446d84607)
+- ♻️ improve DX: `useEvent<T>(data?: T)` [`42bb95a`](https://github.com/mayteio/use-pusher/commit/42bb95a48bb8b42c038166b5b557fea446d84607)
 
@@ -176,3 +186,3 @@ ### [v2.0.0](https://github.com/mayteio/use-pusher/compare/v1.1.5...v2.0.0)
 
-- remove __tests__ from dist [`3bf4195`](https://github.com/mayteio/use-pusher/commit/3bf4195df85b7f4903fdd0b264e95e2199fdcc51)
+- remove **tests** from dist [`3bf4195`](https://github.com/mayteio/use-pusher/commit/3bf4195df85b7f4903fdd0b264e95e2199fdcc51)
 
@@ -179,0 +189,0 @@ #### [v1.0.4](https://github.com/mayteio/use-pusher/compare/v1.0.3...v1.0.4)

package.json

 {
   "name": "@harelpls/use-pusher",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "A wrapper around pusher-js for easy-as hooks in React.",
@@ -5,0 +5,0 @@ "author": "@mayteio",

README.md

@@ -1,8 +0,8 @@
-# use-pusher
+# `@harelpls/use-pusher`
 
-> Easy as hooks that integrate with the [pusher-js](https://github.com/pusher/pusher-js) library.
+> Easy as [React hooks](https://reactjs.org/docs/hooks-intro.html) that integrate with the [`pusher-js`](https://github.com/pusher/pusher-js) library.
 
 [![NPM](https://img.shields.io/npm/v/use-pusher.svg)](https://www.npmjs.com/package/react-pusher-hooks) ![Typed](https://badgen.net/badge//types/Typescript?icon=typescript)
 
-##### [API Reference/Docs](https://mayteio.github.io/use-pusher/)
+##### [API Reference/Docs](https://use-pusher-docs.netlify.com/)
 
@@ -21,2 +21,3 @@ ## Install
 - [`useTrigger`](#usetrigger)
+- [`useClientTrigger`](#useclienttrigger)
 - [`usePusher`](#usepusher)
@@ -29,20 +30,20 @@
 ```typescript
-import React from 'react';
-import { PusherProvider } from '@harelpls/use-pusher';
+import React from "react";
+import { PusherProvider } from "@harelpls/use-pusher";
 
 const config = {
   // required config props
-  clientKey: 'client-key',
-  cluster: 'ap4',
+  clientKey: "client-key",
+  cluster: "ap4",
 
   // optional if you'd like to trigger events. BYO endpoint.
   // see "Trigger Server" below for more info
-  triggerEndpoint: '/pusher/trigger',
+  triggerEndpoint: "/pusher/trigger",
 
   // required for private/presence channels
   // also sends auth headers to trigger endpoint
-  authEndpoint: '/pusher/auth',
+  authEndpoint: "/pusher/auth",
   auth: {
-    headers: { Authorization: 'Bearer token' },
-  },
+    headers: { Authorization: "Bearer token" }
+  }
 };
@@ -64,3 +65,3 @@
 // returns channel instance.
-const channel = useChannel('channel-name');
+const channel = useChannel("channel-name");
 ```
@@ -98,7 +99,7 @@
   const [message, setMessages] = useState();
-  const channel = useChannel('channel-name');
+  const channel = useChannel("channel-name");
   useEvent(
     channel,
-    'message',
-    ({ data }) => setMessages(messages => [...messages, data]),
+    "message",
+    ({ data }) => setMessages((messages) => [...messages, data]),
     // optional dependencies array. Passed through to useCallback. Defaults to [].
@@ -133,7 +134,7 @@ []
 ```typescript
-import { usePusher } from '@harelpls/use-pusher';
+import { usePusher } from "@harelpls/use-pusher";
 
 const Example = () => {
   const { client } = usePusher();
-  client.log('Look ma, logs!');
+  client.log("Look ma, logs!");
 
@@ -149,9 +150,9 @@ return null;
 ```typescript
-import Pusher from 'pusher';
+import Pusher from "pusher";
 
 const pusher = new Pusher({
-  appId: 'app-id',
-  key: 'client-key',
-  secret: 'mad-secret',
-  cluster: 'ap4',
+  appId: "app-id",
+  key: "client-key",
+  secret: "mad-secret",
+  cluster: "ap4"
 });
@@ -166,2 +167,4 @@
 
+## `useClientTrigger`
+
 > _I don't want a server though_
@@ -172,9 +175,9 @@
 ```typescript
-import { useChannel, useClientTrigger } from '@harelpls/use-pusher';
+import { useChannel, useClientTrigger } from "@harelpls/use-pusher";
 
 const Example = () => {
-  const channel = useChannel('presence-danger-zone');
+  const channel = useChannel("presence-danger-zone");
   const trigger = useClientTrigger(channel);
   const handleClientEvent = () => {
-    trigger('Pew pew');
+    trigger("Pew pew");
   };
@@ -194,13 +197,13 @@
 
-Testing emitted events with jest can be achieved using `jest.mock` and `react-testing-library` (or `enzyme`, though your tests should reflect what the user should see **NOT** how the component handles events internally):
+Testing emitted events with jest can be achieved using `jest.mock` and `@testing-library/react` (or `enzyme`, though your tests should reflect what the user should see **NOT** how the component handles events internally):
 
 ```typescript
 // Example.tsx
-import React from 'react';
-import { useChannel, useEvent } from '@harelpls/use-pusher';
+import React from "react";
+import { useChannel, useEvent } from "@harelpls/use-pusher";
 
 const Example = () => {
   const [title, setTitle] = useState();
-  const channel = useChannel('my-channel');
-  useEvent(channel, 'title', ({ data }) => setTitle(data));
+  const channel = useChannel("my-channel");
+  useEvent(channel, "title", ({ data }) => setTitle(data));
 
@@ -211,15 +214,15 @@ return <span>{title}</span>;
 // Example.test.tsx
-import { render, act } from '@testing-library/react';
-import { PusherMock, PusherChannelMock } from '@harelpls/use-pusher';
+import { render, act } from "@testing-library/react";
+import { PusherMock, PusherChannelMock } from "@harelpls/use-pusher";
 
 // mock out the result of the useChannel hook
 const mockChannel = new PusherChannelMock();
-jest.mock('@harelpls/use-pusher', () => ({
-  ...require.requireActual('@harelpls/use-pusher'),
-  useChannel: () => mockChannel,
+jest.mock("@harelpls/use-pusher", () => ({
+  ...require.requireActual("@harelpls/use-pusher"),
+  useChannel: () => mockChannel
 }));
 
-test('should show a title when it receives a title event', async () => {
+test("should show a title when it receives a title event", async () => {
   // mock the client
-  const client = { current: new PusherMock('client-key', { cluster: 'ap4' }) };
+  const client = new PusherMock("client-key", { cluster: "ap4" });
 
@@ -234,6 +237,6 @@ // render component and provider with a mocked context value
   // emit an event on the mocked channel
-  act(() => mockChannel.emit('title', { data: 'Hello world' }));
+  act(() => mockChannel.emit("title", { data: "Hello world" }));
 
   // assert expectations
-  expect(await findByText('Hello world')).toBeInTheDocument();
+  expect(await findByText("Hello world")).toBeInTheDocument();
 });
@@ -240,0 +243,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136466

increased by5.14%

Number of package files

8

increased by14.29%

Lines of code

1076

increased by20.76%

Number of lines in readme file

250

increased by1.21%

No dependency changes