@docusaurus/theme-live-codeblock 2.4.0 → 3.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/theme/Playground/index.js +30 -9
  2. package/lib/theme/Playground/styles.module.css +4 -0
  3. package/package.json +11 -11
  4. package/src/theme/Playground/index.tsx +35 -10
  5. package/src/theme/Playground/styles.module.css +4 -0
package/lib/theme/Playground/index.js CHANGED
@@ -11,7 +11,11 @@ import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
11
11
  import Translate from '@docusaurus/Translate';
12
12
  import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
13
13
  import BrowserOnly from '@docusaurus/BrowserOnly';
14
- import {usePrismTheme} from '@docusaurus/theme-common';
14
+ import {
15
+ ErrorBoundaryTryAgainButton,
16
+ usePrismTheme,
17
+ } from '@docusaurus/theme-common';
18
+ import ErrorBoundary from '@docusaurus/ErrorBoundary';
15
19
  import styles from './styles.module.css';
16
20
  function Header({children}) {
17
21
  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
@@ -21,6 +25,30 @@ function LivePreviewLoader() {
21
25
  // eslint-disable-next-line @docusaurus/no-untranslated-text
22
26
  return <div>Loading...</div>;
23
27
  }
28
+ function ErrorFallback({error, tryAgain}) {
29
+ return (
30
+ <div className={styles.errorFallback}>
31
+ <p>{error.message}</p>
32
+ <ErrorBoundaryTryAgainButton onClick={tryAgain} />
33
+ </div>
34
+ );
35
+ }
36
+ function Preview() {
37
+ // No SSR for the live preview
38
+ // See https://github.com/facebook/docusaurus/issues/5747
39
+ return (
40
+ <BrowserOnly fallback={<LivePreviewLoader />}>
41
+ {() => (
42
+ <>
43
+ <ErrorBoundary fallback={(params) => <ErrorFallback {...params} />}>
44
+ <LivePreview />
45
+ </ErrorBoundary>
46
+ <LiveError />
47
+ </>
48
+ )}
49
+ </BrowserOnly>
50
+ );
51
+ }
24
52
  function ResultWithHeader() {
25
53
  return (
26
54
  <>
@@ -33,14 +61,7 @@ function ResultWithHeader() {
33
61
  </Header>
34
62
  {/* https://github.com/facebook/docusaurus/issues/5747 */}
35
63
  <div className={styles.playgroundPreview}>
36
- <BrowserOnly fallback={<LivePreviewLoader />}>
37
- {() => (
38
- <>
39
- <LivePreview />
40
- <LiveError />
41
- </>
42
- )}
43
- </BrowserOnly>
64
+ <Preview />
44
65
  </div>
45
66
  </>
46
67
  );
package/lib/theme/Playground/styles.module.css CHANGED
@@ -38,3 +38,7 @@
38
38
  padding: 1rem;
39
39
  background-color: var(--ifm-pre-background);
40
40
  }
41
+
42
+ .errorFallback {
43
+ padding: 0.55rem;
44
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/theme-live-codeblock",
3
- "version": "2.4.0",
3
+ "version": "3.0.0-alpha.0",
4
4
  "description": "Docusaurus live code block component.",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/theme-live-codeblock.d.ts",
@@ -23,26 +23,26 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
- "@docusaurus/core": "2.4.0",
27
- "@docusaurus/theme-common": "2.4.0",
28
- "@docusaurus/theme-translations": "2.4.0",
29
- "@docusaurus/utils-validation": "2.4.0",
26
+ "@docusaurus/core": "3.0.0-alpha.0",
27
+ "@docusaurus/theme-common": "3.0.0-alpha.0",
28
+ "@docusaurus/theme-translations": "3.0.0-alpha.0",
29
+ "@docusaurus/utils-validation": "3.0.0-alpha.0",
30
30
  "@philpl/buble": "^0.19.7",
31
31
  "clsx": "^1.2.1",
32
- "fs-extra": "^10.1.0",
32
+ "fs-extra": "^11.1.0",
33
33
  "react-live": "2.2.3",
34
- "tslib": "^2.4.0"
34
+ "tslib": "^2.5.0"
35
35
  },
36
36
  "devDependencies": {
37
- "@docusaurus/types": "2.4.0",
37
+ "@docusaurus/types": "3.0.0-alpha.0",
38
38
  "@types/buble": "^0.20.1"
39
39
  },
40
40
  "peerDependencies": {
41
- "react": "^16.8.4 || ^17.0.0",
42
- "react-dom": "^16.8.4 || ^17.0.0"
41
+ "react": "^18.0.0",
42
+ "react-dom": "^18.0.0"
43
43
  },
44
44
  "engines": {
45
45
  "node": ">=16.14"
46
46
  },
47
- "gitHead": "898b85ef134cc43bf3b1209aad0ca8cdcfb214c5"
47
+ "gitHead": "7327f7ff880ed97ad7855744e59c9c55d467a950"
48
48
  }
package/src/theme/Playground/index.tsx CHANGED
@@ -12,11 +12,17 @@ import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
12
12
  import Translate from '@docusaurus/Translate';
13
13
  import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
14
14
  import BrowserOnly from '@docusaurus/BrowserOnly';
15
- import {usePrismTheme} from '@docusaurus/theme-common';
15
+ import {
16
+ ErrorBoundaryTryAgainButton,
17
+ usePrismTheme,
18
+ } from '@docusaurus/theme-common';
19
+ import ErrorBoundary from '@docusaurus/ErrorBoundary';
20
+
16
21
  import type {Props} from '@theme/Playground';
22
+ import type {Props as ErrorProps} from '@theme/Error';
23
+ import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
17
24
 
18
25
  import styles from './styles.module.css';
19
- import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
20
26
 
21
27
  function Header({children}: {children: React.ReactNode}) {
22
28
  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
@@ -28,6 +34,32 @@ function LivePreviewLoader() {
28
34
  return <div>Loading...</div>;
29
35
  }
30
36
 
37
+ function ErrorFallback({error, tryAgain}: ErrorProps): JSX.Element {
38
+ return (
39
+ <div className={styles.errorFallback}>
40
+ <p>{error.message}</p>
41
+ <ErrorBoundaryTryAgainButton onClick={tryAgain} />
42
+ </div>
43
+ );
44
+ }
45
+
46
+ function Preview() {
47
+ // No SSR for the live preview
48
+ // See https://github.com/facebook/docusaurus/issues/5747
49
+ return (
50
+ <BrowserOnly fallback={<LivePreviewLoader />}>
51
+ {() => (
52
+ <>
53
+ <ErrorBoundary fallback={(params) => <ErrorFallback {...params} />}>
54
+ <LivePreview />
55
+ </ErrorBoundary>
56
+ <LiveError />
57
+ </>
58
+ )}
59
+ </BrowserOnly>
60
+ );
61
+ }
62
+
31
63
  function ResultWithHeader() {
32
64
  return (
33
65
  <>
@@ -40,14 +72,7 @@ function ResultWithHeader() {
40
72
  </Header>
41
73
  {/* https://github.com/facebook/docusaurus/issues/5747 */}
42
74
  <div className={styles.playgroundPreview}>
43
- <BrowserOnly fallback={<LivePreviewLoader />}>
44
- {() => (
45
- <>
46
- <LivePreview />
47
- <LiveError />
48
- </>
49
- )}
50
- </BrowserOnly>
75
+ <Preview />
51
76
  </div>
52
77
  </>
53
78
  );
package/src/theme/Playground/styles.module.css CHANGED
@@ -38,3 +38,7 @@
38
38
  padding: 1rem;
39
39
  background-color: var(--ifm-pre-background);
40
40
  }
41
+
42
+ .errorFallback {
43
+ padding: 0.55rem;
44
+ }