From a9013ecc67953c8b92c3dc8b3a7b85f4a025f198 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Wed, 6 Jul 2022 23:13:43 +0200 Subject: [PATCH] chore(examples): fix ESLint warnings in `theme-ui` example (#3664) --- examples/theme-ui/app/entry.client.tsx | 19 ++++++++----------- examples/theme-ui/app/entry.server.tsx | 6 +++--- examples/theme-ui/app/root.tsx | 17 +++++++++-------- examples/theme-ui/app/routes/index.tsx | 3 --- examples/theme-ui/app/routes/jokes.tsx | 3 --- examples/theme-ui/app/styles/context.tsx | 12 ++++++------ .../app/styles/createEmotionCache.tsx | 4 +--- 7 files changed, 27 insertions(+), 37 deletions(-) diff --git a/examples/theme-ui/app/entry.client.tsx b/examples/theme-ui/app/entry.client.tsx index a380b5ca2ef..f955a0d7182 100644 --- a/examples/theme-ui/app/entry.client.tsx +++ b/examples/theme-ui/app/entry.client.tsx @@ -1,28 +1,25 @@ -import React, { useState } from "react"; -import { hydrate } from "react-dom"; import { CacheProvider } from "@emotion/react"; import { RemixBrowser } from "@remix-run/react"; +import type { FunctionComponent } from "react"; +import { useState } from "react"; +import { hydrate } from "react-dom"; import { ClientStyleContext } from "./styles/context"; -import createEmotionCache from "./styles/createEmotionCache"; - -interface ClientCacheProviderProps { - children: React.ReactNode; -} +import { createEmotionCache } from "./styles/createEmotionCache"; -function ClientCacheProvider({ children }: ClientCacheProviderProps) { +const ClientCacheProvider: FunctionComponent = ({ children }) => { const [cache, setCache] = useState(createEmotionCache()); - function reset() { + const reset = () => { setCache(createEmotionCache()); - } + }; return ( {children} ); -} +}; hydrate( diff --git a/examples/theme-ui/app/entry.server.tsx b/examples/theme-ui/app/entry.server.tsx index 0ec152e8154..1033030658c 100644 --- a/examples/theme-ui/app/entry.server.tsx +++ b/examples/theme-ui/app/entry.server.tsx @@ -1,11 +1,11 @@ -import { renderToString } from "react-dom/server"; import { CacheProvider } from "@emotion/react"; import createEmotionServer from "@emotion/server/create-instance"; +import type { EntryContext } from "@remix-run/node"; import { RemixServer } from "@remix-run/react"; -import type { EntryContext } from "@remix-run/node"; // Depends on the runtime you choose +import { renderToString } from "react-dom/server"; import { ServerStyleContext } from "./styles/context"; -import createEmotionCache from "./styles/createEmotionCache"; +import { createEmotionCache } from "./styles/createEmotionCache"; export default function handleRequest( request: Request, diff --git a/examples/theme-ui/app/root.tsx b/examples/theme-ui/app/root.tsx index f0d1429a67c..313d2c95fb0 100644 --- a/examples/theme-ui/app/root.tsx +++ b/examples/theme-ui/app/root.tsx @@ -1,6 +1,5 @@ -import React, { useContext, useEffect } from "react"; import { withEmotionCache } from "@emotion/react"; -import { ThemeProvider } from "@theme-ui/core"; +import type { MetaFunction } from "@remix-run/node"; import { Links, LiveReload, @@ -9,7 +8,9 @@ import { Scripts, ScrollRestoration, } from "@remix-run/react"; -import type { MetaFunction, LinksFunction } from "@remix-run/node"; // Depends on the runtime you choose +import { ThemeProvider } from "@theme-ui/core"; +import type { ReactNode } from "react"; +import { useContext, useEffect } from "react"; import { ServerStyleContext, ClientStyleContext } from "./styles/context"; @@ -19,10 +20,9 @@ export const meta: MetaFunction = () => ({ viewport: "width=device-width,initial-scale=1", }); -interface DocumentProps { - children: React.ReactNode; -} - +type DocumentProps = { + children: ReactNode; +}; const Document = withEmotionCache( ({ children }: DocumentProps, emotionCache) => { const serverStyleData = useContext(ServerStyleContext); @@ -40,7 +40,7 @@ const Document = withEmotionCache( }); // reset cache to reapply global styles clientStyleData?.reset(); - }, []); + }, [clientStyleData, emotionCache.sheet]); return ( @@ -55,6 +55,7 @@ const Document = withEmotionCache( /> ))} + {children} diff --git a/examples/theme-ui/app/routes/index.tsx b/examples/theme-ui/app/routes/index.tsx index 26a9b3a486c..fda37106445 100644 --- a/examples/theme-ui/app/routes/index.tsx +++ b/examples/theme-ui/app/routes/index.tsx @@ -1,6 +1,3 @@ -/** @jsx jsx */ -import React from "react"; -import { jsx } from "@theme-ui/core"; import { Link } from "@remix-run/react"; export default function Index() { diff --git a/examples/theme-ui/app/routes/jokes.tsx b/examples/theme-ui/app/routes/jokes.tsx index db3fdb0776e..becfde85c33 100644 --- a/examples/theme-ui/app/routes/jokes.tsx +++ b/examples/theme-ui/app/routes/jokes.tsx @@ -1,6 +1,3 @@ -/** @jsx jsx */ -import React from "react"; -import { jsx } from "@theme-ui/core"; import { Link } from "@remix-run/react"; export default function Jokes() { diff --git a/examples/theme-ui/app/styles/context.tsx b/examples/theme-ui/app/styles/context.tsx index 89e5e1ad225..1f4390ec3e1 100644 --- a/examples/theme-ui/app/styles/context.tsx +++ b/examples/theme-ui/app/styles/context.tsx @@ -1,18 +1,18 @@ -import React, { createContext } from "react"; +import { createContext } from "react"; -export interface ServerStyleContextData { +export type ServerStyleContextData = { key: string; - ids: Array; + ids: string[]; css: string; -} +}; export const ServerStyleContext = createContext< ServerStyleContextData[] | null >(null); -export interface ClientStyleContextData { +export type ClientStyleContextData = { reset: () => void; -} +}; export const ClientStyleContext = createContext( null diff --git a/examples/theme-ui/app/styles/createEmotionCache.tsx b/examples/theme-ui/app/styles/createEmotionCache.tsx index 79c4a1a175e..65def691d97 100644 --- a/examples/theme-ui/app/styles/createEmotionCache.tsx +++ b/examples/theme-ui/app/styles/createEmotionCache.tsx @@ -1,5 +1,3 @@ import createCache from "@emotion/cache"; -export default function createEmotionCache() { - return createCache({ key: "css" }); -} +export const createEmotionCache = () => createCache({ key: "css" });