3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-02 10:52:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(live-codeblock): add error boundary to live code preview (#8015)

Browse source 
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
This commit is contained in:
Rashid 2022-10-13 19:49:27 +04:00 • committed by GitHub
parent 80064b2eb9
commit 79b3f65a17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 64 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

42
packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
View file

@ -12,9 +12,14 @@ import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
import Translate from '@docusaurus/Translate';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import BrowserOnly from '@docusaurus/BrowserOnly';
import {usePrismTheme} from '@docusaurus/theme-common';
import {
ErrorBoundaryTryAgainButton,
usePrismTheme,
} from '@docusaurus/theme-common';
import ErrorBoundary from '@docusaurus/ErrorBoundary';
import type {Props} from '@theme/Playground';
import type {Props as ErrorProps} from '@theme/Error';
import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
import styles from './styles.module.css';
@ -29,6 +34,32 @@ function LivePreviewLoader() {
return <div>Loading...</div>;
}
function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
return (
<div className={styles.errorFallback}>
<p>{error.message}</p>
<ErrorBoundaryTryAgainButton onClick={tryAgain} />
</div>
);
}
function Preview() {
// No SSR for the live preview
// See https://github.com/facebook/docusaurus/issues/5747
return (
<BrowserOnly fallback={<LivePreviewLoader />}>
{() => (
<>
<ErrorBoundary fallback={(params) => <ErrorFallback {...params} />}>
<LivePreview />
</ErrorBoundary>
<LiveError />
</>
)}
</BrowserOnly>
);
}
function ResultWithHeader() {
return (
<>
@ -41,14 +72,7 @@ function ResultWithHeader() {
</Header>
{/* https://github.com/facebook/docusaurus/issues/5747 */}
<div className={styles.playgroundPreview}>
<BrowserOnly fallback={<LivePreviewLoader />}>
{() => (
<>
<LivePreview />
<LiveError />
</>
)}
</BrowserOnly>
<Preview />
</div>
</>
);

4
packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
View file

@ -38,3 +38,7 @@
padding: 1rem;
background-color: var(--ifm-pre-background);
}
.errorFallback {
padding: 0.55rem;
}