Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[recipes] Handle option field that doesn't exist in config #1337

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

aspirisen
Copy link
Contributor

@aspirisen aspirisen commented Mar 3, 2024

if you pass object with fields that doesn't exist in the variants (i.e. just pass component props as is) - runtime function will fall with exception.

Copy link

changeset-bot bot commented Mar 3, 2024

🦋 Changeset detected

Latest commit: 5d4a9a1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@vanilla-extract/recipes Minor
@fixtures/recipes Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@aspirisen aspirisen changed the title Handle option field that doesn't exist in config [recipes] Handle option field that doesn't exist in config Mar 3, 2024
@askoufis
Copy link
Contributor

askoufis commented Mar 4, 2024

While this change makes sense in theory, I'm keen to understand when this would occur/use cases for this. I suppose if you were taking in recipe options at runtime, and were not validating them, or perhaps ignoring a type mismatch for the recipe function? Or I guess if you were using VE in plain JavaScript.

@aspirisen
Copy link
Contributor Author

aspirisen commented Mar 4, 2024

@askoufis the types are correct, but the runtime function thinks that all fields in the argument object are variants.
For example you have to use props destructure in your component to use only know recipe fields. It would be much easier to pass props argument as is to recipe runtime function

For example:

// VE file
export type TestStyles = RecipeVariants<typeof test>

export const test = recipe({
    variants: {
        $variant: {
            primary: [],
            'primary-light': [],
            outline: [],

            error: [],
        },

        $round: {
            true: [],
        },

        $size: {
            small: {},
            medium: [],
            large: [],
        },

        // more variants
    },
})

// Component file

export interface ComponentProps extends TestStyles {
    // some more props
}

function Component(props: PropsWithChildren<ComponentProps>) {
    // here you will have runtime error "Cannot read properties of undefined (reading '#<Object>')" because of children field
    // but there are no TS error (what is expected behavior)
    return <div className={test(props)}>{props.children}</div>
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants