DEV Community: Tiago Nobrega

[S4SRD]S01E03 - Context Evolved (Updatable Context in Svelte)

Tiago Nobrega — Sun, 14 Jul 2019 18:38:52 +0000

This is a series about applying some common React concepts and patterns in sveltejs. This season is about hooks. Last episode We've set the objective of exploring hooks and how to implement some of its features in svelte (Check it out if You haven't so far). In this episode, I'll show how to update a value in svelte context. Ready your popcorn and welcome to:

🙃

Svelte For The Stubborn React Developer

Abstract

Last episode we created a hook to access context. Now we are looking into how to use context in a way we can update its value.

The problem emerged from a statement about getContext and setContext functions:

The catch here is that You need to call them during component initialization, so don't call them inside onMount, onDestroy, clickEvents, etc.

I asked a similar question in stack overflow and @Rich_Harris was kind enough to point me in the right direction. Instead of just laying out the answer I decided to walk through the concept that would culminate in this idea. This way We get a better understanding of why instead of just focusing on how. Of course, if you don't want to journey this, just read the TL;DR 😉.

TL;DR

Since the reference to a context value can't be updated. We need a way to access an updatable value in context. Svelte stores are perfect for this because they can be updated and observed. So basically, just use context with a store as its value.

Can't Update The Reference, Now What ?!?

Let's start with our goal. We want to be able to define a context value, and then update this value, and finally react to this and use the new value. But... We can't update the context value reference after component initialization.

Think of our context value as a const. In javascript we can't update the const reference, right?

(()=>{
    const a = {value:'initial'};
    a = {value: 'updated'} // ⭠ TypeError: Assignment to constant variable.
    console.log(a);
})()

But, if we have an object assigned to a const we can update any value (mutate) in it:

(()=>{
    const a = {value:'initial'};
    a.value = 'updated'
    console.log(a); // outputs: {value: "updated"}
})()

Isn't This Episode About svelte ??

Ok... How we apply this concept in svelte's context (I mean 🤔... svelte context context 😕... You got it!). Try to follow along with the comments in this nonpractical example:

<!-- App.svelte -->
<script>
    import ContextValue from './ContextValue.svelte';
    import {setContext, getContext} from 'svelte';
    setContext('value',{value:'inital'}); // ⭠ Create context
</script>
<ContextValue /> <!-- Import component that use the context -->

<!-- ContextValue.svelte -->
<script>
    import {getContext} from 'svelte';
    const contextValue = getContext('value'); // ⭠ Get context.

    function logContextValue(){ //⭠ Function to log current context value
        console.log(contextValue)
    }

    function updateContext(){ // ⭠ Function to "update" context
        myContext.value = 'updated'
    }
</script>
<button on:click={updateContext} >Update Context</button> <!-- ⭠ "Updates" context -->
<button on:click={logContextValue}>Log Context Value</button> <!-- ⭠ Log context -->

The expected idea is to:
1 - click "Log Context Value" button ⮕ outputs initial value

2 - click "Update Context" button;

3 - click "Log Context Value" button ⮕ outputs updated value

And... It works!

Still Messy

Yeah... Not so great yet. The logic is all over the place, and we didn't even create a reusable function for that (imagine using it in many components). We need several functions to make it work. It's messy. How about this?

//smartContext.js
import {setContext, getContext} from 'svelte';

export function setSmartContext(contextObject){
    setContext('value',contextObject);
}

export function getSmartContext(){
    const ctx = getContext('value');
    return {
        get:()=>ctx,
        update: newValue => ctx.value = newValue
    }
}

Better... It's isolated in one module. We could use it like such:

<!-- App.svelte -->
<script>
    import ContextValue from './ContextValue.svelte';
    import {setSmartContext} from './smartContext.js'
    setSmartContext({value:'inital'}); //⭠ Set a smartContext
</script>
<ContextValue />

