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

[sitecore-jss-react] Remove use of reactDom/server from React Image #1544

Merged
merged 8 commits into from
Jul 6, 2023

Conversation

addy-pathania
Copy link
Contributor

@addy-pathania addy-pathania commented Jun 29, 2023

Replaced reactDom/server's renderStaticMarkup function with a custom template literals for imgHtml as reactDom/server bloated the client bundle size of the app.

Description / Motivation

Testing Details

  • Unit Test Added
  • Manual Test/Other (Please elaborate)

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

@addy-pathania addy-pathania changed the title [sitecore-jss-react] Remove react-dom/server from client bundle [sitecore-jss-react] Remove reactDom/server from client bundle Jun 29, 2023
@addy-pathania addy-pathania changed the title [sitecore-jss-react] Remove reactDom/server from client bundle [sitecore-jss-react] Remove use of reactDom/server from react Image Jun 29, 2023
@addy-pathania addy-pathania changed the title [sitecore-jss-react] Remove use of reactDom/server from react Image [sitecore-jss-react] Remove use of reactDom/server from React Image Jun 29, 2023
@addy-pathania addy-pathania requested a review from a team June 29, 2023 20:50
@illiakovalenko
Copy link
Contributor

illiakovalenko commented Jun 30, 2023

@sc-addypathania Great finding!
Build is failed, but anyway I started to test using this branch

@illiakovalenko
Copy link
Contributor

@sc-addypathania Don't forget to close related issue #1280 and leave the comment there

packages/sitecore-jss-react/src/utils.ts Outdated Show resolved Hide resolved
packages/sitecore-jss-react/src/utils.ts Outdated Show resolved Hide resolved
packages/sitecore-jss-react/src/utils.ts Outdated Show resolved Hide resolved
packages/sitecore-jss-react/src/utils.ts Outdated Show resolved Hide resolved
packages/sitecore-jss-react/src/utils.ts Outdated Show resolved Hide resolved
packages/sitecore-jss-react/src/components/Image.test.tsx Outdated Show resolved Hide resolved
packages/sitecore-jss-react/src/components/Image.tsx Outdated Show resolved Hide resolved
@addy-pathania addy-pathania linked an issue Jul 5, 2023 that may be closed by this pull request
packages/sitecore-jss-react/src/components/Image.tsx Outdated Show resolved Hide resolved
if (!imgAttrs) {
return getEditableWrapper(imageField.editable);
}

const imgHtml = ReactDOMServer.renderToStaticMarkup(<img {...imgAttrs} />);
const imgHtml = `<img ${getAttributesString(
imgAttrs as { [key: string]: string | number | boolean | Record<string, unknown> }
Copy link
Contributor

Choose a reason for hiding this comment

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

To simplify this cast action, the getAttributesString can accept { [key: string]: unknown }. In this case, you don't need to cast the type, and I'm not sure that it will make getAttributesString more complex, it also can accept the same type

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hmm yes you're right. This simplified it.

packages/sitecore-jss-react/src/utils.test.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@illiakovalenko illiakovalenko left a comment

Choose a reason for hiding this comment

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

Looks good to me 👍

@illiakovalenko illiakovalenko merged commit 028d2ae into dev Jul 6, 2023
@illiakovalenko illiakovalenko deleted the bugfix/579111-nextjs-bundle branch July 6, 2023 14:30
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.

Sitecore JSS react Image incorrectly bundles react-dom/server
2 participants