web: prettier: upgrade to version 3.0.1

hnez · hnez · commit 50a4e79e4627 · 2023-08-14T10:34:38.000+02:00
Between 2.8 and 3.0 prettiers generated/expected formatting changed,
which is why this upgrade adds a few source code changes.

Signed-off-by: Leonard Göhrs &lt;l.goehrs@pengutronix.de&gt;
diff --git a/.github/workflows/tacd-webui.yaml b/.github/workflows/tacd-webui.yaml
@@ -29,7 +29,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: latest
-      - run: npx prettier@=2.8.8 --check .
+      - run: npx prettier@=3.0.1 --check .
 
   license:
     name: npx license-checker
diff --git a/README.md b/README.md
@@ -131,5 +131,5 @@ guidelines:
 - Use `cargo fmt` after every change to the rust codebase
 - Use `cargo deny check license` if you have introduced new dependencies to
   check if they (or their dependencies) introduce license issues.
-- Use `npx prettier@=2.8.8 --write .` (in the web directory) after every
+- Use `npx prettier@=3.0.1 --write .` (in the web directory) after every
   change to the web codebase.
diff --git a/web/public/index.html b/web/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
diff --git a/web/src/ApiDocs.tsx b/web/src/ApiDocs.tsx
@@ -37,7 +37,7 @@ export function SwaggerView(props: SwaggerViewProps) {
 
   const content = useMemo(
     () => (openapi === undefined ? <Spinner /> : <SwaggerUI spec={openapi} />),
-    [openapi]
+    [openapi],
   );
 
   useEffect(() => {
@@ -62,7 +62,7 @@ export function SwaggerView(props: SwaggerViewProps) {
             // [ "", "v1", "output", "{out_n}", "feedback", "voltage" ] ->
             //   [ "", "v1", "output", "[^/]+", "feedback", "voltage" ]
             let frags_no_var = frags.map((el) =>
-              el[0] === "{" && el[el.length - 1] === "}" ? "[^/]+" : el
+              el[0] === "{" && el[el.length - 1] === "}" ? "[^/]+" : el,
             );
 
             // [ "", "v1", "output", "[^/]+", "feedback", "voltage" ] ->
@@ -93,7 +93,7 @@ export function SwaggerView(props: SwaggerViewProps) {
 
           // Filter out all the tags that are not actually used
           obj.tags = obj.tags.filter((t: { [n: string]: any }) =>
-            tags_to_keep.has(t.name)
+            tags_to_keep.has(t.name),
           );
         }
 
diff --git a/web/src/ConfigEditor.tsx b/web/src/ConfigEditor.tsx
@@ -99,7 +99,7 @@ export function ConfigEditor(props: ConfigEditorProps) {
       setContent(undefined);
 
       fetch(props.path, { method: "PUT", body: newContent }).then(() =>
-        loadContent()
+        loadContent(),
       );
     }
   }
diff --git a/web/src/MqttComponents.tsx b/web/src/MqttComponents.tsx
@@ -267,7 +267,7 @@ export function MqttChart(props: MqttChartProps) {
   const history = useMqttHistory<Measurement, Point>(
     props.topic,
     200,
-    measToPoint
+    measToPoint,
   );
   let values = history.current;
 
diff --git a/web/src/TacComponents.tsx b/web/src/TacComponents.tsx
@@ -205,7 +205,7 @@ export function SlotStatus() {
 
 export function UpdateChannels() {
   const channels_topic = useMqttSubscription<Array<Channel>>(
-    "/v1/tac/update/channels"
+    "/v1/tac/update/channels",
   );
 
   const channels = channels_topic !== undefined ? channels_topic : [];
@@ -383,7 +383,7 @@ export function ProgressNotification() {
 
 export function RebootNotification() {
   const should_reboot = useMqttSubscription<boolean>(
-    "/v1/tac/update/should_reboot"
+    "/v1/tac/update/should_reboot",
   );
 
   return (
@@ -425,7 +425,7 @@ export function UpdateContainer() {
 
 export function UpdateNotification() {
   const channels = useMqttSubscription<Array<Channel>>(
-    "/v1/tac/update/channels"
+    "/v1/tac/update/channels",
   );
 
   let updates = [];
diff --git a/web/src/index.css b/web/src/index.css
@@ -46,7 +46,8 @@ code {
 }
 
 .live-display {
-  box-shadow: rgb(233, 235, 237) 0px 0px 1px 1px,
+  box-shadow:
+    rgb(233, 235, 237) 0px 0px 1px 1px,
     rgba(0, 7, 22, 0.12) 0px 1px 8px 2px;
   margin-top: 0.5em;
   image-rendering: crisp-edges;
diff --git a/web/src/index.tsx b/web/src/index.tsx
@@ -32,7 +32,7 @@ import SettingsLabgrid from "./SettingsLabgrid";
 import Setup from "./Setup";
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 root.render(
   <React.StrictMode>
@@ -49,5 +49,5 @@ root.render(
         <Route path="/setup" element={<Setup />} />
       </Routes>
     </HashRouter>
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/web/src/mqtt.ts b/web/src/mqtt.ts
@@ -20,7 +20,7 @@ import { useEffect, useState } from "react";
 
 export const session = new Client(
   `ws://${window.location.hostname}:${window.location.port}/v1/mqtt`,
-  "webinterface-" + (Math.random() * 1000000).toFixed()
+  "webinterface-" + (Math.random() * 1000000).toFixed(),
 );
 
 let subscriptions: {
@@ -66,7 +66,7 @@ session.connect({
 
 function subscribe(
   topic: string,
-  handleMessage: (m: Message | undefined) => void
+  handleMessage: (m: Message | undefined) => void,
 ) {
   if (subscriptions[topic] === undefined) {
     if (session.isConnected()) {
@@ -148,7 +148,7 @@ type History<M> = {
 export function useMqttHistory<T, M>(
   topic: string,
   length: number,
-  format: (t: T) => M
+  format: (t: T) => M,
 ) {
   const [hist, setHist] = useState<History<M>>({ current: [] });
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<!DOCTYPE html>`
	`1`	`+<!doctype html>`
`2`	`2`	`<html lang="en">`
`3`	`3`	`<head>`
`4`	`4`	`<meta charset="utf-8" />`
Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,7 @@ export function ConfigEditor(props: ConfigEditorProps) {`
`99`	`99`	`setContent(undefined);`
`100`	`100`
`101`	`101`	`fetch(props.path, { method: "PUT", body: newContent }).then(() =>`
`102`		`- loadContent()`
	`102`	`+ loadContent(),`
`103`	`103`	`);`
`104`	`104`	`}`
`105`	`105`	`}`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,8 @@ code {`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`.live-display {`
`49`		`- box-shadow: rgb(233, 235, 237) 0px 0px 1px 1px,`
	`49`	`+ box-shadow:`
	`50`	`+ rgb(233, 235, 237) 0px 0px 1px 1px,`
`50`	`51`	`rgba(0, 7, 22, 0.12) 0px 1px 8px 2px;`
`51`	`52`	`margin-top: 0.5em;`
`52`	`53`	`image-rendering: crisp-edges;`