<!-- ContextValue.svelte -->
<script>
    import {getSmartContext} from './smartContext.js';
        const smartContext = getSmartContext('value'); //⭠ get a smartContext
        function updateContext(){
            smartContext.update('updated') //⭠ updates smartContext
        }
        function logContextValue(){
            console.log(smartContext.get()) //⭠ Set smartContext value
        }
</script>
<button on:click={updateContext} >Update Context</button>
<button on:click={logContextValue}>Log Context Value</button>

Still... It only works for a single value. If we want 2 distinct context values, we would need to replicate our smartContext.js (not so smart...).

Making It More Reusable

Actually, if You're creative enough You could realize the smartContext is just an object that updates a variable in its scope (or context). For that, it doesn't even need an external context if there's an internal context (or scope). It turns out there's a great feature in javascript for this: Functions !!!! Look:

//smartContext.js
export default (defaultValue)=>{
        let value = defaultValue; //⭠ scope value
        return {
            set: newValue=>{
                value=newValue //⭠ update scope value
            },
            get: ()=>value,//⭠ get scope value
        };
    };

Interesting... But this doesn't bring to the table all features a svelte context has to offer. So, let's combine them and create 2 smartContexts.

<!-- App.svelte -->
<script>
    import ContextValue from './ContextValue.svelte';
    import {setContext} from 'svelte' //⭠ import default svelte context
    import smartContext from './smartContext.js' // ⭠ import smartContext "builder"

    //⮦Set a context value to a smartContext
    setContext('value', smartContext('initial')) 
    //⮦Set another context value to a smartContext
    setContext('unused', smartContext('unused'))
</script>
<ContextValue />

<!-- ContextValue.svelte -->
<script>
      import {getContext} from 'svelte';
      const smartContext = getContext('value'); //⭠ get a smartContext
      const getUnusedContext = getContext('unused');//⭠ get a smartContext
      function updateContext(){
        smartContext.update('updated')//⭠ update the smartContext
      }
      function logContextValue(){
        console.log(smartContext.get())//⭠ get the smartContext value
      }
</script>
<button on:click={updateContext} >Update Context</button>
<button on:click={logContextValue}>Log Context Value</button>

Adding Reactiveness

That's a lot better now! And I know It might seem like a great round trip to get to the same place, but It's important to understand and split the concepts. Bear with me just a bit. So are we done? Not really. We need:

to be able to define a context value, and then update this value, and finally react to this and use the new value

We are already defining a context value and updating this value but we are not reacting to this update. The only way to get the updated value so far is by executing an imperative action (hence, "click the button"). If we had this value displayed on ContextValue.svelte, it wouldn't be automatically updated. Let's try that:

<!-- ContextValue.svelte -->
<script>
      import {getContext} from 'svelte';
      const smartContext = getContext('value'); //⭠ get a smartContext
      const getUnusedContext = getContext('unused');//⭠ get a smartContext
      function updateContext(){
        smartContext.update('updated')//⭠ update the smartContext
      }
      function logContextValue(){
        console.log(smartContext.get())//⭠ get the smartContext value
      }
</script>
<button on:click={updateContext} >Update Context</button>
<button on:click={logContextValue}>Log Context Value</button>

And the result is:

A Better SmartContext

The value is not automatically updated. It makes sense, why would it anyway? We need a way to obverse or to subscribe to this value updates. Before jumping to address this, let's consolidate what we need:

A way to store, update, a subscribe to a scoped value.

The scope, as we've seen, it's handled by svelte context using getContext and setContext. Our smartContext already stores and updates the value, but isn't observable. svelte comes with a handy feature to help us out: svelte store.

Stores in svelte do exactly that, so we can completely replace smartContext with it. First App.svelte

<!-- App.svelte -->
<script>
    import ContextValue from './ContextValue.svelte';
    import {setContext} from 'svelte'; //⭠ import svelt context
    import { writable } from 'svelte/store'; //⭠ import svelt writable store

    let smartContext = writable('initial');//⭠ initialize store
    setContext('value',smartContext);//⭠ set context value as the store
</script>
<ContextValue />

At this point, we will observe to store updates and reacts to it by updating a component variable. It's a little different than the previous approach of accessing the store value. When the store value changes, so our variable value will.

<!-- ContextValue.svelte -->
<script>
      import {getContext,onMount} from 'svelte';
        //⮦ get svelt store(replaced our smartContext)
        let smartContext = getContext('value'); 
        let contextValue;//⭠ this variable will hold the store value (context value)
        //⮦ update our variable whenever the store value get updated
        onMount(()=>smartContext.subscribe(v=>contextValue = v))

        //⮦ Function to update store value
        function updateContext(){
            smartContext.update(()=>'updated')
        }
       //⮦ We don't need to access store value, just access our "synced" variable
        function logContextValue(){ 
            console.log(contextValue)
        }
</script>
<h1>{contextValue}</h1> <!-- print out our variable value -->
<button on:click={updateContext} >Update Context</button>
<button on:click={logContextValue}>Log Context Value</button>

And the result:

There You go. Now we're talking!!

Making it even better... Get me some sugar !

It works! Finally. Still too verbose though, don't You think? Stores, as a built-in feature of svelte comes with a syntax sugar we can use: auto-subscriptions. It works by just putting a dollar sign ($) before your store variable name. Simple as that! We just need to change our ContextValue.svelte component. Check it out:

<!-- ContextValue.svelte -->
<script>
      import {getContext,onMount} from 'svelte';
        let smartContext = getContext('value');
        function updateContext(){
            smartContext.update(()=>'updated')
        }
        function logContextValue(){ 
            console.log($smartContext) //⭠ auto-subscribed value
        }
</script>
<h1>{$smartContext}</h1> <!-- //⭠ auto-subscribed value -->
<button on:click={updateContext} >Update Context</button>
<button on:click={logContextValue}>Log Context Value</button>

Now It's smaller and more concise. And We get the added bonus of having svelte unsubscribe from the store when the component gets destroyed. One small problem with the previous version of the code I omitted.

Things are starting to get interesting. I recommend taking a look at stores examples(https://svelte.dev/examples#writable-stores) and documentation(https://svelte.dev/docs#writable) from svelte official docs. It's extremely simple to use.

I might add an episode or two on the subject. Who knows? Let me know if You think I'ts interesting!!

❕⚠️⚠️⚠️ Spoiler Alert ⚠️⚠️⚠️❕
I promise I'll get to HOC. Just a couple more things first!

❕⚠️⚠️⚠️ Spoiler Alert ⚠️⚠️⚠️❕

[S4SRD]S01E02 - Hooked Evolved (Contextful Hooks in Svelte)

Tiago Nobrega — Fri, 12 Jul 2019 15:00:57 +0000

This is a series about applying some common React concepts and patterns in sveltejs. This season is about hooks. Last episode We've set the objective of exploring hooks and how to implement some of its features in svelte (Check it out if You haven't so far). In this episode, I'll show how we make use of context inside "svelte hooks". Ready your popcorn and welcome to:

🙃

Svelte For The Stubborn React Developer

Abstract

We defined hooks as:

A function to extract behavior that allows you to react to lifecycle and access the state and context.

This time We'll be focusing on the "access the state and context". Mostly on the context part, because the state part is svelte is not really a big issue (I'll come back to that). All functionality You get using context can be achieved by using stores (the same thing can be said about React Context and Redux/Mobx Store). For me, context come to solve "props drilling" problem. Where You need to pass around information to a deeply nested child object.

TL;DR

Sveltejs exports 2 funcions: getContext and setContext. The getContext function retrieves a context value that belongs to the closest parent component. Since setContext and getContext are just functions, they can be simply imported into svelte hooks and used as such. The component on which hooks are imported define the closest parent.

A Note About State

Since svelte compiles your svelte code into javascript, the component state is just variables. You don't have to worry too much about the lifecycle when You think about the state. The scoped variable reference get "invalidated" any time some part of the code changes it, and when invalidated, other parts of the code react to this change. In React functional components You have to use useState hooks and such because React runtime might "recalculate" your component in many situations. When this happens everything on the scope of that component gets recalculated.

