fix!: solara.Meta elements insert empty span into DOM

[iisakkirotko]

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

[iisakkirotko]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• fix!: solara.Meta elements insert empty span into DOM #625 👈 (View in Graphite)
• feat!: Solara 2.0 #946 : 4 other dependent PRs (#657 , #947 , #948 and 1 other)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[mariobuikhuizen]

Why is this a problem? Why is the span even needed?

[iisakkirotko]

@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]

@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.

[mariobuikhuizen]

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.

[mariobuikhuizen]

It's a bug in ipyvue that empty template tags on the same line don't work.

[iisakkirotko]

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.