Skip to content

Commit ee9c177

Browse files
lxmarinkoviclxmarinkovic
authored
Merge pull request #36 from reactjs/sync-303ecae3
2 parents 63294ae + 6ba01dc commit ee9c177

File tree

80 files changed

+1010
-880
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+1010
-880
lines changed

‎src/components/MDX/Sandpack/DownloadButton.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import {useSyncExternalStore} from 'react';
66
import {useSandpack} from '@codesandbox/sandpack-react/unstyled';
77
import {IconDownload} from '../../Icon/IconDownload';
8+
import {AppJSPath, StylesCSSPath, SUPPORTED_FILES} from './createFileMap';
89
export interface DownloadButtonProps {}
910

1011
let supportsImportMap = false;
@@ -32,8 +33,6 @@ function useSupportsImportMap() {
3233
return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot);
3334
}
3435

35-
const SUPPORTED_FILES = ['/App.js', '/styles.css'];
36-
3736
export function DownloadButton({
3837
providedFiles,
3938
}: {
@@ -49,8 +48,8 @@ export function DownloadButton({
4948
}
5049

5150
const downloadHTML = () => {
52-
const css = sandpack.files['/styles.css']?.code ?? '';
53-
const code = sandpack.files['/App.js']?.code ?? '';
51+
const css = sandpack.files[StylesCSSPath]?.code ?? '';
52+
const code = sandpack.files[AppJSPath]?.code ?? '';
5453
const blob = new Blob([
5554
`<!DOCTYPE html>
5655
<html>

‎src/components/MDX/Sandpack/SandpackRoot.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {SandpackLogLevel} from '@codesandbox/sandpack-client';
99
import {CustomPreset} from './CustomPreset';
1010
import {createFileMap} from './createFileMap';
1111
import {CustomTheme} from './Themes';
12+
import {template} from './template';
1213

1314
type SandpackProps = {
1415
children: React.ReactNode;
@@ -70,17 +71,19 @@ function SandpackRoot(props: SandpackProps) {
7071
const codeSnippets = Children.toArray(children) as React.ReactElement[];
7172
const files = createFileMap(codeSnippets);
7273

73-
files['/styles.css'] = {
74-
code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
75-
hidden: !files['/styles.css']?.visible,
74+
files['/src/styles.css'] = {
75+
code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'),
76+
hidden: !files['/src/styles.css']?.visible,
7677
};
7778

7879
return (
7980
<div className="sandpack sandpack--playground w-full my-8" dir="ltr">
8081
<SandpackProvider
81-
template="react"
82-
files={files}
82+
files={{...template, ...files}}
8383
theme={CustomTheme}
84+
customSetup={{
85+
environment: 'create-react-app',
86+
}}
8487
options={{
8588
autorun,
8689
initMode: 'user-visible',

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

+7-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

55
import type {SandpackFile} from '@codesandbox/sandpack-react/unstyled';
66

7+
export const AppJSPath = `/src/App.js`;
8+
export const StylesCSSPath = `/src/styles.css`;
9+
export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
10+
711
export const createFileMap = (codeSnippets: any) => {
812
return codeSnippets.reduce(
913
(result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
@@ -26,15 +30,16 @@ export const createFileMap = (codeSnippets: any) => {
2630
}
2731
} else {
2832
if (props.className === 'language-js') {
29-
filePath = '/App.js';
33+
filePath = AppJSPath;
3034
} else if (props.className === 'language-css') {
31-
filePath = '/styles.css';
35+
filePath = StylesCSSPath;
3236
} else {
3337
throw new Error(
3438
`Code block is missing a filename: ${props.children}`
3539
);
3640
}
3741
}
42+
3843
if (result[filePath]) {
3944
throw new Error(
4045
`File ${filePath} was defined multiple times. Each file snippet should have a unique path name`

‎src/components/MDX/Sandpack/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44

55
import {lazy, memo, Children, Suspense} from 'react';
6-
import {createFileMap} from './createFileMap';
6+
import {AppJSPath, createFileMap} from './createFileMap';
77

88
const SandpackRoot = lazy(() => import('./SandpackRoot'));
99

@@ -57,7 +57,7 @@ export default memo(function SandpackWrapper(props: any): any {
5757
);
5858
let activeCode;
5959
if (!activeCodeSnippet.length) {
60-
activeCode = codeSnippet['/App.js'].code;
60+
activeCode = codeSnippet[AppJSPath].code;
6161
} else {
6262
activeCode = codeSnippet[activeCodeSnippet[0]].code;
6363
}

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

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
export const template = {
2+
'/src/index.js': {
3+
hidden: true,
4+
code: `import React, { StrictMode } from "react";
5+
import { createRoot } from "react-dom/client";
6+
import "./styles.css";
7+
8+
import App from "./App";
9+
10+
const root = createRoot(document.getElementById("root"));
11+
root.render(
12+
<StrictMode>
13+
<App />
14+
</StrictMode>
15+
);`,
16+
},
17+
'/package.json': {
18+
hidden: true,
19+
code: JSON.stringify(
20+
{
21+
name: 'react.dev',
22+
version: '0.0.0',
23+
main: '/src/index.js',
24+
scripts: {
25+
start: 'react-scripts start',
26+
build: 'react-scripts build',
27+
test: 'react-scripts test --env=jsdom',
28+
eject: 'react-scripts eject',
29+
},
30+
dependencies: {
31+
react: '^18.0.0',
32+
'react-dom': '^18.0.0',
33+
'react-scripts': '^5.0.0',
34+
},
35+
},
36+
null,
37+
2
38+
),
39+
},
40+
'/public/index.html': {
41+
hidden: true,
42+
code: `<!DOCTYPE html>
43+
<html lang="en">
44+
<head>
45+
<meta charset="UTF-8">
46+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
47+
<title>Document</title>
48+
</head>
49+
<body>
50+
<div id="root"></div>
51+
</body>
52+
</html>`,
53+
},
54+
};

‎src/content/blog/2023/03/16/introducing-react-dev.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ If you like to learn by doing, we recommend checking out the [Tic-Tac-Toe Tutori
5757

5858
<Sandpack>
5959

60-
```js App.js
60+
```js src/App.js
6161
import { useState } from 'react';
6262

6363
function Square({ value, onSquareClick }) {
@@ -175,7 +175,7 @@ function calculateWinner(squares) {
175175
}
176176
```
177177

178-
```css styles.css
178+
```css src/styles.css
179179
* {
180180
box-sizing: border-box;
181181
}

‎src/content/community/conferences.md

+63
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
1010

1111
## Upcoming Conferences {/*upcoming-conferences*/}
1212

13+
<<<<<<< HEAD
1314
### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
1415
September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event)
1516

@@ -66,6 +67,8 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
6667

6768
[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
6869

70+
=======
71+
>>>>>>> 303ecae3dd4c7b570cf18e0115b94188f6aad5a1
6972
### App.js Conf 2024 {/*appjs-conf-2024*/}
7073
May 22 - 24, 2024. In-person in Kraków, Poland + remote
7174

@@ -76,8 +79,68 @@ June 12 - June 14, 2024. Atlanta, GA, USA
7679

7780
[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
7881

82+
### React India 2024 {/*react-india-2024*/}
83+
October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
84+
85+
[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
86+
7987
## Past Conferences {/*past-conferences*/}
8088

89+
### React Day Berlin 2023 {/*react-day-berlin-2023*/}
90+
December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
91+
92+
[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
93+
94+
### React Summit US 2023 {/*react-summit-us-2023*/}
95+
November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
96+
97+
[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023)
98+
99+
### reactjsday 2023 {/*reactjsday-2023*/}
100+
October 27th 2023. In-person in Verona, Italy and online (hybrid event)
101+
102+
[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
103+
104+
### React Advanced 2023 {/*react-advanced-2023*/}
105+
October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
106+
107+
[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023)
108+
109+
### React Brussels 2023 {/*react-brussels-2023*/}
110+
October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid)
111+
112+
[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact)
113+
114+
### React India 2023 {/*react-india-2023*/}
115+
October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
116+
117+
[Website](https://www.reactindia.io) - [Twitter](https://x.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
118+
119+
### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/}
120+
September 29 - 30, 2023. Nairobi, Kenya
121+
122+
[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
123+
124+
### React Live 2023 {/*react-live-2023*/}
125+
September 29, 2023. Amsterdam, Netherlands
126+
127+
[Website](https://reactlive.nl/)
128+
129+
### React Alicante 2023 {/*react-alicante-2023*/}
130+
September 28 - 30, 2023. Alicante, Spain
131+
132+
[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante)
133+
134+
### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
135+
September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event)
136+
137+
[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs)
138+
139+
### React Native EU 2023 {/*react-native-eu-2023*/}
140+
September 7 & 8, 2023. Wrocław, Poland
141+
142+
[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
143+
81144
### React Rally 2023 🐙 {/*react-rally-2023*/}
82145
August 17 & 18, 2023. Salt Lake City, UT, USA
83146

‎src/content/community/meetups.md

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
101101
* [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup)
102102
* [Chennai](https://www.meetup.com/React-Chennai/)
103103
* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
104+
* [Mumbai](https://reactmumbai.dev)
104105
* [Pune](https://www.meetup.com/ReactJS-and-Friends/)
105106

106107
## Indonesia {/*indonesia*/}

‎src/content/learn/add-react-to-an-existing-project.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ Onda dodajte ove linije koda na vrh vašeg glavnog JavaScript fajla (možda se z
6767
</html>
6868
```
6969

70-
```js index.js active
70+
```js src/index.js active
7171
import { createRoot } from 'react-dom/client';
7272

7373
// Clear the existing HTML content
@@ -133,7 +133,7 @@ Ovo vam omogućava da pronađete taj HTML element sa [`document.getElementById`]
133133
</html>
134134
```
135135

136-
```js index.js active
136+
```js src/index.js active
137137
import { createRoot } from 'react-dom/client';
138138

139139
function NavigationBar() {

‎src/content/learn/adding-interactivity.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export default function Gallery() {
134134
}
135135
```
136136

137-
```js data.js
137+
```js src/data.js
138138
export const sculptureList = [{
139139
name: 'Homenaje a la Neurocirugía',
140140
artist: 'Marta Colvin Andrade',

0 commit comments

Comments
 (0)