Are compound components possible in Solid?

[kee-oth]

Hi!

Compound components is a typical React pattern used when you have tightly coupled components (you always want to use one with the other).

Example:

// List.js
const List = (props) => {
  return (
    <ul>
      {props.children}
    </ul>
  );
};

List.Item = (props) => {
  return (
    <li>
      {props.children}
    </li>
  )
};

export default List;

------------

// Some-other-file.js
import List from 'List.js'

const App = (props) => {
  return (
    <List>
      <List.Item>
        Content
      </List.Item>
      <List.Item>
        Content
      </List.Item>
    </List>
  )
}

Right now, List.Item is undefined in Solid apps. Is this pattern possible with Solid somehow?

Thanks!

[ryansolid]

Context Provider already works like this more or less. So I see no issue with this. Make a reproduction case in the playground or codesandbox. I see no reason why this shouldn't work currently. Solid treats components just as functions, it doesn't really care where they come from.

[kee-oth]

Hmm, it works in the playground. And regarding my app, it works if List and List.Item are defined in the same file as the usage. But it doesn't work in my app when I import List into another file. I get this error:

Uncaught (in promise) TypeError: Comp is undefined

Maybe it's something to do with the integration with Vite?

Playground:
https://playground.solidjs.com/#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EogcuPXgBk0ZPnIW8A5ADp9uKCYCM7pYQVlbMtBDOvACChIS8ALy8ABSE8oRkAJSJAHz8VryCcLhMECkFhbwAPI7OORWV1bW4ngCSuHAw9WWNlQDCER0QuA2VVfrNbR1do4U1Ti3tnd29-YPCIz2N45NLM1vVEwsrvJlWkqEQQqLiycnZCXlVsfH6OVi8IrTM9PDDngBzYoAUTUnQ2ACF8K0RMkVFA4ipMplgmBJFhwNB4Eg8H5-NQCMQceQqDg6ExWDiwhEos1Eik0rQMg88iAKkISowynCDlV6GoTo0QIyMp5mAALNBqETXC68-T8k4o87BKy7ab01LpLK5fI9Dmlcq8jSCyrC7ViyXS2WjcYmipnCCSVUQOAUWx8MQyKD8vjNcxogC6QA

[ryansolid]

Hmmm... Vite. That's interesting. I wonder if this is something weird like ESM to CJS happening. And since the property is assigned to the default export it is doing weird things. Oh... wait I know what it is.. It's HMR... try setting hot: false in the Solid Vite plugin and see if that fixes it. I think it will. The problem is to do HMR I need to wrap the main export in HOC so that it can swap on code change.

That is problematic for this sort of thing. Need some thought on how to pull that off.. even if I moved properties up to the wrapper that would break HMR. Unless I proxied them somehow. Maybe that's the trick.. If I made it a proxy. A function is an object so probably could serve as a proxy to the underlying component.

...No... no one is listening for it to change. We'd need to be smart enough to wrap that component in addition. Since any consuming usage wouldn't be dynamic. Ok... In theory, it might be doable if we had a better heuristic. But not a simple fix.

[kee-oth]

Your idea is correct. I set hot: false and my compound component works as expected. I'm hoping to be able to use compound components with HMR but I know you and the other maintainers are probably crushed with current tasks; do you anticipate tackling this soon or will this be a "when we get to it" thing? Just wanting to know what to expect, all good either way. Thanks! 👍

[ryansolid]

Although HMR doesn't work properly with it I did fix it so it isn't broken with Hot. But that won't be out until the 1.0 release.