Skip to content

Commit bef0f00

Browse files
MarcusNotheisMarcusNotheis
committed
chore(examples): migrate remix to react-router 7
1 parent 9a2b8c0 commit bef0f00

File tree

14 files changed

+2874
-6516
lines changed

14 files changed

+2874
-6516
lines changed

‎examples/remix-ts/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ node_modules
33
/.cache
44
/build
55
.env
6+
.react-router/

‎examples/remix-ts/app/components/AppShellBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useLocation, useNavigate } from '@remix-run/react';
1+
import { useLocation, useNavigate } from 'react-router';
22
import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
33
import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js';
44
import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js';

‎examples/remix-ts/app/components/TodoList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useNavigate } from '@remix-run/react';
1+
import { useNavigate } from 'react-router';
22
import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
33
import { List, ListItemStandard, ListPropTypes } from '@ui5/webcomponents-react';
44
import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js';

‎examples/remix-ts/app/entry.client.tsx‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎examples/remix-ts/app/entry.server.tsx‎

Lines changed: 0 additions & 130 deletions
This file was deleted.

‎examples/remix-ts/app/root.tsx‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,36 @@
1-
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
2-
import { createHead } from 'remix-island';
1+
import wcrStyles from '@ui5/webcomponents-react/styles.css?url';
2+
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
3+
import type { Route } from './+types/root';
34
import { AppShell } from './components/AppShell';
5+
import appStyles from './globals.css?url';
46

5-
export const Head = createHead(() => {
7+
export const links: Route.LinksFunction = () => [
8+
{ rel: 'stylesheet', href: appStyles },
9+
{ rel: 'stylesheet', href: wcrStyles }
10+
];
11+
12+
export function Layout({ children }: { children: React.ReactNode }) {
613
return (
7-
<>
8-
<meta charSet="utf-8" />
9-
<meta name="viewport" content="width=device-width,initial-scale=1" />
10-
<Meta />
11-
<Links />
12-
</>
14+
<html lang="en">
15+
<head suppressHydrationWarning={true}>
16+
<meta charSet="utf-8" />
17+
<meta name="viewport" content="width=device-width, initial-scale=1" />
18+
<Meta />
19+
<Links />
20+
</head>
21+
<body>
22+
{children}
23+
<ScrollRestoration />
24+
<Scripts />
25+
</body>
26+
</html>
1327
);
14-
});
28+
}
1529

1630
export default function App() {
17-
// this will be rendered inside a node
1831
return (
19-
<>
20-
<Head />
21-
<AppShell>
22-
<Outlet />
23-
</AppShell>
24-
<ScrollRestoration />
25-
<Scripts />
26-
</>
32+
<AppShell>
33+
<Outlet />
34+
</AppShell>
2735
);
2836
}

‎examples/remix-ts/app/routes.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { index, route, type RouteConfig } from '@react-router/dev/routes';
2+
3+
export default [index('./routes/index.tsx'), route('todos/:id', './routes/todo.tsx')] satisfies RouteConfig;

examples/remix-ts/app/routes/_index.tsx renamed to examples/remix-ts/app/routes/index.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
1-
import type { MetaFunction } from '@remix-run/node';
2-
import { json } from '@remix-run/node';
3-
import { useLoaderData } from '@remix-run/react';
41
import { Bar, Page, Title } from '@ui5/webcomponents-react';
2+
import type { MetaFunction } from 'react-router';
53
import { TodoList } from '~/components/TodoList';
64
import { Todo, todos } from '~/mockData/todos';
5+
import type { Route } from './+types/index';
76

87
export const meta: MetaFunction = () => {
98
return [{ title: 'New Remix App' }, { name: 'description', content: 'Welcome to Remix!' }];
109
};
1110

12-
export const loader = async () => {
11+
export async function loader() {
1312
const todoList = await new Promise<Todo[]>((resolve) => {
1413
setTimeout(() => {
1514
resolve(todos);
1615
}, 1500);
1716
});
1817

19-
return json({ data: { todos: todoList } });
20-
};
18+
return { todos: todoList };
19+
}
20+
21+
export default function Index({ loaderData }: Route.ComponentProps) {
22+
const { todos } = loaderData;
2123

22-
export default function Index() {
23-
const {
24-
data: { todos }
25-
} = useLoaderData<typeof loader>();
2624
return (
2725
<Page header={<Bar style={{ paddingInline: 0 }} startContent={<Title>My Todos</Title>} />}>
2826
<TodoList items={todos} />

examples/remix-ts/app/routes/todos.$id.tsx renamed to examples/remix-ts/app/routes/todo.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { json, LoaderFunctionArgs } from '@remix-run/node';
2-
import { useLoaderData } from '@remix-run/react';
31
import {
42
DatePicker,
53
DynamicPage,
@@ -15,21 +13,20 @@ import {
1513
} from '@ui5/webcomponents-react';
1614
import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
1715
import { Todo, todos } from '~/mockData/todos';
16+
import type { Route } from './+types/todo';
1817

19-
export const loader = async ({ params }: LoaderFunctionArgs) => {
18+
export async function loader({ params }: Route.LoaderArgs) {
2019
const todo = await new Promise<Todo | undefined>((resolve) => {
2120
setTimeout(() => {
2221
resolve(todos.at(Number(params.id)));
2322
}, 500);
2423
});
2524

26-
return json({ data: { todo } });
27-
};
25+
return todo;
26+
}
2827

29-
export default function TodoDetails() {
30-
const {
31-
data: { todo }
32-
} = useLoaderData<typeof loader>();
28+
export default function TodoDetails({ loaderData }: Route.ComponentProps) {
29+
const todo = loaderData;
3330

3431
return (
3532
<>

0 commit comments

Comments
 (0)