@docusaurus/theme-live-codeblock 2.4.1 → 3.0.0-beta.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/CodeBlock/index.d.ts +2 -2
  2. package/lib/theme/Playground/index.js +25 -9
  3. package/lib/theme/ReactLiveScope/index.d.ts +1 -1
  4. package/package.json +11 -11
  5. package/src/theme/Playground/index.tsx +28 -10
package/lib/theme/CodeBlock/index.d.ts CHANGED
@@ -4,7 +4,7 @@
4
4
  * This source code is licensed under the MIT license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- /// <reference types="react" />
7
+ import React from 'react';
8
8
  import { type Props } from '@theme-init/CodeBlock';
9
- declare const _default: (props: Props) => JSX.Element;
9
+ declare const _default: (props: Props) => React.JSX.Element;
10
10
  export default _default;
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
+ ErrorBoundaryErrorMessageFallback,
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,25 @@ function LivePreviewLoader() {
21
25
  // eslint-disable-next-line @docusaurus/no-untranslated-text
22
26
  return <div>Loading...</div>;
23
27
  }
28
+ function Preview() {
29
+ // No SSR for the live preview
30
+ // See https://github.com/facebook/docusaurus/issues/5747
31
+ return (
32
+ <BrowserOnly fallback={<LivePreviewLoader />}>
33
+ {() => (
34
+ <>
35
+ <ErrorBoundary
36
+ fallback={(params) => (
37
+ <ErrorBoundaryErrorMessageFallback {...params} />
38
+ )}>
39
+ <LivePreview />
40
+ </ErrorBoundary>
41
+ <LiveError />
42
+ </>
43
+ )}
44
+ </BrowserOnly>
45
+ );
46
+ }
24
47
  function ResultWithHeader() {
25
48
  return (
26
49
  <>
@@ -33,14 +56,7 @@ function ResultWithHeader() {
33
56
  </Header>
34
57
  {/* https://github.com/facebook/docusaurus/issues/5747 */}
35
58
  <div className={styles.playgroundPreview}>
36
- <BrowserOnly fallback={<LivePreviewLoader />}>
37
- {() => (
38
- <>
39
- <LivePreview />
40
- <LiveError />
41
- </>
42
- )}
43
- </BrowserOnly>
59
+ <Preview />
44
60
  </div>
45
61
  </>
46
62
  );
package/lib/theme/ReactLiveScope/index.d.ts CHANGED
@@ -65,7 +65,7 @@ declare const ReactLiveScope: {
65
65
  forEach<C_3>(children: C_3 | readonly C_3[], fn: (child: C_3, index: number) => void): void;
66
66
  count(children: any): number;
67
67
  only<C_4>(children: C_4): C_4 extends any[] ? never : C_4;
68
- toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];
68
+ toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
69
69
  };
70
70
  Fragment: React.ExoticComponent<{
71
71
  children?: React.ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/theme-live-codeblock",
3
- "version": "2.4.1",
3
+ "version": "3.0.0-beta.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.1",
27
- "@docusaurus/theme-common": "2.4.1",
28
- "@docusaurus/theme-translations": "2.4.1",
29
- "@docusaurus/utils-validation": "2.4.1",
26
+ "@docusaurus/core": "3.0.0-beta.0",
27
+ "@docusaurus/theme-common": "3.0.0-beta.0",
28
+ "@docusaurus/theme-translations": "3.0.0-beta.0",
29
+ "@docusaurus/utils-validation": "3.0.0-beta.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.1",
33
33
  "react-live": "2.2.3",
34
- "tslib": "^2.4.0"
34
+ "tslib": "^2.6.0"
35
35
  },
36
36
  "devDependencies": {
37
- "@docusaurus/types": "2.4.1",
37
+ "@docusaurus/types": "3.0.0-beta.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": "60e657d8ae5a4a9ed1c2d777f9defd882cc12681"
47
+ "gitHead": "27a1e90d9fff88af90ecad35bea16d4d7230482a"
48
48
  }
package/src/theme/Playground/index.tsx CHANGED
@@ -12,11 +12,16 @@ 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
+ ErrorBoundaryErrorMessageFallback,
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 {ThemeConfig} from '@docusaurus/theme-live-codeblock';
17
23
 
18
24
  import styles from './styles.module.css';
19
- import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
20
25
 
21
26
  function Header({children}: {children: React.ReactNode}) {
22
27
  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
@@ -28,6 +33,26 @@ function LivePreviewLoader() {
28
33
  return <div>Loading...</div>;
29
34
  }
30
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
44
+ fallback={(params) => (
45
+ <ErrorBoundaryErrorMessageFallback {...params} />
46
+ )}>
47
+ <LivePreview />
48
+ </ErrorBoundary>
49
+ <LiveError />
50
+ </>
51
+ )}
52
+ </BrowserOnly>
53
+ );
54
+ }
55
+
31
56
  function ResultWithHeader() {
32
57
  return (
33
58
  <>
@@ -40,14 +65,7 @@ function ResultWithHeader() {
40
65
  </Header>
41
66
  {/* https://github.com/facebook/docusaurus/issues/5747 */}
42
67
  <div className={styles.playgroundPreview}>
43
- <BrowserOnly fallback={<LivePreviewLoader />}>
44
- {() => (
45
- <>
46
- <LivePreview />
47
- <LiveError />
48
- </>
49
- )}
50
- </BrowserOnly>
68
+ <Preview />
51
69
  </div>
52
70
  </>
53
71
  );