fix: Enforce code formatting

SvenKirschbaum · Jun 23, 2024 · a44327c · a44327c
1 parent 951dc93
commit a44327c
Show file tree

Hide file tree

Showing 27 changed files with 300 additions and 247 deletions.
diff --git 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
@@ -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 (
-    <div>Last Message: {lastMessage}</div>
-  );
+  return <div>Last Message: {lastMessage}</div>;
 }
 ```
 

diff --git 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
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -12,11 +12,9 @@
   </head>
 
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
 
     <div id="root"></div>
-    <script src="/src/index.jsx" type='module'></script>
+    <script src="/src/index.jsx" type="module"></script>
   </body>
 </html>
diff --git 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() {
       <Container>
         <Card style={{ margin: "3em" }} variant="outlined">
           <CardContent>
-            <Typography>You can see the STOMP Messages send and received in the browser console</Typography>
-            <Typography>Note that, because the components are unmounted when the accordion is unexpanded, all subscriptions are removed when you close the accordion.</Typography>
+            <Typography>
+              You can see the STOMP Messages send and received in the browser
+              console
+            </Typography>
+            <Typography>
+              Note that, because the components are unmounted when the accordion
+              is unexpanded, all subscriptions are removed when you close the
+              accordion.
+            </Typography>
           </CardContent>
         </Card>
-        <Showcase title={"Subscribing"}><Subscribing /></Showcase>
-        <Showcase title={"Sending Messages"}><SendingMessages /></Showcase>
-        <Showcase title={"Higher Order Components"}><HigherOrderComponents /></Showcase>
-        <Showcase title={"Dynamic subscribing/unsubscribing"}><DynamicSubscription /></Showcase>
+        <Showcase title={"Subscribing"}>
+          <Subscribing />
+        </Showcase>
+        <Showcase title={"Sending Messages"}>
+          <SendingMessages />
+        </Showcase>
+        <Showcase title={"Higher Order Components"}>
+          <HigherOrderComponents />
+        </Showcase>
+        <Showcase title={"Dynamic subscribing/unsubscribing"}>
+          <DynamicSubscription />
+        </Showcase>
       </Container>
     </StompSessionProvider>
   );
@@ -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 (
-    <Box>Last Message: {lastMessage}</Box>
-  );
+  return <Box>Last Message: {lastMessage}</Box>;
 }
 
 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 (
     <Grid container direction="row" spacing={3}>
-      <Grid item><Button variant={"contained"} onClick={sendMessage}>Send Message</Button></Grid>
-      <Grid item><TextField variant="standard" value={input}
-                            onChange={(event => setInput(event.target.value))} /></Grid>
+      <Grid item>
+        <Button variant={"contained"} onClick={sendMessage}>
+          Send Message
+        </Button>
+      </Grid>
+      <Grid item>
+        <TextField
+          variant="standard"
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+        />
+      </Grid>
       <Grid item>
         <Typography variant={"body1"}>
           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 (
-        <Grid container direction="row" spacing={3}>
-          <Grid item><Button variant={"contained"} onClick={this.sendMessage}>Send Message</Button></Grid>
-          <Grid item><TextField variant="standard" value={this.state.input} onChange={this.handleChange} /></Grid>
-          <Grid item>
-            <Typography variant={"body1"}>
-              Last Message received: {this.state.lastMessage}
-            </Typography>
+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 (
+          <Grid container direction="row" spacing={3}>
+            <Grid item>
+              <Button variant={"contained"} onClick={this.sendMessage}>
+                Send Message
+              </Button>
+            </Grid>
+            <Grid item>
+              <TextField
+                variant="standard"
+                value={this.state.input}
+                onChange={this.handleChange}
+              />
+            </Grid>
+            <Grid item>
+              <Typography variant={"body1"}>
+                Last Message received: {this.state.lastMessage}
+              </Typography>
+            </Grid>
           </Grid>
-        </Grid>
-      );
-    }
-  }, "/user/queue/echoreply")
+        );
+      }
+    },
+    "/user/queue/echoreply",
+  ),
 );
 
 export function DynamicSubscription() {
@@ -164,32 +199,37 @@ 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 (
-    <Box sx={{width: '100%', display: 'flex', justifyContent: 'space-between'}}>
+    <Box
+      sx={{ width: "100%", display: "flex", justifyContent: "space-between" }}
+    >
       <Box>Last Message: {lastMessage}</Box>
       <Box>
-        <Button onClick={() => setSubscribed(!subscribed)}>{subscribed ? "Unsubscribe" : "Subscribe"}</Button>
+        <Button onClick={() => setSubscribed(!subscribed)}>
+          {subscribed ? "Unsubscribe" : "Subscribe"}
+        </Button>
       </Box>
     </Box>
   );
 }
 
 export function Showcase(props) {
   return (
-    <Accordion style={{ margin: "3em" }} TransitionProps={{ unmountOnExit: true }}>
+    <Accordion
+      style={{ margin: "3em" }}
+      TransitionProps={{ unmountOnExit: true }}
+    >
       <AccordionSummary
         expandIcon={<ExpandMoreIcon />}
         aria-controls="panel1a-content"
         id="panel1a-header"
       >
         <Typography>{props.title}</Typography>
       </AccordionSummary>
-      <AccordionDetails>
-        {props.children}
-      </AccordionDetails>
+      <AccordionDetails>{props.children}</AccordionDetails>
     </Accordion>
   );
 }