Babel website migration

[harish-sethuraman]

I'm trying to migrate the babel website to docusaurus v2. We have a repl page in which we load-scripts needed for repl. This works fine with v1 but v2 doesn't load-scripts. I see that we have to add scripts to the docusaurus.config.js for loading the scripts. But the scripts in that particular page are isolated and not required for any other routes. I tried using @docusaurus/Head and react-helmet but not luck either.
This is the code for that particular page:
https://github.com/babel/website/blob/main/website/pages/en/repl.js

[slorber]

hey @harish-sethuraman

Docusaurus v2 is a SPA and the way you integrate third-party scripts may be different, including inserting scripts on the page using a useEffect hook

To be able to help you, it would be preferable that you setup a branch on your fork with deploy previews so that we can try to submit a PR to it and fix your issue. You can signup on Netlify/Vercel to set this up.

If you are looking for some integration inspiration, take a look at this PR where I add a Relay compiler playground to a Docusaurus page:

• POC: show it's possible to use Relay compiler in Docusaurus (Rust->WASM) #5062
• https://deploy-preview-5062--docusaurus-2.netlify.app/relayPlayground

[Josh-Cena]

TS-ESLint's playground would be a good source of inspiration as well, since it's also JS:
https://typescript-eslint.io/play
https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/website

[harish-sethuraman]

I've actually setup a branch in my fork fix-repl-page with preview and this is the PR harish-sethuraman/website#7. I've even integrated the repl page but the scripts are in docusaurus.config.js. You can add comments or feel free to push commits :)

[harish-sethuraman]

https://github.com/harish-sethuraman/website/tree/v2

This is the fork I’m working on and the branch is v2 you can push code here and view the preview at babel/website#2622

Also the repl is a separate bundle all together so if you are trying to run babel website run yarn start from the parent folder that’ll start both the repl bundle and docusaurus as well

[Josh-Cena]

My suggestion is to ultimately bundle repl.js as part of the site. You can use React.lazy to code-split it (the TS-ESLint website does that), but it provides a nicer loading experience and possibly better compatibility with the rest of the site.

[harish-sethuraman]

That would require changing the bundling process to export the Repl as a separate component instead of having it mount on the site. I'm guessing they didn't export it as component since it might later be used somewhere else too.

[Josh-Cena]

With my limited knowledge of Docusaurus v1, the site wasn't a React SPA by then, so integration of dynamic content can only be done through external scripts. That's no longer the case now. Also, making a REPL as a React component is also pretty reusable. Maybe ask the Babel maintainers as well?

@nicolo-ribaudo @hzoo @JLHwung FYI

[harish-sethuraman]

Im closing this as the babel site got shipped already. I missed to close this discussion. Thanks for all your help 😉.