[sitecore-jss-react] [sitecore-jss-nextjs] Add support for chrome's hydration for fields #1773
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ata component - wip
…; include unit tests
…nclude unit tests
…ss-nextjs; component update
…k field component
…nents; add unit test
ambrauer
reviewed
Apr 15, 2024
| @@ -35,6 +37,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>( | |||
| return null; | |||
| } | |||
|
|
|||
| // when metadata is present, render it to be used for chrome hydration | |||
| if (metadata) { | |||
There was a problem hiding this comment.
We need to continue to respect the (user-defined) editable prop for all of these
Suggested change
| if (metadata) { | |
| if (metadata && editable) { |
art-alexeyenko
requested changes
Apr 15, 2024
illiakovalenko
requested changes
Apr 16, 2024
| ) => { | ||
| const attributes = { | ||
| ...defaultAttributes, | ||
| ...props.htmlAttributes, |
There was a problem hiding this comment.
Trying to figure out. I think you don't really need to be able to customize code tag attributes, they are the same for all fields, so we can just hardcode and use default attributes, type, chrometype, className, kind.
|
|
||
| export const getFieldMetadataMarkup = (metadata: FieldMetadata, children: any) => { | ||
| const props: FieldMetadataComponentProps = { | ||
| data: JSON.stringify(metadata), |
There was a problem hiding this comment.
let's just call it as a metadata
|
|
||
| /** The field metadata */ | ||
| export interface FieldMetadata { | ||
| contextItem?: FieldMetadataContextItem | null | undefined; |
There was a problem hiding this comment.
I see that all the properties have a type: | null | undefined.
Did you ask somebody about type of values that can be passed? Initially, I thought that if metadata is provided, so all the values should be present, not really sure if they are optional. These properties are required for Pages
| export { | ||
| FieldMetadata, | ||
| FieldMetadataComponent, | ||
| FieldMetadataComponentProps, |
There was a problem hiding this comment.
I'm wondering if we even need to expose metadata related types. Essentially, they are our internals and shouldn't be used by customer directly.
We just need to export getFieldMetadataMarkup if it's possible
CHANGELOG.md
Outdated
| @@ -11,6 +11,9 @@ Our versioning strategy is as follows: | |||
|
|
|||
| ## Unreleased | |||
|
|
|||
| ### 🎉 New Features & Improvements | |||
| * `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case FieldMetadaComponent should be rendered instead of the actual field component to enable chrome's hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs. ([#1773](https://github.com/Sitecore/jss/pull/1773)) | |||
There was a problem hiding this comment.
Suggested change
| * `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case FieldMetadaComponent should be rendered instead of the actual field component to enable chrome's hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs. ([#1773](https://github.com/Sitecore/jss/pull/1773)) | |
| * `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case FieldMetada should be rendered instead of the actual field component to enable chrome's hydration when editing in Pages. Ability to render metadata has been added to the field rendering components for react and nextjs. ([#1773](https://github.com/Sitecore/jss/pull/1773)) |
|
@yavorsk I'm still struggling regarding adding forwardRef for all the components, even if they are not using ref. Regarding type definition - it's a breaking change, I think |
8 tasks
8 tasks
yavorsk
added a commit
that referenced
this pull request
May 23, 2024
* [sitecore-jss-react] [sitecore-jss-nextjs] Add support for chrome's hydration for fields (#1773) * render field metadata for Text field component; introduce field metadata component - wip * rename FieldMetadata module, add unit test for Text component, add comments * add field metadata component to Date, Image and File field components; include unit tests * add field metadata component to link and richtext field components, include unit tests * update FieldMetadata interfaces to prevent build errors in sitecore-jss-nextjs; component update * export fieldmetadata component and interfaces from sitecore-jss-react * add metadata component for nextjs link field component; include unit test * add field metadata component to nextimage component; small fix in link field component * unit tests for FieldMetadata * update unit test * introduce getFieldMetadataMarkup function and used in the field components; add unit test * update changelog * react - use higher order component to wrap metadata around field components * update nextjs components to use metadata wrapper hoc; aadjust unit tests * adjust unit tests and fix File component * adjust image field tests; include check for media property in metadata wrapper * some types updates * some unit tests adjustments and metadata wrapper component update * some FieldMetadata related renamings * add unit test for RichText nextjs component * update changelog * update changelog pull request * some type updates * reenable file tests * update function description Co-authored-by: Illia Kovalenko <[email protected]> * minor variable renaming Co-authored-by: Illia Kovalenko <[email protected]> * remove unnecessary commented line * remove unnecessary undefined check * move FieldMetada interfaces to base package; extract metadata proptypes * move FieldMetadata under enchancments * added some descriptions * move and rename FieldMetadata to layout submodule of base package * rename FieldMetadata component * add tsdoc description for fieldmetadata component * conditionally forwardRef in fieldMetadata * two separate withFieldMetadata functions based on if used with forwardRef * single withFieldMetadata function with forwardref parameter * update with metadata unit test to test the whole structure of markup * withMetadata refactoring wip * Adjusted withFieldMetadata generic type * update unit test * wip - refactor field metadata hoc * Updates * Updated unit tests, simplified types * Update * Expose withFieldMetadata as a part of nextjs sdk * Updated PropTypes * Removed extra asserts * remove media property from propTypes --------- Co-authored-by: Illia Kovalenko <[email protected]> Co-authored-by: illiakovalenko <[email protected]> * [sitecore-jss-react] [Editing Integration] Add support for chrome hydration for Placeholders (#1776) * conditinally emit edit chromes metadata for placeholders, rendering * refactor PlaceholderWithMetadata component * update tests * update changelog * remove extra lines * remove editMode mock data * update unit test, change code tag chrometype * remove only * refactor as per new requirements * Update packages/sitecore-jss/src/layout/models.ts Co-authored-by: Illia Kovalenko <[email protected]> * Update packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Co-authored-by: Illia Kovalenko <[email protected]> * Update packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Co-authored-by: Illia Kovalenko <[email protected]> * Update packages/sitecore-jss-react/src/components/PlaceholderMetadata.tsx Co-authored-by: Illia Kovalenko <[email protected]> * Update CHANGELOG.md Co-authored-by: Illia Kovalenko <[email protected]> * refactor unit test * change naming of props and types * add test for placeholder * update PlaceholderMetadata to render a component * add test for missing component * fix nextjs placeholder * remove context * reset nextjs placeholder * update changelog * update test data * change PlaceholderMetadata implmentation * Placeholder metadata refactor - wip * update tests, refactor Placeholder component * remove redundant data * update unit test - wip * move tests to placeholder, refactor placeholder * refactor tests * refactor placeholdermetadata component, update tests * refactor placeholder tests, update jsdoc * update nextjs types * remove keys from code * fix nextjs placeholder props * change deprecated statement * update deprecated 2 --------- Co-authored-by: Illia Kovalenko <[email protected]> Co-authored-by: yavorsk <[email protected]> * [templates/nextjs-sxa] SXA components has been reworked with supporting metadata (#1788) * [templates/nextjs-sxa] SXA components has been reworked with supporting metadata approach --------- Co-authored-by: Ruslan Matkovsky <[email protected]> * [Editing Integration] Placeholder chromes hydration (Update - Part 2) (#1792) * fix unit tests, update upgrade guide * update changelog * update missing component test * remove only * update changelog, upgrade guide * remove only * Update CHANGELOG.md Co-authored-by: Illia Kovalenko <[email protected]> * Update CHANGELOG.md Co-authored-by: Illia Kovalenko <[email protected]> * Update CHANGELOG.md Co-authored-by: Illia Kovalenko <[email protected]> * refactor placeholder tests * update changelog --------- Co-authored-by: Illia Kovalenko <[email protected]> * [sitecore-jss-react] [sitecore-jss-nextjs] Reconciled withSitecoreContext and Placeholder types (#1797) * [sitecore-jss-react] [sitecore-jss-nextjs] Reconciled withSitecoreContext and Placeholder types * Reuse default _editable_ value in withFieldMetadata component * Updated CHANGELOG * Updated props param * Remove extra type * Remove generic in Styleguide-Layout-Tabs * [Editing Integration] Render clientScripts / clientData (#1800) * [Editing Integration] Render clientScripts / clientData * Updated upgrade guide, changelog --------- Co-authored-by: Illia Kovalenko <[email protected]> Co-authored-by: illiakovalenko <[email protected]> Co-authored-by: Addy Pathania <[email protected]> Co-authored-by: Ruslan Matkovskyi <[email protected]> Co-authored-by: Ruslan Matkovsky <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description / Motivation
This PR introduces FieldMetadata component and functionality to render it when
metadatafield property is provided in the field's layout data. In such case the field component is wrapped with metadata markup to enable chromes hydration when editing in pages.Ability to render metadata has been added to the following field components:
Testing Details
Types of changes