TL;DR is that we need to load the REPL page in docusaurus somehow.
Now since the repl is just a react component, it seemed like we could just add it to website/pages/en but because the current implementation using codemirror uses browser specific code like navigator etc it won't work when trying to render via docusarus on the server side.
Options: use a different module like react-codemirror (too much work), only load that part of the code on component mount (might be too much work), or just load the bundled version into a separate html page (like the current repl does).
Part of https://github.com/babel/website/pull/1521
TL;DR is that we need to load the REPL page in docusaurus somehow. Now since the repl is just a react component, it seemed like we could just add it to
website/pages/en
but because the current implementation usingcodemirror
uses browser specific code likenavigator
etc it won't work when trying to render via docusarus on the server side.Options: use a different module like react-codemirror (too much work), only load that part of the code on component mount (might be too much work), or just load the bundled version into a separate html page (like the current repl does).
Current JS code for it is at https://github.com/babel/website/tree/master/js/repl HTML is at https://github.com/babel/website/blob/master/repl.html webpack file is https://github.com/babel/website/blob/master/webpack.config.js makefile at https://github.com/babel/website/blob/master/Makefile (might want to keep the webpack commands)
It's simple enough to convert these to script tags:
https://github.com/babel/website/blob/master/repl.html#L6-L20
For this part:
https://github.com/babel/website/blob/50e09bdceeee658a621ce9a85ddc7ca4fa15c38f/repl.html#L21-L22
We'll have to look at https://github.com/babel/website/blob/50e09bdceeee658a621ce9a85ddc7ca4fa15c38f/_includes/scripts.html#L35-L53