Svelte bind:offsetWidth 与上下文

Question

This is a how I create svelte context:

<script>
import {setContext} from 'svelte'
let layoutWidth


setContext('layout', {layoutWidth})

</script>
<div bind:offsetWidth={layoutWidth}><slot/></div>

If I try to getContext in children component, then i got undefined but in parent component layoutWidth always has value.

How to get offsetHeight of parent element in svelte?

I use getContext like this:

<script>
import {getContext} from 'svelte'
const {layoutWidth} = getContext('layout')
$: console.log(layoutWidth) //undefined
</script>

Answer 1

Svelte context is not reactive. The value is set once when setContext is called (which you can do only during component initialization), and it is not tracked for changes afterward.

If you do need to pass a reactive value (ie that will change), then you need to pass a store through context.

Example provider:

<script>
  import { setContext } from 'svelte'
  import { writable } from 'svelte/store'

  const layoutWidth = writable(null)

  setContext('layoutWidth', layoutWidth)
</script>

<div bind:offsetWidth={$layoutWidth}><slot/></div>

And the consumer:

<script>
  import { getContext } from 'svelte'

  const layoutWidth = getContext('layoutWidth')

  // subscribe to the store to get the value
  // do this in a reactive expression to keep _layoutWidth in sync
  $: _layoutWidth = $layoutWidth

  // you can also write back to the store (if it's writable)
  $layoutWidth = 400
</script>

...

Side note: I doubt bind:offsetWidth will do what you want it to do. Here again, the value will be read only once. The value won't be updated when the div is resized ('cause there's no native API to watch elements' size...). You'll probably want to add a resize event listener to window or something to this effect (there also exists some libs that enable watching elements size, with some trickery).