🏖 Island - #3784
Merged
Merged
🏖 Island#3784
Island#3784Conversation
oliverlloyd
requested review from
DavidLawes,
OllysCoding,
jlieb10 and
lucymonie
as code owners
December 22, 2021 11:57
Closed
|
Size Change: -14.7 kB (0%) Total Size: 3.14 MB
ℹ️ View Unchanged
|
oliverlloyd
commented
Dec 22, 2021
Comment on lines
+693
to
+694
| [k: `${string}Variant`]: 'variant'; | ||
| [k: `${string}Control`]: 'control'; |
OllysCoding
approved these changes
Dec 22, 2021
OllysCoding
left a comment
Contributor
There was a problem hiding this comment.
+1 Looks good to me :) Would be nice to have an E2E test for subnav!
Contributor
|
I'm guessing this: // Client only
<Island defer="visible" ssr={true} placeholderHeight={440}>
<Onwards />
</Island>Ought to be this: // Client only
<Island defer="visible" ssr={false} placeholderHeight={440}>
<Onwards />
</Island>? I find the What do you think about the following: // Client only
<Island defer="visible" clientOnly={true} placeholderHeight={440}>
<Onwards />
</Island> |
SiAdcock
reviewed
Dec 22, 2021
SiAdcock
reviewed
Dec 22, 2021
SiAdcock
reviewed
Dec 22, 2021
tjmw
reviewed
Dec 22, 2021
…n.md Co-authored-by: Tom W <tom.wey@theguardian.com>
Member
|
Excited to see this progressing, nice work! 🎉 |
…visibility which doesn't work here
Merged
Contributor
|
part of: #3629 |
11 tasks
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
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.
What does this change?
This PR adds the ability to insert an island of interactivity into the client without having to first server side render it. Previously these client side only islands were referred to as 'Portal's but the concept shares so much with 'Hydrate' that it offers a better developer experience to bring them together.
This means this Portal PR can now be closed.
Why?
Some content is only ever rendered on the client, never on the server. Examples include most read, onwards, etc. In these cases we can't server side render and hydrate these components but we still want to benefit from the deferred dynamic import that the old
Hydratecomponent brings.Why rename to
Island?Hydratemade sense when the purpose of the abstraction was to offer hydration, but now we're not just hydrating but rendering content directly instead so we need a name that encompasses both these use cases.Islandis a term widely used in the industry to represent this pattern and benefits from not having any other Guardian related connotations that could be confusing. We also consideredRender,InteractiveandDeferRender.Happy to hear feedback if others have thoughts on this name?
Usage
The api for
Islandis conditional based on the props passed inclientOnlyis set totrue, then this triggers the 'client only portal' flow andplaceholderHeightis requiredclientOnlyis set tofalse, then this triggers the 'server render + hydrate' flow and `placeholderHeight cannot be passed