Skip to content

Use getCmp - #3925

Closed
oliverlloyd wants to merge 13 commits into
mainfrom
oliver/use-gucmp
Closed

oliverlloyd wants to merge 13 commits into
mainfrom
oliver/use-gucmp

Conversation

@oliverlloyd

@oliverlloyd oliverlloyd commented Feb 4, 2022 •

Copy link
Copy Markdown
Contributor

What does this change?

Implement the getCmp function as a replacement for importing the cmp object each time.

Why?

We don't want to repeatedly import the cmp code from the npm lib and there's already a copy of it set on the window object for us to access so we're leaning into this pattern.

@github-actions github-actions Bot added the dotcom label Feb 4, 2022
@oliverlloyd
oliverlloyd requested review from coldlink and tjmw February 4, 2022 12:53
@github-actions

github-actions Bot commented Feb 4, 2022 •

Copy link
Copy Markdown

Size Change: -15.2 kB (-1%)

Total Size: 1.16 MB

Filename Size Change
dotcom-rendering/dist/bootCmp.js 7.56 kB +171 B (+2%)
dotcom-rendering/dist/bootCmp.legacy.js 11.1 kB +172 B (+2%)
dotcom-rendering/dist/cmp.js 0 B -7.51 kB (removed) 🏆
dotcom-rendering/dist/frontend.server.js 300 kB -175 B (0%)
dotcom-rendering/dist/react.js 82.7 kB -3.75 kB (-4%)
dotcom-rendering/dist/react.legacy.js 89.3 kB -3.97 kB (-4%)
dotcom-rendering/dist/SignInGateMain.js 1.84 kB +6 B (0%)
dotcom-rendering/dist/SignInGateMain.legacy.js 1.88 kB +4 B (0%)
dotcom-rendering/dist/YoutubeBlockComponent.js 2.76 kB -80 B (-3%)
dotcom-rendering/dist/YoutubeBlockComponent.legacy.js 2.89 kB -76 B (-3%)
ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1376.js 3.63 kB
dotcom-rendering/dist/1376.legacy.js 3.82 kB
dotcom-rendering/dist/1672.js 3.72 kB
dotcom-rendering/dist/1924.js 4.56 kB
dotcom-rendering/dist/1924.legacy.js 4.7 kB
dotcom-rendering/dist/1983.js 13.8 kB
dotcom-rendering/dist/1983.legacy.js 14.4 kB
dotcom-rendering/dist/2666.js 30.6 kB
dotcom-rendering/dist/3213.js 13 kB
dotcom-rendering/dist/3213.legacy.js 13.2 kB
dotcom-rendering/dist/3215.js 4.88 kB
dotcom-rendering/dist/3215.legacy.js 5.05 kB
dotcom-rendering/dist/3321.legacy.js 28.5 kB
dotcom-rendering/dist/3397.js 240 B
dotcom-rendering/dist/3397.legacy.js 251 B
dotcom-rendering/dist/343.js 3.73 kB
dotcom-rendering/dist/343.legacy.js 3.91 kB
dotcom-rendering/dist/3639.js 5.24 kB
dotcom-rendering/dist/3639.legacy.js 5.42 kB
dotcom-rendering/dist/3777.legacy.js 6.41 kB
dotcom-rendering/dist/4415.legacy.js 3.56 kB
dotcom-rendering/dist/45.legacy.js 3.55 kB
dotcom-rendering/dist/4576.js 235 B
dotcom-rendering/dist/4576.legacy.js 247 B
dotcom-rendering/dist/4850.js 235 B
dotcom-rendering/dist/4850.legacy.js 246 B
dotcom-rendering/dist/4999.js 17.9 kB
dotcom-rendering/dist/4999.legacy.js 18.5 kB
dotcom-rendering/dist/5217.js 233 B
dotcom-rendering/dist/5217.legacy.js 245 B
dotcom-rendering/dist/53.js 4.11 kB
dotcom-rendering/dist/53.legacy.js 4.12 kB
dotcom-rendering/dist/5373.legacy.js 3.58 kB
dotcom-rendering/dist/5585.js 5.2 kB
dotcom-rendering/dist/5585.legacy.js 5.36 kB
dotcom-rendering/dist/602.js 8.66 kB
dotcom-rendering/dist/602.legacy.js 8.92 kB
dotcom-rendering/dist/6348.js 4.58 kB
dotcom-rendering/dist/6348.legacy.js 4.75 kB
dotcom-rendering/dist/6372.legacy.js 3.89 kB
dotcom-rendering/dist/6400.js 21.5 kB
dotcom-rendering/dist/6400.legacy.js 21.5 kB
dotcom-rendering/dist/6684.js 241 B
dotcom-rendering/dist/6684.legacy.js 252 B
dotcom-rendering/dist/6916.js 8.25 kB
dotcom-rendering/dist/6916.legacy.js 8.71 kB
dotcom-rendering/dist/6965.js 2.65 kB
dotcom-rendering/dist/6965.legacy.js 2.71 kB
dotcom-rendering/dist/7051.js 7.22 kB
dotcom-rendering/dist/7051.legacy.js 7.37 kB
dotcom-rendering/dist/7317.js 3.4 kB
dotcom-rendering/dist/7489.js 3.4 kB
dotcom-rendering/dist/7754.legacy.js 3.56 kB
dotcom-rendering/dist/8080.js 3.52 kB
dotcom-rendering/dist/8080.legacy.js 3.7 kB
dotcom-rendering/dist/8294.js 232 B
dotcom-rendering/dist/8294.legacy.js 244 B
dotcom-rendering/dist/8330.js 3.21 kB
dotcom-rendering/dist/8497.js 4.01 kB
dotcom-rendering/dist/8748.js 232 B
dotcom-rendering/dist/8748.legacy.js 243 B
dotcom-rendering/dist/9212.js 3.4 kB
dotcom-rendering/dist/9641.js 5.17 kB
dotcom-rendering/dist/9641.legacy.js 5.34 kB
dotcom-rendering/dist/9776.js 5.09 kB
dotcom-rendering/dist/9776.legacy.js 5.26 kB
dotcom-rendering/dist/9884.js 17 kB
dotcom-rendering/dist/9884.legacy.js 17.3 kB
dotcom-rendering/dist/atomIframe.js 1.87 kB
dotcom-rendering/dist/atomIframe.legacy.js 2.14 kB
dotcom-rendering/dist/braze-web-sdk-core.js 36.1 kB
dotcom-rendering/dist/braze-web-sdk-core.legacy.js 36.1 kB
dotcom-rendering/dist/coreVitals.js 4.03 kB
dotcom-rendering/dist/coreVitals.legacy.js 4.33 kB
dotcom-rendering/dist/dynamicImport.js 3 kB
dotcom-rendering/dist/dynamicImport.legacy.js 3.29 kB
dotcom-rendering/dist/embedIframe.js 1.88 kB
dotcom-rendering/dist/embedIframe.legacy.js 2.14 kB
dotcom-rendering/dist/ga.js 3.88 kB
dotcom-rendering/dist/ga.legacy.js 4.14 kB
dotcom-rendering/dist/guardian-braze-components-banner.js 10.6 kB
dotcom-rendering/dist/guardian-braze-components-banner.legacy.js 10.6 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.js 6.61 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.legacy.js 6.62 kB
dotcom-rendering/dist/initDiscussion.js 7.46 kB
dotcom-rendering/dist/initDiscussion.legacy.js 7.71 kB
dotcom-rendering/dist/InteractiveBlockComponent.js 2.99 kB
dotcom-rendering/dist/InteractiveBlockComponent.legacy.js 3.12 kB
dotcom-rendering/dist/islands.js 7.61 kB
dotcom-rendering/dist/islands.legacy.js 8.36 kB
dotcom-rendering/dist/MostViewedFooterData.js 6.25 kB
dotcom-rendering/dist/MostViewedFooterData.legacy.js 6.34 kB
dotcom-rendering/dist/newsletterEmbedIframe.js 1.83 kB
dotcom-rendering/dist/newsletterEmbedIframe.legacy.js 2.1 kB
dotcom-rendering/dist/ophan.js 7.18 kB
dotcom-rendering/dist/ophan.legacy.js 7.38 kB
dotcom-rendering/dist/readerRevenueDevUtils.js 891 B
dotcom-rendering/dist/readerRevenueDevUtils.legacy.js 952 B
dotcom-rendering/dist/relativeTime.js 2.41 kB
dotcom-rendering/dist/relativeTime.legacy.js 2.68 kB
dotcom-rendering/dist/sentry.js 677 B
dotcom-rendering/dist/sentry.legacy.js 689 B
dotcom-rendering/dist/sentryLoader.js 4.75 kB
dotcom-rendering/dist/sentryLoader.legacy.js 7.71 kB
dotcom-rendering/dist/shimport.js 2.75 kB
dotcom-rendering/dist/shimport.legacy.js 2.76 kB

