Skip to content

Embeds as islands - #3963

Merged
oliverlloyd merged 9 commits into
mainfrom
oliver/embed-islands
Feb 11, 2022
Merged

oliverlloyd merged 9 commits into
mainfrom
oliver/embed-islands

Conversation

@oliverlloyd

Copy link
Copy Markdown
Contributor

What does this change?

Embeds as islands

Why?

Reduced js on the page

@oliverlloyd
oliverlloyd requested review from a team, JamieB-gu and marsavar as code owners February 10, 2022 17:20
@github-actions

github-actions Bot commented Feb 10, 2022 •

Copy link
Copy Markdown

Size Change: -6.4 kB (0%)

Total Size: 1.28 MB

Filename Size Change
dotcom-rendering/dist/343.js 0 B -3.73 kB (removed) 🏆
dotcom-rendering/dist/343.legacy.js 0 B -3.91 kB (removed) 🏆
dotcom-rendering/dist/frontend.server.js 319 kB +220 B (0%)
dotcom-rendering/dist/guardian-braze-components-banner.js 11.9 kB +1.16 kB (+11%) ⚠️
dotcom-rendering/dist/guardian-braze-components-banner.legacy.js 12 kB +1.24 kB (+11%) ⚠️
dotcom-rendering/dist/guardian-braze-components-end-of-article.js 8.11 kB +1.17 kB (+17%) ⚠️
dotcom-rendering/dist/guardian-braze-components-end-of-article.legacy.js 8.18 kB +1.23 kB (+18%) ⚠️
dotcom-rendering/dist/initDiscussion.js 7.68 kB +29 B (0%)
dotcom-rendering/dist/initDiscussion.legacy.js 7.94 kB +30 B (0%)
dotcom-rendering/dist/islands.js 7.83 kB +25 B (0%)
dotcom-rendering/dist/islands.legacy.js 8.57 kB +31 B (0%)
dotcom-rendering/dist/react.js 74.1 kB -2.95 kB (-4%)
dotcom-rendering/dist/react.legacy.js 80.7 kB -2.86 kB (-3%)
dotcom-rendering/dist/SignInGateMain.js 3.56 kB +952 B (+36%) 🚨
dotcom-rendering/dist/SignInGateMain.legacy.js 3.69 kB +970 B (+36%) 🚨
ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1214.js 2.14 kB
dotcom-rendering/dist/1214.legacy.js 2.19 kB
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.57 kB
dotcom-rendering/dist/1924.legacy.js 4.69 kB
dotcom-rendering/dist/2.js 3.81 kB
dotcom-rendering/dist/2.legacy.js 3.93 kB
dotcom-rendering/dist/2058.js 5.25 kB
dotcom-rendering/dist/2058.legacy.js 5.42 kB
dotcom-rendering/dist/262.js 7.25 kB
dotcom-rendering/dist/2666.js 30.8 kB
dotcom-rendering/dist/2727.legacy.js 28.7 kB
dotcom-rendering/dist/2879.js 6.92 kB
dotcom-rendering/dist/2879.legacy.js 7.14 kB
dotcom-rendering/dist/3203.js 8.29 kB
dotcom-rendering/dist/3203.legacy.js 8.76 kB
dotcom-rendering/dist/3213.js 12.9 kB
dotcom-rendering/dist/3213.legacy.js 13.2 kB
dotcom-rendering/dist/3215.js 4.86 kB
dotcom-rendering/dist/3215.legacy.js 5.02 kB
dotcom-rendering/dist/3397.js 240 B
dotcom-rendering/dist/3397.legacy.js 251 B
dotcom-rendering/dist/3729.js 1.28 kB
dotcom-rendering/dist/3729.legacy.js 1.36 kB
dotcom-rendering/dist/4211.js 3.72 kB
dotcom-rendering/dist/4211.legacy.js 3.92 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/4813.js 6.8 kB
dotcom-rendering/dist/4813.legacy.js 6.92 kB
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.4 kB
dotcom-rendering/dist/5096.js 4.67 kB
dotcom-rendering/dist/5096.legacy.js 4.74 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/5585.js 5.26 kB
dotcom-rendering/dist/5585.legacy.js 5.41 kB
dotcom-rendering/dist/6046.js 2.94 kB
dotcom-rendering/dist/6046.legacy.js 3.04 kB
dotcom-rendering/dist/6146.legacy.js 5.85 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/6698.js 3.15 kB
dotcom-rendering/dist/6698.legacy.js 3.23 kB
dotcom-rendering/dist/6965.js 2.64 kB
dotcom-rendering/dist/6965.legacy.js 2.71 kB
dotcom-rendering/dist/6992.js 3.74 kB
dotcom-rendering/dist/6992.legacy.js 3.93 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/7642.legacy.js 9.98 kB
dotcom-rendering/dist/7754.legacy.js 3.56 kB
dotcom-rendering/dist/7800.js 11 kB
dotcom-rendering/dist/8080.js 3.52 kB
dotcom-rendering/dist/8080.legacy.js 3.7 kB
dotcom-rendering/dist/8129.legacy.js 11.5 kB
dotcom-rendering/dist/8294.js 232 B
dotcom-rendering/dist/8294.legacy.js 244 B
dotcom-rendering/dist/831.js 4.14 kB
dotcom-rendering/dist/831.legacy.js 4.45 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/9327.js 3.57 kB
dotcom-rendering/dist/9327.legacy.js 3.75 kB
dotcom-rendering/dist/9641.js 5.23 kB
dotcom-rendering/dist/9641.legacy.js 5.4 kB
dotcom-rendering/dist/9682.js 5.4 kB
dotcom-rendering/dist/9776.js 5.15 kB
dotcom-rendering/dist/9776.legacy.js 5.33 kB
dotcom-rendering/dist/9884.js 17 kB
dotcom-rendering/dist/9884.legacy.js 17.3 kB
dotcom-rendering/dist/9970.js 14.4 kB
dotcom-rendering/dist/9970.legacy.js 14.6 kB
dotcom-rendering/dist/atomIframe.js 1.87 kB
dotcom-rendering/dist/atomIframe.legacy.js 2.14 kB
dotcom-rendering/dist/bootCmp.js 7.39 kB
dotcom-rendering/dist/bootCmp.legacy.js 10.9 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/cmp.js 7.51 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/InteractiveBlockComponent.js 3.03 kB
dotcom-rendering/dist/InteractiveBlockComponent.legacy.js 3.18 kB
dotcom-rendering/dist/newsletterEmbedIframe.js 2.03 kB
dotcom-rendering/dist/newsletterEmbedIframe.legacy.js 2.29 kB
dotcom-rendering/dist/ophan.js 7.18 kB
dotcom-rendering/dist/ophan.legacy.js 7.38 kB
dotcom-rendering/dist/readerRevenueDevUtils.js 892 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
dotcom-rendering/dist/YoutubeBlockComponent.js 2.9 kB
dotcom-rendering/dist/YoutubeBlockComponent.legacy.js 3.03 kB

