synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-13 21:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(site): enable React's StrictMode (#13399)

Browse Source
This commit is contained in:
Kayla Washburn-Love
2024-06-03 10:03:46 -06:00
committed by GitHub
parent 973cc2b875
commit 79fd736387
4 changed files with 33 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
site/.storybook/preview.jsx
View File

@ -6,6 +6,7 @@ import {
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"; import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
import { DecoratorHelpers } from "@storybook/addon-themes"; import { DecoratorHelpers } from "@storybook/addon-themes";
import { withRouter } from "storybook-addon-remix-react-router"; import { withRouter } from "storybook-addon-remix-react-router";
import { StrictMode } from "react";
import { QueryClient, QueryClientProvider } from "react-query"; import { QueryClient, QueryClientProvider } from "react-query";
import { HelmetProvider } from "react-helmet-async"; import { HelmetProvider } from "react-helmet-async";
import themes from "theme"; import themes from "theme";
@ -29,14 +30,16 @@ export const decorators = [
const selected = themeOverride || selectedTheme || "dark"; const selected = themeOverride || selectedTheme || "dark";
return ( return (
<StyledEngineProvider injectFirst> <StrictMode>
<MuiThemeProvider theme={themes[selected]}> <StyledEngineProvider injectFirst>
<EmotionThemeProvider theme={themes[selected]}> <MuiThemeProvider theme={themes[selected]}>
<CssBaseline /> <EmotionThemeProvider theme={themes[selected]}>
<Story /> <CssBaseline />
</EmotionThemeProvider> <Story />
</MuiThemeProvider> </EmotionThemeProvider>
</StyledEngineProvider> </MuiThemeProvider>
</StyledEngineProvider>
</StrictMode>
); );
}, },
]; ];

20
site/src/App.tsx
View File

@ -1,6 +1,12 @@
import "./theme/globalFonts"; import "./theme/globalFonts";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { type FC, type ReactNode, useEffect, useState } from "react"; import {
type FC,
type ReactNode,
StrictMode,
useEffect,
useState,
} from "react";
import { HelmetProvider } from "react-helmet-async"; import { HelmetProvider } from "react-helmet-async";
import { QueryClient, QueryClientProvider } from "react-query"; import { QueryClient, QueryClientProvider } from "react-query";
import { RouterProvider } from "react-router-dom"; import { RouterProvider } from "react-router-dom";
@ -74,10 +80,12 @@ export const AppProviders: FC<AppProvidersProps> = ({
export const App: FC = () => { export const App: FC = () => {
return ( return (
<ErrorBoundary> <StrictMode>
<AppProviders> <ErrorBoundary>
<RouterProvider router={router} /> <AppProviders>
</AppProviders> <RouterProvider router={router} />
</ErrorBoundary> </AppProviders>
</ErrorBoundary>
</StrictMode>
); );
}; };

20
site/src/index.tsx
View File

@ -1,22 +1,16 @@
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { App } from "./App"; import { App } from "./App";
// This is the entry point for the app - where everything start. console.info(` ▄█▀ ▀█▄
// In the future, we'll likely bring in more bootstrapping logic -
// like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32
const main = () => {
console.info(` ▄█▀ ▀█▄
▄▄ ▀▀▀ █▌ ██▀▀█▄ ▐█ ▄▄ ▀▀▀ █▌ ██▀▀█▄ ▐█
▄▄██▀▀█▄▄▄ ██ ██ █▀▀█ ▐█▀▀██ ▄█▀▀█ █▀▀ ▄▄██▀▀█▄▄▄ ██ ██ █▀▀█ ▐█▀▀██ ▄█▀▀█ █▀▀
█▌ ▄▌ ▐█ █▌ ▀█▄▄▄█▌ █ █ ▐█ ██ ██▀▀ █ █▌ ▄▌ ▐█ █▌ ▀█▄▄▄█▌ █ █ ▐█ ██ ██▀▀ █
██████▀▄█ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀▀ ▀▀▀▀ ▀ ██████▀▄█ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀▀ ▀▀▀▀ ▀
`); `);
const element = document.getElementById("root");
if (element === null) {
throw new Error("root element is null");
}
const root = createRoot(element);
root.render(<App />);
};
main(); const element = document.getElementById("root");
if (element === null) {
throw new Error("root element is null");
}
const root = createRoot(element);
root.render(<App />);

3
site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
View File

@ -206,9 +206,8 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
<Divider css={{ marginBottom: "0 !important" }} /> <Divider css={{ marginBottom: "0 !important" }} />
<Stack css={styles.info} spacing={0}> <Stack css={styles.info} spacing={0}>
<Tooltip title="Coder Version"> <Tooltip title="Browse the source code">
<a <a
title="Browse Source Code"
css={[styles.footerText, styles.buildInfo]} css={[styles.footerText, styles.buildInfo]}
href={buildInfo?.external_url} href={buildInfo?.external_url}
target="_blank" target="_blank"