compressed-size-action

@oliverlloyd oliverlloyd mentioned this pull request Feb 8, 2022
Comment thread dotcom-rendering/src/web/components/SignInGate/displayRule.ts Outdated
@@ -1,94 +0,0 @@
import { hasRequiredConsents } from './hasRequiredConsents';

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Definitely happy for these tests to go if they're not providing value. I can see that they've got some shortcomings and use some patterns I don't love, such as jest mocking at the module level, and they're also leaking some internal implementation details which arguably this test shouldn't care about (disclaimer: I'm pretty sure I wrote these tests!). Maybe there's a way of reworking the tests (or the implementation) to move away from some of these patterns? Would be very happy to pair on this if you're interested!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yes, please. I actually have this task as a todo on this PR (but only in my head/some text document on my laptop - I could probably surface this more!)

I was hoping that there would be a way to implement a Cypress test that verified the UI responded as expected based on different consent settings.

Comment thread dotcom-rendering/src/web/lib/guCmp.ts Outdated
return window.guCmpHotFix;
};

export const guCmp = getCmp();

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think maybe I've just not drunk enough coffee yet this morning but I don't think I've seen an export which exports the result of calling a function before. Can you explain when that getCmp() call will happen? Are these static import/exports not resolved when we're building/compiling the JS asset to ship to the client? Sorry if I'm missing something obvious!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

