Svelte: Built-in transitions

[Rich-Harris]

We should make transition plugins like svelte-transition-fade so that people can use them easily in their components...

<div in:fade>...</div>

<script>
  import fade from 'svelte-transition-fade';

  export default {
    transitions: { fade }
  };
</script>

...but, given that we're a compiler and we can do this with zero cost, I think we should also have certain transitions built-in. There's something rather appealing about being able to use transitions without even needing a <script> tag in the component.

[PaulBGD]

So it's basically up to how many we want to ship with the compiler. While they're completely different projects, we could copy jQuery's built-in effects and ship fade[in/out] / slide[up/down/toggle].

[Conduitry]

As discussed in chat, a compromise that would avoid too much 'magic' would be to publish the official transitions in the main package under svelte/transitions.js.

One slight wrinkle with doing this that I just noticed is that three of the official transitions currently have eases-jsnext as a (production) dependency. If we go ahead with including the transitions in this package, I think the best thing to do here would be to introduce eases-jsnext as a devdependency of Svelte, and just bundle the required eases in svelte/transitions.js.

Also briefly mentioned in chat was bringing svelte-extras in as well, to svelte/extras.js.

I'm not sure where would be the best place for documentation for all of these to live. Not in the svelte.technology guide, I don't think, although perhaps they could be linked from there. I think a new folder in the svelte repo containing markdown files would be good. This might even be used to collect docs for things that are a little too esoteric for the main guide.

[Rich-Harris]

As of Svelte 3, 'official' transitions live in svelte/transition — closing