Skip to content

PostMessage Cleanup - TodoMVC example (experimental) #509

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

Open
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

flashdesignory
Copy link
Contributor

@flashdesignory flashdesignory commented Apr 21, 2025

This pr uses the todomvc web components workload and enables it for the post message api.
This is similar to what we've done for the news site example.

Benchmark changes

  • translations.mjs moved to the shared folder
  • helper methods are also moved into the above file, to be able to share them

Workload changes

  • installed the shared files (speedometer-utils)
  • updated / cleaned up the build script
  • created a workload-test.mjs file (with the identical test that's in the main test.mjs file)
  • injected an index.js file to enable the postmessage api

chrome:
Screenshot 2025-04-21 at 2 41 54 PM

safari:
Screenshot 2025-04-21 at 2 42 01 PM

todo: cb scores

Copy link

netlify bot commented Apr 21, 2025

Deploy Preview for webkit-speedometer-preview ready!

Name Link
🔨 Latest commit cb3e998
🔍 Latest deploy log https://app.netlify.com/projects/webkit-speedometer-preview/deploys/6830cae68173f40008f4a402
😎 Deploy Preview https://deploy-preview-509--webkit-speedometer-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@flashdesignory flashdesignory marked this pull request as ready for review April 22, 2025 14:41
@flashdesignory flashdesignory changed the title PostMessage Cleanup - TodoMVC example PostMessage Cleanup - TodoMVC example (experimental) Apr 22, 2025
*************************************************************************/
export class BenchmarkConnector {
constructor(suites, name, version) {
this.suites = suites;
Copy link
Member

Choose a reason for hiding this comment

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

Why not use private variables?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Is there a benefit in refactoring? Maybe that's a larger conversation if we want to prefer private variables in our code and might be better to tackle in a separate discussion. This is consistent with the previous example that uses the postMessage api and I rather want to avoid larger changes in a single pr.

@rniwa rniwa self-requested a review April 23, 2025 06:12
Copy link
Contributor

@julienw julienw left a comment

Choose a reason for hiding this comment

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

It looks good to me, but I think this can be somewhat improved.
Tell me what you think!

@flashdesignory flashdesignory requested a review from julienw May 5, 2025 20:03
Copy link
Contributor

@julienw julienw left a comment

Choose a reason for hiding this comment

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

thank you, this looks good to me now


switch (event.data.type) {
case "benchmark-suite":
const params = new Params(new URLSearchParams(window.location.search));
Copy link
Member

Choose a reason for hiding this comment

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

So we're gonna propagate location.search from the main frame to iframe?
Maybe it's easier this one just grabbed params out of top.location.search instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

what's the benefit of doing it this way?

Copy link
Member

Choose a reason for hiding this comment

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

So that we don't have to propagate / forward the query string from the main document to the iframe's document.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it would be nicer to explicitly forward this for debugging purposes. One would easily see the full URL including params for the frame in the network log and could open that separately.

Either approach would be fine.

@flashdesignory flashdesignory mentioned this pull request May 23, 2025
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.

4 participants