From 76df524d85d5823278dc6780db6a7cf25335878c Mon Sep 17 00:00:00 2001
From: slorber <lorber.sebastien@gmail.com>
Date: Thu, 28 May 2020 15:01:51 +0200
Subject: [PATCH 1/5] feat(v2): add components to react-live scope (#2807)

---
 .../package.json                              |  1 +
 .../src/theme/CodeBlock/index.js              | 17 ++++++-
 .../src/theme/ReactLiveScope/index.js         | 16 +++++++
 website/docs/markdown-features.mdx            | 47 +++++++++++++++++++
 .../src/theme/ReactLiveScope/components.js    | 15 ++++++
 website/src/theme/ReactLiveScope/index.js     | 18 +++++++
 6 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.js
 create mode 100644 website/src/theme/ReactLiveScope/components.js
 create mode 100644 website/src/theme/ReactLiveScope/index.js

diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json
index 9325bbf7f1c8..1c2401c889a7 100644
--- a/packages/docusaurus-theme-live-codeblock/package.json
+++ b/packages/docusaurus-theme-live-codeblock/package.json
@@ -9,6 +9,7 @@
   "license": "MIT",
   "dependencies": {
     "@philpl/buble": "^0.19.7",
+    "@mdx-js/react": "^1.5.8",
     "classnames": "^2.2.6",
     "clipboard": "^2.0.6",
     "parse-numeric-range": "^0.0.2",
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
index bb00038a81c3..f1a958eb2d51 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -9,18 +9,33 @@ import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
 import Playground from '@theme/Playground';
+import ReactLiveScope from '@theme/ReactLiveScope';
 import CodeBlock from '@theme-init/CodeBlock';
+import {useMDXComponents} from '@mdx-js/react';
+
+// Returns components that are available to use by the react-live playground
+// It's not possible to import anything in the live playground,
+// we need to provide the available imports manually
+// See https://github.com/facebook/docusaurus/issues/2807
+const useReactLiveScope = () => {
+  const mdxComponents = useMDXComponents();
+  return {
+    ...mdxComponents,
+    ...ReactLiveScope,
+  };
+};
 
 const withLiveEditor = (Component) => {
   const WrappedComponent = (props) => {
     const {isClient} = useDocusaurusContext();
     const prismTheme = usePrismTheme();
+    const reactLiveScope = useReactLiveScope();
 
     if (props.live) {
       return (
         <Playground
           key={isClient}
-          scope={{...React}}
+          scope={reactLiveScope}
           theme={prismTheme}
           {...props}
         />
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.js
new file mode 100644
index 000000000000..f971d6af1a83
--- /dev/null
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+  React,
+  ...React,
+};
+
+export default ReactLiveScope;
diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
index d4b74d2cafbd..1656ebe63f75 100644
--- a/website/docs/markdown-features.mdx
+++ b/website/docs/markdown-features.mdx
@@ -735,6 +735,53 @@ function Clock(props) {
 }
 ```
 
+:::caution It is not possible to import components directly from the react-live code editor, you have to define available imports upfront. :::
+
+By default, all React imports are available. If you need more imports available, swizzle the react-live scope:
+
+```bash npm2yarn
+npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope
+```
+
+```jsx
+import React from 'react';
+
+const ButtonExample = (props) => (
+  <button
+    {...props}
+    style={{
+      backgroundColor: 'white',
+      border: 'solid red',
+      borderRadius: 20,
+      padding: 10,
+      cursor: 'pointer',
+      ...props.style,
+    }}
+  />
+);
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+  React,
+  ...React,
+  ButtonExample,
+};
+
+export default ReactLiveScope;
+```
+
+The `ButtonExample` is now available to use:
+
+```jsx live
+function MyPlayground(props) {
+  return (
+    <div>
+      <ButtonExample onClick={() => alert('hey!')}>Click me</ButtonExample>
+    </div>
+  );
+}
+```
+
 ### Multi-language support code blocks
 
 With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switching between them using a tabs component.
diff --git a/website/src/theme/ReactLiveScope/components.js b/website/src/theme/ReactLiveScope/components.js
new file mode 100644
index 000000000000..9c9d2d61f3db
--- /dev/null
+++ b/website/src/theme/ReactLiveScope/components.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const ButtonExample = (props) => (
+  <button
+    {...props}
+    style={{
+      backgroundColor: 'white',
+      border: 'solid red',
+      borderRadius: 20,
+      padding: 10,
+      cursor: 'pointer',
+      ...props.style,
+    }}
+  />
+);
diff --git a/website/src/theme/ReactLiveScope/index.js b/website/src/theme/ReactLiveScope/index.js
new file mode 100644
index 000000000000..14fe2f074ab0
--- /dev/null
+++ b/website/src/theme/ReactLiveScope/index.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import * as components from './components';
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+  React,
+  ...React,
+  ...components,
+};
+
+export default ReactLiveScope;

From 3529779c1d16aa5294866fe902acf460f9f46982 Mon Sep 17 00:00:00 2001
From: slorber <lorber.sebastien@gmail.com>
Date: Thu, 28 May 2020 15:29:55 +0200
Subject: [PATCH 2/5] fix admonition issue + improve react-live scope doc

---
 website/docs/markdown-features.mdx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
index 1656ebe63f75..1caa0c69f692 100644
--- a/website/docs/markdown-features.mdx
+++ b/website/docs/markdown-features.mdx
@@ -735,7 +735,9 @@ function Clock(props) {
 }
 ```
 
-:::caution It is not possible to import components directly from the react-live code editor, you have to define available imports upfront. :::
+:::caution react-live and imports
+It is not possible to import components directly from the react-live code editor, you have to define available imports upfront.
+:::
 
 By default, all React imports are available. If you need more imports available, swizzle the react-live scope:
 
@@ -743,7 +745,7 @@ By default, all React imports are available. If you need more imports available,
 npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope
 ```
 
-```jsx
+```jsx {3-15,21} title="src/theme/ReactLiveScope/index.js"
 import React from 'react';
 
 const ButtonExample = (props) => (
@@ -770,7 +772,7 @@ const ReactLiveScope = {
 export default ReactLiveScope;
 ```
 
-The `ButtonExample` is now available to use:
+The `ButtonExample` component is now available to use:
 
 ```jsx live
 function MyPlayground(props) {

From af2ac4a6a3dcc0c43a7e1efafe252d60c020a167 Mon Sep 17 00:00:00 2001
From: slorber <lorber.sebastien@gmail.com>
Date: Thu, 28 May 2020 15:31:21 +0200
Subject: [PATCH 3/5] fix again admonition :(

---
 website/docs/markdown-features.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
index 1caa0c69f692..3d0b937409a4 100644
--- a/website/docs/markdown-features.mdx
+++ b/website/docs/markdown-features.mdx
@@ -736,7 +736,9 @@ function Clock(props) {
 ```
 
 :::caution react-live and imports
+
 It is not possible to import components directly from the react-live code editor, you have to define available imports upfront.
+
 :::
 
 By default, all React imports are available. If you need more imports available, swizzle the react-live scope:

From 2a27ea31ae82a2554691ae4a5f40be5a73b574de Mon Sep 17 00:00:00 2001
From: slorber <lorber.sebastien@gmail.com>
Date: Wed, 3 Jun 2020 14:57:04 +0200
Subject: [PATCH 4/5] remove forwarding of mdx components to react-live scope
 (for now)

---
 .../src/theme/CodeBlock/index.js                 | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
index f1a958eb2d51..f70dfed2132d 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -11,31 +11,17 @@ import usePrismTheme from '@theme/hooks/usePrismTheme';
 import Playground from '@theme/Playground';
 import ReactLiveScope from '@theme/ReactLiveScope';
 import CodeBlock from '@theme-init/CodeBlock';
-import {useMDXComponents} from '@mdx-js/react';
-
-// Returns components that are available to use by the react-live playground
-// It's not possible to import anything in the live playground,
-// we need to provide the available imports manually
-// See https://github.com/facebook/docusaurus/issues/2807
-const useReactLiveScope = () => {
-  const mdxComponents = useMDXComponents();
-  return {
-    ...mdxComponents,
-    ...ReactLiveScope,
-  };
-};
 
 const withLiveEditor = (Component) => {
   const WrappedComponent = (props) => {
     const {isClient} = useDocusaurusContext();
     const prismTheme = usePrismTheme();
-    const reactLiveScope = useReactLiveScope();
 
     if (props.live) {
       return (
         <Playground
           key={isClient}
-          scope={reactLiveScope}
+          scope={ReactLiveScope}
           theme={prismTheme}
           {...props}
         />

From 43b6a18001aec1c940b7d7a40c4df91b9c798ee3 Mon Sep 17 00:00:00 2001
From: slorber <lorber.sebastien@gmail.com>
Date: Thu, 4 Jun 2020 12:09:13 +0200
Subject: [PATCH 5/5] remove useless dep

---
 packages/docusaurus-theme-live-codeblock/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json
index 1c2401c889a7..9325bbf7f1c8 100644
--- a/packages/docusaurus-theme-live-codeblock/package.json
+++ b/packages/docusaurus-theme-live-codeblock/package.json
@@ -9,7 +9,6 @@
   "license": "MIT",
   "dependencies": {
     "@philpl/buble": "^0.19.7",
-    "@mdx-js/react": "^1.5.8",
     "classnames": "^2.2.6",
     "clipboard": "^2.0.6",
     "parse-numeric-range": "^0.0.2",