Sveltekit - How to access a "reactive context" (a store passed down via context) in the Script tag of Child Component?

Question

I'm initialising a Class in the onMount function of a Parent Wrapper component and want to expose it to all the children. I'm currently using a writable store that I set to the Class in the onMount function.

let classA;
        
let classStore = writable(classA);
        
setContext('classContext', classStore);
    
onMount(async () => {
    const module = await import('library');
    const ClassInQuestion = module.default;
    
    classA = new ClassInQuestion()
    
    classStore.set(classA)
})

In a child component I'd try accessing the context like so:

const myContext = getContext('classContext');
console.log($myContext) //expected: class

What I get is undefined until I re-render the component.

I replicated a simplified version of the problem in this Stackblitz. As you can see the context gets called correctly with getContext, but in the <script> tag the old value is still being logged. Calling getContext in onMount doesn't work either. I want to access the Instance of the class and ideally update it from a child component.

score 0 · Answer 1 · edited May 17 '22 at 14:56

In your child component, you could make myContext reactive so it triggers on every change

const myContext = getContext('testContext');
$: if(myContext) console.log($myContext);

The output is:

At this point we dont know if the child is mounted and perhaps you dont want to trigger anything before mount. Therefore, we can add further conditions e.g. waiting for the childs mount or checking a condition of myContext:

let mounted = false;
const myContext = getContext('testContext');

$: if(myContext && mounted && $myContext == "after mount") contextReady();

async function contextReady() {
    console.log($myContext)
}
    
onMount(() => {
    mounted = true;
});

Sveltekit - How to access a "reactive context" (a store passed down via context) in the Script tag of Child Component?

1 Answers1