feat(live-codeblock): add support for noInline to interactive code bl…

…ocks (#7514)

Co-authored-by: Sébastien Lorber <[email protected]>

packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/// <reference types="@docusaurus/theme-classic" />
+/// <reference types="@docusaurus/module-type-aliases" />
+
 declare module '@docusaurus/theme-live-codeblock' {
   export type ThemeConfig = {
     liveCodeBlock: {
@@ -14,9 +17,12 @@ declare module '@docusaurus/theme-live-codeblock' {
 }
 
 declare module '@theme/Playground' {
+  import type {Props as BaseProps} from '@theme/CodeBlock';
   import type {LiveProviderProps} from 'react-live';
 
-  export interface Props extends LiveProviderProps {
+  type CodeBlockProps = Omit<BaseProps, 'className' | 'language' | 'title'>;
+
+  export interface Props extends CodeBlockProps, LiveProviderProps {
     children: string;
   }
   export default function Playground(props: LiveProviderProps): JSX.Element;

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

@@ -93,11 +93,14 @@ export default function Playground({
   } = themeConfig as ThemeConfig;
   const prismTheme = usePrismTheme();
 
+  const noInline = props.metastring?.includes('noInline') ?? false;
+
   return (
     <div className={styles.playgroundContainer}>
       {/* @ts-expect-error: type incompatibility with refs */}
       <LiveProvider
         code={children.replace(/\n$/, '')}
+        noInline={noInline}
         transformCode={transformCode ?? ((code) => `${code};`)}
         theme={prismTheme}
         {...props}>

website/docs/guides/markdown-features/markdown-features-code-blocks.mdx

@@ -569,6 +569,42 @@ function MyPlayground(props) {
 </BrowserWindow>
 ```
 
+### Imperative Rendering (noInline)
+
+The `noInline` option should be used to avoid errors when your code spans multiple components or variables.
+
+````md
+```jsx live noInline
+const project = 'Docusaurus';
+
+const Greeting = () => <p>Hello {project}!</p>;
+
+render(<Greeting />);
+```
+````
+
+Unlike an ordinary interactive code block, when using `noInline` React Live won't wrap your code in an inline function to render it.
+
+You will need to explicitly call `render()` at the end of your code to display the output.
+
+````mdx-code-block
+<BrowserWindow>
+
+```jsx live noInline
+const project = "Docusaurus";
+
+const Greeting = () => (
+  <p>Hello {project}!</p>
+);
+
+render(
+  <Greeting />
+);
+```
+
+</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: