[Help!!] Can I have both props from parent and props from children instances?

[wootra]

Hello! I am trying to make my library to support SolidJs. But I am facing an obstacle and cannot find it. I checked all the relative articles and Q&A, but all of them are ended up suggesting a different way of fixing the issue. Maybe what I am using Solid is an anti-pattern, but I still cannot understand why Solid does not support this use case (if I am right).

My example is about passing additional props from the parent component to the children( multiple child ). And they should be different data based on its order.
I am not considering any of CSS but should be done only in the javascript level.

Here is my example

<Parent width={160}>
  <Child ratio={5} > child1 </Child>
  <Child ratio={2} > child2 </Child>
  <Child ratio={1} > child3 </Child>
</Parent>

after ratio from the children is given, it should be summed and create DOM element based on parent's width prop.

expecting result:

<div width="width:160px">
  <div style="width:100px">child1</div>
  <div style="width:40px">child2</div>
  <div style="width:20px">child3</div>
</div>

But I cannot achieve this because There is no way to receive both from Parent and Child.
My approach to this issue was, collecting the props from Child components in the Parent component and calculate it in there and return rendered DOM not relative to Child component. So Child component does not render anything, but it will be just entry point of the data.
I need this structure because I want to provide a HTML table like interface to get the data, not from JSON like object.

I tried to use Context, Dynamic, passing props, and may other trials, but still could not figure out how to make it happen.

To experiment, I made this code:

import './App.css';
import { createContext, useContext, createEffect, createSignal, For, children as Children } from 'solid-js';
export const UserContext = createContext(0);

function App() {
	return (
		<>
			<ParentComponent>
				<Child width={3} />
				<Child width={2} />
				<Child width={1} />
			</ParentComponent>
		</>
	);
}

export default App;

export const ParentComponent = props => {
	return (
		<For each={Children(() => props.children)()}>
			{(child, idx) => {
				const c = Children(() => child);
				const existingProps = c.props; // is there a way to pass existing child's props?
				return (
					<UserContext.Provider value={idx}>
						---
						<Dynamic component={c} idx={idx} />
						<Dynamic component={Child} {...existingProps} idx={idx} />
						---
					</UserContext.Provider>
				);
			}}
		</For>
	);
};

export const Child = props => {
	const idx = useContext(UserContext);
	return (
		<div>
			I am child {props.idx ?? 'no-value'} with width {props.width ?? 'no-value'} and idx from context {idx}
		</div>
	);
};

and its result is like this:

---
I am child no-value with width 3 and idx from context 0
I am child 0 with width no-value and idx from context 0
------
I am child no-value with width 2 and idx from context 0
I am child 1 with width no-value and idx from context 1
------
I am child no-value with width 1 and idx from context 0
I am child 2 with width no-value and idx from context 2
---

As you see it, first option does not have props from Parent, the other one does not have props from Children.

Please help me or at least let me know if it is impossible.
Thank you for reading!

[mdynnl]

https://playground.solidjs.com/anonymous/b9e09a8f-310a-466a-af35-dcda7bb07625

The pattern you're looking for might be this which solid-js already uses.
https://docs.solidjs.com/reference/components/switch-and-match

<Switch>
  <Match when={foo()}>is foo</Match>
  <Match when={bar()}>is bar</Match>
  <Match when={true}>just true</Match>
</Switch>

solid/packages/solid/src/render/flow.ts

