Skip to content

fix: resolve Sandpack examples not displaying in Activity documentation #1344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: resolve Sandpack examples not displaying in Activity documentation #1344

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 42 additions & 96 deletions src/content/reference/react/Activity.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,9 @@ export default function TabButton({ action, children, isActive }) {
```

```js src/AboutTab.js hidden
import {unstable_ViewTransition as ViewTransition} from 'react';
import {unstable_ViewTransition, ViewTransition as ViewTransitionStable} from 'react';

let ViewTransition = ViewTransitionStable ?? unstable_ViewTransition;

export default function AboutTab() {
return (
Expand All @@ -162,9 +164,11 @@ export default function AboutTab() {
```

```js src/PostsTab.js hidden
import {use, unstable_ViewTransition as ViewTransition} from 'react';
import {use, unstable_ViewTransition, ViewTransition as ViewTransitionStable} from 'react';
import { fetchData } from './data.js';

let ViewTransition = ViewTransitionStable ?? unstable_ViewTransition;

function PostsTab() {
const posts = use(fetchData('/posts'));
return (
Expand Down Expand Up @@ -256,24 +260,6 @@ button { margin-right: 10px }
b { display: inline-block; margin-right: 10px; }
.pending { color: #777; }
```

```json package.json hidden
{
"dependencies": {
"react": "experimental",
"react-dom": "experimental",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

</Sandpack>

이 예시에서 "Posts" 탭을 클릭할 때 게시물이 로드될 때까지 기다려야 합니다.
Expand All @@ -283,12 +269,14 @@ b { display: inline-block; margin-right: 10px; }
<Sandpack>

```js
import { Suspense, useState, unstable_Activity as Activity } from "react";
import { Suspense, useState, unstable_Activity, Activity as ActivityStable } from "react";
import TabButton from "./TabButton.js";
import AboutTab from "./AboutTab.js";
import PostsTab from "./PostsTab.js";
import ContactTab from "./ContactTab.js";

let Activity = ActivityStable ?? unstable_Activity;

export default function TabContainer() {
const [tab, setTab] = useState("about");
return (
Expand Down Expand Up @@ -342,7 +330,9 @@ export default function TabButton({ action, children, isActive }) {
```

```js src/AboutTab.js hidden
import {unstable_ViewTransition as ViewTransition} from 'react';
import {unstable_ViewTransition, ViewTransition as ViewTransitionStable} from 'react';

let ViewTransition = ViewTransitionStable ?? unstable_ViewTransition;

export default function AboutTab() {
return (
Expand All @@ -354,9 +344,11 @@ export default function AboutTab() {
```

```js src/PostsTab.js hidden
import {use, unstable_ViewTransition as ViewTransition} from 'react';
import {use, unstable_ViewTransition, ViewTransition as ViewTransitionStable} from 'react';
import { fetchData } from './data.js';

let ViewTransition = ViewTransitionStable ?? unstable_ViewTransition;

function PostsTab() {
const posts = use(fetchData('/posts'));
return (
Expand All @@ -382,7 +374,9 @@ export default PostsTab;
```

```js src/ContactTab.js hidden
import {unstable_ViewTransition as ViewTransition} from 'react';
import {unstable_ViewTransition, ViewTransition as ViewTransitionStable} from 'react';

let ViewTransition = ViewTransitionStable ?? unstable_ViewTransition;

export default function ContactTab() {
return (
Expand Down Expand Up @@ -449,22 +443,6 @@ b { display: inline-block; margin-right: 10px; }
.pending { color: #777; }
```

```json package.json hidden
{
"dependencies": {
"react": "experimental",
"react-dom": "experimental",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

</Sandpack>

Expand Down Expand Up @@ -553,7 +531,9 @@ export default function TabButton({ action, children, isActive }) {
```

```js src/AboutTab.js hidden
import {unstable_ViewTransition as ViewTransition} from 'react';
import {unstable_ViewTransition, ViewTransition as ViewTransitionStable} from 'react';

let ViewTransition = ViewTransitionStable ?? unstable_ViewTransition;

export default function AboutTab() {
return (
Expand All @@ -565,9 +545,11 @@ export default function AboutTab() {
```

```js src/PostsTab.js hidden
import {use, unstable_ViewTransition as ViewTransition} from 'react';
import {use, unstable_ViewTransition, ViewTransition as ViewTransitionStable} from 'react';
import { fetchData } from './data.js';

let ViewTransition = ViewTransitionStable ?? unstable_ViewTransition;

function PostsTab() {
const posts = use(fetchData('/posts'));
return (
Expand All @@ -593,7 +575,9 @@ export default PostsTab;
```

```js src/ContactTab.js hidden
import {unstable_ViewTransition as ViewTransition} from 'react';
import {unstable_ViewTransition, ViewTransition as ViewTransitionStable} from 'react';

let ViewTransition = ViewTransitionStable ?? unstable_ViewTransition;

export default function ContactTab() {
return (
Expand Down Expand Up @@ -660,22 +644,6 @@ b { display: inline-block; margin-right: 10px; }
.pending { color: #777; }
```

```json package.json hidden
{
"dependencies": {
"react": "experimental",
"react-dom": "experimental",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

</Sandpack>

Expand All @@ -685,12 +653,14 @@ b { display: inline-block; margin-right: 10px; }
<Sandpack>

```js
import { Suspense, useState, unstable_Activity as Activity } from "react";
import { Suspense, useState, unstable_Activity, Activity as ActivityStable } from "react";
import TabButton from "./TabButton.js";
import AboutTab from "./AboutTab.js";
import PostsTab from "./PostsTab.js";
import ContactTab from "./ContactTab.js";

let Activity = ActivityStable ?? unstable_Activity;

export default function TabContainer() {
const [tab, setTab] = useState("about");
return (
Expand Down Expand Up @@ -744,7 +714,9 @@ export default function TabButton({ action, children, isActive }) {
```

```js src/AboutTab.js hidden
import {unstable_ViewTransition as ViewTransition} from 'react';
import {unstable_ViewTransition, ViewTransition as ViewTransitionStable} from 'react';

let ViewTransition = ViewTransitionStable ?? unstable_ViewTransition;

export default function AboutTab() {
return (
Expand All @@ -756,9 +728,11 @@ export default function AboutTab() {
```

```js src/PostsTab.js hidden
import {use, unstable_ViewTransition as ViewTransition} from 'react';
import {use, unstable_ViewTransition, ViewTransition as ViewTransitionStable} from 'react';
import { fetchData } from './data.js';

let ViewTransition = ViewTransitionStable ?? unstable_ViewTransition;

function PostsTab() {
const posts = use(fetchData('/posts'));
return (
Expand All @@ -784,7 +758,9 @@ export default PostsTab;
```

```js src/ContactTab.js hidden
import {unstable_ViewTransition as ViewTransition} from 'react';
import {unstable_ViewTransition, ViewTransition as ViewTransitionStable} from 'react';

let ViewTransition = ViewTransitionStable ?? unstable_ViewTransition;

export default function ContactTab() {
return (
Expand Down Expand Up @@ -851,22 +827,6 @@ b { display: inline-block; margin-right: 10px; }
.pending { color: #777; }
```

```json package.json hidden
{
"dependencies": {
"react": "experimental",
"react-dom": "experimental",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

</Sandpack>

Expand Down Expand Up @@ -1053,9 +1013,11 @@ Activity는 처음에 "hidden" 상태로 렌더링할 때 Effect를 생성하지
<Sandpack>

```js
import { useState, useRef, useEffect, unstable_Activity as Activity } from 'react';
import { useState, useRef, useEffect, unstable_Activity, Activity as ActivityStable } from 'react';
import VideoChecker from './checker.js';

let Activity = ActivityStable ?? unstable_Activity

function VideoPlayer({ src, isPlaying }) {
const ref = useRef(null);

Expand Down Expand Up @@ -1135,22 +1097,6 @@ b { display: inline-block; margin-right: 10px; }
video { width: 300px; margin-top: 10px; }
```

```json package.json hidden
{
"dependencies": {
"react": "experimental",
"react-dom": "experimental",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

</Sandpack>

Expand Down