support live editing

[nihgwu]

react-hook-form is a great library and I use it a lot, it would be nice to play with it while reading the doc instead of be navigated to another website, this PR is a POC for that, using react-runner

Preview

TODO:

• [x] Configurable live editing
• [ ] Lazy loading of external packages like react-select react-redux
• [ ] Work with previous versions of react-hook-form

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/bluebill1049/react-hook-form-website/3vDonxyLpG5HwCsRcA9raJjpXsaK
✅ Preview: https://react-hook-form-website-git-fork-nihgwu-neo-9c4abb-bluebill1049.vercel.app

[bluebill1049]

This is awesome. thanks for putting up the poc, I think we can introduce a button on the top right of that code and show those live update once user clicks on it.

[nihgwu]

@bluebill1049 some thoughts:

1. use real code instead of exporting as string, we can use raw loader to the same thing, for example https://github.com/nihgwu/gatsby-transformer-code, then it's easy to avoid errors and get intelligence support
2. Have you considered to migrate to NextJs or Docusaurus or Vite, right now the build time is super slow, I guess Docusaurus would be better for this case as it supports i18n and multi versions out of box
3. Regarding the layout, we can use a split view, left side for editing and right side for live preview

[bluebill1049]

use real code instead of exporting as string, we can use raw loader to the same thing, for example https://github.com/nihgwu/gatsby-transformer-code, then it's easy to avoid errors and get intelligence support

Depend on how much effort would be.

Have you considered to migrate to NextJs or Docusaurus or Vite, right now the build time is super slow, I guess Docusaurus would be better for this case as it supports i18n and multi versions out of box

yes, we did consider moving to Nextjs but it's a big effort.

Regarding the layout, we can use a split view, left side for editing and right side for live preview

It's probably important to consider mobile as well.

[nihgwu]

@bluebill1049

Depend on how much effort would be.

Not a big effort I think but will improve the DX a lot, and we can benefit from editor's power

It's probably important to consider mobile as well.

On mobile it will change to vertical view, same as here

[bluebill1049]

On mobile it will change to vertical view, same as here

Nice 👍

could we add a button here to toggle instead of showing it constantly? as it takes quite a bit of the viewport.

1. Click on a button (react runner)
2. show the live view

[nihgwu]

Of cause, do we need to keep the CSB button? But if we toggle on the preview view, it will still take a lot of the viewport 🤷 and the view will jump because of different heights, anyway I'll try later

[bluebill1049]

I think we can keep both. Let's remove COPY, i think it's less useful for developers.

[nihgwu]

@bluebill1049 I think we can defer other todos for future PRs

Lazy loading of external packages like react-select react-redux

Don't won't to bloat the bundle size, so we should lazy load those packages, right now I just leave them uneditable

Work with previous versions of react-hook-form

I decided not to support that, we should encourage to use latest version