Skip to content

Commit 48c9fdb

Browse files
rickhanloniirickhanlonii
committed
Add refs and errors
1 parent 0e5e0e8 commit 48c9fdb

File tree

5 files changed

+344
-9
lines changed

5 files changed

+344
-9
lines changed

‎src/components/MDX/ConsoleBlock.tsx

Lines changed: 76 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ interface ConsoleBlockProps {
1515
children: React.ReactNode;
1616
}
1717

18+
interface ConsoleBlockMultiProps {
19+
children: React.ReactNode;
20+
}
21+
1822
const Box = ({
1923
width = '60px',
2024
height = '17px',
@@ -29,7 +33,7 @@ const Box = ({
2933
<div className={className} style={{width, height, ...customStyles}}></div>
3034
);
3135

32-
function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
36+
export function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
3337
let message: React.ReactNode | null;
3438
if (typeof children === 'string') {
3539
message = children;
@@ -38,7 +42,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
3842
}
3943

4044
return (
41-
<div className="mb-4 text-secondary" translate="no" dir="ltr">
45+
<div className="console-block mb-4 text-secondary" translate="no" dir="ltr">
4246
<div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
4347
<div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
4448
<Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
@@ -73,4 +77,73 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
7377
);
7478
}
7579

76-
export default ConsoleBlock;
80+
export function ConsoleBlockMulti({children}: ConsoleBlockMultiProps) {
81+
return (
82+
<div className="console-block mb-4 text-secondary" translate="no" dir="ltr">
83+
<div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
84+
<div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
85+
<Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
86+
</div>
87+
<div className="flex text-sm px-4">
88+
<div className="border-b-2 border-gray-300 dark:border-gray-90 text-tertiary dark:text-tertiary-dark">
89+
Console
90+
</div>
91+
<div className="px-4 py-2 flex">
92+
<Box className="me-2 bg-gray-300 dark:bg-gray-70" />
93+
<Box className="me-2 hidden md:block bg-gray-300 dark:bg-gray-70" />
94+
<Box className="hidden md:block bg-gray-300 dark:bg-gray-70" />
95+
</div>
96+
</div>
97+
</div>
98+
<div className="grid grid-cols-1 divide-y divide-gray-300 dark:divide-gray-70 text-base">
99+
{children}
100+
</div>
101+
</div>
102+
);
103+
}
104+
105+
export function ConsoleLogLine({children, level}: ConsoleBlockProps) {
106+
let message: React.ReactNode | null;
107+
if (typeof children === 'string') {
108+
message = children;
109+
} else if (isValidElement(children)) {
110+
message = children.props.children;
111+
} else if (Array.isArray(children)) {
112+
console.log('array', children);
113+
message = children.reduce((result, child) => {
114+
if (typeof child === 'string') {
115+
console.log('adding', child);
116+
result += child;
117+
} else if (isValidElement(child)) {
118+
// @ts-ignore
119+
console.log('adding', child.props.children);
120+
// @ts-ignore
121+
result += child.props.children;
122+
}
123+
return result;
124+
}, '');
125+
}
126+
127+
return (
128+
<div
129+
className={cn(
130+
'ps-4 pe-2 pt-1 pb-2 grid grid-cols-[18px_auto] font-mono rounded-b-md',
131+
{
132+
'bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5':
133+
level === 'error',
134+
'bg-yellow-5 text-yellow-50': level === 'warning',
135+
'bg-gray-5 text-secondary dark:text-secondary-dark': level === 'info',
136+
}
137+
)}>
138+
{level === 'error' && (
139+
<IconError className="self-start mt-1.5 text-[.7rem] w-6" />
140+
)}
141+
{level === 'warning' && (
142+
<IconWarning className="self-start mt-1 text-[.65rem] w-6" />
143+
)}
144+
<div className="px-2 pt-1 whitespace-break-spaces text-code leading-tight">
145+
{message}
146+
</div>
147+
</div>
148+
);
149+
}

‎src/components/MDX/MDXComponents.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import cn from 'classnames';
88

99
import CodeBlock from './CodeBlock';
1010
import {CodeDiagram} from './CodeDiagram';
11-
import ConsoleBlock from './ConsoleBlock';
11+
import {ConsoleBlock, ConsoleLogLine, ConsoleBlockMulti} from './ConsoleBlock';
1212
import ExpandableCallout from './ExpandableCallout';
1313
import ExpandableExample from './ExpandableExample';
1414
import {H1, H2, H3, H4, H5} from './Heading';
@@ -420,6 +420,8 @@ export const MDXComponents = {
420420
pre: CodeBlock,
421421
CodeDiagram,
422422
ConsoleBlock,
423+
ConsoleBlockMulti,
424+
ConsoleLogLine,
423425
DeepDive: (props: {
424426
children: React.ReactNode;
425427
title: string;

‎src/content/blog/2024/04/01/react-19-upgrade-guide.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,79 @@ For more see [the React Conf website](https://conf.react.dev).
2323
</Note>
2424

2525
---
26+
## Installing {/*installing*/}
2627

28+
To install the latest version of React:
29+
30+
```bash
31+
npm install react react-dom
32+
```
33+
34+
Or if you’re using yarn:
35+
36+
```bash
37+
yarn add react react-dom
38+
```
39+
40+
TODO: Note about jsx transform?
41+
42+
43+
## New JSX Transform {/*new-jsx-transform*/}
44+
45+
TODO: new jsx transform now required
46+
47+
48+
## Removed APIs {/*removed-apis*/}
49+
50+
In this release we're removing many long-time deprecated APIs:
51+
52+
### React {/*removed-apis-react*/}
53+
- PropTypes 15.5.0
54+
- Legacy context 15.5.0
55+
- Module pattern factories 16.9.0
56+
- String Refs 16.13.0
57+
- createFactory 16.13.0
58+
59+
### React DOM {/*removed-apis-react-dom*/}
60+
- render 18.0.0
61+
- hydrate 18.0.0
62+
- unmountComponentAtNode 18.0.0
63+
- findDOMNode 18.0.0
64+
- createFactory 16.13.0
65+
- test-utils 18.3.0
66+
67+
### react-test-renderer {/*react-test-renderer*/}
68+
69+
TODO
70+
71+
### UMD builds {/*umd-builds*/}
72+
73+
TODO
74+
75+
## Deprecations {/*deprecations*/}
76+
77+
- react: Warn when using defaultProps in functions, memo, lazy, and forwardRef (TODO)
78+
- react: Warn when spreading “key” as part of props in DEV (TODO)
79+
- react-dom: Moved createPortal and (TODO) to `react-dom/client` (TODO)
80+
- react: Warn when calling setState during initial render (TODO)
81+
82+
## Other Breaking Changes {/*breaking-changes*/}
83+
84+
- New JSX Transform: React now requires using the “new” jsx transform. (TODO)
85+
- react-dom: Remove errorInfo.digest with warning (TODO)
86+
- react-dom: Removed unstable_renderSubtreeIntoContainer (TODO)
87+
- react-dom: Warn and don’t set empty string attributes for src/href (TODO: land)
88+
- react-dom: Error and do not allow javascript URLs in src/href (TODO: land)
89+
90+
## Other notable changes {/*other-notable-changes*/}
91+
92+
### React {/*other-notable-changes-react*/}
93+
- act moved to top-level React package (TODO)
94+
- unstable_batchedUpdates is a noop (TODO).
95+
- Transitions in popstate are now synchronous.
96+
97+
### React DOM {/*other-notable-changes-react-dom*/}
98+
- Removed layout effect warning during SSR.
99+
- Removed workaround for IE style sorting hydration errors (TODO: land)
100+
- Revert to client render in more cases (TODO: status)
101+
- APIs moved to react-dom/client

0 commit comments

Comments
 (0)