How to dynamically inject context provider into a child component?

[GakkiiSmile]

https://playground.solidjs.com/anonymous/81ebd841-1499-4ad8-bfec-24cde0290c83

import { render } from "solid-js/web";
import {
  children,
  createContext,
  createMemo,
  Index,
  ParentComponent,
  splitProps,
  useContext,
} from "solid-js";

export interface SpaceCompactItemContextType {
  isFirstItem?: boolean;
  isLastItem?: boolean;
}

export const SpaceCompactItemContext =
  createContext<SpaceCompactItemContextType | null>(null);

export const SpaceCompactItemContextProvider: ParentComponent<
  SpaceCompactItemContextType
> = (props) => {
  const [, restProps] = splitProps(props, ["children"]);

  return (
    <SpaceCompactItemContext.Provider value={restProps}>
      {props.children}
    </SpaceCompactItemContext.Provider>
  );
};

const Compact: ParentComponent = (props) => {
  const resolved = children(() => {
    return props.children;
  });

  const childNodes = createMemo(() => resolved.toArray());

  const childNodesCount = createMemo(() => childNodes().length);

  return (
    <Index each={childNodes()}>
      {(child, i) => {
        return (
          <SpaceCompactItemContextProvider
            isFirstItem={i === 0}
            isLastItem={i === childNodesCount() - 1}
          >
            {child()}
          </SpaceCompactItemContextProvider>
        );
      }}
    </Index>
  );
};

const Test = () => {
  const data = useContext(SpaceCompactItemContext);

  return (
    <p>
      <span style={{ "margin-right": "10px" }}>
        isFirstItem: {data?.isFirstItem?.toString()}
      </span>

      <span>isLastItem: {data?.isLastItem?.toString()}</span>
    </p>
  );
};

function App() {
  return (
    <>
      <Compact>
        <Test />
        <Test />
        <Test />
        <Test />
      </Compact>
      <SpaceCompactItemContextProvider isFirstItem={true} isLastItem={false}>
        <Test />
      </SpaceCompactItemContextProvider>
    </>
  );
}

render(() => <App />, document.getElementById("app")!);

[lxsmnsyc]

There's no way to do this if you're using it on resolved children. You'll need to change the structure for this to work, I would say something like a render prop is better.

[wootra]

I recently had similar question on this, and got a workaround.
the simple concept is, making the Child which is exposed to be dummy component just to get props from it, and render the other Child component as part of the Parent component.
for example,

import {JSX, children as Children, For} from 'solid-js';
const App = ()=>{
  <div>
  <Compact>
    <Child />
    <Child />
  </Compact>
  <NotCompact>
  <Child isFirstItem />
  <Child />
  <Child isLastItem />
  </NotCompact>
  </div>
}
const Compact = ({children})=>{
  const c = Children(()=>children).toArray();
  const someValue="some value";
  // technically context is not even needed, but added it in this sample to demonstrate context is also working.
  return (
   <For each={c}>
    {(childProps,idx)=><MyContext.Provider idx={idx} ><ChildToRender idx={idx} {...childProps} isCompact={true} /></MyContext.Provider>}
  </For>
  )
}

const NotCompact = ({children})=>{
  const c = Children(()=>children).toArray();
  const someValue="some value";
  return (
   <For each={c}>
    {(childProps,idx)=><MyContext.Provider idx={idx}><ChildToRender idx={idx} {...childProps} isCompact={false} />  </MyContext.Provider>}
  </For>
  )
}
const Child = (props)=>{
  return props; // as unknown as JSX.Element (in typescript)
}
const ChildToRender = ({isCompact=false, isFirstItem=false, isLastItem=false})=>{
  const idx = useContext(MyContext);
  return (<p>
      <span style={{ "margin-right": "10px" }}>
        isFirstItem: {data?.isFirstItem?.toString()}
      </span>
      <span>idx from context: {idx}</span>
      <span>isLastItem: {data?.isLastItem?.toString()}</span>
    </p>)
}

[mdynnl]

You might wanna edit the code example to not de-structure as it'd break that concept along with reactivity.