search

Devographics / Monorepo

Monorepo containing the State of JS apps
surveyform-sigma.vercel.app
Other
129 stars 52 forks source link

Context issue with Astro codebase #92

Closed SachaG closed 3 weeks ago

SachaG commented 2 years ago

Astro codebase: https://github.com/StateOfJS/Monorepo/tree/main/homepage

Context defined here: https://github.com/StateOfJS/Monorepo/blob/main/homepage/src/helpers/i18nContext.tsx

Provider called here: https://github.com/StateOfJS/Monorepo/blob/main/homepage/src/layouts/DefaultLayout.astro#L42

Context used here via a hook: https://github.com/StateOfJS/Monorepo/blob/main/homepage/src/components/T.tsx#L15

Problem: when using the context in a component, only the default value of the context is read, the context is never updated with the value passed to the provider.

eric-burel commented 3 weeks ago

I've double checked the issue and tried again on Stackblitz: https://stackblitz.com/edit/astro-react-context You can't have a React context in Astro at all, you need to use an Astro idiomatic solution instead like nanostores. (let's wait another 2 years that I implement this :+1: )

eric-burel commented 3 weeks ago

Managed to fix it: you need an isolated "nanostore" instance, in a separate file then you can consume this store in an intermediate "context" file as usual, you just need to mimick React usual behaviour with context For an unknown reason you can't have the nanostore atom in the same file though, probably because of how Astro alters React behaviour with independant islands I'll make an "AstroPatterns" out of it with more insights