[core] A couple of simply fixes from mui#34870 (mui#34953)

daniel-rabe · Nov 29, 2022 · 676ae75 · 676ae75
1 parent 363677e
commit 676ae75
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 48 deletions.
diff --git a/docs/packages/markdown/loader.js b/docs/packages/markdown/loader.js
@@ -155,14 +155,14 @@ module.exports = async function demoLoader() {
       this.addDependency(moduleFilepath);
       demos[demoName] = {
         module: moduleID,
-        raw: await fs.readFile(moduleFilepath, { encoding: 'utf-8' }),
+        raw: await fs.readFile(moduleFilepath, { encoding: 'utf8' }),
       };
       demoModuleIDs.add(moduleID);
 
       try {
         const previewFilepath = moduleFilepath.replace(/\.js$/, '.tsx.preview');
 
-        const jsxPreview = await fs.readFile(previewFilepath, { encoding: 'utf-8' });
+        const jsxPreview = await fs.readFile(previewFilepath, { encoding: 'utf8' });
         this.addDependency(previewFilepath);
 
         demos[demoName].jsxPreview = jsxPreview;
@@ -177,7 +177,7 @@ module.exports = async function demoLoader() {
           moduleTS.replace(/\//g, path.sep),
         );
         this.addDependency(moduleTSFilepath);
-        const rawTS = await fs.readFile(moduleTSFilepath, { encoding: 'utf-8' });
+        const rawTS = await fs.readFile(moduleTSFilepath, { encoding: 'utf8' });
 
         // In development devs can choose whether they want to work on the TS or JS version.
         // But this leads to building both demo version i.e. more build time.
@@ -222,20 +222,23 @@ module.exports = async function demoLoader() {
         return `import ${moduleIDToJSIdentifier(moduleID)} from '${moduleID}';`;
       })
       .join('\n')}
-
-    export const docs = ${JSON.stringify(docs, null, 2)};
-    export const demos = ${JSON.stringify(demos, null, 2)};
-    export const demoComponents = {${Array.from(demoModuleIDs)
-      .map((moduleID) => {
-        return `${JSON.stringify(moduleID)}: ${moduleIDToJSIdentifier(moduleID)},`;
-      })
-      .join('\n')}};
-        export const srcComponents = {${Array.from(componentModuleIDs)
-          .map((moduleID) => {
-            return `${JSON.stringify(components[moduleID])}: ${moduleIDToJSIdentifier(moduleID)},`;
-          })
-          .join('\n')}};
-  `;
+export const docs = ${JSON.stringify(docs, null, 2)};
+export const demos = ${JSON.stringify(demos, null, 2)};
+export const demoComponents = {
+${Array.from(demoModuleIDs)
+  .map((moduleID) => {
+    return `  "${moduleID}": ${moduleIDToJSIdentifier(moduleID)},`;
+  })
+  .join('\n')}
+};
+export const srcComponents = {
+${Array.from(componentModuleIDs)
+  .map((moduleID) => {
+    return `  "${components[moduleID]}": ${moduleIDToJSIdentifier(moduleID)},`;
+  })
+  .join('\n')}
+};
+      `;
 
   return transformed;
 };
diff --git a/docs/scripts/reportBrokenLinks.js b/docs/scripts/reportBrokenLinks.js
@@ -68,7 +68,7 @@ function getLinksAndAnchors(fileName) {
   const userLanguage = 'en';
   const render = createRender({ headingHashes, toc, userLanguage });
 
-  const data = fse.readFileSync(fileName, { encoding: 'utf-8' });
+  const data = fse.readFileSync(fileName, { encoding: 'utf8' });
   render(data);
 
   const links = getPageLinks(data).map(cleanLink);

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { alpha, styled } from '@mui/material/styles';
 import { styled as joyStyled } from '@mui/joy/styles';
+import { unstable_useId as useId } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
 import Collapse from '@mui/material/Collapse';
 import NoSsr from '@mui/material/NoSsr';
@@ -80,17 +81,6 @@ function useDemoData(codeVariant, demo, githubLocation) {
   };
 }
 
-// TODO: replace with React.useOpaqueReference if it is released
-function useUniqueId(prefix) {
-  // useOpaqueReference
-  const [id, setId] = React.useState();
-  React.useEffect(() => {
-    setId(Math.random().toString(36).slice(2));
-  }, []);
-
-  return id ? `${prefix}${id}` : id;
-}
-
 const Root = styled('div')(({ theme }) => ({
   marginBottom: 24,
   marginLeft: theme.spacing(-2),
@@ -163,7 +153,7 @@ const DemoRootMaterial = styled('div', {
         radial-gradient(at 93% 85%, ${alpha(
           theme.palette.primaryDark[500],
           0.8,
-        )} 0px, transparent 50%), 
+        )} 0px, transparent 50%),
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`
         : `radial-gradient(at 51% 52%, ${alpha(
             theme.palette.primary[50],
@@ -172,10 +162,7 @@ const DemoRootMaterial = styled('div', {
         radial-gradient(at 80% 0%, #FFFFFF 0px, transparent 20%),
         radial-gradient(at 0% 95%, ${alpha(theme.palette.primary[100], 0.3)}, transparent 40%),
         radial-gradient(at 0% 20%, ${theme.palette.primary[50]} 0px, transparent 50%), 
-        radial-gradient(at 93% 85%, ${alpha(
-          theme.palette.primary[100],
-          0.2,
-        )} 0px, transparent 50%), 
+        radial-gradient(at 93% 85%, ${alpha(theme.palette.primary[100], 0.2)} 0px, transparent 50%),
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.03'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`,
   }),
   ...(hiddenToolbar && {
@@ -312,13 +299,14 @@ export default function Demo(props) {
 
   const [demoKey, resetDemo] = React.useReducer((key) => key + 1, 0);
 
-  const demoId = useUniqueId('demo-');
-  const demoSourceId = useUniqueId(`demoSource-`);
+  const demoId = `demo-${useId()}`;
+  const demoSourceId = `demoSource-${useId()}`;
   const openDemoSource = codeOpen || showPreview;
 
   const initialFocusRef = React.useRef(null);
 
   const [showAd, setShowAd] = React.useState(false);
+  const adVisibility = showAd && !disableAd && !demoOptions.disableAd;
 
   const isJoy = asPathWithoutLang.startsWith('/joy-ui');
   const DemoRoot = asPathWithoutLang.startsWith('/joy-ui') ? DemoRootJoy : DemoRootMaterial;
@@ -390,7 +378,7 @@ export default function Demo(props) {
             }}
           />
         </Collapse>
-        {showAd && !disableAd && !demoOptions.disableAd ? <AdCarbonInline /> : null}
+        {adVisibility ? <AdCarbonInline /> : null}
       </Wrapper>
     </Root>
   );

diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js
@@ -78,7 +78,6 @@ const Frame = styled('iframe')(({ theme }) => ({
 
 function DemoFrame(props) {
   const { children, name, ...other } = props;
-  const title = `${name} demo`;
   /**
    * @type {import('react').Ref<HTMLIFrameElement>}
    */
@@ -105,7 +104,7 @@ function DemoFrame(props) {
   const document = frameRef.current?.contentDocument;
   return (
     <React.Fragment>
-      <Frame onLoad={onLoad} ref={frameRef} title={title} {...other} />
+      <Frame onLoad={onLoad} ref={frameRef} title={`${name} demo`} {...other} />
       {iframeLoaded !== false
         ? ReactDOM.createPortal(
             <FramedDemo document={document}>{children}</FramedDemo>,
@@ -122,7 +121,7 @@ DemoFrame.propTypes = {
 };
 
 // Use the default MUI theme for the demos
-const getTheme = (outerTheme) => {
+function getTheme(outerTheme) {
   const brandingDesignTokens = getDesignTokens(outerTheme.palette.mode);
   const isCustomized =
     outerTheme.palette.primary?.main &&
@@ -149,7 +148,7 @@ const getTheme = (outerTheme) => {
     resultTheme.spacing = outerTheme.spacing;
   }
   return resultTheme;
-};
+}
 
 // TODO: Let demos decide whether they need JSS
 const jss = create({

diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
@@ -356,9 +356,9 @@ export default function DemoToolbar(props) {
     setSourceHintSeen(true);
   };
 
-  function handleResetFocusClick() {
+  const handleResetFocusClick = () => {
     initialFocusRef.current.focusVisible();
-  }
+  };
 
   const showSourceHint = demoHovered && !sourceHintSeen;
 

diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -129,7 +129,7 @@ export default function MarkdownDocs(props) {
                 js: demoComponents[demo.module] ?? noComponent(demo.module),
                 jsxPreview: demo.jsxPreview,
                 rawTS: demo.rawTS,
-                tsx: demo.moduleTS ? demoComponents[demo.moduleTS] : null,
+                tsx: demoComponents[demo.moduleTS] ?? null,
               }}
               disableAd={disableAd}
               demoOptions={renderedMarkdownOrDemo}

diff --git a/docs/src/modules/utils/CodeCopy.tsx b/docs/src/modules/utils/CodeCopy.tsx
@@ -15,7 +15,7 @@ const CodeBlockContext = React.createContext<React.MutableRefObject<HTMLDivEleme
  *  <button className="MuiCode-copy">...</button>
  * </div>
  */
-export function useCodeCopy() {
+export function useCodeCopy(): any {
   const rootNode = React.useContext(CodeBlockContext);
   return {
     onMouseEnter: (event: React.MouseEvent) => {

diff --git a/packages/mui-envinfo/envinfo.test.js b/packages/mui-envinfo/envinfo.test.js
@@ -26,7 +26,7 @@ describe('@mui/envinfo', () => {
       isRunningOnWindows ? 'npx.cmd' : 'npx',
       ['--package', buildPath, 'envinfo', ...args],
       {
-        encoding: 'utf-8',
+        encoding: 'utf8',
         stdio: 'pipe',
       },
     );

diff --git a/packages/mui-material/scripts/rollup.config.js b/packages/mui-material/scripts/rollup.config.js
@@ -51,7 +51,7 @@ function sizeSnapshot(options) {
       // eslint-disable-next-line no-console -- purpose of this plugin
       console.info(infoString);
       // TODO: Should lock `snapshotPath` since something else might write to `snapshotPath` between read and write
-      const snapshotContent = await fs.readFile(snapshotPath, { encoding: 'utf-8' }).then(
+      const snapshotContent = await fs.readFile(snapshotPath, { encoding: 'utf8' }).then(
         (json) => {
           return JSON.parse(json);
         },

diff --git a/test/cli.js b/test/cli.js
@@ -7,7 +7,7 @@ const yargs = require('yargs');
 async function run(argv) {
   const workspaceRoot = path.resolve(__dirname, '../');
 
-  const gitignore = fs.readFileSync(path.join(workspaceRoot, '.gitignore'), { encoding: 'utf-8' });
+  const gitignore = fs.readFileSync(path.join(workspaceRoot, '.gitignore'), { encoding: 'utf8' });
   const ignore = gitignore
     .split(/\r?\n/)
     .filter((pattern) => {