obusk / npm-diff.app

📦🔃 Inspect changes between npm packages in a webapp

npm-diff.app

📦🔃 Inspect changes between npm packages in a webapp

Install

npm install

Development

npm run dev

Deployment

Deployed automagically using Vercel

https://npm-diff.app/

License

ISC © Oscar Busk

npm-diff.app's Issues

Autocomplete looks bad when a release has many tags

The tooltip of the service icons does not update when moving from one to another

Redirect in a "middleware"? 🤔

• https://nextjs.org/blog/next-12#introducing-middleware
• https://nextjs.org/docs/api-routes/api-middlewares

Show versions for both a and b on the top of the result page

Should be a nice way to easily compare other versions than the initial ones you are comparing.

Add option to unminify minified files

Some packages only publishes minified code, would be nice to be able to still make a diff of them.

This opens for lot's of issues obviously. This would mean we can't rely on libnpmdiff in the same way we do currently, since we would want to diff the two unminified files. We could look closer at the code of libnpmdiff and then try to replicate it to get a serviceable functionality.

Probably a bit heavy to do automatically for all files? But it would be cached I suppose. Other option is to have some button in the UI to do it on demand in browser and then do a diff between the resulting files.

Conform with official testing docs

https://nextjs.org/docs/testing

Autosuggest in main form

Use route handler for redirects

I've long considered that using the page itself for the redirect is improper and I previously thought that doing it as a middleware (#466). I never did that, and with the successful migration to App router (#703), two things becomes clear.

• Using the page for redirect is no longer good.

  The problem is that when using redirect() from next/navigation, from a server component, the redirection will actually occur programmatically and not using 30X code (As specified in the type doc). This makes sense since server components are streamed to the client and once we get to the redirect() call, the client has already been sent 200 (see).

• Middlewares is the wrong solution

  Middlewares doesn't seem to be the appropiate way to do this with App router, but instead Route Handlers seems to be the appropiate solution.

If we could implement a Route Handler that looks up the canonical URL and redirects, we could probably get snappier redirects, as well as correct 30X codes to help Google indexing.

Autocomplete should handle loss of internet better

Right now it just shows the default values and makes no appearance that the API could not be reached in any way.

Some way to visualize when running npm-diff locally?

Not sure if this would be that doable without any database at all? Possible that hashing the files and then the caching is enough? Will not be a permanent link however...

Code syntax highlighting?

[Feature] Should redirect to static URLs

Trying to view a diff to a tag or semver should be redirected to a static url that can be cached and not have to be regenerated.

https://npm-diff.app/@types/[email protected]...@types/node
https://npm-diff.app/@types/[email protected]
https://npm-diff.app/@types/[email protected]...^2
https://npm-diff.app/@types/[email protected]...~2.3

Should all redirect (temporary redirect code) to https://npm-diff.app/[email protected]@2.3.0, which we know should never change and can be safely cached for very long time.

This is replicating behaviour of unpkg https://unpkg.com/tslib@~2.3/tslib.js, and bundlephobia https://bundlephobia.com/package/tslib@^2

Validate input on start page

We could, preferebly, use some code to verify that the inputs are any of the allowed formats.

Changelog finder

Use ChakraBaseProvider to reduce payload?

https://github.com/chakra-ui/chakra-ui/blob/main/.changelog/v2.4.2.mdx#react-242

Should write out release dates for both releases

On the diff page.

Would maybe be helpful in autocomplete too?

The default path should be used when not specifying any path

Trying to just link to a diff should use sensible defaults.

Fix tooltip background color in dark mode

Going to /<package-name> should show an actual diff

Currently it goes to /<package-name>@1.2.3...<package-name>@1.2.3 which has no diff since they are the same.

We should redirect to a comparison between latest-1 and latest

Related: #702

Optimizations for @types/

Primarily:

• Skip bundlephobia

Possibly:

• Figure out what PRs has been merged? Related #380

Dark mode 🌛

500 when packages can't be found

Example: https://npm-diff.app/[email protected]@0.7.30

Show navigatable list of files in the diff

I'd like to try to stay in line with GitHub, since that is a very established UI that people use every day

Clicking on it uses normal # linking main~20...main#diff-cdb3cf5ab6d69ea205f3f70440f7dfa8d3ca8004a4df799318fdaa6a87be7bcf

Improve NextJS-Chakra interaction

https://github.com/chakra-ui/chakra-ui/blob/main/.changelog/v2.5.0.mdx#nextjs-201
https://github.com/chakra-ui/chakra-ui/blob/main/.changelog/v2.5.3.mdx#nextjs-210

• Link
• Image

Sometimes times out on first try

Should handle if bundlephobia and packagephobia takes too long

Optimize preview data/og

Better UX when there is no differance

If you go to https://npm-diff.app/[email protected]@3.2.4 you currently get

which is not helpful. We should be able to show a better "there is no differance" page.

[Mobile] Tooltip when clicking "diff"

Ignore whitespace?