diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json index a8b8ae1f195ae..20c927ba271f8 100644 --- a/packages/docusaurus-theme-live-codeblock/package.json +++ b/packages/docusaurus-theme-live-codeblock/package.json @@ -28,7 +28,8 @@ "clsx": "^1.1.1", "fs-extra": "^10.0.0", "parse-numeric-range": "^1.3.0", - "react-live-runner": "^1.0.0-rc.0", + "react-live-runner": "^1.0.0-rc.1", + "react-runner": "^1.0.0-rc.1", "tslib": "^2.3.1" }, "devDependencies": { diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx index 8babca5660185..e1c63d0000f75 100644 --- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx +++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx @@ -10,6 +10,9 @@ import Playground from '@theme/Playground'; import ReactLiveScope from '@theme/ReactLiveScope'; import CodeBlock, {type Props} from '@theme-init/CodeBlock'; +// eslint-disable-next-line import/no-named-export +export {createRequire} from 'react-live-runner'; + const withLiveEditor = (Component: typeof CodeBlock) => { function WrappedComponent(props: Props) { if (props.live) { diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.tsx index 17260b19c6d0a..22361b324456b 100644 --- a/packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.tsx +++ b/packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.tsx @@ -7,7 +7,7 @@ import React from 'react'; -// Add global variables you need here +// Add globals you need here const ReactLiveScope = { React, ...React, diff --git a/packages/docusaurus-theme-live-codeblock/src/types.d.ts b/packages/docusaurus-theme-live-codeblock/src/types.d.ts index df2fa7d2162aa..d90a074abcfd4 100644 --- a/packages/docusaurus-theme-live-codeblock/src/types.d.ts +++ b/packages/docusaurus-theme-live-codeblock/src/types.d.ts @@ -9,10 +9,15 @@ declare module '@theme-init/CodeBlock' { import type CodeBlock, {Props as BaseProps} from '@theme/CodeBlock'; + import type {Scope} from 'react-live-runner'; export interface Props extends BaseProps { live?: boolean; } const CodeBlockComp: typeof CodeBlock; export default CodeBlockComp; + + export declare const createRequire: ( + imports: Scope, + ) => (module: string) => Scope; } diff --git a/website/docs/advanced/swizzling.md b/website/docs/advanced/swizzling.md index 7fdbf9a8156f1..5830f45e99020 100644 --- a/website/docs/advanced/swizzling.md +++ b/website/docs/advanced/swizzling.md @@ -149,7 +149,7 @@ website We already talked about how the "userland theme" in `src/theme` can re-use a theme component through the [`@theme-original`](#wrapping-theme-components) alias. One theme package can also wrap a component from another theme, by importing the component from the initial theme, using the `@theme-init` import. -Here's an example of using this feature to enhance the default theme `CodeBlock` component with a `react-live` playground feature. +Here's an example of using this feature to enhance the default theme `CodeBlock` component with live code playground feature. ```js import InitialCodeBlock from '@theme-init/CodeBlock'; diff --git a/website/docs/api/themes/theme-live-codeblock.md b/website/docs/api/themes/theme-live-codeblock.md index 75e803499e542..766965fe1e4b2 100644 --- a/website/docs/api/themes/theme-live-codeblock.md +++ b/website/docs/api/themes/theme-live-codeblock.md @@ -5,7 +5,7 @@ title: '📦 theme-live-codeblock' slug: '/api/themes/@docusaurus/theme-live-codeblock' --- -This theme provides a `@theme/CodeBlock` component that is powered by react-live. You can read more on [interactive code editor](../../guides/markdown-features/markdown-features-code-blocks.mdx#interactive-code-editor) documentation. +This theme provides a `@theme/CodeBlock` component that is powered by react-runner. You can read more on [interactive code editor](../../guides/markdown-features/markdown-features-code-blocks.mdx#interactive-code-editor) documentation. ```bash npm2yarn npm install --save @docusaurus/theme-live-codeblock diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx index 609f1a4d380c7..45f49a6eb34d9 100644 --- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx +++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx @@ -263,7 +263,7 @@ In the future, we may extend the magic comment system and let you define custom ## Interactive code editor {#interactive-code-editor} -(Powered by [React Live](https://github.com/FormidableLabs/react-live)) +(Powered by [React Runner](https://github.com/nihgwu/react-runner)) You can create an interactive coding editor with the `@docusaurus/theme-live-codeblock` plugin. @@ -339,13 +339,13 @@ function Clock(props) { ### Imports {#imports} -:::caution react-live and imports +:::info globals and imports -It is not possible to import components directly from the react-live code editor, you have to define available imports upfront. +To use components in the live code editor, you have to define available globals and imports upfront. ::: -By default, all React imports are available. If you need more imports available, swizzle the react-live scope: +By default, all React imports are available as globals. If you need more globals or imports available, swizzle the react-live scope: ```bash npm2yarn npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope @@ -398,6 +398,61 @@ function MyPlayground(props) { +Or with [`import` statement syntax](https://github.com/nihgwu/react-runner#import-statement-and-multi-files) + +```jsx title="src/theme/ReactLiveScope/index.js" +import React from 'react'; +import {createRequire} from '@theme-original/CodeBlock'; + +// highlight-start +const ButtonExample = (props) => ( +