govuk-react vs govuk-react-jsx

[nosnickid]

govuk-react/govuk-react is a work in progress module, that uses styled components to recreate the govuk design system.

surevine/govuk-react-jsx is more mature, and seems like a better way to use the design system.

[nosnickid]

Having some hassle with server side rendering on govuk-react when it tries to import an image.

Looking at why it works with custom components / volto core fine, but not gouk-react.

[nosnickid]

surevine/govuk-react-jsx#107 seems related

[nosnickid]

The 'packaging' used by govuk-react-jsx (surevine/govuk-react-jsx#112) as a UMD is what breaks server side rendering.

We worked around this by using mrsdeveloper to pull govuk-react-jsx sources into our dev setup. Fine for now.

Eventually it might be worth trying to tweak how govuk-react-jsx is packaged to avoid this.

[ljcoulson]

Below is a summary of the key reasons we decided to move away from the govuk-react package to govuk-react-jsx.

• Markup generated is identical to GOVUK Nunjucks macros. Allows us to benefit from the learnings from GDS and includes accessibility enhancements such as aria tags.

• Upstream govuk-frontend CSS/JS changes are pulled into the package automatically.

• Props are more in keeping with GOVUK Nunjucks components so will be more familiar to developers with prior experience of working with Nunjucks macros.

• govuk-react is implemented using styled components which can add unnecessary complexity. govuk-react-jsx Makes use of existing GOVUK CSS classes which is a much simpler approach.

[nosnickid]

This is now merged to main, all good.

[nosnickid]

We ought to be able to drop this if govuk-react-jsx move away from UMD packaging

[ajtucker]

We ought to be able to drop this if govuk-react-jsx move away from UMD packaging

@nosnickid can you raise this upstream, if you haven't already?

[andymantell]

The packaging side of things always makes my head explode 😆

Help me help you - what is it you're looking for? Can you raise an issue on the govuk-react-jsx backlog setting out what problems you're having and how you would like me to fix it?

Thanks!

[nosnickid]

Yeah JS packaging is an 'interesting' area.

I'll undo the workaround we used locally and see what I can put together.

[andymantell]

Thanks. I've opened surevine/govuk-react-jsx#148 to look at this. If you could stick any thoughts or findings you have in there that would be great.