SolidJS•2y ago

Does mergeProps deep merge objects?

I have a syntax on my components where I define styles with an atoms prop like <MyComponent atoms={{*some styles}} />. As I am building out by components, I want to be able to set base styles with this prop but also allow the consumer of the component to define an atoms prop and have it merge with the base styles. I'm currently using lodash merge for this but was wondering if the mergeProps function could help here. Current Method: (<Text /> takes the atoms prop)

import { merge } from 'lodash';
import { splitProps } from 'solid-js';

const Heading: ArtisanComponent<'h2'> = (props) => {
  const [local, others] = splitProps(props, ['atoms']);

  return <Text atoms={merge({/*base styles*/}, local.atoms)} {...others} />;
};

import { merge } from 'lodash';
import { splitProps } from 'solid-js';

const Heading: ArtisanComponent<'h2'> = (props) => {
  const [local, others] = splitProps(props, ['atoms']);

  return <Text atoms={merge({/*base styles*/}, local.atoms)} {...others} />;
};

Cleaner method that I am unsure if works:

import { mergeProps } from 'solid-js';

const Heading: ArtisanComponent<'h2'> = (props) => {
  const propsWithBaseStyles = mergeProps({atoms: {/*base styles*/}, props);

  return <Text {...propsWithBaseStyles} />;
}

import { mergeProps } from 'solid-js';

const Heading: ArtisanComponent<'h2'> = (props) => {
  const propsWithBaseStyles = mergeProps({atoms: {/*base styles*/}, props);

  return <Text {...propsWithBaseStyles} />;
}

2 Replies

Alex Lohr•2y ago

no, it only shallow merges.

jesseb34r•2y ago

Bummer

Gaming

Programming

Does mergeProps deep merge objects?