Extended object notation

[mrtamagotchi]

Background

Currently, Twiv only supports flat objects. This is a concious choice to keep a small footprint in the markup.

If we look past this criteria, there could be a benefit in allowing nested objects. This would prevent any possible conflicts in state value names and give us a clearer visual structure.

Possible solution

// These state values would not be possible with current Twiv since values need to be unique
interface MyComponentProps {
    size: "small" | "large"; 
    spacing: "small" | "large";
}

function MyComponent({size, spacing}: MyComponentProps) {
     // We would need to wrap the state props in an object instead of an array...
    const twiv = useTwiv({ size, spacing })

    return (
        <div 
            classNames={twiv({
                // ...but this would solve the state value conflict
                size: {
                    small: "text-sm",
                    large: "text-lg"
                },
                spacing: {
                    small: "pb-1",
                    large: "pb-4"
                }
            })}
        />
    )
}

Uncertainties

I'm a bit hesitant to add this for now due to a number of reasons. The biggest ones are:

• Not sure how big of a problem this is. So far I haven't encountered it in a project. This is however purely anecdotal evidence.
• This could be solved by using two different instances of useTwiv, one for each prop.
• This would bring Twiv closer to CVA, and CVA already exists.
• Ultimately, I don't want to add unused bloat to the lib.