cristianbote / goober

🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
https://goober.rocks
MIT License
3.14k stars 119 forks source link

Replace `JSX` with `React.JSX` #595

Closed memark closed 1 month ago

memark commented 1 month ago

The global JSX type is deprecated in React 18.3 and removed in React 19 RC. This PR changes the code to use the supported React.JSX syntax instead.

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
goober-rocks ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 6, 2024 5:06pm
codesandbox-ci[bot] commented 1 month ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

cristianbote commented 1 month ago

Heya @memark thanks for opening this PR. Changes look good, wondering though if this should be a major or minor update? 🤔 If it's minor then types will break for usual versioning?

memark commented 1 month ago

This is the info I could find (which is a bit vague) https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript

Digging through the TS defs I find this

old

declare global {
    /**
     * @deprecated Use `React.JSX` instead of the global `JSX` namespace.
     */
    namespace JSX {
        interface IntrinsicElements {
            ...
        }
    }
}

new

declare namespace React {
    namespace JSX {
        interface IntrinsicElements extends GlobalJSXIntrinsicElements {}
    }
}

interface GlobalJSXIntrinsicElements extends JSX.IntrinsicElements {}

meaning that both references end up in the same place. So not a breaking change I would say.

cristianbote commented 1 month ago

Thanks for looking into it @memark. Looks good, I'll merge and push a new version.

cristianbote commented 1 month ago

Published 2.1.15 https://github.com/cristianbote/goober/releases/tag/v2.1.15

JamiesWhiteShirt commented 2 weeks ago

This change broke the documented workaround for getting types to work with Goober + Preact + Typescript. https://goober.js.org/features/typescript#note-when-using-preact

// preact.d.ts

import JSX = preact.JSX;

This variant seems to do the trick:

// preact.d.ts

namespace React {
  export import JSX = preact.JSX;
}
memark commented 2 weeks ago

Nice find! Seems like a reasonable fix.