lol, not sure how I ended up with that pattern! Fixed now.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

In the end I rationalised the approach here to something a bit more semantic; I'm now using getCmp and executing it in the files each time.

@oliverlloyd oliverlloyd changed the title Use guCmp Use getCmp Feb 17, 2022
@sndrs

sndrs commented Feb 17, 2022

Copy link
Copy Markdown
Contributor

this feels very brittle to me – guCmpHotFix is a temporary, internal, undocumented and unsupported implementation detail of the CMP so it can handle being unexpectedly instantiated twice, and liable to disappear without warning

it is 100% not intended to be the public interface (unless this has changed @shtukas @kenoir?)

We don't want to repeatedly import the cmp code from the npm lib

why is this? there should always be only one instance of the code available to DCR? what's the overhead?

there's already a copy of it set on the window object for us to access so we're leaning into this pattern.

as mentioned above, there is but it's undocumented and not intended for external use

@oliverlloyd

Copy link
Copy Markdown
Contributor Author

what's the overhead?

Fair question. And I'm actually super happy for this approach to be challenged in general.

The motivation for this work was rooted in the cmp lib not being server safe so when it's an import that gets evaluated and throws errors whenever we server side render components. We've been getting away with this up to now by using Portals and dynamic imports but with the transition to islands we started to hit this problem much more often (the island version of a Portal evaluates the component on the server).

So, having this window prop solves this in a nice, low effort way but maybe the larger solution is to make cmp server safe?

@ashishpuliyel

Copy link
Copy Markdown
Member

I'm not sure how meaningful it is to have a 'server safe' cmp (since all the meaningful state is clientside). However I wonder if this should be internal to the CMP. As in consumers shouldn't have to worry about getting the instance, or making sure it's the instance it should take care of it itself?

I echo Alex's concern about increasingly relying on something called 'hotfix' but I think the solution is to rename it, formally make the CMP library use it internally, and have it check itself internally on any method call, transparent to rh consumer. And the consumer just calls things blithely, safe in the knowledge that the CMP internally ensures it's refering to a single instance of its state.

I can do a quick mockup of what I'm talking about of I'm not being clear here (my code is sometimes more articulate than I am).

@oliverlloyd

Copy link
Copy Markdown
Contributor Author

Closing now that we have #4126 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants