Compare the size of multiple packages #202

gokulkrishh · 2019-08-08T17:02:20Z

Done:

This is initial idea only from @egoist from this issue styfle/packagephobia#133 . I believe we can improve it. @styfle let me know your thought :)

Idea:

An option to search multiple package in search with comma.
New package search in search bar will now show compare button to compare packages.
After clicking search, if the values in search bar are comma separated the page will go to compare packages page.

Attaching a screenshot and GIF for reference on how it works.

Screenshot:

GIF:

gokulkrishh · 2019-08-08T17:03:51Z

Related: #78

styfle · 2019-08-08T22:18:00Z

This looks really cool!

gokulkrishh · 2019-08-09T09:00:40Z

@styfle Awesome 👍

rajasekarm · 2019-08-09T11:13:29Z

client/components/AutocompleteInput/AutocompleteInput.js

    }
  }

+  handleInputChange = ({ target }) => {
+    const { value } = target;
+    this.setState({ value: target.value  });


value is already destructured from the target. can we do this.setState({ value })?

Yep my bad. I didn't notice it.

rajasekarm · 2019-08-09T11:14:07Z

client/components/AutocompleteInput/AutocompleteInput.js


-    if (trimmedValue.length > 1) {
-      this.getSuggestions(name)
+    if (value === item.package.name) return


; at the end.

gokulkrishh · 2019-08-09T12:41:27Z

@styfle Hey can you check the implementation, ui and let you know. If all good you can merge it else we can do some improvements or any changes :)

styfle · 2019-08-09T19:08:48Z

@gokulkrishh I don't own this repo 😄

Perhaps you are confusing Bundle Phobia and Package Phobia? 😉

https://github.com/styfle/packagephobia

gokulkrishh · 2019-08-10T05:14:11Z

@styfle Yep my bad. I meant to ask @pastelsky

gokulkrishh · 2019-08-16T04:07:41Z

@pastelsky Did you checked my PR ?

pastelsky · 2019-08-19T08:51:46Z

Hey @gokulkrishh , thanks for sending out this PR.
First thoughts on this feature – I love it. I think this plays nicely with the package.json scan UI you've used to display the results of multi-package searches.

Also the use of , to delimit packages is exactly how we form the URL, which is good.

A few questions for you –

Can I still specify specific versions of packages? Eg. Can I enter [email protected], [email protected] in the search box? If yes, how do we handle highlighting of versions?

I'm not sure the current search box is going to scale well for entering multiple packages – package names can get very long, and they get even longer with version numbers. Mobile is a different game altogether.
We might need a better UX for cumulating the package names – either as chips inside the search box, or a different way.

Also, let's discuss solutions before you spend more effort working on code.

gokulkrishh · 2019-08-19T12:28:35Z

@pastelsky. I'm glad you liked it.

Yes i followed , separated delimiter based on how it already works.

And regarding your questions

Question 1: Good question 👍, as of now user have to manually enter the version number in search box once he/she finds the result in autocomplete and can compare like the same. I think no new changes required to make this happen.

Screenshot:

Question 2: Yes like you said, ux is not that great because the input box scale's down and its hard to read pkg names in input box if its more than 5 pkg's
Screenshot:

We might need a better UX for cumulating the package names – either as chips inside the search box, or a different way. - yes exactly we need to find a better ux to represent the compared pkgs in search page.

Initially I was thinking we should have tags in input box or below input box for comparing packages.

Example from dribble:

Screenshot:

But not so sure that would be great. Let me know your thoughts too. I will try to come up with other ideas and see what will work best for bundlephobia.

pastelsky · 2019-08-20T08:23:16Z

@gokulkrishh

Yes, the version numbers can be entered manually, but notice that the syntax highlighting is off when multiple packages are entered.
Let's limit the maximum number of packages here to 3 here then.

pastelsky · 2019-08-20T08:24:41Z

Also, when does the compare label show up in the auto-suggestions? Are they always there, or they appear after you enter the first ,? The latter would be preferable.

gokulkrishh · 2019-08-20T10:31:16Z

@pastelsky

yes it is off when there are more. I will fix it.
2.Sure we can do that. If people ask for more then probably we can add more to limit.

Plus i have to see how it looks in mobile view and fix that too.

Last Q:

Yes, compare button comes when user add's , next to package.

gokulkrishh · 2019-08-21T01:48:20Z

I have added limit in above commits and some fixes for mobile screen.

But issue version numbers syntax highlighting is yet to be fixed.

gokulkrishh · 2019-08-26T13:14:14Z

@pastelsky Hey, i have added some changes to support highlight @ for multiple packages.

Screenshot:

Can you take a look into the pr and let me know if this looks good. Test for util is pending which i will write once everything is okay.

gokulkrishh · 2019-09-04T09:04:04Z

@pastelsky Did you got time to check the latest changes ??

pastelsky · 2019-09-06T11:39:24Z

I've been pushing a slightly large refactor of Bundlephobia — adding a few new APIs and restructuring some code over the last few days, hence wanted to hold this off incase that required a revert. I'll do a second pass and probably rajde a couple of small UI improvements to this (if you don't mind) and merge it then. Again, thanks for your patience.

…

On Wed, Sep 4, 2019, 2:34 PM Gokulakrishnan Kalaikovan < ***@***.***> wrote: @pastelsky <https://github.com/pastelsky> Did you got time to check the latest changes — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#202?email_source=notifications&email_token=ACEIEHZRRJSZPB4WGLVKTF3QH52YNA5CNFSM4IKMURNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD524NJQ#issuecomment-527812262>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACEIEH7UZBJDHAYJUBZRBRDQH52YNANCNFSM4IKMURNA> .

gokulkrishh · 2019-09-06T13:23:07Z

@pastelsky Sure. I dont mind at all. This feature is much need one and it can wait till your refactoring and ya change the UI if it need improvements ;)

mesqueeb · 2019-11-14T03:24:23Z

I just want to chip in, I also can't wait for this feature! It will improve the lives of many developers; leading to better websites; leading to a better internet!

okikio · 2021-06-20T23:10:50Z

What happened to this pull request?

mesqueeb · 2025-02-25T08:15:05Z

yes!!! it was approved!!!

gokulkrishh added 2 commits August 7, 2019 22:37

Add option to compare packages in search

ea33094

Add option to compare packages in search

130d198

rajasekarm reviewed Aug 9, 2019

View reviewed changes

Addressed some PR comments & tweaked the search

26c9eb2

gokulkrishh added 2 commits August 20, 2019 18:39

Limit comparing packages features to 3 packages

452c0f8

Fixes for compareing in mobile screen

03d21be

Fix to highlight multiple packages @ version

2c2ce24

styfle mentioned this pull request Nov 14, 2019

Compare the sizes of multiple packages and analyze package.json styfle/packagephobia#441

Merged

pastelsky mentioned this pull request Jan 25, 2021

user-friendlier search when comparing packages #240

Open

pastelsky force-pushed the bundlephobia branch 2 times, most recently from 8dd12c5 to 5efa4b7 Compare June 6, 2021 11:22

pastelsky force-pushed the bundlephobia branch 2 times, most recently from 7572841 to 1d11eaf Compare June 6, 2021 11:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compare the size of multiple packages #202

Compare the size of multiple packages #202

gokulkrishh commented Aug 8, 2019 •

edited

Loading

gokulkrishh commented Aug 8, 2019

styfle commented Aug 8, 2019

gokulkrishh commented Aug 9, 2019

rajasekarm Aug 9, 2019

gokulkrishh Aug 9, 2019

rajasekarm Aug 9, 2019

gokulkrishh Aug 9, 2019

gokulkrishh commented Aug 9, 2019 •

edited

Loading

styfle commented Aug 9, 2019

gokulkrishh commented Aug 10, 2019

gokulkrishh commented Aug 16, 2019

pastelsky commented Aug 19, 2019 •

edited

Loading

gokulkrishh commented Aug 19, 2019 •

edited

Loading

pastelsky commented Aug 20, 2019

pastelsky commented Aug 20, 2019

gokulkrishh commented Aug 20, 2019 •

edited

Loading

gokulkrishh commented Aug 21, 2019

gokulkrishh commented Aug 26, 2019

gokulkrishh commented Sep 4, 2019 •

edited

Loading

pastelsky commented Sep 6, 2019 via email

gokulkrishh commented Sep 6, 2019 •

edited

Loading

mesqueeb commented Nov 14, 2019

okikio commented Jun 20, 2021

mesqueeb commented Feb 25, 2025

Compare the size of multiple packages #202

Are you sure you want to change the base?

Compare the size of multiple packages #202

Conversation

gokulkrishh commented Aug 8, 2019 • edited Loading

gokulkrishh commented Aug 8, 2019

styfle commented Aug 8, 2019

gokulkrishh commented Aug 9, 2019

rajasekarm Aug 9, 2019

Choose a reason for hiding this comment

gokulkrishh Aug 9, 2019

Choose a reason for hiding this comment

rajasekarm Aug 9, 2019

Choose a reason for hiding this comment

gokulkrishh Aug 9, 2019

Choose a reason for hiding this comment

gokulkrishh commented Aug 9, 2019 • edited Loading

styfle commented Aug 9, 2019

gokulkrishh commented Aug 10, 2019

gokulkrishh commented Aug 16, 2019

pastelsky commented Aug 19, 2019 • edited Loading

gokulkrishh commented Aug 19, 2019 • edited Loading

pastelsky commented Aug 20, 2019

pastelsky commented Aug 20, 2019

gokulkrishh commented Aug 20, 2019 • edited Loading

gokulkrishh commented Aug 21, 2019

gokulkrishh commented Aug 26, 2019

gokulkrishh commented Sep 4, 2019 • edited Loading

pastelsky commented Sep 6, 2019 via email

gokulkrishh commented Sep 6, 2019 • edited Loading

mesqueeb commented Nov 14, 2019

okikio commented Jun 20, 2021

mesqueeb commented Feb 25, 2025

gokulkrishh commented Aug 8, 2019 •

edited

Loading

gokulkrishh commented Aug 9, 2019 •

edited

Loading

pastelsky commented Aug 19, 2019 •

edited

Loading

gokulkrishh commented Aug 19, 2019 •

edited

Loading

gokulkrishh commented Aug 20, 2019 •

edited

Loading

gokulkrishh commented Sep 4, 2019 •

edited

Loading

gokulkrishh commented Sep 6, 2019 •

edited

Loading