fix: docusaurus internal code formatting (#122)

- Fix issue described in: FormidableLabs/react-live#403 - Reverted most of the changes of a1f64f7 - Added a new React 19 hint to the use hook
childrentime · Dec 10, 2024 · 8b0af60 · 8b0af60
1 parent 4c85344
commit 8b0af60
Show file tree

Hide file tree

Showing 107 changed files with 296 additions and 207 deletions.
diff --git a/packages/website-docusaurus/docs/browser/useBroadcastChannel.mdx b/packages/website-docusaurus/docs/browser/useBroadcastChannel.mdx
@@ -46,7 +46,7 @@ function Demo() {
       {error && <p>Error: {error.message}</p>}
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useClipboard.mdx b/packages/website-docusaurus/docs/browser/useClipboard.mdx
@@ -6,7 +6,6 @@ Copy text to a user's clipboard
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [value, setValue] = useState("");
   const [text, copy] = useClipboard();
@@ -30,7 +29,7 @@ function Demo() {
       <button onClick={() => copy(value)}>Copy</button>
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useCssVar.mdx b/packages/website-docusaurus/docs/browser/useCssVar.mdx
@@ -5,7 +5,6 @@ Manipulate CSS variables
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const key = "--color";
   const ref = useRef<HTMLDivElement>(null);
@@ -32,8 +31,8 @@ function Demo() {
       <button onClick={switchColor}>Change Color</button>
     </section>
   );
-}
+};
 
 ```
 
-%%API%%
+%%API%%
diff --git a/packages/website-docusaurus/docs/browser/useDarkMode.mdx b/packages/website-docusaurus/docs/browser/useDarkMode.mdx
@@ -92,7 +92,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useDevicePixelRatio.mdx b/packages/website-docusaurus/docs/browser/useDevicePixelRatio.mdx
@@ -9,7 +9,7 @@ function Demo() {
   const { pixelRatio } = useDevicePixelRatio();
 
   return <p>Device pixel ratio: {pixelRatio}</p>;
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useElementByPoint.mdx b/packages/website-docusaurus/docs/browser/useElementByPoint.mdx
@@ -61,7 +61,7 @@ function Demo() {
       </div>
     </>
   );
-}
+};
 
 render(<Demo />);
 

diff --git a/packages/website-docusaurus/docs/browser/useEventSource.mdx b/packages/website-docusaurus/docs/browser/useEventSource.mdx
@@ -21,7 +21,7 @@ function Demo() {
       <button onClick={close}>Close</button>
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useEyeDropper.mdx b/packages/website-docusaurus/docs/browser/useEyeDropper.mdx
@@ -6,7 +6,6 @@ Use [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [color, setColor] = useState("");
   const [supported, open] = useEyeDropper();
@@ -28,7 +27,7 @@ function Demo() {
   }
 
   return <span>Not Supported by Your Browser</span>;
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useFavicon.mdx b/packages/website-docusaurus/docs/browser/useFavicon.mdx
@@ -5,7 +5,6 @@ React side-effect hook sets the favicon of the page
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const logo = 'https://react.dev/favicon.ico';
   const twitter = 'https://twitter.com/favicon.ico';
@@ -30,7 +29,7 @@ function Demo() {
       </button>
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useFetchEventSource.mdx b/packages/website-docusaurus/docs/browser/useFetchEventSource.mdx
@@ -348,7 +348,7 @@ function Demo() {
       <div>Data: {JSON.stringify(data)}</div>
     </div>
   );
-}
+};
 
 ```
 
@@ -383,7 +383,7 @@ function Demo() {
       <button onClick={close}>Close</button>
     </div>
   );
-}
+};
 
 ```
 
@@ -413,7 +413,7 @@ function Demo() {
       <div>Latest message: {JSON.stringify(data)}</div>
     </div>
   );
-}
+};
 
 ```
 
@@ -437,7 +437,7 @@ function Demo() {
       <div>Data: {JSON.stringify(data)}</div>
     </div>
   );
-}
+};
 
 ```
 
@@ -479,7 +479,7 @@ function Demo() {
       <div>Latest Message: {data?.message}</div>
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useFileDialog.mdx b/packages/website-docusaurus/docs/browser/useFileDialog.mdx
@@ -6,7 +6,6 @@ Open file dialog with ease
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [files, open, reset] = useFileDialog();
 
@@ -34,7 +33,7 @@ function Demo() {
       )}
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useFps.mdx b/packages/website-docusaurus/docs/browser/useFps.mdx
@@ -6,12 +6,11 @@ React Sensor Hooks that tracks FPS (frames per second)
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const fps = useFps();
 
   return <div>FPS: {fps}</div>;
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useFullscreen.mdx b/packages/website-docusaurus/docs/browser/useFullscreen.mdx
@@ -6,7 +6,6 @@ Display an element full-screen
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const ref = useRef(null);
   const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }]
@@ -33,7 +32,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useGeolocation.mdx b/packages/website-docusaurus/docs/browser/useGeolocation.mdx
@@ -8,7 +8,6 @@ It allows the user to provide their location to web applications if they so desi
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const { coordinates, locatedAt, error } = useGeolocation();
 
@@ -35,7 +34,7 @@ function Demo() {
       </pre>
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useIdle.mdx b/packages/website-docusaurus/docs/browser/useIdle.mdx
@@ -6,7 +6,6 @@ React sensor hook that tracks if user on the page is idle
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const isIdle = useIdle(3e3);
 
@@ -15,7 +14,7 @@ function Demo() {
       <div>User is idle: {isIdle ? "Yes 😴" : "Nope"}</div>
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useInfiniteScroll.mdx b/packages/website-docusaurus/docs/browser/useInfiniteScroll.mdx
@@ -6,7 +6,6 @@ Infinite scrolling of the element
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const ref = useRef<HTMLDivElement>(null);
   const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
@@ -36,7 +35,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useKeyModifier.mdx b/packages/website-docusaurus/docs/browser/useKeyModifier.mdx
@@ -6,7 +6,6 @@ React Sensor Hook that tracks state of any of the [supported modifiers](https://
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const Button = (props: { mode: boolean; name: string }) => {
     const { mode, name } = props;
@@ -38,7 +37,7 @@ function Demo() {
       </div>
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useLocationSelector.mdx b/packages/website-docusaurus/docs/browser/useLocationSelector.mdx
@@ -7,7 +7,6 @@ For more information, [see](https://thisweekinreact.com/articles/useSyncExternal
 ## Usage
 
 ```tsx live noInline
-
 function CurrentPathname() {
   const pathname = useLocationSelector(location => location.pathname);
   const ref = useRef(0);
@@ -36,7 +35,7 @@ function CurrentHash() {
       <div>hashRender: {ref.current}</div>
     </div>
   );
-}
+};
 
 function Links() {
   return (
@@ -46,7 +45,7 @@ function Links() {
       <a href="#link3">#link3</a>
     </div>
   );
-}
+};
 
 function Demo() {
   return (
@@ -56,9 +55,9 @@ function Demo() {
       <Links />
     </div>
   );
-}
+};
 
-render(<Demo/>)
+render(<Demo/>);
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useLongPress.mdx b/packages/website-docusaurus/docs/browser/useLongPress.mdx
@@ -6,7 +6,6 @@ React sensor hook that fires a callback after long pressing
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [state, setState] = useState("No Press");
   const onLongPress = () => {
@@ -26,7 +25,7 @@ function Demo() {
       <div>Pressed: {state}</div>
     </div>
   );
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useMediaDevices.mdx b/packages/website-docusaurus/docs/browser/useMediaDevices.mdx
@@ -6,14 +6,13 @@ React sensor hook that tracks connected hardware devices
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const [state] = useMediaDevices({
     requestPermissions: true,
   });
 
   return <pre>{JSON.stringify(state, null, 2)}</pre>;
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useMediaQuery.mdx b/packages/website-docusaurus/docs/browser/useMediaQuery.mdx
@@ -5,12 +5,11 @@ Ease with media query
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const isWide = useMediaQuery("(min-width: 480px)");
 
   return <div>Screen is wide: {isWide ? "Yes" : "No"}</div>;
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useMobileLandscape.mdx b/packages/website-docusaurus/docs/browser/useMobileLandscape.mdx
@@ -5,11 +5,10 @@ React hook that returns `true` if the mobile device is in landscape mode and `fa
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const isMobileLandscape = useMobileLandscape();
   return <p>isMobileLandscape: {JSON.stringify(isMobileLandscape)}</p>;
-}
+};
 
 ```
 

diff --git a/packages/website-docusaurus/docs/browser/useMouse.mdx b/packages/website-docusaurus/docs/browser/useMouse.mdx
@@ -6,7 +6,6 @@ React sensor hooks that track cursor positio
 ## Usage
 
 ```tsx live
-
 function Demo() {
   const mouse = useMouse();
 
@@ -23,7 +22,7 @@ function Demo() {
       </p>
     </div>
   );
-}
+};
 
 ```
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ function Demo() { @@
           {error && <p>Error: {error.message}</p>}
         </div>
       );
-    }
+    };
     ```
@@ Expand Down @@