how to best use mergeProps in solidjs?

[iyefrat]

SolidJS has it's own built in mergeProps function. What does the one that zag provides do that is different? should I always use the zag mergeProps?

Also, there is a point that isn't entirely clear from the documentation. Should I do:

import { mergeProps } from '@zag-js/solid'

// ...
// put api function without calling it
<div {...mergeProps(api.getTriggerProps, {style: 'z-index': 1})>
// or
// put api function with calling it
<div {...mergeProps(api.getTriggerProps(), {style: 'z-index': 1})>
// ...

the function definition seems to imply that both are allowed

zag/packages/frameworks/solid/src/merge-props.ts

Line 6 in 53fe543

export function mergeProps<T, U>(source: MaybeAccessor<T>, source1: MaybeAccessor<U>): T & U

this seems to imply that we shouldn't call the function #981
this seems to imply that maybe we should https://zagjs.com/overview/composition (although it is in react)

Thanks for the help!

[anubra266]

Hiya, the only difference with the one from solid js is this part; where we apply some transforms.
Basically the props zag generates by default are not solidjs conforming, so this mergeProps from core is an adapter to make them solid compatible.

zag/packages/frameworks/solid/src/merge-props.ts

Lines 31 to 39 in 53fe543

	if (key === "style" || key === "class" || key === "className" || key.startsWith("on")) {
	for (let i = 0; i < sources.length; i++) {
	let s = sources[i]
	if (typeof s === "function") s = s()
	e = zagMergeProps(e, { [key]: (s || {})[key] })
	}
	return (e as any)[key]
	}

As for your second question, we simply do it like the solid mergeProps which allows both.

[iyefrat]

Thanks!