• 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 seconds
• buffered (readonly) — an array of {start, end} objects
• seekable (readonly) — ditto
• played (readonly) — ditto
• seeking (readonly) — boolean
• ended (readonly) — boolean

…and five two-way bindings:

• currentTime — the current point in the video, in seconds
• playbackRate — how fast to play the video, where 1 is ‘normal’
• paused — this one should be self-explanatory
• volume — a value between 0 and 1
• muted — 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