Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement dynamic components #971

Merged
merged 11 commits into from
Dec 7, 2017
Merged

Implement dynamic components #971

merged 11 commits into from
Dec 7, 2017

Conversation

Rich-Harris
Copy link
Member

@Rich-Harris Rich-Harris commented Dec 3, 2017

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
Copy link
Contributor

tivac commented Dec 3, 2017

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

@codecov-io
Copy link

codecov-io commented Dec 3, 2017

Codecov Report

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

Impacted file tree graph

@@            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 Rich-Harris mentioned this pull request Dec 3, 2017
@Rich-Harris Rich-Harris changed the title [WIP] Implement dynamic components Implement dynamic components Dec 5, 2017
@Rich-Harris
Copy link
Member Author

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

@tomcon
Copy link

tomcon commented Dec 7, 2017

<: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
Copy link

roman-vanesyan commented Dec 7, 2017

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

@Rich-Harris
Copy link
Member Author

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
Copy link
Contributor

tivac commented Dec 7, 2017

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

@lnryan
Copy link

lnryan commented Dec 27, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants