Use shared bundling setup for all assets #394
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I created a small package wrapping common setup for bundling kino assets (@livebook/kino-bundler) and we now use it for all assets in this repo.
Notably, the package brings Tailwind configured to match Livebook, which means that Kinos can easily use the Livebook palette without copying individual colors, which we used to do over and over.
Given that kino components are quite small, I don't think it's worth maintaining a package with shared UI components. The main pain point so far was that whenever we copied components, we needed to copy the relevant CSS classes and that could quickly lead to unnecessary or missing classes and was messy overall. Now that each component is properly encapsulated, copying a couple of them around should be manageable, while being easy to change if needed.
I migrated the Remote execution cell to React, so there is no more Vue in this repo. It would be nice to migrate the other smart cells accordingly, but it's not a high priority, the important part is that we have a better reference implementation.
The current setup of bundler and React also improves dev experience, now
npm run dev
includes dev warnings and source maps.