Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[chore] Bump to React 19 #307

Merged
merged 4 commits into from
Dec 24, 2024
Merged

[chore] Bump to React 19 #307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2c598f5
bump react
TodePond Dec 23, 2024
0261eee
remove forwardRefs
TodePond Dec 23, 2024
9da1e20
bump radix
TodePond Dec 23, 2024
4623d28
fix: Make `ref` optional prop on `Button` and `Input`
munshkr Dec 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,397 changes: 1,965 additions & 432 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

24 changes: 12 additions & 12 deletions packages/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@
},
"dependencies": {
"@flok-editor/server-middleware": "^1.0.1",
"@strudel/draw": "^1.1.0",
"@uiw/codemirror-theme-andromeda": "^4.22.1",
"@uiw/codemirror-theme-bespin": "^4.22.1",
"@uiw/codemirror-theme-console": "^4.22.1",
"@uiw/codemirror-theme-github": "^4.22.1",
"@uiw/codemirror-theme-monokai": "^4.22.1",
"@uiw/codemirror-theme-solarized": "^4.22.1",
"@uiw/codemirror-theme-xcode": "^4.22.1",
"@strudel/draw": "^1.1.0",
"commander": "^10.0.0",
"compression": "^1.7.4",
"express": "^4.18.2",
Expand All @@ -43,15 +43,15 @@
"@flok-editor/cm-eval": "^1.0.1",
"@flok-editor/lang-tidal": "^1.0.1",
"@flok-editor/session": "^1.1.0",
"@radix-ui/react-dialog": "^1.0.3",
"@radix-ui/react-dropdown-menu": "^2.0.4",
"@radix-ui/react-label": "^2.0.1",
"@radix-ui/react-menubar": "^1.0.2",
"@radix-ui/react-popover": "^1.0.5",
"@radix-ui/react-select": "^1.2.1",
"@radix-ui/react-toast": "^1.1.3",
"@radix-ui/react-toggle": "^1.0.2",
"@radix-ui/react-tooltip": "^1.0.5",
"@radix-ui/react-dialog": "^1.1.4",
"@radix-ui/react-dropdown-menu": "^2.1.4",
"@radix-ui/react-label": "^2.1.1",
"@radix-ui/react-menubar": "^1.1.4",
"@radix-ui/react-popover": "^1.1.4",
"@radix-ui/react-select": "^2.1.4",
"@radix-ui/react-toast": "^1.2.4",
"@radix-ui/react-toggle": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.6",
"@replit/codemirror-vim": "^6.2.1",
"@strudel/codemirror": "^1.1.0",
"@strudel/core": "^1.1.0",
Expand Down Expand Up @@ -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",
Expand Down
178 changes: 87 additions & 91 deletions packages/web/src/components/editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,101 +108,97 @@ export interface EditorProps extends ReactCodeMirrorProps {
document?: Document;
extensionSettings?: any;
settings?: EditorSettings;
ref: React.RefObject<ReactCodeMirrorRef>;
}

export const Editor = React.forwardRef(
(
{ document, settings, ...props }: EditorProps,
ref: React.ForwardedRef<ReactCodeMirrorRef>
) => {
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 && <div className="absolute inset-0 z-10" />}
<CodeMirror
ref={ref}
value={document.content}
theme={themes[theme]?.ext || themes["dracula"]?.ext}
extensions={extensions}
basicSetup={{
foldGutter: false,
lineNumbers: false,
}}
{...props}
/>
</>
);
}
);
// If it's read-only, put a div in front of the editor so that the user
// can't interact with it.
return (
<>
{readOnly && <div className="absolute inset-0 z-10" />}
<CodeMirror
ref={ref}
value={document.content}
theme={themes[theme]?.ext || themes["dracula"]?.ext}
extensions={extensions}
basicSetup={{
foldGutter: false,
lineNumbers: false,
}}
{...props}
/>
</>
);
};
35 changes: 19 additions & 16 deletions packages/web/src/components/hydra-canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,27 @@ import { DisplaySettings } from "@/lib/display-settings";
interface HydraCanvasProps {
fullscreen?: boolean;
displaySettings: DisplaySettings;
ref: React.RefObject<HTMLCanvasElement>;
}

const HydraCanvas = React.forwardRef(
(
{ fullscreen, displaySettings }: HydraCanvasProps,
ref: React.ForwardedRef<HTMLCanvasElement>
) => (
<canvas
ref={ref}
className={cn(
"absolute top-0 left-0",
fullscreen && "h-full w-full block overflow-hidden"
)}
style={{ imageRendering: "pixelated", display: displaySettings.showCanvas ? "" : "none" }}
width={window.innerWidth / displaySettings.canvasPixelSize}
height={window.innerHeight / displaySettings.canvasPixelSize}
/>
)
const HydraCanvas = ({
fullscreen,
displaySettings,
ref,
}: HydraCanvasProps) => (
<canvas
ref={ref}
className={cn(
"absolute top-0 left-0",
fullscreen && "h-full w-full block overflow-hidden"
)}
style={{
imageRendering: "pixelated",
display: displaySettings.showCanvas ? "" : "none",
}}
width={window.innerWidth / displaySettings.canvasPixelSize}
height={window.innerHeight / displaySettings.canvasPixelSize}
/>
);

export default React.memo(HydraCanvas);
25 changes: 13 additions & 12 deletions packages/web/src/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,20 @@ const buttonVariants = cva(

export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {}
VariantProps<typeof buttonVariants> {
ref?: React.Ref<HTMLButtonElement>;
}

const Button = ({ className, variant, size, ref, ...props }: ButtonProps) => {
return (
<button
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
};

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, ...props }, ref) => {
return (
<button
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
}
);
Button.displayName = "Button";

export { Button, buttonVariants };
Loading
Loading