From 2c598f563233a966e505f5ae2a70345b8065effd Mon Sep 17 00:00:00 2001 From: "Lu[ke] Wilson" Date: Mon, 23 Dec 2024 10:02:51 +0000 Subject: [PATCH 1/4] bump react --- packages/web/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/package.json b/packages/web/package.json index 0e7e1f6a..db2b5669 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -86,8 +86,8 @@ "mercury-engine": "^1.2.2", "p5": "^1.9.0", "postcss": "^8.4.21", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.0.0", + "react-dom": "^19.0.0", "react-helmet-async": "^1.3.0", "react-router-dom": "^6.9.0", "tailwind-merge": "^1.10.0", From 0261eee92ac0096744dd553563f2101151e81252 Mon Sep 17 00:00:00 2001 From: "Lu[ke] Wilson" Date: Mon, 23 Dec 2024 10:03:00 +0000 Subject: [PATCH 2/4] remove forwardRefs --- packages/web/src/components/editor.tsx | 178 +++++++++--------- packages/web/src/components/hydra-canvas.tsx | 35 ++-- packages/web/src/components/ui/button.tsx | 25 +-- packages/web/src/components/ui/command.tsx | 79 ++++---- packages/web/src/components/ui/dialog.tsx | 49 ++--- .../web/src/components/ui/dropdown-menu.tsx | 117 +++++++----- packages/web/src/components/ui/input.tsx | 30 +-- packages/web/src/components/ui/label.tsx | 11 +- packages/web/src/components/ui/menubar.tsx | 140 ++++++++------ packages/web/src/components/ui/popover.tsx | 13 +- packages/web/src/components/ui/select.tsx | 67 ++++--- packages/web/src/components/ui/toast.tsx | 72 +++---- packages/web/src/components/ui/toggle.tsx | 15 +- packages/web/src/components/ui/tooltip.tsx | 12 +- 14 files changed, 451 insertions(+), 392 deletions(-) diff --git a/packages/web/src/components/editor.tsx b/packages/web/src/components/editor.tsx index 0cb9f5d0..817bc603 100644 --- a/packages/web/src/components/editor.tsx +++ b/packages/web/src/components/editor.tsx @@ -108,101 +108,97 @@ export interface EditorProps extends ReactCodeMirrorProps { document?: Document; extensionSettings?: any; settings?: EditorSettings; + ref: React.RefObject; } -export const Editor = React.forwardRef( - ( - { document, settings, ...props }: EditorProps, - ref: React.ForwardedRef - ) => { - const [mounted, setMounted] = useState(false); - const query = useQuery(); +export const Editor = ({ document, settings, ref, ...props }: EditorProps) => { + const [mounted, setMounted] = useState(false); + const query = useQuery(); - // useEffect only runs on the client, so now we can safely show the UI - useEffect(() => { - // Make sure query parameters are set before loading the editor - if (!query) return; - setMounted(true); - }, [query]); + // useEffect only runs on the client, so now we can safely show the UI + useEffect(() => { + // Make sure query parameters are set before loading the editor + if (!query) return; + setMounted(true); + }, [query]); - if (!mounted || !document) { - return null; - } + if (!mounted || !document) { + return null; + } - const { theme, fontFamily, lineNumbers, wrapText, vimMode } = { - theme: "dracula", - fontFamily: "IBM Plex Mono", - lineNumbers: false, - wrapText: false, - vimMode: false, - ...settings, - }; + const { theme, fontFamily, lineNumbers, wrapText, vimMode } = { + theme: "dracula", + fontFamily: "IBM Plex Mono", + lineNumbers: false, + wrapText: false, + vimMode: false, + ...settings, + }; - const readOnly = !!query.get("readOnly"); - const language: string = langByTarget[document.target] || defaultLanguage; - const languageExtension = langExtensionsByLanguage[language] || javascript; - const extensions = [ - EditorView.theme({ - "&": { - fontFamily: fontFamily, - }, - ".cm-content": { - fontFamily: fontFamily, - }, - ".cm-gutters": { - fontFamily: fontFamily, - "margin-right": "10px", - }, - ".cm-line": { - "font-size": "105%", - "font-weight": "600", - background: "rgba(0, 0, 0, 0.7)", - "max-width": "fit-content", - padding: "0px", - }, - ".cm-activeLine": { - "background-color": "rgba(0, 0, 0, 1) !important", - }, - "& .cm-scroller": { - minHeight: "100vh", - }, - ".cm-ySelectionInfo": { - opacity: "1", - fontFamily: fontFamily, - color: "black", - padding: "3px 4px", - fontSize: "0.8rem", - "font-weight": "bold", - top: "1.25em", - "z-index": "1000", - }, - }), - flokSetup(document, { readOnly }), - languageExtension(), - highlightExtension, - readOnly ? EditorState.readOnly.of(true) : [], - lineNumbers ? lineNumbersExtension() : [], - vimMode ? vim() : [], - wrapText ? EditorView.lineWrapping : [], - ]; + const readOnly = !!query.get("readOnly"); + const language: string = langByTarget[document.target] || defaultLanguage; + const languageExtension = langExtensionsByLanguage[language] || javascript; + const extensions = [ + EditorView.theme({ + "&": { + fontFamily: fontFamily, + }, + ".cm-content": { + fontFamily: fontFamily, + }, + ".cm-gutters": { + fontFamily: fontFamily, + "margin-right": "10px", + }, + ".cm-line": { + "font-size": "105%", + "font-weight": "600", + background: "rgba(0, 0, 0, 0.7)", + "max-width": "fit-content", + padding: "0px", + }, + ".cm-activeLine": { + "background-color": "rgba(0, 0, 0, 1) !important", + }, + "& .cm-scroller": { + minHeight: "100vh", + }, + ".cm-ySelectionInfo": { + opacity: "1", + fontFamily: fontFamily, + color: "black", + padding: "3px 4px", + fontSize: "0.8rem", + "font-weight": "bold", + top: "1.25em", + "z-index": "1000", + }, + }), + flokSetup(document, { readOnly }), + languageExtension(), + highlightExtension, + readOnly ? EditorState.readOnly.of(true) : [], + lineNumbers ? lineNumbersExtension() : [], + vimMode ? vim() : [], + wrapText ? EditorView.lineWrapping : [], + ]; - // If it's read-only, put a div in front of the editor so that the user - // can't interact with it. - return ( - <> - {readOnly &&
} - - - ); - } -); + // If it's read-only, put a div in front of the editor so that the user + // can't interact with it. + return ( + <> + {readOnly &&
} + + + ); +}; diff --git a/packages/web/src/components/hydra-canvas.tsx b/packages/web/src/components/hydra-canvas.tsx index 75c7f03c..c9f15bf1 100644 --- a/packages/web/src/components/hydra-canvas.tsx +++ b/packages/web/src/components/hydra-canvas.tsx @@ -5,24 +5,27 @@ import { DisplaySettings } from "@/lib/display-settings"; interface HydraCanvasProps { fullscreen?: boolean; displaySettings: DisplaySettings; + ref: React.RefObject; } -const HydraCanvas = React.forwardRef( - ( - { fullscreen, displaySettings }: HydraCanvasProps, - ref: React.ForwardedRef - ) => ( - - ) +const HydraCanvas = ({ + fullscreen, + displaySettings, + ref, +}: HydraCanvasProps) => ( + ); export default React.memo(HydraCanvas); diff --git a/packages/web/src/components/ui/button.tsx b/packages/web/src/components/ui/button.tsx index 7a497616..67c464a1 100644 --- a/packages/web/src/components/ui/button.tsx +++ b/packages/web/src/components/ui/button.tsx @@ -34,19 +34,20 @@ const buttonVariants = cva( export interface ButtonProps extends React.ButtonHTMLAttributes, - VariantProps {} + VariantProps { + ref: React.Ref; +} + +const Button = ({ className, variant, size, ref, ...props }: ButtonProps) => { + return ( +