Dev/prettier3 (#1794)

* Update Prettier to 3

* Add eslint-config-prettier

streamlit_webrtc/frontend/.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     "plugin:react/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:storybook/recommended",
+    "prettier",
   ],
   globals: {
     Atomics: "readonly",

streamlit_webrtc/frontend/package.json

@@ -73,8 +73,9 @@
     "@storybook/react": "^8.3.0",
     "@storybook/react-webpack5": "^8.3.0",
     "@storybook/test": "^8.3.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "prettier": "^2.7.1",
+    "prettier": "^3.3.3",
     "storybook": "^8.3.0"
   },
   "jest": {

streamlit_webrtc/frontend/src/DeviceSelect/DeviceSelect.tsx

@@ -26,7 +26,7 @@ import { stopAllTracks } from "./utils";
 
 function ensureValidSelection(
   devices: MediaDeviceInfo[],
-  selectedDeviceId: MediaDeviceInfo["deviceId"] | undefined
+  selectedDeviceId: MediaDeviceInfo["deviceId"] | undefined,
 ): MediaDeviceInfo["deviceId"] | undefined {
   const deviceIds = devices.map((d) => d.deviceId);
   if (selectedDeviceId && deviceIds.includes(selectedDeviceId)) {
@@ -93,11 +93,11 @@ const deviceSelectionReducer: Reducer<
 
       const selectedVideoInputDeviceId = ensureValidSelection(
         videoInputs,
-        state.selectedVideoInputDeviceId
+        state.selectedVideoInputDeviceId,
       );
       const selectedAudioInputDeviceId = ensureValidSelection(
         audioInputs,
-        state.selectedAudioInputDeviceId
+        state.selectedAudioInputDeviceId,
       );
 
       return {

streamlit_webrtc/frontend/src/DeviceSelect/components/DeviceSelectContainer.tsx

@@ -8,7 +8,7 @@ interface DeviceSelectContainerProps {
   children: React.ReactNode;
 }
 const DeviceSelectContainer: React.VFC<DeviceSelectContainerProps> = (
-  props
+  props,
 ) => {
   const theme = useTheme();
   const isSmallViewport = useMediaQuery(theme.breakpoints.down("sm"));

streamlit_webrtc/frontend/src/DeviceSelect/components/messages/DeviceNotAvailableMessage.tsx

@@ -6,7 +6,7 @@ interface DeviceNotAvailableMessageProps {
   error: Error;
 }
 const DeviceNotAvailableMessage: React.VFC<DeviceNotAvailableMessageProps> = (
-  props
+  props,
 ) => {
   return (
     <Message>

streamlit_webrtc/frontend/src/MediaStreamPlayer.tsx

@@ -38,7 +38,7 @@ const MediaStreamPlayer: React.VFC<MediaStreamPlayerProps> = (props) => {
         node.srcObject = props.stream;
       }
     },
-    [props.stream]
+    [props.stream],
   );
 
   const refreshFrameHeight = useCallback(() => Streamlit.setFrameHeight(), []);

streamlit_webrtc/frontend/src/WebRtcStreamer.tsx

@@ -38,7 +38,7 @@ const WebRtcStreamerInner: React.VFC<WebRtcStreamerInnerProps> = (props) => {
     deviceIds.video,
     deviceIds.audio,
     props.onComponentValueChange,
-    setDeviceIds
+    setDeviceIds,
   );
 
   const mode = props.mode;
@@ -50,7 +50,7 @@ const WebRtcStreamerInner: React.VFC<WebRtcStreamerInnerProps> = (props) => {
   const receivable = isWebRtcMode(mode) && isReceivable(mode);
   const transmittable = isWebRtcMode(mode) && isTransmittable(mode);
   const { videoEnabled, audioEnabled } = getMediaUsage(
-    props.mediaStreamConstraints
+    props.mediaStreamConstraints,
   );
 
   const [deviceSelectOpen, setDeviceSelectOpen] = useState(false);

streamlit_webrtc/frontend/src/index.tsx

@@ -17,5 +17,5 @@ ReactDOM.render(
       </TranslationProvider>
     </StreamlitProvider>
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById("root"),
 );

streamlit_webrtc/frontend/src/media-constraint.ts

@@ -1,7 +1,7 @@
 export function compileMediaConstraints(
   src: MediaStreamConstraints | undefined,
   videoDeviceId: string | undefined,
-  audioDeviceId: string | undefined
+  audioDeviceId: string | undefined,
 ): MediaStreamConstraints {
   const constraints = src || {};
 

streamlit_webrtc/frontend/src/translation/TranslationProvider.tsx

@@ -3,7 +3,7 @@ import { useRenderData } from "streamlit-component-lib-react-hooks";
 import { Translations } from "./types";
 
 const translationContext = React.createContext<Translations | undefined>(
-  undefined
+  undefined,
 );
 
 export const useTranslation = (key: keyof Translations) => {
@@ -47,7 +47,7 @@ const TranslationProvider: React.VFC<TranslationProviderProps> = (props) => {
       device_not_available,
       device_access_denied,
       media_api_not_available,
-    ]
+    ],
   );
   return (
     <translationContext.Provider value={value}>

streamlit_webrtc/frontend/src/webrtc/index.ts

@@ -12,7 +12,7 @@ export const isTransmittable = (mode: WebRtcMode): boolean =>
   mode === "SENDRECV" || mode === "SENDONLY";
 
 const setupOffer = (
-  pc: RTCPeerConnection
+  pc: RTCPeerConnection,
 ): Promise<RTCSessionDescription | null> => {
   return pc
     .createOffer()
@@ -60,7 +60,10 @@ export const useWebRtc = (
   videoDeviceIdRequest: MediaDeviceInfo["deviceId"] | undefined,
   audioDeviceIdRequest: MediaDeviceInfo["deviceId"] | undefined,
   onComponentValueChange: (newComponentValue: ComponentValue) => void,
-  onDevicesOpened: (openedDeviceIds: { video?: string; audio?: string }) => void
+  onDevicesOpened: (openedDeviceIds: {
+    video?: string;
+    audio?: string;
+  }) => void,
 ) => {
   // Initialize component value
   useEffect(() => {
@@ -74,7 +77,7 @@ export const useWebRtc = (
   const pcRef = useRef<RTCPeerConnection>();
   const reducer = useMemo(
     () => connectReducer(onComponentValueChange),
-    [onComponentValueChange]
+    [onComponentValueChange],
   );
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -156,7 +159,7 @@ export const useWebRtc = (
         const constraints = compileMediaConstraints(
           props.mediaStreamConstraints,
           videoDeviceIdRequest,
-          audioDeviceIdRequest
+          audioDeviceIdRequest,
         );
         console.log("MediaStreamConstraints:", constraints);
 
@@ -165,7 +168,7 @@ export const useWebRtc = (
             // Ref: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#privacy_and_security
             // > A secure context is, in short, a page loaded using HTTPS or the file:/// URL scheme, or a page loaded from localhost.
             throw new Error(
-              "navigator.mediaDevices is undefined. It seems the current document is not loaded securely."
+              "navigator.mediaDevices is undefined. It seems the current document is not loaded securely.",
             );
           }
           if (navigator.mediaDevices.getUserMedia == null) {
@@ -232,7 +235,7 @@ export const useWebRtc = (
       dispatch({
         type: "ERROR",
         error,
-      })
+      }),
     );
   }, [
     audioDeviceIdRequest,

streamlit_webrtc/frontend/src/webrtc/reducer.ts

@@ -77,7 +77,7 @@ export const reducer: React.Reducer<State, Action> = (state, action) => {
 };
 
 export const connectReducer = (
-  onComponentValueChange: (newComponentValue: ComponentValue) => void
+  onComponentValueChange: (newComponentValue: ComponentValue) => void,
 ): React.Reducer<State, Action> => {
   const connectedReducer: React.Reducer<State, Action> = (state, action) => {
     const nextState = reducer(state, action);