context

import { render } from "solid-js/web";
import {  useContext, createContext } from "solid-js";

const FooContext = createContext({ context: "not found" });

const FooHOC = (C: any) => (props: any) => {
    return (
      <FooContext.Provider value={props.name}>
        <C {...props} />
      </FooContext.Provider>
    )
}

const C = () => {
  console.log("C", useContext(FooContext));
  const b1 = <B name={"B1"}/>;
  const b2 = () => <B name={"B2"}/>;
  
  return (
    <A name={"A"}>
      {b1}
      {b2}
    </A>
  )
}

const B = (props: any) => {
  console.log("B", props.name, useContext(FooContext));
  return <div/>
};

const A = FooHOC((props: any) => {
  console.log("A", useContext(FooContext))
  return (
    <div>
    {props.children}
    </div>
  );
})

render(() => <C name={"C"} />, document.getElementById("app")!);`

/// logs emitted

C {context: 'not found'}
B B1 {context: 'not found'}
A A
B B2 A