build(local): simplify local dev setup and fix rjsf styling issue

- Local dev simply with Vite alias
- Removed advanced setup with yalc
- The advanced setup now uses yarn link
- Fixed rjsf styling issues by pre-bundling @rjsf/antd
- Updated setup information in the README

README.md

@@ -144,4 +144,4 @@ Alternatively, you can pull the current state on demand by calling `getFormuleSt
 
 ## :space_invader: Local demo & how to contribute
 
-Apart from trying the online [demo](https://cern-sis.github.io/react-formule/) you can clone the repo and run `formule-demo` to play around. Follow the instructions in its [README](./formule-demo/README.md): it will explain how to install `react-formule` as a local dependency (with either `yarn link` or, better, `yalc`) so that you can modify Formule and test the changes live in your host app, which will be ideal if you want to troubleshoot or contribute to the project.
+Apart from trying the online [demo](https://cern-sis.github.io/react-formule/) you can clone the repo and run `formule-demo` to play around. Follow the instructions in its [README](./formule-demo/README.md): it will explain how to install `react-formule` as a local dependency so that you can modify Formule and test the changes live in your host app, which will be ideal if you want to troubleshoot or contribute to the project.

formule-demo/.gitignore

@@ -22,6 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
-.yalc
-yalc.lock

formule-demo/README.md

@@ -6,10 +6,12 @@ This is a small application that serves as a playground to test react-formule.
 
 ### The easy way
 
-Run `yarn link-local` in react-formule, then run `yarn link-local-lib` and `yarn install` in formule-demo. To run the playground app, execute `yarn dev` and visit `localhost:3030`. You will see any changes in react-formule immediately in the playground app.
+Simply run `yarn install` and `yarn dev` in react-formule and visit `localhost:3030`. You will see any changes in react-formule immediately in the demo app.
+
+**Note:** If you look at `formule-demo/vite.config.local.ts` you will see an alias for `react-formule`. What this does is essentially equivalent to using `yarn link` with `./src/index.ts` as entry point.
 
 ### The advanced way
 
-Another option (if you want to test the actual bundle, or if you want to link react-formule to a more complex application, which can be trickier) would be to use [yalc](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwiEh4L_nMuCAxWG6gIHHYMAB38QFnoECAsQAQ&url=https%3A%2F%2Fgithub.com%2Fwclr%2Fyalc&usg=AOvVaw0iR17wRcI1T2OQnWaU1BUh&opi=89978449). Run `yarn build` and `yalc publish` in react-formule, then run `yalc add react-formule` in formule-demo. If you make changes in react-formule and want to update formule-demo with those changes, run `yarn build` and `yalc push` in react-formule, and then `yarn dev --force` in formule-demo. Read the yalc docs for more info.
+If you want to test the actual bundle or if you want to link react-formule to a more complex application and you find any issues with the above approach, you can **comment out the alias** mentioned above, run `yarn link` in react-formule and then `yarn link react-formule` in formule-demo. This will point to the formule bundle, so you will need to build formule.
 
-For more confort, you can also run `yarn build:watch` in react-formule, which will rebuild the bundle and push the changes to yalc automatically. For even more automation, you can use [vite-plugin-restart](https://github.com/antfu/vite-plugin-restart) in formule-demo (or in your own project using react-formule and Vite) and watch the bundle file inside of the `.yalc` folder, so that the Vite dev server is automatically reloaded once the new bundle is published. This advanced option is what we use to quickly test formule changes inside [CAP](https://github.com/cernanalysispreservation/analysispreservation.cern.ch).
+To make the dev experience more confortable you can run `yarn build:watch` in react-formule, which will be triggered after any change to the formule code and will rebuild the bundle. For even more automation, you can use [vite-plugin-restart](https://github.com/antfu/vite-plugin-restart) in formule-demo (or in your own project using react-formule and Vite) and watch the bundle file inside `react-formule/dist/react-formule.js`, so that the Vite dev server is automatically reloaded once the new bundle is built (otherwise you would have to run `vite dev --force` yourself every time).

formule-demo/tsconfig.json

@@ -8,6 +8,7 @@
 
     /* Bundler mode */
     // FIXME: change back to bundler once a new version of cypress fixes this https://github.com/cypress-io/cypress/issues/27731
+    // we would probably be able to remove "module": "./dist/react-formule.js" from formule's package.json then
     "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,

formule-demo/vite.config.ts

@@ -22,4 +22,8 @@ export default defineConfig({
   build: {
     commonjsOptions: { transformMixedEsModules: true },
   },
+  optimizeDeps: {
+    // Pre-bundle to avoid styling issues with native rjsf components
+    include: ["@rjsf/antd"],
+  },
 });