Lines 144 to 234 in 2ae7d1d

	type EvalConditions = readonly [number, unknown?, MatchProps<unknown>?];
	/**
	* Switches between content based on mutually exclusive conditions
	* ```typescript
	* <Switch fallback={<FourOhFour />}>
	* <Match when={state.route === 'home'}>
	* <Home />
	* </Match>
	* <Match when={state.route === 'settings'}>
	* <Settings />
	* </Match>
	* </Switch>
	* ```
	* @description https://docs.solidjs.com/reference/components/switch-and-match
	*/
	export function Switch(props: { fallback?: JSX.Element; children: JSX.Element }): JSX.Element {
	let keyed = false;
	const equals: MemoOptions<EvalConditions>["equals"] = (a, b) =>
	(keyed ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2];
	const conditions = children(() => props.children) as unknown as () => MatchProps<unknown>[],
	evalConditions = createMemo(
	(): EvalConditions => {
	let conds = conditions();
	if (!Array.isArray(conds)) conds = [conds];
	for (let i = 0; i < conds.length; i++) {
	const c = conds[i].when;
	if (c) {
	keyed = !!conds[i].keyed;
	return [i, c, conds[i]];
	}
	}
	return [-1];
	},
	undefined,
	"_SOLID_DEV_" ? { equals, name: "eval conditions" } : { equals }
	);
	return createMemo(
	() => {
	const [index, when, cond] = evalConditions();
	if (index < 0) return props.fallback;
	const c = cond!.children;
	const fn = typeof c === "function" && c.length > 0;
	return fn
	? untrack(() =>
	(c as any)(
	keyed
	? when
	: () => {
	if (untrack(evalConditions)[0] !== index) throw narrowedError("Match");
	return cond!.when;
	}
	)
	)
	: c;
	},
	undefined,
	"_SOLID_DEV_" ? { name: "value" } : undefined
	) as unknown as JSX.Element;
	}
	export type MatchProps<T> = {
	when: T | undefined | null | false;
	keyed?: boolean;
	children: JSX.Element | ((item: NonNullable<T> | Accessor<NonNullable<T>>) => JSX.Element);
	};
	/**
	* Selects a content based on condition when inside a `<Switch>` control flow
	* ```typescript
	* <Match when={condition()}>
	* <Content/>
	* </Match>
	* ```
	* @description https://docs.solidjs.com/reference/components/switch-and-match
	*/
	export function Match<
	T,
	TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element
	>(props: {
	when: T | undefined | null | false;
	keyed?: false;
	children: JSX.Element | RequiredParameter<TRenderFunction>;
	}): JSX.Element;
	export function Match<T, TRenderFunction extends (item: NonNullable<T>) => JSX.Element>(props: {
	when: T | undefined | null | false;
	keyed: true;
	children: JSX.Element | RequiredParameter<TRenderFunction>;
	}): JSX.Element;
	export function Match<T>(props: MatchProps<T>) {
	return props as unknown as JSX.Element;
	}

or solid router's route definition

<Router>
  <Route .../>
  <Route .../>
  <Route .../>
</Router>

This pattern is so powerful and useful that to help with this pattern, @thetarnav made some helpers in https://github.com/solidjs-community/solid-primitives/tree/main/packages/jsx-tokenizer and is used by @bigmistqke in https://github.com/bigmistqke/solid-canvas

[wootra]

I did not think this approach, and it is a genius idea! the first example that you shared - which makes the Child component just to return its props and parent component deal with it to pass all of them into another component is what I exactly wanted to use. Thanks for the help!!

[SarguelUnda]

https://playground.solidjs.com/anonymous/74f7be1f-585c-4282-9280-79430f16ac56

Solution with context for reference. Click on each child to change their ratio too !

[wootra]

thank you for take a look on my case. but this example creates DOM element from the children. So it does not fit on my request since the data-flow is not from children to parent, but parent to children. But it is very good example code. Thanks again!

[bigmistqke]

I recently found out another pattern that is pretty handy, but it assumes the child component returns an html-element:
playground

jsx-tokenizer is a bit finnicky to use, we discussed at some point to simplify it but it never came to fruition. For the new version of solid-three we are following this simplified pattern (<T.Mesh/> is Accessor<THREE.Mesh>). An example implementation of this pattern: playground

[wootra]

This is also an interesting pattern.. so using global WeakMap, we can store data and it is a weak map, it would not have memory leak.. that's a good idea that I can learn from that. Thank you for sharing the idea!