Implement dynamic components

[Rich-Harris]

Only part-way there, but progress is being made:

<:Switch {x ? Foo : Bar} prop='{{whatever}}'>
  <!-- children -->
</:Switch>

:Switch is by no means final — :Component was another suggestion.

The idea is that the component is a placeholder for whatever the value of x ? Foo : Bar is (this could be any expression, including computed or store properties, etc). Whenever the value of the expression changes, the existing instance is removed, and a new one is created.

Still to do:

• Event handlers
• Bindings
• Slots
• SSR

and whatever has so far escaped my attention.

This will enable lots of different things, like lazy-loading components, switching components based on route, lists of different types of things (think of a Twitter client, where a different component is used to render media tweets, for example), and so on.

If anyone hates the syntax, say so!

[tivac]

<:Switch> doesn't make much sense to me, <:Component {component} ...> seems much clearer.

[codecov-io]

Codecov Report

Merging #971 into master will decrease coverage by 0.07%.
The diff coverage is 90.82%.

@@            Coverage Diff             @@
##           master     #971      +/-   ##
==========================================
- Coverage   91.94%   91.86%   -0.08%     
==========================================
  Files         112      112              
  Lines        4110     4169      +59     
  Branches     1332     1363      +31     
==========================================
+ Hits         3779     3830      +51     
- Misses        143      144       +1     
- Partials      188      195       +7

Impacted Files	Coverage Δ
...rators/server-side-rendering/visitors/Component.ts	98.18% <100%> (+0.1%)	⬆️
src/generators/dom/preprocess.ts	97.7% <100%> (+0.02%)	⬆️
src/generators/dom/visitors/Element/Element.ts	94.77% <100%> (ø)	⬆️
src/generators/dom/visitors/EachBlock.ts	100% <100%> (ø)	⬆️
src/generators/Generator.ts	94.06% <100%> (+0.03%)	⬆️
...nerators/server-side-rendering/visitors/Element.ts	100% <100%> (ø)	⬆️
src/generators/shared/utils/isChildOfComponent.ts	50% <100%> (ø)	⬆️
src/validate/html/validateElement.ts	88.88% <100%> (ø)	⬆️
src/parse/state/tag.ts	95.97% <100%> (+0.16%)	⬆️
src/generators/server-side-rendering/index.ts	98.11% <100%> (+0.03%)	⬆️
... and 1 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9ad4de7...1636f17. Read the comment docs.

[Rich-Harris]

Think this is basically done. I renamed <:Switch> to <:Component>

[tomcon]

<:Component> is better than <:Switch> (and as a plus, matches vue syntax for people coming from vue), but <:Dynamic>(or something similar) is better/less confusing imho than a common keyword such as Component

[roman-vanesyan]

+1 for <:Dynamic>. IMHO, but another confusion with <:Dynamic> is it dynamic because of it's async nature or something else

[Rich-Harris]

gah, it's shipped already! let's sit with it a while, see if <:Component> feels weird after we've used it a bit. technically it would be a v2 change even if it was only released this morning

[tivac]

I still prefer <:Component> over <:Dynamic> so ¯\_(ツ)_/¯

[lnryan]

fwiw - i also prefer <:Component> as many things can by dynamic, not just components.