`styled` fn with Solid.js components

[Christian Schröter]

Description

This could be a Zag.js issue or the styled fn but using styled to wrap a Select.Root it return this error:

TypeError: 'set' on proxy: trap returned truish for property 'items' which exists in the proxy target as a non-configurable and non-writable accessor property without a setter

export const Demo = () => {
  const items = [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Svelte', value: 'svelte', disabled: true },
    { label: 'Vue', value: 'vue' },
  ];
  return (
    <Select.Root items={items}>  {/* Using unstyled root works just fine */}
      {/* <Select.StyledRoot items={items}> This breaks with the error shown on top */}
      <Select.Label>Framework</Select.Label>
        <Select.Control>{/* ... */}</Select.Control>
        <Select.Positioner>{/* ... */}</Select.Positioner>
      {/* </Select.StyledRoot> */}
    </Select.Root>
  );
};

Link to Reproduction

https://stackblitz.com/edit/github-rwgrxp?file=src%2Fapp.tsx,src%2Fcomponents%2Fui%2Fselect.tsx,src%2Fcomponents%2Fframework-select.tsx

[Christian Schröter]

This could be related chakra-ui/panda#2156

[Segun Adebayo]

I tested this against the Vite (Solid) and saw no errors. It must be SolidStart related.

CleanShot.2024-02-07.at.09.53.23.mp4

It sounds like an odd error from Solid.js Internals or our internal mergeProps implementation.

Not related to Panda or Zag.js

[Christian Schröter]

@segunadebayo

Can confirm that Storybook (Vite) works just fine.

The issue only occurs if thestyled funcion from Panda is used. Maybe it is a combination of some factors. I'm not sure what I should do in Ark with this issue.

[Erik Müller]

After upgrading to @pandacss/dev@0.30.2 I still get the same error. I'm not sure if the new release should fix this error or only chakra-ui/panda#2156.

[Erik Müller]

I didn't see Solid's error overlay before (because of my custom error boundary) - it gives away a lot more: the issue seems to be related to the toArray function in Zag.

[Christian Schröter]

The current as prop in Solid is not ideal. The previous example has multiple issues, mostly related to merging multiple types (ButtonProps + DialogTriggerProps + HTMLButtonElement), leading to a slow and, in some cases, non-functional current solution.

// Before
<Button as={Dialog.Trigger} variant="solid" size="sm">
  Open Dialog
</Button>

// After
<Dialog.Trigger asChild>
  {(props) => (
    <Button
      {...props({ onClick: () => console.log('merge events') })}
      variant="solid"
      size="md"
    >
      Open Dialog
    </Button>
  )}
</Dialog.Trigger>

Even though the new proposal is a bit more verbose, it actually works and solves all the issues mentioned above. Please also bear in mind that you can still use this approach to avoid the asChild setup altogether:

// Alternative, good for Tailwind, Bootstrap, DaisyUI, etc.
<Dialog.Trigger class="btn">Open Dialog</Dialog.Trigger>

// Alternative for Panda, Stylex
<Dialog.Trigger class={button({ size: '2xl', variant: '' })}>Open Dialog</Dialog.Trigger>

This change is breaking and will be available in v3 for Solid.js

[Christian Schröter]

Will be resolved with #2331