Skip to content

Commit 9850724

Browse files
gaearoneps1lonrickhanlonii
authored
Upgrade sandboxes to 19.2 (#8037)
* Use stable release in demos with HTML output * Fix Activity sandboxes (#8035) * Fix Activity sandboxes * hacky fix * Revert "Fix Activity sandboxes (#8035)" This reverts commit f9fd07c. * Bump to 19.2 * cleanup rest of sandpacks * Pin deps * Add back package.json with third-party deps * "^" should be fixed now * add back package.json for more toastify deps * fuggin whitespace * more fuggin whitespace * fml like fr fr --------- Co-authored-by: Sebastian Sebbie Silbermann <[email protected]> Co-authored-by: Ricky <[email protected]> Co-authored-by: Rick Hanlon <[email protected]>
1 parent 37f862a commit 9850724

File tree

8 files changed

+20
-382
lines changed

8 files changed

+20
-382
lines changed

‎src/components/MDX/Sandpack/template.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ root.render(
3535
eject: 'react-scripts eject',
3636
},
3737
dependencies: {
38-
react: '^19.1.0',
39-
'react-dom': '^19.1.0',
38+
react: '^19.2.0',
39+
'react-dom': '^19.2.0',
4040
'react-scripts': '^5.0.0',
4141
},
4242
},

‎src/components/MDX/SandpackWithHTMLOutput.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ export default function formatHTML(markup) {
5656
const packageJSON = `
5757
{
5858
"dependencies": {
59-
"react": "18.3.0-canary-6db7f4209-20231021",
60-
"react-dom": "18.3.0-canary-6db7f4209-20231021",
59+
"react": "^19.2.0",
60+
"react-dom": "^19.2.0",
6161
"react-scripts": "^5.0.0",
6262
"html-format": "^1.1.2"
6363
},

‎src/content/learn/escape-hatches.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -455,8 +455,8 @@ This is not ideal. You want to re-connect to the chat only if the `roomId` has c
455455
```json package.json hidden
456456
{
457457
"dependencies": {
458-
"react": "canary",
459-
"react-dom": "canary",
458+
"react": "latest",
459+
"react-dom": "latest",
460460
"react-scripts": "latest",
461461
"toastify-js": "1.12.0"
462462
},

‎src/content/learn/removing-effect-dependencies.md‎

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1253,22 +1253,6 @@ Is there a line of code inside the Effect that should not be reactive? How can y
12531253
12541254
<Sandpack>
12551255
1256-
```json package.json hidden
1257-
{
1258-
"dependencies": {
1259-
"react": "canary",
1260-
"react-dom": "canary",
1261-
"react-scripts": "latest"
1262-
},
1263-
"scripts": {
1264-
"start": "react-scripts start",
1265-
"build": "react-scripts build",
1266-
"test": "react-scripts test --env=jsdom",
1267-
"eject": "react-scripts eject"
1268-
}
1269-
}
1270-
```
1271-
12721256
```js
12731257
import { useState, useEffect, useRef } from 'react';
12741258
import { useEffectEvent } from 'react';
@@ -1380,22 +1364,6 @@ Your Effect needs to read the latest value of `duration`, but you don't want it
13801364
13811365
<Sandpack>
13821366
1383-
```json package.json hidden
1384-
{
1385-
"dependencies": {
1386-
"react": "canary",
1387-
"react-dom": "canary",
1388-
"react-scripts": "latest"
1389-
},
1390-
"scripts": {
1391-
"start": "react-scripts start",
1392-
"build": "react-scripts build",
1393-
"test": "react-scripts test --env=jsdom",
1394-
"eject": "react-scripts eject"
1395-
}
1396-
}
1397-
```
1398-
13991367
```js
14001368
import { useState, useEffect, useRef } from 'react';
14011369
import { FadeInAnimation } from './animation.js';
@@ -1819,8 +1787,8 @@ Another of these functions only exists to pass some state to an imported API met
18191787
```json package.json hidden
18201788
{
18211789
"dependencies": {
1822-
"react": "canary",
1823-
"react-dom": "canary",
1790+
"react": "latest",
1791+
"react-dom": "latest",
18241792
"react-scripts": "latest",
18251793
"toastify-js": "1.12.0"
18261794
},
@@ -2114,8 +2082,8 @@ As a result, the chat re-connects only when something meaningful (`roomId` or `i
21142082
```json package.json hidden
21152083
{
21162084
"dependencies": {
2117-
"react": "canary",
2118-
"react-dom": "canary",
2085+
"react": "latest",
2086+
"react-dom": "latest",
21192087
"react-scripts": "latest",
21202088
"toastify-js": "1.12.0"
21212089
},

‎src/content/learn/reusing-logic-with-custom-hooks.md‎

Lines changed: 2 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1064,8 +1064,8 @@ export function showNotification(message, theme = 'dark') {
10641064
```json package.json hidden
10651065
{
10661066
"dependencies": {
1067-
"react": "canary",
1068-
"react-dom": "canary",
1067+
"react": "latest",
1068+
"react-dom": "latest",
10691069
"react-scripts": "latest",
10701070
"toastify-js": "1.12.0"
10711071
},
@@ -1710,22 +1710,6 @@ html, body { min-height: 300px; }
17101710
}
17111711
```
17121712
1713-
```json package.json hidden
1714-
{
1715-
"dependencies": {
1716-
"react": "canary",
1717-
"react-dom": "canary",
1718-
"react-scripts": "latest"
1719-
},
1720-
"scripts": {
1721-
"start": "react-scripts start",
1722-
"build": "react-scripts build",
1723-
"test": "react-scripts test --env=jsdom",
1724-
"eject": "react-scripts eject"
1725-
}
1726-
}
1727-
```
1728-
17291713
</Sandpack>
17301714
17311715
However, you didn't *have to* do that. As with regular functions, ultimately you decide where to draw the boundaries between different parts of your code. You could also take a very different approach. Instead of keeping the logic in the Effect, you could move most of the imperative logic inside a JavaScript [class:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
@@ -2199,22 +2183,6 @@ It looks like your `useInterval` Hook accepts an event listener as an argument.
21992183
22002184
<Sandpack>
22012185
2202-
```json package.json hidden
2203-
{
2204-
"dependencies": {
2205-
"react": "canary",
2206-
"react-dom": "canary",
2207-
"react-scripts": "latest"
2208-
},
2209-
"scripts": {
2210-
"start": "react-scripts start",
2211-
"build": "react-scripts build",
2212-
"test": "react-scripts test --env=jsdom",
2213-
"eject": "react-scripts eject"
2214-
}
2215-
}
2216-
```
2217-
22182186
```js
22192187
import { useCounter } from './useCounter.js';
22202188
import { useInterval } from './useInterval.js';
@@ -2270,22 +2238,6 @@ With this change, both intervals work as expected and don't interfere with each
22702238
22712239
<Sandpack>
22722240
2273-
```json package.json hidden
2274-
{
2275-
"dependencies": {
2276-
"react": "canary",
2277-
"react-dom": "canary",
2278-
"react-scripts": "latest"
2279-
},
2280-
"scripts": {
2281-
"start": "react-scripts start",
2282-
"build": "react-scripts build",
2283-
"test": "react-scripts test --env=jsdom",
2284-
"eject": "react-scripts eject"
2285-
}
2286-
}
2287-
```
2288-
22892241
22902242
```js
22912243
import { useCounter } from './useCounter.js';

‎src/content/learn/separating-events-from-effects.md‎

Lines changed: 8 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -442,8 +442,8 @@ Verify that the new behavior works as you would expect:
442442
```json package.json hidden
443443
{
444444
"dependencies": {
445-
"react": "canary",
446-
"react-dom": "canary",
445+
"react": "latest",
446+
"react-dom": "latest",
447447
"react-scripts": "latest",
448448
"toastify-js": "1.12.0"
449449
},
@@ -788,22 +788,6 @@ With `useEffectEvent`, there is no need to "lie" to the linter, and the code wor
788788
789789
<Sandpack>
790790
791-
```json package.json hidden
792-
{
793-
"dependencies": {
794-
"react": "canary",
795-
"react-dom": "canary",
796-
"react-scripts": "latest"
797-
},
798-
"scripts": {
799-
"start": "react-scripts start",
800-
"build": "react-scripts build",
801-
"test": "react-scripts test --env=jsdom",
802-
"eject": "react-scripts eject"
803-
}
804-
}
805-
```
806-
807791
```js
808792
import { useState, useEffect } from 'react';
809793
import { useEffectEvent } from 'react';
@@ -955,23 +939,6 @@ To fix this code, it's enough to follow the rules.
955939
956940
<Sandpack>
957941
958-
```json package.json hidden
959-
{
960-
"dependencies": {
961-
"react": "canary",
962-
"react-dom": "canary",
963-
"react-scripts": "latest"
964-
},
965-
"scripts": {
966-
"start": "react-scripts start",
967-
"build": "react-scripts build",
968-
"test": "react-scripts test --env=jsdom",
969-
"eject": "react-scripts eject"
970-
}
971-
}
972-
```
973-
974-
975942
```js {expectedErrors: {'react-compiler': [14]}}
976943
import { useState, useEffect } from 'react';
977944

@@ -1025,22 +992,6 @@ If you remove the suppression comment, React will tell you that this Effect's co
1025992
1026993
<Sandpack>
1027994
1028-
```json package.json hidden
1029-
{
1030-
"dependencies": {
1031-
"react": "canary",
1032-
"react-dom": "canary",
1033-
"react-scripts": "latest"
1034-
},
1035-
"scripts": {
1036-
"start": "react-scripts start",
1037-
"build": "react-scripts build",
1038-
"test": "react-scripts test --env=jsdom",
1039-
"eject": "react-scripts eject"
1040-
}
1041-
}
1042-
```
1043-
1044995
```js
1045996
import { useState, useEffect } from 'react';
1046997

@@ -1103,22 +1054,6 @@ It seems like the Effect which sets up the timer "reacts" to the `increment` val
11031054
11041055
<Sandpack>
11051056
1106-
```json package.json hidden
1107-
{
1108-
"dependencies": {
1109-
"react": "canary",
1110-
"react-dom": "canary",
1111-
"react-scripts": "latest"
1112-
},
1113-
"scripts": {
1114-
"start": "react-scripts start",
1115-
"build": "react-scripts build",
1116-
"test": "react-scripts test --env=jsdom",
1117-
"eject": "react-scripts eject"
1118-
}
1119-
}
1120-
```
1121-
11221057
```js
11231058
import { useState, useEffect } from 'react';
11241059
import { useEffectEvent } from 'react';
@@ -1172,22 +1107,6 @@ To solve the issue, extract an `onTick` Effect Event from the Effect:
11721107
11731108
<Sandpack>
11741109
1175-
```json package.json hidden
1176-
{
1177-
"dependencies": {
1178-
"react": "canary",
1179-
"react-dom": "canary",
1180-
"react-scripts": "latest"
1181-
},
1182-
"scripts": {
1183-
"start": "react-scripts start",
1184-
"build": "react-scripts build",
1185-
"test": "react-scripts test --env=jsdom",
1186-
"eject": "react-scripts eject"
1187-
}
1188-
}
1189-
```
1190-
11911110
```js
11921111
import { useState, useEffect } from 'react';
11931112
import { useEffectEvent } from 'react';
@@ -1254,22 +1173,6 @@ Code inside Effect Events is not reactive. Are there cases in which you would _w
12541173
12551174
<Sandpack>
12561175
1257-
```json package.json hidden
1258-
{
1259-
"dependencies": {
1260-
"react": "canary",
1261-
"react-dom": "canary",
1262-
"react-scripts": "latest"
1263-
},
1264-
"scripts": {
1265-
"start": "react-scripts start",
1266-
"build": "react-scripts build",
1267-
"test": "react-scripts test --env=jsdom",
1268-
"eject": "react-scripts eject"
1269-
}
1270-
}
1271-
```
1272-
12731176
```js
12741177
import { useState, useEffect } from 'react';
12751178
import { useEffectEvent } from 'react';
@@ -1341,22 +1244,6 @@ The problem with the above example is that it extracted an Effect Event called `
13411244
13421245
<Sandpack>
13431246
1344-
```json package.json hidden
1345-
{
1346-
"dependencies": {
1347-
"react": "canary",
1348-
"react-dom": "canary",
1349-
"react-scripts": "latest"
1350-
},
1351-
"scripts": {
1352-
"start": "react-scripts start",
1353-
"build": "react-scripts build",
1354-
"test": "react-scripts test --env=jsdom",
1355-
"eject": "react-scripts eject"
1356-
}
1357-
}
1358-
```
1359-
13601247
```js
13611248
import { useState, useEffect } from 'react';
13621249
import { useEffectEvent } from 'react';
@@ -1440,8 +1327,8 @@ Your Effect knows which room it connected to. Is there any information that you
14401327
```json package.json hidden
14411328
{
14421329
"dependencies": {
1443-
"react": "canary",
1444-
"react-dom": "canary",
1330+
"react": "latest",
1331+
"react-dom": "latest",
14451332
"react-scripts": "latest",
14461333
"toastify-js": "1.12.0"
14471334
},
@@ -1581,8 +1468,8 @@ To fix the issue, instead of reading the *latest* `roomId` inside the Effect Eve
15811468
```json package.json hidden
15821469
{
15831470
"dependencies": {
1584-
"react": "canary",
1585-
"react-dom": "canary",
1471+
"react": "latest",
1472+
"react-dom": "latest",
15861473
"react-scripts": "latest",
15871474
"toastify-js": "1.12.0"
15881475
},
@@ -1718,8 +1605,8 @@ To solve the additional challenge, save the notification timeout ID and clear it
17181605
```json package.json hidden
17191606
{
17201607
"dependencies": {
1721-
"react": "canary",
1722-
"react-dom": "canary",
1608+
"react": "latest",
1609+
"react-dom": "latest",
17231610
"react-scripts": "latest",
17241611
"toastify-js": "1.12.0"
17251612
},

0 commit comments

Comments
 (0)