feat(v2): allow adding components to react-live scope

[slorber]

Motivation

Currently, the react-live scope only exposes the React exports, so we can use React, useState etc, but we can't import any other code easily.

If you build a react component library, and want to allow users to play with the components in a live editor, it's important to have a documented way to provide those components in the react-live scope.

See #2807

Test Plan

Dogfooding by using this feature on the Docusaurus website directly

Notes

Swizzling of the react-live scope object is not an ideal solution, as it's global and needs more work from the user, but I think it's good enough to solve the usecase for now.

When we'll have a way to wrap root component, users could use the MDXProvider to reuse the components of the MDX scope for react-live too, instead of swizzling.

Gatsby has a cool feature that permits to make available in react-live scope anything that is imported in the MDX file. Unfortunately, this feature is not so simple to port to Docusaurus (involves extracting imports in mdx string using a babel plugin, writing them to disk etc... see #2807 (comment))

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit 43b6a18

https://deploy-preview-2826--docusaurus-2.netlify.app

[slorber]

Direct link to test: https://deploy-preview-2826--docusaurus-2.netlify.app/docs/next/markdown-features#interactive-code-editor

[slorber]

Just removed the mdx comps from react-live scope @lex111

[lex111]

This is no longer necessary, can we remove it?

[slorber]

done

[lex111]

👌

[lex111]

@slorber thanks!

[wintercounter]

Is this released already? I'm getting this error:

Component Ui was not imported, exported, or provided by MDXProvider as global scope

ReferenceError: Ui is not defined
(undefined) ReferenceError: Ui is not defined

There is a component defined as <Ui>. Previously I was simply doing Object.assign(React, { ...myProps }) using a custom plugin, but it stopped working with updating to latest. Then I found this PR, it's still not working with it either.

"@docusaurus/core": "^2.0.0-alpha.61",
"@docusaurus/preset-classic": "^2.0.0-alpha.61",
"@docusaurus/theme-live-codeblock": "^2.0.0-alpha.61",

[slorber]

@wintercounter I can't tell anything if you don't show anycode, but did you swizzle @theme/ReactLiveScope as documented?

const ReactLiveScope = {
  React,
  ...React,
};

We spread ...React at initialization time, so when this is done, you might not have assigned your Ui comp to React yet, so it is not in the scope anymore.

I don't think assigning Ui to React is a good idea, you'd rather register the comp explicitly in ReactLiveScope

[wintercounter]

Turns out my file was cached somewhere and it didn't update, seems like it's working now, however, I still get the message.

> docusaurus build

Creating an optimized production build...

√ Client
  Compiled successfully in 47.77s

√ Server
  Compiled successfully in 36.40s

Component Ui was not imported, exported, or provided by MDXProvider as global scope

Success! Generated static files in build.Use `npm run serve` to test your build locally.