From a44327c64f6a0c9e572433f34629bf7498fb0827 Mon Sep 17 00:00:00 2001 From: Sven Kirschbaum Date: Sun, 23 Jun 2024 02:40:33 +0200 Subject: [PATCH] fix: Enforce code formatting --- .github/workflows/release.yaml | 6 +- README.md | 11 +- eslint.config.mjs | 28 +-- example/index.html | 8 +- example/src/App.jsx | 194 +++++++++++------- example/src/App.test.jsx | 16 +- example/src/Components.test.jsx | 80 +++++--- example/src/index.css | 6 +- example/src/index.jsx | 10 +- example/vite.config.js | 14 +- src/components/StompSessionProvider.tsx | 32 +-- src/context/StompContext.tsx | 6 +- src/hoc/withStompClient.tsx | 4 +- src/hoc/withSubscription.tsx | 14 +- src/hooks/useStompClient.tsx | 10 +- src/hooks/useSubscription.tsx | 18 +- src/index.tsx | 18 +- src/interfaces/StompMessageReceiver.ts | 9 +- src/interfaces/StompSessionProviderContext.ts | 4 +- src/interfaces/StompSessionProviderProps.ts | 4 +- src/interfaces/StompSessionSubscription.ts | 4 +- src/mock/StompSessionProviderMock.tsx | 10 +- src/mock/client.tsx | 4 +- src/mock/index.tsx | 12 +- src/mock/reset.tsx | 4 +- src/mock/subscriptions.tsx | 13 +- tsup.config.ts | 8 +- 27 files changed, 300 insertions(+), 247 deletions(-) diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index 8e50044..ffe8b12 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -2,7 +2,7 @@ name: release on: push: tags: - - '*' + - "*" jobs: build: @@ -17,7 +17,7 @@ jobs: uses: actions/setup-node@v3 with: node-version: 22.x - registry-url: 'https://registry.npmjs.org/' + registry-url: "https://registry.npmjs.org/" - run: npm ci - run: (cd example && npm install) - run: npm run build @@ -32,7 +32,7 @@ jobs: - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: - path: './example/build' + path: "./example/build" - name: Deploy to GitHub Pages uses: actions/deploy-pages@v4 - uses: ncipollo/release-action@v1 diff --git a/README.md b/README.md index 41d05f6..5e98e5a 100644 --- a/README.md +++ b/README.md @@ -15,12 +15,9 @@ npm install --save react-stomp-hooks See also [the supplied example project](https://svenkirschbaum.github.io/react-stomp-hooks/), and [its sourcecode](example/src/App.jsx). ```jsx -import React from 'react' +import React from "react"; -import { - StompSessionProvider, - useSubscription, -} from "react-stomp-hooks"; +import { StompSessionProvider, useSubscription } from "react-stomp-hooks"; const App = () => { return ( @@ -44,9 +41,7 @@ function SubscribingComponent() { //You can also supply an array as the first parameter, which will subscribe to all destinations in the array useSubscription("/topic/test", (message) => setLastMessage(message.body)); - return ( -
Last Message: {lastMessage}
- ); + return
Last Message: {lastMessage}
; } ``` diff --git a/eslint.config.mjs b/eslint.config.mjs index d0b671e..a7cd413 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -1,15 +1,15 @@ -import globals from 'globals'; -import pluginJs from '@eslint/js'; -import tseslint from 'typescript-eslint'; -import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js'; -import pluginReactConfigJSX from 'eslint-plugin-react/configs/jsx-runtime.js'; -import { fixupConfigRules } from '@eslint/compat'; -import pluginPrettier from 'eslint-config-prettier'; -import pluginVitest from 'eslint-plugin-vitest'; -import pluginVitestGlobals from 'eslint-plugin-vitest-globals'; +import globals from "globals"; +import pluginJs from "@eslint/js"; +import tseslint from "typescript-eslint"; +import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"; +import pluginReactConfigJSX from "eslint-plugin-react/configs/jsx-runtime.js"; +import { fixupConfigRules } from "@eslint/compat"; +import pluginPrettier from "eslint-config-prettier"; +import pluginVitest from "eslint-plugin-vitest"; +import pluginVitestGlobals from "eslint-plugin-vitest-globals"; export default [ - { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] }, + { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] }, { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } }, { languageOptions: { globals: globals.browser } }, pluginJs.configs.recommended, @@ -18,10 +18,12 @@ export default [ ...fixupConfigRules(pluginReactConfigJSX), pluginPrettier, pluginVitest.configs.recommended, - { languageOptions: { globals: pluginVitestGlobals.environments.env.globals } }, - { settings: { react: { version: 'detect' } } }, { - ignores: ["dist/**", "example/build/**"] + languageOptions: { globals: pluginVitestGlobals.environments.env.globals }, + }, + { settings: { react: { version: "detect" } } }, + { + ignores: ["dist/**", "example/build/**"], }, { files: ["example/src/**"], diff --git a/example/index.html b/example/index.html index 0e70de2..b01b199 100644 --- a/example/index.html +++ b/example/index.html @@ -1,4 +1,4 @@ - + @@ -12,11 +12,9 @@ - +
- + diff --git a/example/src/App.jsx b/example/src/App.jsx index 586ab6f..7288065 100644 --- a/example/src/App.jsx +++ b/example/src/App.jsx @@ -7,7 +7,7 @@ import { useStompClient, useSubscription, withStompClient, - withSubscription + withSubscription, } from "react-stomp-hooks"; import { Accordion, @@ -20,7 +20,7 @@ import { Container, Grid, TextField, - Typography + Typography, } from "@mui/material"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; @@ -39,14 +39,29 @@ export function App() { - You can see the STOMP Messages send and received in the browser console - Note that, because the components are unmounted when the accordion is unexpanded, all subscriptions are removed when you close the accordion. + + You can see the STOMP Messages send and received in the browser + console + + + Note that, because the components are unmounted when the accordion + is unexpanded, all subscriptions are removed when you close the + accordion. + - - - - + + + + + + + + + + + + ); @@ -61,9 +76,7 @@ export function Subscribing() { //You can also supply an array as the first parameter, which will subscribe to all destinations in the array useSubscription("/topic/test", (message) => setLastMessage(message.body)); - return ( - Last Message: {lastMessage} - ); + return Last Message: {lastMessage}; } export function SendingMessages() { @@ -74,26 +87,36 @@ export function SendingMessages() { //This is the StompCLient from @stomp/stompjs //Note: This will be undefined if the client is currently not connected const stompClient = useStompClient(); - useSubscription("/user/queue/echoreply", (message) => setLastMessage(message.body)); + useSubscription("/user/queue/echoreply", (message) => + setLastMessage(message.body), + ); const sendMessage = () => { - if(stompClient) { + if (stompClient) { //Send Message stompClient.publish({ destination: "/app/echo", - body: "Echo " + input + body: "Echo " + input, }); - } - else { + } else { //Handle error } }; return ( - - setInput(event.target.value))} /> + + + + + setInput(event.target.value)} + /> + Last Message received: {lastMessage} @@ -103,58 +126,70 @@ export function SendingMessages() { ); } -export const HigherOrderComponents = withStompClient(withSubscription( - class HOCDemo extends React.Component { - - constructor(props) { - super(props); - - //stompCLient property is injected in the withStompClient HOC - this.stompClient = props.stompClient; - this.state = { - input: "", - lastMessage: "No message received yet" - }; - - this.handleChange = this.handleChange.bind(this); - this.sendMessage = this.sendMessage.bind(this); - this.onMessage = this.onMessage.bind(this); - } - - //You have to specify an onMessage method for the withSubscription HOC. - onMessage(message) { - this.setState({ - lastMessage: message.body - }); - } - - sendMessage() { - this.stompClient.publish({ - destination: "/app/echo", - body: "Echo " + this.state.input - }); - } - - handleChange(event) { - this.setState({ - input: event.target.value - }); - } - - render() { - return ( - - - - - - Last Message received: {this.state.lastMessage} - +export const HigherOrderComponents = withStompClient( + withSubscription( + class HOCDemo extends React.Component { + constructor(props) { + super(props); + + //stompCLient property is injected in the withStompClient HOC + this.stompClient = props.stompClient; + this.state = { + input: "", + lastMessage: "No message received yet", + }; + + this.handleChange = this.handleChange.bind(this); + this.sendMessage = this.sendMessage.bind(this); + this.onMessage = this.onMessage.bind(this); + } + + //You have to specify an onMessage method for the withSubscription HOC. + onMessage(message) { + this.setState({ + lastMessage: message.body, + }); + } + + sendMessage() { + this.stompClient.publish({ + destination: "/app/echo", + body: "Echo " + this.state.input, + }); + } + + handleChange(event) { + this.setState({ + input: event.target.value, + }); + } + + render() { + return ( + + + + + + + + + + Last Message received: {this.state.lastMessage} + + - - ); - } - }, "/user/queue/echoreply") + ); + } + }, + "/user/queue/echoreply", + ), ); export function DynamicSubscription() { @@ -164,14 +199,18 @@ export function DynamicSubscription() { useSubscription( //The value of the first parameter can be mutated to dynamically subscribe/unsubscribe from topics subscribed ? ["/topic/test"] : [], - (message) => setLastMessage(message.body) + (message) => setLastMessage(message.body), ); return ( - + Last Message: {lastMessage} - + ); @@ -179,7 +218,10 @@ export function DynamicSubscription() { export function Showcase(props) { return ( - + } aria-controls="panel1a-content" @@ -187,9 +229,7 @@ export function Showcase(props) { > {props.title} - - {props.children} - + {props.children} ); } diff --git a/example/src/App.test.jsx b/example/src/App.test.jsx index 6ee3484..8949828 100644 --- a/example/src/App.test.jsx +++ b/example/src/App.test.jsx @@ -1,18 +1,18 @@ -import React from 'react' -import { App } from './App.jsx'; -import { render } from '@testing-library/react'; +import React from "react"; +import { App } from "./App.jsx"; +import { render } from "@testing-library/react"; //If you want to test a component which contains a StompSessionProvider, you can use the following code to replace it with the provided Mock implementation: -vi.mock('react-stomp-hooks', async () => { - const originalModule = await vi.importActual('react-stomp-hooks'); +vi.mock("react-stomp-hooks", async () => { + const originalModule = await vi.importActual("react-stomp-hooks"); return { ...originalModule, StompSessionProvider: originalModule.mock.StompSessionProviderMock, }; -}) +}); // eslint-disable-next-line vitest/expect-expect -it('app renders without crashing', () => { +it("app renders without crashing", () => { render(); -}) +}); diff --git a/example/src/Components.test.jsx b/example/src/Components.test.jsx index f87a00a..9321746 100644 --- a/example/src/Components.test.jsx +++ b/example/src/Components.test.jsx @@ -1,111 +1,123 @@ -import { DynamicSubscription, HigherOrderComponents, SendingMessages, Subscribing } from './App.jsx'; -import { mock as stompMock } from 'react-stomp-hooks'; -import { render, screen, act, fireEvent } from '@testing-library/react'; +import { + DynamicSubscription, + HigherOrderComponents, + SendingMessages, + Subscribing, +} from "./App.jsx"; +import { mock as stompMock } from "react-stomp-hooks"; +import { render, screen, act, fireEvent } from "@testing-library/react"; //Clear all messages after each test afterEach(() => { stompMock.reset(); }); - //Test Subscribing Component using provided Mock implementation // eslint-disable-next-line vitest/expect-expect -it('Subscribing component works', () => { +it("Subscribing component works", () => { //Render Subscribing Component, with StompSessionProviderMock render( - - ) + , + ); - screen.getByText('Last Message: No message received yet'); + screen.getByText("Last Message: No message received yet"); //Simulate receiving a Message act(() => { stompMock.mockReceiveMessage("/topic/test", { - body: "Hello World" + body: "Hello World", }); }); - screen.getByText('Last Message: Hello World'); -}) + screen.getByText("Last Message: Hello World"); +}); -it('SendingMessages component works', () => { +it("SendingMessages component works", () => { render( - - ) + , + ); //No message has been sent expect(stompMock.getSentMockMessages().size).toBe(0); //Send a message - fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Hello World' } }); - fireEvent.click(screen.getByRole('button')); + fireEvent.change(screen.getByRole("textbox"), { + target: { value: "Hello World" }, + }); + fireEvent.click(screen.getByRole("button")); //Only one destination has been used expect(stompMock.getSentMockMessages().size).toBe(1); //Only one message has been sent to the selected destination expect(stompMock.getSentMockMessages("/app/echo")).toHaveLength(1); //The message has the correct body - expect(stompMock.getSentMockMessages("/app/echo")[0].body).toBe("Echo Hello World"); + expect(stompMock.getSentMockMessages("/app/echo")[0].body).toBe( + "Echo Hello World", + ); //Simulate receiving echo reply act(() => { stompMock.mockReceiveMessage("/user/queue/echoreply", { - body: "Echo Hello World" + body: "Echo Hello World", }); }); //Check the reply being displayed - screen.getByText('Last Message received: Echo Hello World'); -}) + screen.getByText("Last Message received: Echo Hello World"); +}); -it('HigherOrderComponents component works', () => { +it("HigherOrderComponents component works", () => { render( - - ) + , + ); //No message has been sent expect(stompMock.getSentMockMessages().size).toBe(0); //Send a message - fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Hello World' } }); - fireEvent.click(screen.getByRole('button')); + fireEvent.change(screen.getByRole("textbox"), { + target: { value: "Hello World" }, + }); + fireEvent.click(screen.getByRole("button")); //Only one destination has been used expect(stompMock.getSentMockMessages().size).toBe(1); //Only one message has been sent to the selected destination expect(stompMock.getSentMockMessages("/app/echo")).toHaveLength(1); //The message has the correct body - expect(stompMock.getSentMockMessages("/app/echo")[0].body).toBe("Echo Hello World"); + expect(stompMock.getSentMockMessages("/app/echo")[0].body).toBe( + "Echo Hello World", + ); //Simulate receiving echo reply act(() => { stompMock.mockReceiveMessage("/user/queue/echoreply", { - body: "Echo Hello World" + body: "Echo Hello World", }); }); //Check the reply being displayed - screen.getByText('Last Message received: Echo Hello World'); -}) + screen.getByText("Last Message received: Echo Hello World"); +}); -it('DynamicSubscription component works', () => { +it("DynamicSubscription component works", () => { render( - - ) + , + ); //No subscriotions by default expect(stompMock.getMockSubscriptions().size).toBe(0); //Click subscribe button - fireEvent.click(screen.getByRole('button')); + fireEvent.click(screen.getByRole("button")); //Exactly one topic has subscriptions expect(stompMock.getMockSubscriptions().size).toBe(1); @@ -113,7 +125,7 @@ it('DynamicSubscription component works', () => { expect(stompMock.getMockSubscriptions("/topic/test").size).toBe(1); //Click unsubscribe button - fireEvent.click(screen.getByRole('button')); + fireEvent.click(screen.getByRole("button")); //The subscription has been removed expect(stompMock.getMockSubscriptions("/topic/test").size).toBe(0); diff --git a/example/src/index.css b/example/src/index.css index e2bd8f3..cee5f34 100644 --- a/example/src/index.css +++ b/example/src/index.css @@ -1,14 +1,14 @@ body { margin: 0; padding: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } diff --git a/example/src/index.jsx b/example/src/index.jsx index 6f00eed..0d247ce 100644 --- a/example/src/index.jsx +++ b/example/src/index.jsx @@ -1,8 +1,8 @@ -import './index.css' +import "./index.css"; -import React from 'react' -import { App } from './App.jsx'; -import { createRoot } from 'react-dom/client'; +import React from "react"; +import { App } from "./App.jsx"; +import { createRoot } from "react-dom/client"; -const root = createRoot(document.getElementById('root')); // createRoot(container!) if you use TypeScript +const root = createRoot(document.getElementById("root")); // createRoot(container!) if you use TypeScript root.render(); diff --git a/example/vite.config.js b/example/vite.config.js index b35408e..24e428d 100644 --- a/example/vite.config.js +++ b/example/vite.config.js @@ -1,23 +1,23 @@ -import {defineConfig} from 'vite'; -import react from '@vitejs/plugin-react'; +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], define: { - 'global': 'window' + global: "window", }, server: { port: 3000, }, preview: { - port: 3000 + port: 3000, }, build: { - outDir: 'build' + outDir: "build", }, test: { environment: "jsdom", - globals: true - } + globals: true, + }, }); diff --git a/src/components/StompSessionProvider.tsx b/src/components/StompSessionProvider.tsx index 0a1ad8c..aebd294 100644 --- a/src/components/StompSessionProvider.tsx +++ b/src/components/StompSessionProvider.tsx @@ -1,14 +1,14 @@ -import { useEffect, useRef, useState } from 'react'; -import StompContext from '../context/StompContext'; -import SockJS from 'sockjs-client'; +import { useEffect, useRef, useState } from "react"; +import StompContext from "../context/StompContext"; +import SockJS from "sockjs-client"; import { Client, IStompSocket, messageCallbackType, - StompHeaders -} from '@stomp/stompjs'; -import { StompSessionProviderProps } from '../interfaces/StompSessionProviderProps'; -import { StompSessionSubscription } from '../interfaces/StompSessionSubscription'; + StompHeaders, +} from "@stomp/stompjs"; +import { StompSessionProviderProps } from "../interfaces/StompSessionProviderProps"; +import { StompSessionSubscription } from "../interfaces/StompSessionSubscription"; /** * The StompSessionProvider manages the STOMP connection @@ -35,14 +35,14 @@ function StompSessionProvider(props: StompSessionProviderProps) { if (!stompOptions.brokerURL && !stompOptions.webSocketFactory) { _client.webSocketFactory = function () { const parsedUrl = new URL(url, window?.location?.href); - if (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') { + if (parsedUrl.protocol === "http:" || parsedUrl.protocol === "https:") { return new SockJS(url) as IStompSocket; } else if ( - parsedUrl.protocol === 'ws:' || - parsedUrl.protocol === 'wss:' + parsedUrl.protocol === "ws:" || + parsedUrl.protocol === "wss:" ) { return new WebSocket(url) as IStompSocket; - } else throw new Error('Protocol not supported'); + } else throw new Error("Protocol not supported"); }; } @@ -53,7 +53,7 @@ function StompSessionProvider(props: StompSessionProviderProps) { value.subscription = _client.subscribe( value.destination, value.callback, - value.headers + value.headers, ); }); @@ -82,13 +82,13 @@ function StompSessionProvider(props: StompSessionProviderProps) { const subscribe = ( destination: string, callback: messageCallbackType, - headers: StompHeaders = {} + headers: StompHeaders = {}, ) => { const subscriptionId = Math.random().toString(36).substr(2, 9); const subscriptionRequest: StompSessionSubscription = { destination, callback, - headers + headers, }; subscriptionRequests.current.set(subscriptionId, subscriptionRequest); @@ -97,7 +97,7 @@ function StompSessionProvider(props: StompSessionProviderProps) { subscriptionRequest.subscription = client.subscribe( destination, callback, - headers + headers, ); } @@ -116,7 +116,7 @@ function StompSessionProvider(props: StompSessionProviderProps) { {children} diff --git a/src/context/StompContext.tsx b/src/context/StompContext.tsx index 1affbbf..b7b5bc4 100644 --- a/src/context/StompContext.tsx +++ b/src/context/StompContext.tsx @@ -1,8 +1,8 @@ -import { createContext } from 'react'; -import { StompSessionProviderContext } from '../interfaces/StompSessionProviderContext'; +import { createContext } from "react"; +import { StompSessionProviderContext } from "../interfaces/StompSessionProviderContext"; const StompContext = createContext( - undefined + undefined, ); export default StompContext; diff --git a/src/hoc/withStompClient.tsx b/src/hoc/withStompClient.tsx index e5b8fbe..b9fb023 100644 --- a/src/hoc/withStompClient.tsx +++ b/src/hoc/withStompClient.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import useStompClient from '../hooks/useStompClient'; +import React from "react"; +import useStompClient from "../hooks/useStompClient"; function withStompClient

(WrappedComponent: React.ComponentType

) { const comp = (props: P) => { diff --git a/src/hoc/withSubscription.tsx b/src/hoc/withSubscription.tsx index 129d8c4..9084a96 100644 --- a/src/hoc/withSubscription.tsx +++ b/src/hoc/withSubscription.tsx @@ -1,15 +1,15 @@ -import { useRef } from 'react'; -import useSubscription from '../hooks/useSubscription'; -import { StompHeaders, IMessage } from '@stomp/stompjs'; +import { useRef } from "react"; +import useSubscription from "../hooks/useSubscription"; +import { StompHeaders, IMessage } from "@stomp/stompjs"; import { MessageReceiverInterface, - StompMessageReceiver -} from '../interfaces/StompMessageReceiver'; + StompMessageReceiver, +} from "../interfaces/StompMessageReceiver"; function withSubscription

( WrappedComponent: StompMessageReceiver

, destinations: string | string[], - headers: StompHeaders = {} + headers: StompHeaders = {}, ) { const comp = (props: P) => { const ref = useRef(); @@ -18,7 +18,7 @@ function withSubscription

( (message: IMessage) => { if (ref.current) ref.current.onMessage(message); }, - headers + headers, ); // @ts-expect-error - Ref type incompatible diff --git a/src/hooks/useStompClient.tsx b/src/hooks/useStompClient.tsx index 1732919..7391bb1 100644 --- a/src/hooks/useStompClient.tsx +++ b/src/hooks/useStompClient.tsx @@ -1,6 +1,6 @@ -import { useContext } from 'react'; -import StompContext from '../context/StompContext'; -import { StompSessionProviderContext } from '../interfaces/StompSessionProviderContext'; +import { useContext } from "react"; +import StompContext from "../context/StompContext"; +import { StompSessionProviderContext } from "../interfaces/StompSessionProviderContext"; /** * Returns the Stomp Client from @stomp/stompjs @@ -8,12 +8,12 @@ import { StompSessionProviderContext } from '../interfaces/StompSessionProviderC */ function useStompClient() { const context = useContext( - StompContext + StompContext, ); if (context === undefined) throw new Error( - 'There must be a StompSessionProvider as Ancestor of all Stomp Hooks and HOCs' + "There must be a StompSessionProvider as Ancestor of all Stomp Hooks and HOCs", ); return context.client; diff --git a/src/hooks/useSubscription.tsx b/src/hooks/useSubscription.tsx index ad53dca..957c71b 100644 --- a/src/hooks/useSubscription.tsx +++ b/src/hooks/useSubscription.tsx @@ -1,6 +1,6 @@ -import { useContext, useEffect, useRef } from 'react'; -import StompContext from '../context/StompContext'; -import { messageCallbackType, StompHeaders } from '@stomp/stompjs'; +import { useContext, useEffect, useRef } from "react"; +import StompContext from "../context/StompContext"; +import { messageCallbackType, StompHeaders } from "@stomp/stompjs"; /** * @@ -11,13 +11,13 @@ import { messageCallbackType, StompHeaders } from '@stomp/stompjs'; function useSubscription( destinations: string | string[], onMessage: messageCallbackType, - headers: StompHeaders = {} + headers: StompHeaders = {}, ) { const stompContext = useContext(StompContext); if (stompContext === undefined) throw new Error( - 'There must be a StompSessionProvider as Ancestor of all Stomp Hooks and HOCs' + "There must be a StompSessionProvider as Ancestor of all Stomp Hooks and HOCs", ); const callbackRef = useRef(onMessage); @@ -37,9 +37,9 @@ function useSubscription( (message) => { callbackRef.current(message); }, - headers - ) - ) + headers, + ), + ), ); return () => { @@ -49,7 +49,7 @@ function useSubscription( }; }, [ Object.values(_destinations).toString(), - Object.values(headers).toString() + Object.values(headers).toString(), ]); } diff --git a/src/index.tsx b/src/index.tsx index 4209112..f7664d7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,9 +1,9 @@ -import StompSessionProvider from './components/StompSessionProvider'; -import useSubscription from './hooks/useSubscription'; -import useStompClient from './hooks/useStompClient'; -import withStompClient from './hoc/withStompClient'; -import withSubscription from './hoc/withSubscription'; -import * as mock from './mock/index'; +import StompSessionProvider from "./components/StompSessionProvider"; +import useSubscription from "./hooks/useSubscription"; +import useStompClient from "./hooks/useStompClient"; +import withStompClient from "./hoc/withStompClient"; +import withSubscription from "./hoc/withSubscription"; +import * as mock from "./mock/index"; export { StompSessionProvider, @@ -11,7 +11,7 @@ export { useStompClient, withStompClient, withSubscription, - mock + mock, }; export type { @@ -32,5 +32,5 @@ export type { RawHeaderType, closeEventCallbackType, frameCallbackType, - debugFnType -} from '@stomp/stompjs'; + debugFnType, +} from "@stomp/stompjs"; diff --git a/src/interfaces/StompMessageReceiver.ts b/src/interfaces/StompMessageReceiver.ts index 80ae8ba..2df338e 100644 --- a/src/interfaces/StompMessageReceiver.ts +++ b/src/interfaces/StompMessageReceiver.ts @@ -1,10 +1,13 @@ -import { messageCallbackType } from '@stomp/stompjs'; -import React from 'react'; +import { messageCallbackType } from "@stomp/stompjs"; +import React from "react"; export interface MessageReceiverInterface { onMessage: messageCallbackType; } export type StompMessageReceiver

= React.ComponentClass

& { - new (props: P, context?: unknown): React.Component

& MessageReceiverInterface; + new ( + props: P, + context?: unknown, + ): React.Component

& MessageReceiverInterface; }; diff --git a/src/interfaces/StompSessionProviderContext.ts b/src/interfaces/StompSessionProviderContext.ts index b48b185..68a8cb7 100644 --- a/src/interfaces/StompSessionProviderContext.ts +++ b/src/interfaces/StompSessionProviderContext.ts @@ -1,10 +1,10 @@ -import { Client, messageCallbackType, StompHeaders } from '@stomp/stompjs'; +import { Client, messageCallbackType, StompHeaders } from "@stomp/stompjs"; export interface StompSessionProviderContext { client?: Client; subscribe: ( destination: string, callback: messageCallbackType, - headers?: StompHeaders + headers?: StompHeaders, ) => () => void; } diff --git a/src/interfaces/StompSessionProviderProps.ts b/src/interfaces/StompSessionProviderProps.ts index c22eb22..9476d36 100644 --- a/src/interfaces/StompSessionProviderProps.ts +++ b/src/interfaces/StompSessionProviderProps.ts @@ -1,5 +1,5 @@ -import { StompConfig } from '@stomp/stompjs'; -import { ReactNode } from 'react'; +import { StompConfig } from "@stomp/stompjs"; +import { ReactNode } from "react"; export interface StompSessionProviderProps extends StompConfig { url: string; diff --git a/src/interfaces/StompSessionSubscription.ts b/src/interfaces/StompSessionSubscription.ts index 406f0ad..d629554 100644 --- a/src/interfaces/StompSessionSubscription.ts +++ b/src/interfaces/StompSessionSubscription.ts @@ -1,8 +1,8 @@ import { messageCallbackType, StompHeaders, - StompSubscription -} from '@stomp/stompjs'; + StompSubscription, +} from "@stomp/stompjs"; export interface StompSessionSubscription { destination: string; diff --git a/src/mock/StompSessionProviderMock.tsx b/src/mock/StompSessionProviderMock.tsx index 62a2f13..564aa7c 100644 --- a/src/mock/StompSessionProviderMock.tsx +++ b/src/mock/StompSessionProviderMock.tsx @@ -1,7 +1,7 @@ -import React from 'react'; -import StompContext from '../context/StompContext'; -import { subscribeMock } from './subscriptions'; -import { getMockClient } from './client'; +import React from "react"; +import StompContext from "../context/StompContext"; +import { subscribeMock } from "./subscriptions"; +import { getMockClient } from "./client"; /** * A mock StompSessionProvider. @@ -22,7 +22,7 @@ export default function StompSessionProviderMock(props: { value={{ subscribe: subscribeMock, // @ts-expect-error - Mock client is not a full client - client: props.client ?? getMockClient() + client: props.client ?? getMockClient(), }} > {props.children} diff --git a/src/mock/client.tsx b/src/mock/client.tsx index b5655a5..25e3ce5 100644 --- a/src/mock/client.tsx +++ b/src/mock/client.tsx @@ -1,4 +1,4 @@ -import { IPublishParams } from '@stomp/stompjs'; +import { IPublishParams } from "@stomp/stompjs"; export const messages = new Map>(); @@ -22,7 +22,7 @@ export function mockClientPublish(params: IPublishParams) { */ export function getMockClient() { return { - publish: mockClientPublish + publish: mockClientPublish, }; } diff --git a/src/mock/index.tsx b/src/mock/index.tsx index 687922d..486d6ce 100644 --- a/src/mock/index.tsx +++ b/src/mock/index.tsx @@ -1,11 +1,11 @@ -import StompSessionProviderMock from './StompSessionProviderMock'; +import StompSessionProviderMock from "./StompSessionProviderMock"; import { getMockClient, mockClientPublish, - getSentMockMessages -} from './client'; -import { mockReceiveMessage, getMockSubscriptions } from './subscriptions'; -import { reset } from './reset'; + getSentMockMessages, +} from "./client"; +import { mockReceiveMessage, getMockSubscriptions } from "./subscriptions"; +import { reset } from "./reset"; export { StompSessionProviderMock, @@ -14,5 +14,5 @@ export { mockReceiveMessage, getSentMockMessages, reset, - getMockSubscriptions + getMockSubscriptions, }; diff --git a/src/mock/reset.tsx b/src/mock/reset.tsx index 371a9a8..610e6cd 100644 --- a/src/mock/reset.tsx +++ b/src/mock/reset.tsx @@ -1,5 +1,5 @@ -import { subscriptions } from './subscriptions'; -import { messages } from './client'; +import { subscriptions } from "./subscriptions"; +import { messages } from "./client"; /** * Resets the state of the mock implementation, clearing all subscriptions and messages. diff --git a/src/mock/subscriptions.tsx b/src/mock/subscriptions.tsx index 217f305..f7f4e89 100644 --- a/src/mock/subscriptions.tsx +++ b/src/mock/subscriptions.tsx @@ -1,14 +1,17 @@ -import { IMessage } from '@stomp/stompjs'; -import { messageCallbackType, StompHeaders } from '@stomp/stompjs'; +import { IMessage } from "@stomp/stompjs"; +import { messageCallbackType, StompHeaders } from "@stomp/stompjs"; -export const subscriptions = new Map>(); +export const subscriptions = new Map< + string, + Map +>(); export function subscribeMock( destination: string, callback: messageCallbackType, // @ts-expect-error - irrelevant in mock // eslint-disable-next-line @typescript-eslint/no-unused-vars - headers: StompHeaders = {} + headers: StompHeaders = {}, ) { const subscriptionId = Math.random().toString(36).substr(2, 9); @@ -32,7 +35,7 @@ export function subscribeMock( */ export function mockReceiveMessage( destination: string, - message: IMessage + message: IMessage, ): void { if (subscriptions.has(destination)) { // @ts-expect-error undefined check diff --git a/tsup.config.ts b/tsup.config.ts index dbcd40b..e5c37cd 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -1,11 +1,11 @@ -import { defineConfig } from 'tsup' +import { defineConfig } from "tsup"; export default defineConfig({ - entry: ['src/index.tsx'], + entry: ["src/index.tsx"], splitting: false, sourcemap: true, clean: true, dts: true, minify: true, - format: ['cjs', 'esm'] -}) + format: ["cjs", "esm"], +});