SolidJS•11mo ago

Context Provider only getting default values - can't update

I'm trying to use a context provider in an astro app which is in a tauri app. While I'd normally wrap the <App /> component in the providers I don't have that option here so I'm wrapping individual components like this:

  <AdventurerNameProvider client:load>
    <AdventurerDetails client:load />
  </AdventurerNameProvider>

  <AdventurerNameProvider client:load>
    <AdventurerDetails client:load />
  </AdventurerNameProvider>

Then I feel like my context provider is pretty standard?

import { createContext, useContext, createSignal, createEffect } from 'solid-js'

export const AdventurerNameContext = createContext(['default value', () => {    console.log('AHHHHH')
}])

export const AdventurerNameProvider = (props) => {
  const [adventurersName, setAdventurersName] = createSignal('dfdsdsf')

  createEffect(() => {
    console.log('a test: ', adventurersName())
  })

  return (
    <AdventurerNameContext.Provider
      value={[adventurersName, setAdventurersName]}
    >
      {props.children}
    </AdventurerNameContext.Provider>
  )
}

export const createAdventurersName = () => {
  const newAdventurersName = useContext(AdventurerNameContext)[0]
  return newAdventurersName
}

export const createSetAdventurersName = () => {
  const newSetAdventurersName = useContext(AdventurerNameContext)[1]
  return newSetAdventurersName
}

import { createContext, useContext, createSignal, createEffect } from 'solid-js'

export const AdventurerNameContext = createContext(['default value', () => {    console.log('AHHHHH')
}])

export const AdventurerNameProvider = (props) => {
  const [adventurersName, setAdventurersName] = createSignal('dfdsdsf')

  createEffect(() => {
    console.log('a test: ', adventurersName())
  })

  return (
    <AdventurerNameContext.Provider
      value={[adventurersName, setAdventurersName]}
    >
      {props.children}
    </AdventurerNameContext.Provider>
  )
}

export const createAdventurersName = () => {
  const newAdventurersName = useContext(AdventurerNameContext)[0]
  return newAdventurersName
}

export const createSetAdventurersName = () => {
  const newSetAdventurersName = useContext(AdventurerNameContext)[1]
  return newSetAdventurersName
}

When I import createAdventurersName into another JSX component it will display "default value". When I import createSetAdventurersName into a JSX component is console.log AHHHHH

5 Replies

Jasmin•11mo ago

I'm not sure but I think you can't share context like this between islands thinkies

GrahfOP•11mo ago

well that's terrible. I checked in their discord and they said it would work but it's not working so..... I guess I'll be using their nanostore I guess you can but I don't think it's worth the effort. Apparently you "have to wrap the tree that needs context in its own component, and then use that in an Astro component" I can't get that to work either but this mess works: 🙂 Store File:

import { createSignal } from 'solid-js'

export const [adventurersName, setAdventurersName] = createSignal('')

export function changeAdventurerName(name) {
  setAdventurersName(name)
}

import { createSignal } from 'solid-js'

export const [adventurersName, setAdventurersName] = createSignal('')

export function changeAdventurerName(name) {
  setAdventurersName(name)
}

File to Display Stuff:

import { createEffect, createSignal } from 'solid-js'
import { adventurersName } from '../../adventurerNameStore'

export default function AdventurerDetails() {
  const [realName, setRealName] = createSignal()

  createEffect(() => {
    setRealName(adventurersName())
  })

  return <h1>Name: {realName()}</h1>
}

import { createEffect, createSignal } from 'solid-js'
import { adventurersName } from '../../adventurerNameStore'

export default function AdventurerDetails() {
  const [realName, setRealName] = createSignal()

  createEffect(() => {
    setRealName(adventurersName())
  })

  return <h1>Name: {realName()}</h1>
}

lxsmnsyc•11mo ago

I don't think so. the islands have isolated roots so visually the hierarchy might make sense but the roots have no relation internally

ryansolid•11mo ago

Yeah I can think of how we could implement it but to my knowledge Astro adapter never implemented shared context between Islands in any of their renderers. Biggest pain for it to work would be that hierarchically in the DOM parent components would need to hydrate before children. So you'd basically only ever use client:load for everything other than leaves. I could implement context in Astro but their APIs could basically break it in a moment. In SolidStart Islands we don't have directives so it is always client:load so I wired it up.

GrahfOP•11mo ago

Oh sorry I lost track of this post. Yeah I never got context to work with astro. It would be nice if their docs mentioned what worked/didn't work for a framework. There seems to be a lot of confusion about it. Really looking forward to see where SolidStart goes it's already super good.

Gaming

Programming

Context Provider only getting default values - can't update