compressed-size-action

Comment on lines -38 to -46
describe('Ad slot Parity between DCR and Frontend for a long read', function () {
it(`It should check slots for a long article in DCR`, function () {
runLongReadTestFor(`Article?url=${longReadURL}`);
});

it(`It should check slots for a long article in Frontend`, function () {
Cypress.config('baseUrl', '');
runLongReadTestFor(`${longReadURL}?dcr=false`);
});

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.

I removed the Frontend test here because we no longer use Frontend!

cy.scrollTo('bottom');
cy.get(`[data-name="merchandising-high"]`).should('have.length', 1);
// Wait for hydration
cy.get('gu-island[name=MostViewedFooter]')

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I don't understand (help!) - how do embeds impact these tests?

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.

They don't directly. But they started failing and so I fixed them boy scout stylee

'Article?url=https://www.theguardian.com/sport/blog/2015/dec/02/the-joy-of-six-sports-radio-documentaries',
);

cy.scrollTo(0, 4500);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We're scrolling to a specific pixel position - will this always yield the next expected action (which I'm assuming scrolls something into view that then gets hydrated)?

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.

This is the expected behaviour, yes. Once our element is in view it becomes hydrated and we can continue the test verifying it does what we expect. The risk is content on this article moves around but that's unlikely (I hope!)

@DavidLawes DavidLawes left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

👍

@oliverlloyd
oliverlloyd merged commit 96b65d4 into main Feb 11, 2022
@oliverlloyd
oliverlloyd deleted the oliver/embed-islands branch February 11, 2022 15:52
@mxdvl

mxdvl commented Mar 25, 2022

Copy link
Copy Markdown
Contributor

🏝️ #3629

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.

3 participants