Skip to content

Commit fb1b806

Browse files
fzaninottofzaninotto
committed
Improve TS/JS switch experience
1 parent 2637ada commit fb1b806

4 files changed

Lines changed: 137 additions & 135 deletions

File tree

‎docs/Tutorial.md‎

Lines changed: 133 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ import React from 'react';
4747
import ReactDOM from 'react-dom/client';
4848
import { App } from './App';
4949

50-
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
50+
ReactDOM.createRoot(document.getElementById('root')!).render(
5151
<React.StrictMode>
5252
<App />
5353
</React.StrictMode>
@@ -164,18 +164,18 @@ Let's copy this code, and create a new `UserList` component, in a new file named
164164
import { List, Datagrid, TextField, EmailField } from "react-admin";
165165

166166
export const UserList = () => (
167-
<List>
168-
<Datagrid rowClick="edit">
169-
<TextField source="id" />
170-
<TextField source="name" />
171-
<TextField source="username" />
172-
<EmailField source="email" />
173-
<TextField source="address.street" />
174-
<TextField source="phone" />
175-
<TextField source="website" />
176-
<TextField source="company.name" />
177-
</Datagrid>
178-
</List>
167+
<List>
168+
<Datagrid rowClick="edit">
169+
<TextField source="id" />
170+
<TextField source="name" />
171+
<TextField source="username" />
172+
<EmailField source="email" />
173+
<TextField source="address.street" />
174+
<TextField source="phone" />
175+
<TextField source="website" />
176+
<TextField source="company.name" />
177+
</Datagrid>
178+
</List>
179179
);
180180
```
181181

@@ -206,18 +206,18 @@ Let's take a moment to analyze the code of the `<UserList>` component:
206206

207207
```tsx
208208
export const UserList = () => (
209-
<List>
210-
<Datagrid rowClick="edit">
211-
<TextField source="id" />
212-
<TextField source="name" />
213-
<TextField source="username" />
214-
<EmailField source="email" />
215-
<TextField source="address.street" />
216-
<TextField source="phone" />
217-
<TextField source="website" />
218-
<TextField source="company.name" />
219-
</Datagrid>
220-
</List>
209+
<List>
210+
<Datagrid rowClick="edit">
211+
<TextField source="id" />
212+
<TextField source="name" />
213+
<TextField source="username" />
214+
<EmailField source="email" />
215+
<TextField source="address.street" />
216+
<TextField source="phone" />
217+
<TextField source="website" />
218+
<TextField source="company.name" />
219+
</Datagrid>
220+
</List>
221221
);
222222
```
223223

@@ -240,13 +240,13 @@ This means we can compose `<List>` with another component - for instance `<Simpl
240240
import { List, SimpleList } from "react-admin";
241241

242242
export const UserList = () => (
243-
<List>
244-
<SimpleList
245-
primaryText={(record) => record.name}
246-
secondaryText={(record) => record.username}
247-
tertiaryText={(record) => record.email}
248-
/>
249-
</List>
243+
<List>
244+
<SimpleList
245+
primaryText={(record) => record.name}
246+
secondaryText={(record) => record.username}
247+
tertiaryText={(record) => record.email}
248+
/>
249+
</List>
250250
);
251251
```
252252

@@ -279,29 +279,29 @@ import { useMediaQuery, Theme } from "@mui/material";
279279
import { List, SimpleList, Datagrid, TextField, EmailField } from "react-admin";
280280

281281
export const UserList = () => {
282-
const isSmall = useMediaQuery<Theme>((theme) => theme.breakpoints.down("sm"));
283-
return (
284-
<List>
285-
{isSmall ? (
286-
<SimpleList
287-
primaryText={(record) => record.name}
288-
secondaryText={(record) => record.username}
289-
tertiaryText={(record) => record.email}
290-
/>
291-
) : (
292-
<Datagrid rowClick="edit">
293-
<TextField source="id" />
294-
<TextField source="name" />
295-
<TextField source="username" />
296-
<EmailField source="email" />
297-
<TextField source="address.street" />
298-
<TextField source="phone" />
299-
<TextField source="website" />
300-
<TextField source="company.name" />
301-
</Datagrid>
302-
)}
303-
</List>
304-
);
282+
const isSmall = useMediaQuery<Theme>((theme) => theme.breakpoints.down("sm"));
283+
return (
284+
<List>
285+
{isSmall ? (
286+
<SimpleList
287+
primaryText={(record) => record.name}
288+
secondaryText={(record) => record.username}
289+
tertiaryText={(record) => record.email}
290+
/>
291+
) : (
292+
<Datagrid rowClick="edit">
293+
<TextField source="id" />
294+
<TextField source="name" />
295+
<TextField source="username" />
296+
<EmailField source="email" />
297+
<TextField source="address.street" />
298+
<TextField source="phone" />
299+
<TextField source="website" />
300+
<TextField source="company.name" />
301+
</Datagrid>
302+
)}
303+
</List>
304+
);
305305
};
306306
```
307307

@@ -377,9 +377,9 @@ That means that you can do the same to write a custom Field. For instance, here
377377
import { useRecordContext } from "react-admin";
378378

379379
const MyUrlField = ({ source }: { source: string }) => {
380-
const record = useRecordContext();
381-
if (!record) return null;
382-
return <a href={record[source]}>{record[source]}</a>;
380+
const record = useRecordContext();
381+
if (!record) return null;
382+
return <a href={record[source]}>{record[source]}</a>;
383383
};
384384

385385
export default MyUrlField;
@@ -422,13 +422,13 @@ import { Link } from "@mui/material";
422422
import LaunchIcon from "@mui/icons-material/Launch";
423423

424424
const MyUrlField = ({ source }: { source: string }) => {
425-
const record = useRecordContext();
426-
return record ? (
427-
<Link href={record[source]} sx={{ textDecoration: "none" }}>
428-
{record[source]}
429-
<LaunchIcon sx={{ fontSize: 15, ml: 1 }} />
430-
</Link>
431-
) : null;
425+
const record = useRecordContext();
426+
return record ? (
427+
<Link href={record[source]} sx={{ textDecoration: "none" }}>
428+
{record[source]}
429+
<LaunchIcon sx={{ fontSize: 15, ml: 1 }} />
430+
</Link>
431+
) : null;
432432
};
433433

434434
export default MyUrlField;
@@ -482,14 +482,14 @@ The `ListGuesser` suggests using a `<ReferenceField>` for the `userId` field. Le
482482
import { List, Datagrid, TextField, ReferenceField } from "react-admin";
483483

484484
export const PostList = () => (
485-
<List>
486-
<Datagrid rowClick="edit">
487-
<ReferenceField source="userId" reference="users" />
488-
<TextField source="id" />
489-
<TextField source="title" />
490-
<TextField source="body" />
491-
</Datagrid>
492-
</List>
485+
<List>
486+
<Datagrid rowClick="edit">
487+
<ReferenceField source="userId" reference="users" />
488+
<TextField source="id" />
489+
<TextField source="title" />
490+
<TextField source="body" />
491+
</Datagrid>
492+
</List>
493493
);
494494
```
495495

@@ -590,30 +590,30 @@ Copy the `<PostEdit>` code dumped by the guesser in the console to the `posts.ts
590590
```tsx
591591
// in src/posts.tsx
592592
import {
593-
List,
594-
Datagrid,
595-
TextField,
596-
ReferenceField,
597-
EditButton,
598-
Edit,
599-
SimpleForm,
600-
ReferenceInput,
601-
TextInput,
593+
List,
594+
Datagrid,
595+
TextField,
596+
ReferenceField,
597+
EditButton,
598+
Edit,
599+
SimpleForm,
600+
ReferenceInput,
601+
TextInput,
602602
} from "react-admin";
603603

604-
export const PostList = () => (
605-
{ /* ... */ }
606-
);
604+
export const PostList = () => {
605+
/* ... */
606+
};
607607

608608
export const PostEdit = () => (
609-
<Edit>
610-
<SimpleForm>
611-
<ReferenceInput source="userId" reference="users" />
612-
<TextInput source="id" />
613-
<TextInput source="title" />
614-
<TextInput source="body" />
615-
</SimpleForm>
616-
</Edit>
609+
<Edit>
610+
<SimpleForm>
611+
<ReferenceInput source="userId" reference="users" />
612+
<TextInput source="id" />
613+
<TextInput source="title" />
614+
<TextInput source="body" />
615+
</SimpleForm>
616+
</Edit>
617617
);
618618
```
619619

@@ -824,10 +824,10 @@ import PostIcon from "@mui/icons-material/Book";
824824
import UserIcon from "@mui/icons-material/Group";
825825

826826
export const App = () => (
827-
<Admin dataProvider={dataProvider}>
828-
<Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
829-
<Resource name="users" list={UserList} icon={UserIcon} recordRepresentation="name" />
830-
</Admin>
827+
<Admin dataProvider={dataProvider}>
828+
<Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
829+
<Resource name="users" list={UserList} icon={UserIcon} recordRepresentation="name" />
830+
</Admin>
831831
);
832832
```
833833

@@ -847,10 +847,10 @@ By default, react-admin displays the list page of the first `Resource` element a
847847
import { Card, CardContent, CardHeader } from "@mui/material";
848848

849849
export const Dashboard = () => (
850-
<Card>
851-
<CardHeader title="Welcome to the administration" />
852-
<CardContent>Lorem ipsum sic dolor amet...</CardContent>
853-
</Card>
850+
<Card>
851+
<CardHeader title="Welcome to the administration" />
852+
<CardContent>Lorem ipsum sic dolor amet...</CardContent>
853+
</Card>
854854
);
855855
```
856856

@@ -859,9 +859,9 @@ export const Dashboard = () => (
859859
import { Dashboard } from './Dashboard';
860860

861861
export const App = () => (
862-
<Admin dataProvider={dataProvider} dashboard={Dashboard} >
863-
// ...
864-
</Admin>
862+
<Admin dataProvider={dataProvider} dashboard={Dashboard} >
863+
// ...
864+
</Admin>
865865
);
866866
```
867867

@@ -877,38 +877,38 @@ For this tutorial, since there is no public authentication API, we can use a fak
877877

878878
The `authProvider` must expose 5 methods, each returning a `Promise`:
879879

880-
```ts
880+
```tsx
881881
// in src/authProvider.ts
882882
import { AuthProvider } from "react-admin";
883883

884884
export const authProvider: AuthProvider = {
885-
// called when the user attempts to log in
886-
login: ({ username }) => {
887-
localStorage.setItem("username", username);
888-
// accept all username/password combinations
889-
return Promise.resolve();
890-
},
891-
// called when the user clicks on the logout button
892-
logout: () => {
893-
localStorage.removeItem("username");
894-
return Promise.resolve();
895-
},
896-
// called when the API returns an error
897-
checkError: ({ status }: { status: number }) => {
898-
if (status === 401 || status === 403) {
899-
localStorage.removeItem("username");
900-
return Promise.reject();
901-
}
902-
return Promise.resolve();
903-
},
904-
// called when the user navigates to a new location, to check for authentication
905-
checkAuth: () => {
906-
return localStorage.getItem("username")
907-
? Promise.resolve()
908-
: Promise.reject();
909-
},
910-
// called when the user navigates to a new location, to check for permissions / roles
911-
getPermissions: () => Promise.resolve(),
885+
// called when the user attempts to log in
886+
login: ({ username }) => {
887+
localStorage.setItem("username", username);
888+
// accept all username/password combinations
889+
return Promise.resolve();
890+
},
891+
// called when the user clicks on the logout button
892+
logout: () => {
893+
localStorage.removeItem("username");
894+
return Promise.resolve();
895+
},
896+
// called when the API returns an error
897+
checkError: ({ status }: { status: number }) => {
898+
if (status === 401 || status === 403) {
899+
localStorage.removeItem("username");
900+
return Promise.reject();
901+
}
902+
return Promise.resolve();
903+
},
904+
// called when the user navigates to a new location, to check for authentication
905+
checkAuth: () => {
906+
return localStorage.getItem("username")
907+
? Promise.resolve()
908+
: Promise.reject();
909+
},
910+
// called when the user navigates to a new location, to check for permissions / roles
911+
getPermissions: () => Promise.resolve(),
912912
};
913913
```
914914

@@ -962,7 +962,7 @@ React-admin calls the Data Provider with one method for each of the actions of t
962962

963963
The code for a Data Provider for the `my.api.url` API is as follows:
964964

965-
```ts
965+
```tsx
966966
// in src/dataProvider.ts
967967
import { DataProvider, fetchUtils } from "react-admin";
968968
import { stringify } from "query-string";

‎docs/js/ra-doc-exec.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,10 @@ const buildJSCodeBlocksFromTS = async () => {
131131

132132
// Containers for Prism highlighter
133133
const highlight = document.createElement('div');
134+
highlight.className = 'highlight';
134135
jsTabContent.appendChild(highlight);
135136
const jsTabContentPre = document.createElement('pre');
137+
jsTabContentPre.className = 'highlight';
136138
highlight.appendChild(jsTabContentPre);
137139

138140
// The actual JS code element

‎examples/tutorial/src/main.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
33
import App from './App';
44
import './index.css';
55

6-
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
6+
ReactDOM.createRoot(document.getElementById('root')!).render(
77
<React.StrictMode>
88
<App />
99
</React.StrictMode>

0 commit comments

Comments
 (0)