Comments (12)
What about oncreate
and ondestroy
? Unambiguous (you can only create or destroy something once), and they have a nice symmetry
from svelte.
I would go with mount
.
init
- all is good, ready to mount.
mount
- added to the DOM and initial render done.
from svelte.
I would go with
mount
.
I'd be fine with that as well, with the caveat that onteardown
should then be changed to onunmount
.
from svelte.
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.
from svelte.
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.
from svelte.
@Rich-Harris yeah mate - love it!!!
from svelte.
+1 for oncreate
/ondestroy
!
from svelte.
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
from svelte.
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
from svelte.
In Python's unittest you use setUp
and tearDown
functions as well.
from svelte.
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.
from svelte.
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
.
from svelte.
Related Issues (20)
- More granular `transition` modifiers HOT 2
- Svelte 5: Dynamically rendered string renders incorrectly on iOS WebKit if it contains a link HOT 10
- Svelte 5: $effect dependancy not tracked HOT 5
- Preprocess Svelte modules (or deprecate preprocessors?) HOT 6
- enhancement(custom element): make `tag` optional in customElement component options HOT 1
- Svelte5: Calling $derived multiple times HOT 8
- Svelte 5 not reacting to onclick HOT 1
- Error when appending hydration error to head. HOT 6
- Spreadable actions (aka. `use:` directives) HOT 1
- [Svelte 4] bind:this is undefined when running action of child until all children initialize
- Svelte 4 and 5 adds spaces between html elements when mounting components through JavaScript HOT 10
- Custom element props not changeable after assigned value inside component HOT 2
- Svelte automatically binding this to function exports of components HOT 3
- `bind:this` weird behavior HOT 5
- Expose reactivity primitives to users HOT 5
- ReferenceError: $$props is not defined when calling $host()
- CustomElement $effect caused due to props read HOT 7
- `https://svelte.dev` unresponsive, keeps timing out HOT 1
- Web component styles missing when mounted more than once HOT 6
- Consider replacing `export const` and `export function` with a rune HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte.