solara
solara copied to clipboard
widgetti
fix!: solara.Meta elements insert empty span into DOM
The insertion of <span></span> into the dom is what causes strange extra spacing at the top of notebook-based tutorials with solara.Meta tags currently:
Fixes #626
TODO:
- [ ] Revert change to jupyter dashboard tutorial page
-
#625
👈 -
master
This stack of pull requests is managed by Graphite. Learn more about stacking.
Join @iisakkirotko and the rest of your teammates on Graphite
@mariobuikhuizen This is what causes the extra spacing at the top of notebook-based tutorials with solara.Meta tags currently:
Granted this happens because these spans get inserted into a flex-box with some gaps defined, so not using that could be an alternative solution. The spans seem to be necessary because Vue does not like empty templates, those throw two errors saying:
[Vue warn]: Error compiling template:
Cannot use <template> as component root element because it may contain multiple nodes.
and
[Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
@mariobuikhuizen This is what causes the extra spacing at the top of notebook-based tutorials with solara.Meta tags
This would be a better title for the commit/PR.
The spans seem to be necessary because Vue does not like empty templates, those throw two errors
Strange, I never noticed an error with an empty template.
Ok, I checked it, I write empty templates like this:
<template>
</template>
This produces no errors.
Doing it like this:
<template></template>
Does produce the second error you mentioned.
It's a bug in ipyvue that empty template tags on the same line don't work.
Putting the templates on two different lines fixes both errors. What are your thoughts on the PR? In principle this is a breaking change on the UI side (if someone was unknowingly relying on this for spacing, for example), but I think we can sell it as a fix. I could rename it as suggested, but then the scope of the change seems smaller than it might be.