What We Will Build

The first thing that pops into your head when You hear "context" is "themes", right? That's a very common use case, but I wanted to try something different. Context is great when there's something You have to pass around a lot between several components, especially when your app has a deeply nested structure. The app will have a simple structure (for simplicity sake), but imagine it has a really nested component tree.

We'll build a very simple app to display clocks from different timezones. Our app structure will look something like this:

<APP>
    <City> <!-- ⭠ SET Context A -->
        <Name></Name>
        <Date></Date> <!-- ⭠ USE Context B -->
        <Clock></Clock> <!-- ⭠ USE Context A -->
    </City>
    <City> <!-- ⭠ SET Context B -->
        <Name></Name>
        <Date></Date> <!-- ⭠ USE Context B -->
        <Clock></Clock> <!-- ⭠ USE Context B -->
    </City>
</APP>

As You can see in my detailed diagram above, the City component will set some context it's child Clock component will use.

Components Basic Structure

Let's start by creating the structure of our basic components, and then We gradually change them to implement what we want.

<!-- Clock.svelte -->
<script>
    let time = null;
</script>
<div>
    <h3>{time}</h3>
</div>
<!-- Date.svelte -->
<script>
    let date = null;
</script>
<div>
    <h3>{date}</h3>
</div>
<!-- City.svelte -->
<script>
    import Clock from './Clock.svelte'
    import Date from './Date.svelte'
    export let name;
    export let timezone; //⭠ will be used in a minute
    export let format; //⭠ will be used in 2 minutes
</script>
<div>
    <div>{name}</div>
    <Date></Date>
    <Clock></Clock>
</div>
<!-- App.svelte -->
<script>
    import City from './components/City.svelte';
</script>
<h2>Cities</h2>
<City name="New York City" timezone="America/New_York"></City>
<City name="Rio de Janeiro" timezone="America/Sao_Paulo"></City>

So... The idea here is that App.svelte has 2 cities (New York and Rio de Janeiro) and each has it's own timezone (and format, but ignore that for now). On the City.svelte some context value will be set, and this value will then be used by Date.svelte and Clock.svelte.

Now this could be done directly on the three components, but this is not so great for one basic reason:

It makes the components tightly coupled. This context logic would be scattered around these 3 components and if You have to change it for some reason, You would have to change everywhere (in a larger app this will not scale well).

We can do it better. If only we have learned in the last episode a way to extract behavior that allows you to react to lifecycle and access the state and context.

Wait a minute... That's right. A hook!

Implementing the hook

Soooo... We know our hook has to be able to access context values defined in parent components. Good thing svelte has just the right tools: getContext and setContext, which are just functions and can be imported and used in any file (such as our hook file). The catch here is that You need to call them during component initialization, so don't call them inside onMount, onDestroy, clickEvents, etc.

The setContext(key, value) defines a context value for the specified key. While getContext(key) returns the value for the key on the closest parent component. Our hook will be used by both: parent and child component, so it needs to export a way to set the context and to access the context. With that in mind here we go:

//useTimezone.js
// SET context
export function setTimezone({timezone, format}) {
  if (timezone) setContext('contextTimeZone', timezone);
  if (format) setContext('contextTimeFormat', format);
}

Exported function setTimezone simply set 2 context variables (if passed): contextTimeZone and contextTimeFormat. The first will hold the desired timezone and the second the desired date format. They will be indirectly used by Clock.svelte and Date.svelte.

Great! Now we need a way for both functions to access these context variables and do something with it. Our hook's heavy logic (or shared behavior).

//useTimezone.js
// SET context
export function setTimezone({timezone, format}) {
  if (timezone) setContext('contextTimeZone', timezone);
  if (format) setContext('contextTimeFormat', format);
}
//helper function
function getFormattedDate(format, options) {
  return new Intl.DateTimeFormat(format, options).format(new Date())
}

