From a7c3756c2d71db9eee1656c5a8cffb760324e0b5 Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Sat, 14 Sep 2024 07:35:43 +0100 Subject: [PATCH] Dev/prettier3 (#1794) * Update Prettier to 3 * Add eslint-config-prettier --- streamlit_webrtc/frontend/.eslintrc.js | 1 + streamlit_webrtc/frontend/package-lock.json | 40 ++++++++++++++----- streamlit_webrtc/frontend/package.json | 3 +- .../src/DeviceSelect/DeviceSelect.tsx | 6 +-- .../components/DeviceSelectContainer.tsx | 2 +- .../messages/DeviceNotAvailableMessage.tsx | 2 +- .../frontend/src/MediaStreamPlayer.tsx | 2 +- .../frontend/src/WebRtcStreamer.tsx | 4 +- streamlit_webrtc/frontend/src/index.tsx | 2 +- .../frontend/src/media-constraint.ts | 2 +- .../src/translation/TranslationProvider.tsx | 4 +- streamlit_webrtc/frontend/src/webrtc/index.ts | 15 ++++--- .../frontend/src/webrtc/reducer.ts | 2 +- 13 files changed, 56 insertions(+), 29 deletions(-) diff --git a/streamlit_webrtc/frontend/.eslintrc.js b/streamlit_webrtc/frontend/.eslintrc.js index 4c168cde..ef0ced61 100644 --- a/streamlit_webrtc/frontend/.eslintrc.js +++ b/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", diff --git a/streamlit_webrtc/frontend/package-lock.json b/streamlit_webrtc/frontend/package-lock.json index b1a69d19..9918ea20 100644 --- a/streamlit_webrtc/frontend/package-lock.json +++ b/streamlit_webrtc/frontend/package-lock.json @@ -40,8 +40,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" } }, @@ -9311,6 +9312,19 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/eslint-config-prettier": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", + "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", + "dev": true, + "license": "MIT", + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, "node_modules/eslint-config-react-app": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz", @@ -14769,15 +14783,16 @@ } }, "node_modules/prettier": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz", - "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "dev": true, + "license": "MIT", "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "url": "https://github.com/prettier/prettier?sponsor=1" @@ -28930,6 +28945,13 @@ } } }, + "eslint-config-prettier": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", + "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", + "dev": true, + "requires": {} + }, "eslint-config-react-app": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz", @@ -32721,9 +32743,9 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" }, "prettier": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz", - "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "dev": true }, "pretty-bytes": { diff --git a/streamlit_webrtc/frontend/package.json b/streamlit_webrtc/frontend/package.json index 46174138..a038567f 100644 --- a/streamlit_webrtc/frontend/package.json +++ b/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": { diff --git a/streamlit_webrtc/frontend/src/DeviceSelect/DeviceSelect.tsx b/streamlit_webrtc/frontend/src/DeviceSelect/DeviceSelect.tsx index ce2c16d1..4030ed7e 100644 --- a/streamlit_webrtc/frontend/src/DeviceSelect/DeviceSelect.tsx +++ b/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 { diff --git a/streamlit_webrtc/frontend/src/DeviceSelect/components/DeviceSelectContainer.tsx b/streamlit_webrtc/frontend/src/DeviceSelect/components/DeviceSelectContainer.tsx index 56b28f3b..d8547a72 100644 --- a/streamlit_webrtc/frontend/src/DeviceSelect/components/DeviceSelectContainer.tsx +++ b/streamlit_webrtc/frontend/src/DeviceSelect/components/DeviceSelectContainer.tsx @@ -8,7 +8,7 @@ interface DeviceSelectContainerProps { children: React.ReactNode; } const DeviceSelectContainer: React.VFC = ( - props + props, ) => { const theme = useTheme(); const isSmallViewport = useMediaQuery(theme.breakpoints.down("sm")); diff --git a/streamlit_webrtc/frontend/src/DeviceSelect/components/messages/DeviceNotAvailableMessage.tsx b/streamlit_webrtc/frontend/src/DeviceSelect/components/messages/DeviceNotAvailableMessage.tsx index 6fbcf8cc..3c1dbe9b 100644 --- a/streamlit_webrtc/frontend/src/DeviceSelect/components/messages/DeviceNotAvailableMessage.tsx +++ b/streamlit_webrtc/frontend/src/DeviceSelect/components/messages/DeviceNotAvailableMessage.tsx @@ -6,7 +6,7 @@ interface DeviceNotAvailableMessageProps { error: Error; } const DeviceNotAvailableMessage: React.VFC = ( - props + props, ) => { return ( diff --git a/streamlit_webrtc/frontend/src/MediaStreamPlayer.tsx b/streamlit_webrtc/frontend/src/MediaStreamPlayer.tsx index d651cbe6..4a7e4cc1 100644 --- a/streamlit_webrtc/frontend/src/MediaStreamPlayer.tsx +++ b/streamlit_webrtc/frontend/src/MediaStreamPlayer.tsx @@ -38,7 +38,7 @@ const MediaStreamPlayer: React.VFC = (props) => { node.srcObject = props.stream; } }, - [props.stream] + [props.stream], ); const refreshFrameHeight = useCallback(() => Streamlit.setFrameHeight(), []); diff --git a/streamlit_webrtc/frontend/src/WebRtcStreamer.tsx b/streamlit_webrtc/frontend/src/WebRtcStreamer.tsx index af327c9d..a59e1257 100644 --- a/streamlit_webrtc/frontend/src/WebRtcStreamer.tsx +++ b/streamlit_webrtc/frontend/src/WebRtcStreamer.tsx @@ -38,7 +38,7 @@ const WebRtcStreamerInner: React.VFC = (props) => { deviceIds.video, deviceIds.audio, props.onComponentValueChange, - setDeviceIds + setDeviceIds, ); const mode = props.mode; @@ -50,7 +50,7 @@ const WebRtcStreamerInner: React.VFC = (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); diff --git a/streamlit_webrtc/frontend/src/index.tsx b/streamlit_webrtc/frontend/src/index.tsx index 0b9e43c4..7ce8d7ae 100644 --- a/streamlit_webrtc/frontend/src/index.tsx +++ b/streamlit_webrtc/frontend/src/index.tsx @@ -17,5 +17,5 @@ ReactDOM.render( , - document.getElementById("root") + document.getElementById("root"), ); diff --git a/streamlit_webrtc/frontend/src/media-constraint.ts b/streamlit_webrtc/frontend/src/media-constraint.ts index 1350b729..695ac67a 100644 --- a/streamlit_webrtc/frontend/src/media-constraint.ts +++ b/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 || {}; diff --git a/streamlit_webrtc/frontend/src/translation/TranslationProvider.tsx b/streamlit_webrtc/frontend/src/translation/TranslationProvider.tsx index c2114313..a455c59c 100644 --- a/streamlit_webrtc/frontend/src/translation/TranslationProvider.tsx +++ b/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( - undefined + undefined, ); export const useTranslation = (key: keyof Translations) => { @@ -47,7 +47,7 @@ const TranslationProvider: React.VFC = (props) => { device_not_available, device_access_denied, media_api_not_available, - ] + ], ); return ( diff --git a/streamlit_webrtc/frontend/src/webrtc/index.ts b/streamlit_webrtc/frontend/src/webrtc/index.ts index a8a68462..714453b0 100644 --- a/streamlit_webrtc/frontend/src/webrtc/index.ts +++ b/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 => { 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(); 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, diff --git a/streamlit_webrtc/frontend/src/webrtc/reducer.ts b/streamlit_webrtc/frontend/src/webrtc/reducer.ts index 996cbf42..ab97dc94 100644 --- a/streamlit_webrtc/frontend/src/webrtc/reducer.ts +++ b/streamlit_webrtc/frontend/src/webrtc/reducer.ts @@ -77,7 +77,7 @@ export const reducer: React.Reducer = (state, action) => { }; export const connectReducer = ( - onComponentValueChange: (newComponentValue: ComponentValue) => void + onComponentValueChange: (newComponentValue: ComponentValue) => void, ): React.Reducer => { const connectedReducer: React.Reducer = (state, action) => { const nextState = reducer(state, action);