function App () {
<Root>
<Parent id=a/> WORKS
<Root>
}
function Root() {
useContextProvider() context;
<Parent id=b/>
<Context2>
<slot/>
</Context2>
}
function Parent() {
<span>{context.value}</span>
// Is this allowed???
<span>{context2.value}</span>
}
function Context2() {
export context2;
<div><Slot/></div>
}
<Root>
<Parent1>
<Slot>
#SHADOWDOM
<Parent id=a>
<span>....</span>
</Parent>
</Slot>
<Parent id=b>
<span>....</span>
</Parent>
<Root>
<Parent id=a/>
#SHADOWDOM
<Parent id=b>
<span>....</span>
</Parent>
<slot/> // <<- virtually here
<ContextProvider>
<ContextProvider2>
<Slot/>
</ContextProvider2>
</ContextProvider>
CompA
// Context must be static
useContextProvider(cond ? 1 : 2);
const signal = useContext(); // always the same value
if () {
<ContextA>{props.children}</ContextA>
} else {
<ContextB>{props.children}</ContextB>
}
https://stackblitz.com/edit/react-ts-7wjpey?file=App.tsx
Puzzle for Adam: What is foo
?
function App() {
<ContextProvider foo="123">
<Root>
<ContextReader read="foo"/>
</Root>
</ContextProvider>
}
function Root() {
<Child>
<Slot/>
</Child>
}
function Child() {
<ContextReader>
// <ContextProvider foo="321">
// <Slot/>
// </ContextProvider>
}
layout.tsx
useContextProvider(CTX, value);
<Slot/>
index.tsx
useContext(CTX) // WORKS
provider.tsx
useContextProvider(CTX, value);
<Slot/>
layout.tsx
<PROVIDER>
<Slot/>
</PROVIDER>
index.tsx
useContext(CTX) // WORKS
function A () {
// asycn stuff here
<C><Slot/></C>
}