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

Jump to bottom

[docs] Fix issues reported by react compiler in docs folder #42881

Merged
merged 3 commits into from
Jul 8, 2024
Merged

[docs] Fix issues reported by react compiler in docs folder #42881

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c306977
fix
sai6855 Jul 7, 2024
a7a1d2f
refactor warn function
sai6855 Jul 8, 2024
f7d936d
revert codecopy
sai6855 Jul 8, 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
14 changes: 7 additions & 7 deletions packages/mui-docs/src/CodeCopy/CodeCopy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import * as React from 'react';
import { useRouter } from 'next/router';
import clipboardCopy from 'clipboard-copy';

const CodeBlockContext = React.createContext<React.MutableRefObject<HTMLDivElement | null>>({
current: null,
Copy link
Contributor Author

@sai6855 sai6855 Jul 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when ref is defined as null, react treats ref as unmutable. hence changed null to undefined

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this documented somewhere?

Copy link
Contributor Author

@sai6855 sai6855 Jul 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I cannot recall where i read, but i guess its infered from below ts playground that, when ref is defined as null, react doesn't allow ref to mutate

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wChS0IA7AZ3iMwEY4BeRYmAOgFcallMAHircQAIyRQAfAAoRAG3kBKcg0ac03KESowWAJnKVa9JJn2t26Lr35nhoidJkrSDfRq069+oA

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case, using React.useRef<number | null>(null) makes the ref mutable.

Copy link
Contributor Author

@sai6855 sai6855 Jul 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay my bad, i misunderstood.

as of now, react-compiler throws error when modifying ref inside event handler. same issue was reported here facebook/react#29106. looks like it is treated as bug (facebook/react#29106 (comment)) and fixed here facebook/react#29591.

once fix gets published and we update eslint-plugin-react-complier i'm expecting below error to go away. hence reverted all changes done in this file.

Error reported by current version of react-compiler:

image

const CodeBlockContext = React.createContext<React.MutableRefObject<HTMLDivElement | undefined>>({
current: undefined,
});

/**
Expand All @@ -24,15 +24,15 @@ export function useCodeCopy(): React.HTMLAttributes<HTMLDivElement> {
onMouseLeave: (event) => {
if (rootNode.current === event.currentTarget) {
(rootNode.current.querySelector('.MuiCode-copy') as null | HTMLButtonElement)?.blur();
rootNode.current = null;
rootNode.current = undefined;
}
},
onFocus: (event) => {
rootNode.current = event.currentTarget;
},
onBlur: (event) => {
if (rootNode.current === event.currentTarget) {
rootNode.current = null;
rootNode.current = undefined;
}
},
};
Expand Down Expand Up @@ -66,7 +66,7 @@ function InitCodeCopy() {
const handleMouseLeave = () => {
if (rootNode.current === elm) {
(rootNode.current.querySelector('.MuiCode-copy') as null | HTMLButtonElement)?.blur();
rootNode.current = null;
rootNode.current = undefined;
}
};
elm.addEventListener('mouseleave', handleMouseLeave);
Expand All @@ -82,7 +82,7 @@ function InitCodeCopy() {
const handleFocusout = () => {
// use `focusout` because it bubbles from the copy button
if (rootNode.current === elm) {
rootNode.current = null;
rootNode.current = undefined;
}
};
elm.addEventListener('focusout', handleFocusout);
Expand Down Expand Up @@ -157,7 +157,7 @@ interface CodeCopyProviderProps {
* Any code block inside the tree can set the rootNode when mouse enter to leverage keyboard copy.
*/
export function CodeCopyProvider({ children }: CodeCopyProviderProps) {
const rootNode = React.useRef<HTMLDivElement | null>(null);
const rootNode = React.useRef<HTMLDivElement | undefined>(undefined);
React.useEffect(() => {
document.addEventListener('keydown', (event) => {
if (!rootNode.current) {
Expand Down
11 changes: 9 additions & 2 deletions packages/mui-docs/src/i18n/i18n.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,14 @@ export function useSetUserLanguage() {

const warnedOnce: Record<string, boolean> = {};

const warn = (fullKey: string) => {
if (!warnedOnce[fullKey]) {
console.warn(`Missing translation for ${fullKey}`);

warnedOnce[fullKey] = true;
}
};

export interface TranslateOptions {
ignoreWarning?: boolean;
}
Expand All @@ -107,8 +115,7 @@ export function useTranslate() {
const fullKey = `${userLanguage}:${key}`;
// No warnings in CI env
if (!ignoreWarning && !warnedOnce[fullKey] && typeof window !== 'undefined') {
aarongarciah marked this conversation as resolved.
Show resolved Hide resolved
console.error(`Missing translation for ${fullKey}`);
warnedOnce[fullKey] = true;
warn(fullKey);
}
return getPath(translations.en, key);
}
Expand Down
Loading