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

feat: new extension vike-react-styled-jsx #158

Merged
merged 26 commits into from
Dec 16, 2024
Merged

feat: new extension vike-react-styled-jsx #158

merged 26 commits into from
Dec 16, 2024

Conversation

phonzammi
Copy link
Member

Hi Rom, here it is – the new extension vike-react-styled-jsx.

Here, we don't use +onBeforeRenderHtml like we did in vike-react-antd and vike-react-styled-components. Instead, we define pageContext.config.styledJsx directly inside +Wrapper. Do you think it's okay?

I couldn’t find any configuration related to StyledRegistry Server-Side Rendering, except for CSP. Should we add it?

Please have a look and review the PR.

@brillout
Copy link
Member

I couldn’t find any configuration related to StyledRegistry Server-Side Rendering, except for CSP. Should we add it?

👍 Yea it's nice we if can have at least one setting (even if it isn't that useful), so that we can follow the +{tooName}.js convention.

@brillout
Copy link
Member

Left some comments, LGTM otherwise!

@phonzammi
Copy link
Member Author

LGTM, shall we squash & merge it now ?

Co-authored-by: Rom <[email protected]>

The `vike-react-styled-jsx` extension automatically integrates `styled-jsx`'s SSR features under the hood to avoid FOUC. It does this by collecting the page's styles during SSR and injecting them earlier, ensuring that the styles are applied before hydration begins. Learn more in the [styled-jsx README > Server Side Rendering](https://github.com/vercel/styled-jsx#server-side-rendering).

To learn more about how the integration works, have a look at the source code which is small. For full control [consider ejecting](https://vike.dev/eject).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's avoid the "learn more" repetition.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about explore ? a3cde20

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For more details...

(which is small)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay d6e15b5


<br/>

Integrates [styled-jsx](https://github.com/vercel/styled-jsx) to your [`vike-react`](https://vike.dev/vike-react) app.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be before the TOC. Intervention++

@brillout brillout merged commit 2f3dab2 into main Dec 16, 2024
7 checks passed
@brillout brillout deleted the phonzammi/dev branch December 16, 2024 16:59
@brillout
Copy link
Member

Extension++ 🚀 💫

Thank you @phonzammi !

Let's try to minimize Intervention++ a bit for the next extension.

Extensions are part of Vike's window shop 🪟 thus their readme need to be polished.

@phonzammi
Copy link
Member Author

I'm really glad, thank you for your help with the readme. Honestly, it's hard for me to find the right words.

I'll try to minimize Intervention++ next time. 👍

@brillout
Copy link
Member

brillout commented Dec 16, 2024

I know, it takes a while to get good at it (I still ain't).

Looking forward to it. In the meanitme, let's update the Vike doc.

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