Skip to content

docs(readme): add related project: lighthouse-viewer#11250

Merged
paulirish merged 3 commits into
GoogleChrome:masterfrom
dvelasquez:patch-2
Aug 11, 2020
Merged

docs(readme): add related project: lighthouse-viewer#11250
paulirish merged 3 commits into
GoogleChrome:masterfrom
dvelasquez:patch-2

Conversation

@dvelasquez

@dvelasquez dvelasquez commented Aug 11, 2020 •
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

This PR updates the README.md adding 4 small projects I'm maintaining.

  • lighthouse-viewer: lighthouse-reporter sourcecode packaged as an UMD & ESM npm package, to visualise your JSON reports. The process to copy the code from lighthouse to this package is automated.
  • react2-lighthouse-viewer: This package is a React wrapper of lighthouse-viewer.
  • svelte-lighthouse-viewer: This package is a Svelte wrapper of lighthouse-viewer.
  • vue-lighthouse-viewer: This package is a Vue wrapper of lighthouse-viewer.

Add more options for visualisation of lighthouse JSON reports.

Sourcecode of the projects added: https://github.com/dvelasquez/lighthouse-viewer
Related Issues/PRs

Summary

This change just add 4 new projects to the related projects section.

@dvelasquez
docs(readme): added new related projects
2c5435c 
<!--
Thank you for submitting a pull request!
See CONTRIBUTING.MD for help in getting a change landed.
  https://github.com/GoogleChrome/lighthouse/blob/master/CONTRIBUTING.md
-->

**Summary**
<!-- What kind of change does this PR introduce? -->
This PR updates the README.md adding 4 small projects I'm maintaining.
* lighthouse-viewer: lighthouse-reporter sourcecode packaged as an UMD & ESM npm package, to visualise your JSON reports. The process to copy the code from lighthouse to this package is automated.
* react2-lighthouse-viewer: This package is a React wrapper of `lighthouse-viewer`.
* svelte-lighthouse-viewer: This package is a Svelte wrapper of `lighthouse-viewer`.
* vue-lighthouse-viewer: This package is a Vue wrapper of `lighthouse-viewer`.

<!-- Is this a bugfix, feature, refactoring, build related change, etc? -->

<!-- Describe the need for this change -->
Add more options for visualisation of lighthouse JSON reports.
<!-- Link any documentation or information that would help understand this change -->
Sourcecode of the projects added: https://github.com/dvelasquez/lighthouse-viewer
**Related Issues/PRs**
<!-- Provide any additional information we might need to understand the pull request -->
@dvelasquez dvelasquez requested a review from a team as a code owner August 11, 2020 06:24
@dvelasquez dvelasquez requested review from connorjclark and removed request for a team August 11, 2020 06:24
@googlebot

googlebot commented Aug 11, 2020

Copy link
Copy Markdown

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

What to do if you already signed the CLA

Individual signers
Corporate signers

ℹ️ Googlers: Go here for more info.

@dvelasquez

dvelasquez commented Aug 11, 2020

Copy link
Copy Markdown
Contributor Author

@googlebot I signed it!

@googlebot

googlebot commented Aug 11, 2020

Copy link
Copy Markdown

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

brendankenny
brendankenny reviewed Aug 11, 2020
View reviewed changes

@brendankenny brendankenny 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.

maybe it makes sense to combine the four into a single entry, but call out in the description that there are react, svelte, and vue components included?

@dvelasquez

dvelasquez commented Aug 11, 2020

Copy link
Copy Markdown
Contributor Author

@brendankenny Yes, is one repository with 4 npm packages. That's why I left them separate.
I could change the links to NPM instead where is more clear that are separate packages instead of github, where is a Monorepo/multipackage.

@connorjclark

connorjclark commented Aug 11, 2020 •
edited
Loading

Copy link
Copy Markdown
Collaborator

This is neat, thanks for making and sharing!

Yes, is one repository with 4 npm packages. That's why I left them separate.
I could change the links to NPM instead where is more clear that are separate packages instead of github, where is a Monorepo/multipackage.

They're still all fundamentally the same thing: embedding the report viewer in vanilla JS or some given framework. Can you keep just the link to https://github.com/dvelasquez/lighthouse-viewer, with language in the description that there is support for react, vue, etc... ?

I noticed some issues, so here's some unsolicited issue reporting. :)

image
URL: https://dvelasquez.github.io/lighthouse-viewer/packages/react2-lighthouse-viewer/demo/index.html
(happens when you click on a big category gauge. can't scroll back up)

image
URL: https://codesandbox.io/s/lighthouse-viewer-vanillajs-demo-zw2bj

paulirish
paulirish requested changes Aug 11, 2020
View reviewed changes
Comment thread readme.md Outdated
@dvelasquez @paulirish
docs(readme): merge projects into one
3cda044 
Co-authored-by: Paul Irish <paul.irish@gmail.com>
@dvelasquez

dvelasquez commented Aug 11, 2020 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

This is neat, thanks for making and sharing!

Yes, is one repository with 4 npm packages. That's why I left them separate.
I could change the links to NPM instead where is more clear that are separate packages instead of github, where is a Monorepo/multipackage.

They're still all fundamentally the same thing: embedding the report viewer in vanilla JS or some given framework. Can you keep just the link to https://github.com/dvelasquez/lighthouse-viewer, with language in the description that there is support for react, vue, etc... ?

I noticed some issues, so here's some unsolicited issue reporting. :)

image
URL: https://dvelasquez.github.io/lighthouse-viewer/packages/react2-lighthouse-viewer/demo/index.html
(happens when you click on a big category gauge. can't scroll back up)

image
URL: https://codesandbox.io/s/lighthouse-viewer-vanillajs-demo-zw2bj

Thanks very much for your review. All feedback is welcome! One of the problems I got was with the use of MVP.css, a classless css framework, but because of this, several of the elements of the report itself were override. That's why I'm loading the report inside an iFrame.
So I will drop this framework and use a different one for the demos.
And maybe will make some sense to make some changes in the report itself to avoid involuntary overrides of styles.

@connorjclark connorjclark changed the title docs(readme): added new related projects docs(readme): new related project Aug 11, 2020
@paulirish paulirish changed the title docs(readme): new related project docs(readme): add related project: lighthouse-viewer Aug 11, 2020
@paulirish paulirish merged commit 8320e18 into GoogleChrome:master Aug 11, 2020
radum added a commit to radum/lighthouse that referenced this pull request Aug 13, 2020
@radum
Merge remote-tracking branch 'upstream/master' into master
8554c59 
* upstream/master: (42 commits)
  docs: add Code of Conduct to project (GoogleChrome#11212)
  docs(readme): add related project: lighthouse-viewer (GoogleChrome#11250)
  core(font-size): remove deprecated DOM.getFlattenedDocument (GoogleChrome#11248)
  misc: fix typo in method name (GoogleChrome#11239)
  i18n: make double dollar validation less strict (GoogleChrome#10299)
  misc: rephrase comments to be more inclusive (GoogleChrome#11228)
  misc: tweak gcp scripts to work in google corp (GoogleChrome#11233)
  v6.2.0 (GoogleChrome#11232)
  report: correctly display CLS in budget table (GoogleChrome#11209)
  report: vertically center thumbnails (GoogleChrome#11220)
  i18n: import (GoogleChrome#11225)
  tests: istanbul ignore inpage function (GoogleChrome#11229)
  deps(snyk): update script to prune <0.0.0 and update snapshot (GoogleChrome#11223)
  core(stacks): timeout stack detection (GoogleChrome#11172)
  core(config): unsized-images to default (GoogleChrome#11217)
  core(image-elements): collect CSS sizing, ShadowRoot, & position (GoogleChrome#11188)
  core: add FormElements gatherer (GoogleChrome#11062)
  new_audit: report animations not run on compositor (GoogleChrome#11105)
  tests: update chromestatus expecatations (GoogleChrome#11221)
  deps: update dot-prop secondary dependency (GoogleChrome#11198)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@paulirish paulirish paulirish approved these changes

@connorjclark connorjclark connorjclark approved these changes

+1 more reviewer

@brendankenny brendankenny brendankenny left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

@paulirish paulirish

@connorjclark connorjclark

Labels

cla: yes waiting4reviewer

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@dvelasquez @googlebot @connorjclark @paulirish @brendankenny @devtools-bot