// ACCESS context and so something useful
export function getTime({onSecond, onDate}) {
  let interval;
  const timezone = getContext('contextTimeZone') || 'UTC';
  const format = getContext('contextTimeFormat') || 'default';
  if (onDate) onDate(getFormattedDate(format, timezone, {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    timeZone: timezone
  }));
  onMount(() => {
    if (onSecond) {
      interval = setInterval(() => {
        console.log('onsecond::'+format);
        onSecond(
            getFormattedDate(format, {
              hour: 'numeric',
              minute: 'numeric',
              second: 'numeric',
              timeZone: timezone
            })
        )
      }, 200);
    }
    return () => interval && clearInterval(interval);
  })
}

Let's analyze what's going on here by parts as jack the ripper would.

Function getFormattedDate is just a helper to.. well... format the date. Lame!

Function getTime is much more interesting. function basic structure can represented as such:

export function getTime({onSecond, onDate}) {
    //get context value (this is outside onMount)
    const timezone = getContext('contextTimeZone') || 'UTC';
....
    //call onDate callback passing the formated Date
    if (onDate) onDate(getFormattedDate(format, timezone, {
....   
    //register on components onMount a interval calling onSecond callback
    onMount(() => {
    if (onSecond) {
      interval = setInterval(() => {
....
    //register onDestroy event to clear interval (check last episode for details) 
    return () => interval && clearInterval(interval);
}

Now a few things to notice:

getContext calls happen outside onMount events
onSecond and onDate callbacks could be retrieved from context, but for learning, It's best not to get overcomplicated.

The important part is that getContext will look for the closest parent context relative to the component it gets imported into. Nice, but how can we use it?

Hooking The Components

Our first order of business is to set the context at the City.svelte component, for that we'll receive the values as props:

<!-- City.svelte -->
<script>
    import Clock from './Clock.svelte'
    import Date from './Date.svelte'
    import {setTimezone} from './useTimezone';
    export let name;
    export let timezone;
    export let format;
    setTimezone({timezone, format}); // ⭠ set context values
</script>
<div>
    <div>{name}</div>
    <Date></Date> <!-- ⭠ No props passed to the compoent -->
    <Clock></Clock> <!-- ⭠ No props passed to the compoent -->
</div>

and we need to pass the values as props in App.svelte

<!-- App.svelte -->
<script>
    import City from './components/City.svelte';
</script>
<h2>Cities</h2>
<City name="New York City" timezone="America/New_York" format="en-US"></City>
<City name="Rio de Janeiro" timezone="America/Sao_Paulo" format="pt-BR"></City>

* timezone values passed in a format understood by Intl (https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)

Now a timezone and format are passed to each City instance, which sets them as context variables. This values now need to be consumed by Date.svelte and Clock.svelte

<!-- Date.svelte -->
<script>
    import {getTime} from './useTimezone'
    let date = null;
    getTime({onDate: (newTime)=> date=newTime})
</script>
<div>
    <h3>{date}</h3>
</div>

<!-- City.svelte -->
<script>
    import {getTime} from './useTimezone'
    let time = null;
    getTime({onSecond: (newTime)=> time=newTime})
</script>
<div>
    <h3>{time}</h3>
</div>

Both components set a variable (date and time), passes a callback to our Hook function to update its value.

With all in place all, our code is this:

<!-- App.svelte -->
<script>
    import City from './City.svelte';
</script>
<h2>Cities</h2>
<City name="New York City" timezone="America/New_York" format="en-US"></City>
<City name="Rio de Janeiro" timezone="America/Sao_Paulo" format="pt-BR"></City>

<!-- City.svelte -->
<script>
    import Clock from './Clock.svelte'
    import Date from './Date.svelte'
    import {setTimezone} from './useTimezone';
    export let name;
    export let timezone;
    export let format;
    setTimezone({timezone, format});
</script>
<div>
    <div>{name}</div>
    <Date></Date>
    <Clock></Clock>
</div>

<!-- Date.svelte -->
<script>
    import {getTime} from './useTimezone'
    let date = null;
    getTime({onDate: (newTime)=> date=newTime})
</script>
<div>
    <h3>{date}</h3>
</div>

<!-- Clock.svelte -->
<script>
    import {getTime} from './useTimezone'
    let time = null;
    getTime({onSecond: (newTime)=> time=newTime})
</script>
<div>
    <h3>{time}</h3>
</div>

And the final result is:

New York City Date is in 'MM/DD/YYYY' format as Rio de Janeiro is in 'DD/MM/YYYY', also, times are localized too.

Grandpa's Context

In the example above, Clock.svelte and Date.svelte gets the context from the City.svelte component. But context is evaluated from the closest parent, this means we can also define the context on the App.svelte. To create something like a default value. Check it out:

<!-- App.svelte -->
<script>
    import City from './City.svelte';
    import {setTimezone} from './useTimezone';
    setTimezone({format:'en-US'}); // ⭠ set value in App context
</script>
<h2>Cities</h2>
<!-- USES App context format value -->
<City name="New York City" timezone="America/New_York"></City>
<City name="Philadelphia" timezone="America/New_York"></City>
<!-- OVERRIDES App context format value -->
<City name="Rio de Janeiro" timezone="America/Sao_Paulo" format="pt-BR"></City>

This way, We define some value in App.svelte context, so New York and Philadelphia uses it, and Rio de Janeiro overrides it because a new context (closer to the component) is defined inside City.svelte from the 'format' props passed.

So again in our detailed diagram, We have something like:

<APP><!-- ⭠ SET APP context -->
    <City New York> <!-- ⭠ DO NOT set context -->
        <Name></Name>
        <Date></Date> <!-- ⭠ USE APP context -->
        <Clock></Clock> <!-- ⭠ USE APP context -->
    </City>
    <City Philadelphia> <!-- ⭠ DO NOT set context -->
        <Name></Name>
        <Date></Date> <!-- ⭠ USE APP context -->
        <Clock></Clock> <!-- ⭠ USE APP context -->
    </City>
    <City Rio de Janeiro> <!-- ⭠ SET Rio de Janeiro context -->
        <Name></Name>
        <Date></Date> <!-- ⭠ USE Rio de Janeiro context -->
        <Clock></Clock> <!-- ⭠ USE Rio de Janeiro context -->
    </City>
</APP>

Voilà!

Great! Now We've mastered context hooks. One more detail. Rember I said:

The catch here is that You need to call them during component initialization, so don't call them inside onMount, onDestroy, clickEvents, etc.

Well, How can we update the context value then?

See you in the next episode.

[S4SRD]S01E01 - Hooked On (using hooks in svelte)

Tiago Nobrega — Wed, 03 Jul 2019 11:37:05 +0000

I've met dev.to from @Rich_Harris twitter, so I decided to write my first post about @sveltejs. Not only that but how to reactfy Your svelte app (I'm sure Harris would love that, right ?). Not only that, it's a series.

Bear with me now and hold any impulse to close the browser window just yet and welcome to:

🙃

Svelte For The Stubborn React Developer

S01E01 - Hooked On (using hooks in svelte)

Abstract

Okay... Jokes apart, the idea here is to demonstrate how some concepts a React developer is familiar with, could be implemented in svelte. It's by no means a contest of who does it better (judgment-free zone). Also, the code presented is not battle tested, stressed out, military-grade techniques. It's just the way I found so far to implement things, feel free to leave a comment about anything.

TL;DR

Svelte lifecycle functions can be called from anywhere and isolated in isolated modules. It can then be imported to be used by as many components as You wish. They must be called during the component's initialization, but You don't have to worry about ordering and conditional call.

If You're interested in figuring out how to use state or context with a svelte hook, stay tuned for the next episode.

What's a hook anyway and What is it for?

Borrowing from @dan_abramov here:

You can’t extract behavior like “watch window size and update the state” or “animate a value over time” from a class component without restructuring your code or introducing an abstraction like Observables. Both approaches hurt the simplicity that we like about React.
Hooks solve exactly that problem. Hooks let you use React features (like state) from a function — by doing a single function call. React provides a few built-in Hooks exposing the “building blocks” of React: state, lifecycle, and context.>

So a hook is essentially a function to extract behavior that allows you to react to lifecycle and access the state and context.

How to achieve that in svelte?

Extracting behavior is what all functions do, that's the easy part. ✔️Done. But what about reacting to lifecycle?

Svelte exposes a few helper functions for that: OnMount, beforeUpdate, afterUpdate, onDestroy, tick. They work exactly the same way (except for tick - that creepy little guy). So, for simplicity reasons let's stick with onMount & onDestroy.

Now, let's imagine we want to log something anytime a component gets mounted or destroyed. First, let's do it for a single component:

<!-- componentA.svelte -->
<script>
import { onMount, onDestroy } from 'svelte';

onMount(()=>console.log('A component was mounted'))
onDestroy(()=>console.log('A component was destroyed'))
</script>

<h1>Hi, I'm component componentA.svelte</h1>

That's pretty simple, but it can get better. (and this is something it took me a while to find, although it's in the docs). From svelte docs:

If a function is returned from onMount, it will be called when the component is unmounted.>

And refactoring the code above:

<!-- componentA.svelte -->
<script>
import { onMount } from 'svelte';

onMount(()=>{
    console.log('A component was mounted')
    return ()=>console.log('A component was destroyed')//⬅️ onDestroy
})
</script>

<h1>Hi, I'm component componentA.svelte</h1>

Now, If we want to replicate this behavior to another component, in order to keep the code DRY, we need to extract it to a reusable module such as (You guessed right) a function. But how can an isolated function use onMount and onDestroy of the component? Or in other words, how to inject onMount and onDestroy into an isolated function?

My first idea was to pass it as arguments. But it turns out You don't need to do that. onMount and onDestroy are just functions. You can call them from anywhere. So our behavior function module can be implemented like this:

//useLogger.js
import { onMount } from 'svelte';
export default function useLogger(){
    onMount(()=>{
        console.log('A component was mounted')
        return ()=>console.log('A component was destroyed')//⬅️ onDestroy
    })
}

and used in all of our components like this:

<!-- componentA.svelte -->
<script>
import useLogger from './useLogger';
useLogger();
</script>
<h1>Hi, I'm component componentA.svelte</h1>

<!-- componentB.svelte -->
<script>
import useLogger from './useLogger';
useLogger();
</script>
<h1>Hi, I'm component componentB.svelte</h1>

And if we wish to make the logged message a little more personalized:

//useLogger.js
import { onMount } from 'svelte';
export default function useLogger(componentName='A component'){
    onMount(()=>{
        console.log(`${componentName} was mounted`)
        return ()=>console.log(`${componentName} was destroyed`)//⬅️ onDestroy
    })
}

<!-- componentA.svelte -->
<script>
import useLogger from './useLogger';
useLogger('Component A');
</script>
<h1>Hi, I'm component componentA.svelte</h1>

<!-- componentB.svelte -->
<script>
import useLogger from './useLogger';
useLogger('Component B');
</script>
<h1>Hi, I'm component componentB.svelte</h1>

Now it looks juicy! Just one point of attention: "It must be called during the component's initialization". So You can't use it on click handlers and such. The bright side is You don't have to worry about ordering or conditional calls for Your hooks.

That's it! We've just implemented a function to extract behavior that allows you to react to lifecyle. But what about the "access the state and context" part? That's a topic for S01E02. Stay tuned!

❕⚠️⚠️⚠️ Spoiler Alert ⚠️⚠️⚠️❕

I've heard some rumors that S02 is about HOC

❕⚠️⚠️⚠️ Spoiler Alert ⚠️⚠️⚠️❕