chore(refine-remix): update to remix@2 and `@refinedev/remix-router…

…@3` (#382) * chore(refine-remix): update to v2 * chore: update custom server configurations * fix: node version for CI --------- Co-authored-by: Batuhan Wilhelm <[email protected]>
pankod · Jan 4, 2024 · d215d60 · d215d60
1 parent 80570e6
commit d215d60
Show file tree

Hide file tree

Showing 17 changed files with 265 additions and 166 deletions.
diff --git a/.github/workflows/test-local.yaml b/.github/workflows/test-local.yaml
@@ -176,7 +176,7 @@ jobs:
         uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: Install
         run: npm install
       - name: Build Examples

diff --git a/refine-remix/plugins/antd/app/contexts/index.tsx b/refine-remix/plugins/antd/app/contexts/index.tsx
@@ -1,37 +1,20 @@
-import React, {
-    PropsWithChildren,
-    createContext,
-    useEffect,
-    useState,
-} from "react";
+import React from "react";
 import { RefineThemes } from "@refinedev/antd";
 import { ConfigProvider, theme } from "antd";
-import { parseCookies, setCookie } from "nookies";
 
 type ColorModeContextType = {
     mode: string;
     setMode: (mode: string) => void;
 };
 
-export const ColorModeContext = createContext<ColorModeContextType>(
+export const ColorModeContext = React.createContext<ColorModeContextType>(
     {} as ColorModeContextType,
 );
 
-export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({
+export const ColorModeContextProvider: React.FC<React.PropsWithChildren> = ({
     children,
 }) => {
-    const [isMounted, setIsMounted] = useState(false);
-    const [mode, setMode] = useState("light");
-
-    useEffect(() => {
-        setIsMounted(true);
-    }, []);
-
-    useEffect(() => {
-        if (isMounted) {
-            setMode(parseCookies()["theme"]);
-        }
-    }, [isMounted]);
+    const [mode, setMode] = React.useState("light");
 
     const setColorMode = () => {
         if (mode === "light") {

diff --git a/refine-remix/plugins/antd/package.json b/refine-remix/plugins/antd/package.json
@@ -1,7 +1,6 @@
 {
     "dependencies": {
         "@refinedev/antd": "^5.37.1",
-        "nookies": "^2.5.2",
         "antd": "^5.0.5",
         "@ant-design/icons": "^5.0.1"
     }

diff --git a/refine-remix/plugins/chakra/app/createEmotionCache.ts b/refine-remix/plugins/chakra/app/createEmotionCache.ts
@@ -1,5 +1,7 @@
-import createCache from '@emotion/cache'
+import createCache from "@emotion/cache";
 
 export default function createEmotionCache() {
-  return createCache({ key: 'css' })
-}
+    return createCache({ key: "cha" });
+}
+
+export const defaultCache = createEmotionCache();
diff --git a/refine-remix/plugins/chakra/app/entry.client.tsx b/refine-remix/plugins/chakra/app/entry.client.tsx
@@ -1,32 +1,35 @@
-import React, { useState } from 'react'
-import { hydrateRoot } from 'react-dom/client'
-import { CacheProvider } from '@emotion/react'
-import { RemixBrowser } from '@remix-run/react'
-
-import { ClientStyleContext } from './context'
-import createEmotionCache from './createEmotionCache'
+import { CacheProvider } from "@emotion/react";
+import { RemixBrowser } from "@remix-run/react";
+import React, { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { ClientStyleContext } from "./context";
+import createEmotionCache, { defaultCache } from "./createEmotionCache";
 
 interface ClientCacheProviderProps {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }
 
 function ClientCacheProvider({ children }: ClientCacheProviderProps) {
-  const [cache, setCache] = useState(createEmotionCache())
+    const [cache, setCache] = React.useState(defaultCache);
 
-  function reset() {
-    setCache(createEmotionCache())
-  }
+    function reset() {
+        setCache(createEmotionCache());
+    }
 
-  return (
-    <ClientStyleContext.Provider value={{ reset }}>
-      <CacheProvider value={cache}>{children}</CacheProvider>
-    </ClientStyleContext.Provider>
-  )
+    return (
+        <ClientStyleContext.Provider value={{ reset }}>
+            <CacheProvider value={cache}>{children}</CacheProvider>
+        </ClientStyleContext.Provider>
+    );
 }
 
-hydrateRoot(
-  document,
-  <ClientCacheProvider>
-    <RemixBrowser />
-  </ClientCacheProvider>
-)
+startTransition(() => {
+    hydrateRoot(
+        document,
+        <StrictMode>
+            <ClientCacheProvider>
+                <RemixBrowser />
+            </ClientCacheProvider>
+        </StrictMode>,
+    );
+});
diff --git a/refine-remix/plugins/chakra/app/root.tsx b/refine-remix/plugins/chakra/app/root.tsx
@@ -29,11 +29,11 @@ import { ServerStyleContext, ClientStyleContext } from './context'
 
 <%- (_app.afterImport || []).join("\n") _%>
 
-export const meta: MetaFunction = () => ({
-  charset: 'utf-8',
-  title: 'New Remix App',
-  viewport: 'width=device-width,initial-scale=1',
-});
+export const meta: MetaFunction = () => ([
+  {
+    title: 'New Remix App',
+  }
+]);
 
 <%
     var top = _app.wrapper.map(wrapper => wrapper[0] || "");
@@ -77,6 +77,8 @@ const Document = withEmotionCache(
     return (
       <html lang="en">
         <head>
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
           <Meta />
           <Links />
           {serverStyleData?.map(({ key, ids, css }) => (

diff --git a/refine-remix/plugins/mantine/app/entry.client.tsx b/refine-remix/plugins/mantine/app/entry.client.tsx
@@ -0,0 +1,21 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { ClientProvider } from "@mantine/remix";
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+    hydrateRoot(
+        document,
+        <StrictMode>
+            <ClientProvider>
+                <RemixBrowser />
+            </ClientProvider>
+        </StrictMode>,
+    );
+});
diff --git a/refine-remix/plugins/mantine/app/root.tsx b/refine-remix/plugins/mantine/app/root.tsx
@@ -33,11 +33,11 @@ import routerProvider, { UnsavedChangesNotifier } from "@refinedev/remix-router"
     var bottom = _app.wrapper.map(wrapper => wrapper[1] || "").reverse();
 %>
 
-export const meta: MetaFunction = () => ({
-    charset: "utf-8",
-    title: "New Remix + Refine App",
-    viewport: "width=device-width,initial-scale=1",
-});
+export const meta: MetaFunction = () => ([
+  {
+      title: "New Remix + Refine App",
+  }
+]);
 
 
 createEmotionCache({ key: 'mantine' });
@@ -53,6 +53,8 @@ export default function App() {
       <html lang="en">
         <head>
           <StylesPlaceholder />
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
           <Meta />
           <Links />
         </head>

diff --git a/refine-remix/plugins/mui/app/contexts/ColorModeContext.tsx b/refine-remix/plugins/mui/app/contexts/ColorModeContext.tsx
@@ -1,48 +1,28 @@
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { ThemeProvider } from "@mui/material/styles";
 import { RefineThemes } from "@refinedev/mui";
-import { parseCookies, setCookie } from "nookies";
-import React, {
-    PropsWithChildren,
-    createContext,
-    useEffect,
-    useState,
-} from "react";
+import React from "react";
 
 type ColorModeContextType = {
     mode: string;
     setMode: () => void;
 };
 
-export const ColorModeContext = createContext<ColorModeContextType>(
+export const ColorModeContext = React.createContext<ColorModeContextType>(
     {} as ColorModeContextType,
 );
 
-export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({
+export const ColorModeContextProvider: React.FC<React.PropsWithChildren> = ({
     children,
 }) => {
-    const [isMounted, setIsMounted] = useState(false);
-    const [mode, setMode] = useState("light");
-
-    useEffect(() => {
-        setIsMounted(true);
-    }, []);
+    const [mode, setMode] = React.useState("light");
 
     const systemTheme = useMediaQuery(`(prefers-color-scheme: dark)`);
 
-    useEffect(() => {
-        if (isMounted) {
-            setMode(
-                parseCookies()["theme"] || (systemTheme ? "dark" : "light"),
-            );
-        }
-    }, [isMounted, systemTheme]);
-
     const toggleTheme = () => {
         const nextTheme = mode === "light" ? "dark" : "light";
 
         setMode(nextTheme);
-        setCookie(null, "theme", nextTheme);
     };
 
     return (

diff --git a/refine-remix/plugins/mui/app/entry.client.tsx b/refine-remix/plugins/mui/app/entry.client.tsx
@@ -1,23 +1,25 @@
 import CssBaseline from "@mui/material/CssBaseline";
 import GlobalStyles from "@mui/material/GlobalStyles";
 import { RemixBrowser } from "@remix-run/react";
-import * as React from "react";
-import * as ReactDOM from "react-dom/client";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
 import { ClientStyleCacheProvider, ColorModeContextProvider } from "~/contexts";
 
 const hydrate = () => {
-    React.startTransition(() => {
-        ReactDOM.hydrateRoot(
+    startTransition(() => {
+        hydrateRoot(
             document,
-            <ClientStyleCacheProvider>
-                <ColorModeContextProvider>
-                    <CssBaseline />
-                    <GlobalStyles
-                        styles={{ html: { WebkitFontSmoothing: "auto" } }}
-                    />
-                    <RemixBrowser />
-                </ColorModeContextProvider>
-            </ClientStyleCacheProvider>,
+            <StrictMode>
+                <ClientStyleCacheProvider>
+                    <ColorModeContextProvider>
+                        <CssBaseline />
+                        <GlobalStyles
+                            styles={{ html: { WebkitFontSmoothing: "auto" } }}
+                        />
+                        <RemixBrowser />
+                    </ColorModeContextProvider>
+                </ClientStyleCacheProvider>
+            </StrictMode>,
         );
     });
 };

diff --git a/refine-remix/plugins/mui/app/root.tsx b/refine-remix/plugins/mui/app/root.tsx
@@ -33,11 +33,11 @@ import routerProvider, { UnsavedChangesNotifier } from "@refinedev/remix-router"
     var bottom = _app.wrapper.map(wrapper => wrapper[1] || "").reverse();
 %>
 
-export const meta: MetaFunction = () => ({
-    charset: "utf-8",
+export const meta: MetaFunction = () => ([
+  {
     title: "New Remix + Refine App",
-    viewport: "width=device-width,initial-scale=1",
-});
+  }
+]);
 
 
 interface DocumentProps {

diff --git a/refine-remix/plugins/mui/package.json b/refine-remix/plugins/mui/package.json
@@ -3,7 +3,6 @@
         "@refinedev/mui": "^5.14.1",
         "@refinedev/react-hook-form": "^4.8.13",
         "@mui/icons-material": "^5.8.3",
-        "nookies": "^2.5.2",
         "@emotion/react": "^11.8.2",
         "@emotion/styled": "^11.8.1",
         "@mui/lab": "^5.0.0-alpha.85",

diff --git a/refine-remix/template/_package.json b/refine-remix/template/_package.json
@@ -5,26 +5,27 @@
     "sideEffects": false,
     "scripts": {
         "dev": "refine dev",
-        "build": "remix build",
-        "start": "remix-serve build",
+        "build": "refine build",
+        "start": "refine start ./build/index.js",
         "refine": "refine"
     },
     "dependencies": {
-        "@refinedev/cli": "^2.16.21",
-        "@refinedev/core": "^4.46.1",
-        "@refinedev/devtools": "^1.1.29",
-        "@refinedev/remix-router": "^2.3.1",
-        "@refinedev/inferencer": "^4.5.16",
+        "@refinedev/cli": "^2.16.22",
+        "@refinedev/core": "^4.46.2",
+        "@refinedev/devtools": "^1.1.30",
+        "@refinedev/remix-router": "^3.0.0",
+        "@refinedev/inferencer": "^4.5.17",
         "@refinedev/kbar": "^1.3.5",
-        "@remix-run/node": "^1.6.7",
-        "@remix-run/react": "^1.6.7",
-        "@remix-run/serve": "^1.6.7",
+        "@remix-run/node": "^2.4.1",
+        "@remix-run/react": "^2.4.1",
+        "@remix-run/serve": "^2.4.1",
+        "isbot": "^3.6.8",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
     },
     "devDependencies": {
-        "@remix-run/dev": "^1.6.8",
-        "@remix-run/eslint-config": "^1.6.8",
+        "@remix-run/dev": "^2.4.1",
+        "@remix-run/eslint-config": "^2.4.1",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "eslint": "^8.24.0",

diff --git a/refine-remix/template/app/entry.client.tsx b/refine-remix/template/app/entry.client.tsx
@@ -1,4 +1,18 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
 import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
-hydrateRoot(document, <RemixBrowser />);
+startTransition(() => {
+    hydrateRoot(
+        document,
+        <StrictMode>
+            <RemixBrowser />
+        </StrictMode>,
+    );
+});