CButton variant is not reactive

[carwack]

Bug report

Describe the bug

To reproduce

1. Create a variant for the Button component
2. In the template have the 'variant' prop dynamic
3. Switch to another variant name
4. See error

Minimal reproduction

https://codesandbox.io/s/charka-ui-vue-chidori-test-playground-0zl73?file=/src/App.vue

Expected behavior

I would expect the variant to change into the new variant on runtime. This does work with props like 'color'.

Additional context

It possibly has to do with the reactivity of the variant prop

[thecalamiity]

size as well

[NeOMakinG]

Hello,

I wanted to contribute because I would love to see Chakra for Vue 3, but I faced a lot of problems after installing the project, the playground doesn't want to start for example:

error when starting dev server:
Error: Build failed with 3 errors:
node_modules/vite/dist/node/chunks/dep-f5552faa.js:30629:10: error: [plugin: vite:dep-scan] Failed to resolve entry for package "@chakra-ui/c-alert". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "@chakra-ui/c-alert". The package may have incorrect main/module/exports specified in its package.json.
node_modules/vite/dist/node/chunks/dep-f5552faa.js:30629:10: error: [plugin: vite:dep-scan] Failed to resolve entry for package "@chakra-ui/c-breadcrumb". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "@chakra-ui/c-breadcrumb". The package may have incorrect main/module/exports specified in its package.json.
node_modules/vite/dist/node/chunks/dep-f5552faa.js:30629:10: error: [plugin: vite:dep-scan] Failed to resolve entry for package "@chakra-ui/c-code". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "@chakra-ui/c-code". The package may have incorrect main/module/exports specified in its package.json.
    at failureErrorWithLog (/Users/neomaking/projet/chakra-ui-vue-next/node_modules/vite/node_modules/esbuild/lib/main.js:1493:15)
    at /Users/neomaking/projet/chakra-ui-vue-next/node_modules/vite/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/Users/neomaking/projet/chakra-ui-vue-next/node_modules/vite/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/Users/neomaking/projet/chakra-ui-vue-next/node_modules/vite/node_modules/esbuild/lib/main.js:1149:7)
    at /Users/neomaking/projet/chakra-ui-vue-next/node_modules/vite/node_modules/esbuild/lib/main.js:1258:14
    at /Users/neomaking/projet/chakra-ui-vue-next/node_modules/vite/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/Users/neomaking/projet/chakra-ui-vue-next/node_modules/vite/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/Users/neomaking/projet/chakra-ui-vue-next/node_modules/vite/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (events.js:315:20)
    at addChunk (_stream_readable.js:309:12)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Edit:

Managed to launch the playground by building before, but I've another error...

[Shyrro]

Hi @carwack ,

This issue seems to be wider than just the CButton, it is in other components as well.

As you can see in this sandbox :

https://codesandbox.io/s/charka-ui-vue-chidori-test-playground-forked-f8h0c2?file=/src/App.vue

The theming props reactivity for CButton, CAlert and CBreadcrumb is not working.

The issue seems to come from this line in the useStylesConfig composable :

https://github.com/chakra-ui/chakra-ui-vue-next/blob/7bdd60f56e83161bf500d7d4b89ab2356ce47e0c/packages/system/src/composables/use-style-config.ts#L26

In components where it works, we pass the props object directly, which the computed is able to track. In components where it doesn't work, we actually pass the unwrapped value of a computed, which is a plain object and therefore the computed is unable to track.

Also, there are cases where we might think it works but it's trickier, the CCode for example :

https://github.com/chakra-ui/chakra-ui-vue-next/blob/7bdd60f56e83161bf500d7d4b89ab2356ce47e0c/packages/c-code/src/code.ts#L29

We can notice that it's working, but in reality, it is not, because if we look closely, the code is called inside the render function instead. So what happens is that anytime a prop changes, everything inside the render function will be rerun, so the computed is still not working as we would like, but since we rerun everything as if the component is new, it works.

I started working on it to correct it, i will open a PR soon.