build: enable linking charts library to kibana

[nickofthyme]

Summary

Adds a new command line aid for linking charts library to kibana.

Important features:

• Single command runs everything
• Cleanup is simple
• Both charts and kibana are restored to original state
• Handles many non-happy paths, but not all 😢

Entry command:

yarn link:kibana [--debug]

You will be prompted to Link, Unlink or Watch mode.

Link - Starts linking process and ends in watch mode to update built files
Unlink - Cleans up all changes related to the linking process
Watch mode - Skips linking and just starts watching. Requires previous link. Used if something really bad happens and the watchers give up, or you accidentally quit the watch mode.

The --debug flag will log all stdout, stderr and errors to the console in chalk.blue.

Linking

Linking requires you to bootstrap and start kibana before linking.

The only other prompt is for the relative path from @elastic/charts directory to kibana directory.

The script does all of the following:

• Builds @elastic/charts is watch mode
• Replaces all linkedPackages require statements with relative paths (require("react") becomes require("../path/to/kibana/react"))
• Builds @kbn/ui-shared-deps in watch mode

The struggle 😫

The @kbn/ui-shared-deps package is used, to my best understanding, as a poor-mans yarn resolution creating a single export for singlton packages and packages needing consistent versions. Most important is react as hooks require the use of the same react instance. Linking charts to kibana would enable kibana to use the linked react but that local charts would use the local react (i.e. elastic-charts/node_modules_react).

If we then attempt to link react in charts to point at react in kibana, it would use the correct react (i.e. path/to/kibana/node_modules/react BUT the way that webpack bundles @kbn/ui-shared-deps this will not be the same instance of react and thus still throwing the dreaded invalid hook call warning so symlinking react does not work.

The solution is to replace all the paths in the built chart dist output to thier relative path to the kibana react. This will use the webpack exported instance of react from @kbn/ui-shared-deps. This however is not going to work just replacing the react since other packages like react-redux point to react internally and since that is the react-redux local to charts it will be wrong yet again. So the solution is to replace react, react-dom, react-redux and redux. So every change that happens in charts needs to be built, swap the links and build @kbn/ui-shared-deps to be reflected in kibana.

The good news is that there are no changes to src in either kibana nor charts for linking to take place. This makes it easy to cleanup the linked files once no longer needed.

But how do I know it's linked and what charts directory is linked?

I added a console.log to clearly indicate when charts is linked and was chart directory is linked.

Limitations

• You can only link one charts directory to one kibana directory
• Not all errors are handled though many are passed through command line interface to resolve.
• Many get in a stuck state as it's not tested in the wild...yet!
• Only rebuilds .ts files, not scss
• Cannot run nvm install to update kibana on the fly, requires user to update node manually.

[markov00]

Tested locally and I love how fast we can now test the changes to the library directly within Kibana!
Thanks Nick, that's awesome!!!

[markov00]

typo

[nickofthyme]

🎉 This PR is included in version 30.0.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