update docs

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": {

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) {

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,

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;
 }

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';

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

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) {
 
 </BrowserWindow>
 
+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) => (
+  <button
+    {...props}
+    style={{
+      backgroundColor: 'white',
+      color: 'black',
+      border: 'solid red',
+      borderRadius: 20,
+      padding: 10,
+      cursor: 'pointer',
+      ...props.style,
+    }}
+  />
+);
+// highlight-end
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+  React,
+  ...React,
+  // highlight-start
+  require: createRequire({
+    './ButtonExample': ButtonExample,
+  }),
+  // highlight-end
+};
+
+export default ReactLiveScope;
+```
+
+The `ButtonExample` component is now available to use:
+
+<BrowserWindow>
+
+```jsx live
+import ButtonExample from './ButtonExample';
+
+export default function MyPlayground(props) {
+  return (
+    <div>
+      <ButtonExample onClick={() => alert('hey!')}>Click me</ButtonExample>
+    </div>
+  );
+}
+```
+
+</BrowserWindow>
+
 ## Using JSX markup in code blocks {#using-jsx-markup}
 
 Code block in Markdown always preserves its content as plain text, meaning you can't do something like:

website/src/theme/ReactLiveScope/index.ts

@@ -6,13 +6,17 @@
  */
 
 import React from 'react';
+import {createRequire} from '@theme-original/CodeBlock';
 import {ButtonExample} from './components';
 
-// Add react-live imports you need here
+// Add globals you need here
 const ReactLiveScope = {
   React,
   ...React,
   ButtonExample,
+  require: createRequire({
+    './ButtonExample': ButtonExample,
+  }),
 };
 
 export default ReactLiveScope;

yarn.lock

@@ -15363,13 +15363,13 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-live-runner@^1.0.0-rc.0:
-  version "1.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/react-live-runner/-/react-live-runner-1.0.0-rc.0.tgz#118c9d51ef8f623e348f37d3136d0f33606788be"
-  integrity sha512-Dwv8zukc+LeCYRCX+ylKLYaKsE/96yzXXfL8EiIZ2D0hUV6J1CBFLEj9KpszVf3vCelOxFM6c47ijC6OVfM3kQ==
+react-live-runner@^1.0.0-rc.1:
+  version "1.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/react-live-runner/-/react-live-runner-1.0.0-rc.1.tgz#e936c108c059168f8e9c2902d0bc025711e4cf6d"
+  integrity sha512-F6kumGzdC9wuapj1xry4PG7afpmLM5bHh4OxCwbtmO1peSsd4NdEhK/9Y3IHpHjpQytyD4j2bJ7+AoqGB3VzbQ==
   dependencies:
     prism-react-renderer "^1.2.1"
-    react-runner "^1.0.0-rc.0"
+    react-runner "^1.0.0-rc.1"
     react-simple-code-editor "^0.11.0"
 
 react-loadable-ssr-addon-v5-slorber@^1.0.1:
@@ -15432,10 +15432,10 @@ react-router@5.2.1, react-router@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-runner@^1.0.0-rc.0:
-  version "1.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/react-runner/-/react-runner-1.0.0-rc.0.tgz#c56e198c0609529daddb2470c1f32141d3dabf8d"
-  integrity sha512-GX9ngsKasqmKqXWcmsUzYDmPtJdU5vWPhJr6WLJoxnyjJdK+NU9tkJ+QMjsfrLqGbTZK6DnYXRM1o62DAncCwA==
+react-runner@^1.0.0-rc.1:
+  version "1.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/react-runner/-/react-runner-1.0.0-rc.1.tgz#500c8c459ee9c18ead8b1a0e1d2928f1d83db31d"
+  integrity sha512-+oPTr2h6CYqAsxaDmaMa2WxkUlA6zVVlNt+odem7jYUFQB2+awBrDUBdFByMCkjguPRJatg9mLtzOBpqorWBlQ==
   dependencies:
     sucrase "^3.10.1"