Svelte: Rename onrender/onteardown to oncreate/ondestroy

[aickin]

This is a very subjective issue and probably deeply affected by my experience with React, but the name onrender was quite confusing to me. I presumed that onrender would be called every time the component's DOM changed (i.e. every time it is rendered to HTML) rather than just once when the component is added to the document. (By the way, I presume that it's only called when the component is added to the doc based on the code samples; the documentation does not say one way or another.)

Two suggestions:

1. Change the documentation's "Lifecycle Hooks" section so that it says clearly exactly when the lifecycle hook functions are called.
2. Consider renaming onrender to onsetup. In my experience, "setup" is more usually used as a counterpart to "teardown". Another possibility would be something like onaddtodocument and onremovefromdocument.

As I say, this is super subjective, but it was legitimately confusing to me while reading over code, even after I figured out that onrender is only called on setup.

Thanks so much!

[mrkishi]

In regards to 1, it'd also be nice to know if components can be rerendered/reconstructed/remounted manually, either in place or in a new target.

On 2, perhaps consider reusing names from other frameworks, whichever's aligned with svelte's implementation: Custom Elements v1's connect, Vue and React's mount, Angular's init, and so on.

[vampaz]

I would go with mount.
init - all is good, ready to mount.
mount - added to the DOM and initial render done.

[aickin]

I would go with mount.

I'd be fine with that as well, with the caveat that onteardown should then be changed to onunmount.

[maraisr]

Agreeing with you @aickin - its VERY important to have a clear and concise api, that can be consumed and understood at first glace. onteardown -> onsetup - or - onmount -> onunmount would be ammaazinggg!

Much like React's will / did ComponentUpdate lifecycles.

[Rich-Harris]

What about oncreate and ondestroy? Unambiguous (you can only create or destroy something once), and they have a nice symmetry

[maraisr]

@Rich-Harris yeah mate - love it!!!

[aickin]

+1 for oncreate/ondestroy!

[wessberg]

Might I suggest following the Custom Elements v1 spec for the names of lifecycle hooks? I think that's most forward looking, even though not as concise.

onrender would become connectedCallback.
onteardown would become disconnectedCallback

[rrag]

my $0.02 when I first saw onteardown I was looking for onsetup, you know like JUnit, in java which has setUp() and tearDown(). it did not occur to me that onrender is actually oncreate, so in the absence of a compelling reason, I suggest using the familiar (at least to those coming from Java) onsetup, onteardown

[Ryuno-Ki]

In Python's unittest you use setUp and tearDown functions as well.

[Swatinem]

I actually think react did a good job finding names for these lifecycle events:

• componentDidMount
• componentWillUnmount
• (plus maybe all the update related lifecycle events)

Well those names are a bit verbose, I would maybe call them afterMount and beforeUnmount, which also make it clear that we have a valid dom elements that are also attached (mounted) to the real dom.

I think there is an edge case involving yield fragments with the current onrender hook that does not guarantee a mounted dom element currently. I will have to come up with a testcase for that.

[Rich-Harris]

I've opened #316 which implements oncreate and ondestroy in a non-breaking way (so that people have time to update their components before it becomes a breaking change in V2).

Re alternative name suggestions, I'm wary of using the same names that web components and React use, partly because they're kinda ugly and tedious to type (and don't gel with all the other single-word-all-lowercase properties), but mostly because when you do that, you need to get the semantics exactly the same otherwise you just end up confusing people. For example, my understanding is that disconnectedCallback is called when a web component is temporarily removed from the document, whereas a Svelte component is either alive or dead, it doesn't exist in a kind of off-document limbo. In fact, the reason we're here is that React users reasonably expected 'render' to mean roughly the same thing in Svelte as in React. So I'm still in favour of oncreate and ondestroy.