- Revising Svelte basics and picking up from where I left off . Writing up svelte-basics
- Two way data binding in svelte is too easy! Works basically exactly the same as
v-bind
in vue
<script>
let name = 'world';
</script>
<input bind:value={name}>
<h1>Hello {name}!</h1>
In the DOM, everything is a string. That’s unhelpful when you’re dealing with numeric inputs — type="number"
and type="range"
— as it means you have to remember to coerce input.value
before using it.
With bind:value
, Svelte takes care of it for you:
<input type=number bind:value={a} min=0 max=10>
<input type=range bind:value={a} min=0 max=10>
bind
works across pretty much everything you expect it to including textarea
input
select
and even on elements that support textContent
with contenteditable
. useful for when binding innerHTML
:
<div
contenteditable="true"
bind:innerHTML={html}
></div>
Svelte provides reactive bindings to audio
and video
elements
The complete set of bindings for <audio>
and <video>
is as follows — six readonly bindings…
duration
(readonly) — the total duration of the video, in secondsbuffered
(readonly) — an array of{start, end}
objectsseekable
(readonly) — dittoplayed
(readonly) — dittoseeking
(readonly) — booleanended
(readonly) — boolean
…and five two-way bindings:
currentTime
— the current point in the video, in secondsplaybackRate
— how fast to play the video, where1
is ‘normal’paused
— this one should be self-explanatoryvolume
— a value between 0 and 1muted
— a boolean value where true is muted
Videos additionally have readonly videoWidth
and videoHeight
bindings.
get a reference to a DOM elements using bind:this={canvas}
. This similar to refs
in React.
Note interacting with reference needs to be done after the component is mounted. Therefore, the logic all needs to happen within the onMount
lifecycle hook.
component bindings are kinda mind blowing. It provides an API to get access to a childs prop
I’m still trying to get my head around binding to component instances - https://svelte.dev/tutorial/component-this …
Lifecycle events are almost the same as vue.js
onMount
& onDestroy
- do something after component is mounted and when it is unmounted/destroyed
beforeUpdate
& afterUpdate
- Do something before or after the component is updated great example use case here https://svelte.dev/tutorial/update.
tick
- is a promise that can be called anytime to ensure that any pending updates have been completed before running something next. - https://svelte.dev/tutorial/tick
svelte stores is sveltes built-in global state management solution. Sort of like react context or Vuex, but it’s much easier to reason with!
writables
- is a mutable reactive object which has a set
, and update
methods
readables
- is a read only object. It is instantiated as a function , first arg is the inital value, the second is a callback which provides a set
and stop
functions. set
is called on the first subscription. stop
is called on the last unsubscribe
derived
- is a way to leverage the value from a different store - https://svelte.dev/tutorial/derived-stores
Nice way to keep store logic “clean” - https://svelte.dev/tutorial/custom-stores . A “custom” svelte store only needs to be an object that exposes a subscribe
method and it is automatically a svelte store.
bind
works on writable svelte stores - https://svelte.dev/tutorial/store-bindings