Added Base Package.json Page

[AlexanderKaran]

PR 1/3

I built the full functionality and the PR would have been huge, so to keep things simple and easy to review, I have broken things up. Also learning Svelte and more can go wrong in one huge PR

First PR covers the paste in package.json; second, the local file; and third, the remote file. I have not linked this page on the homepage until we add all functionality, unless you want me to.

• Turned the submit form button into a component to re-use
• Built form for submitting package.json
• Display results of scan
• Auto submit on paste
• Added e2e test
• Links to the details page for each package

I scaled the UI back from the demo to keep it simple and to the point.

Mobile view

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	module-replacements-app	2e53cc2	May 10 2026, 12:30 PM

[43081j]

i think an input is the wrong choice of form control.

we're basically either:

• drag/dropping a file
• pasting a file
• pasting text

so i'd actually just have a drop zone and a paste handler on the window.

that way if i paste something in the page in general, it gets "dropped". meanwhile, if i drag/drop onto the dropzone, it also gets dropped.

[43081j]

it'd be nice to reword this to be a bit more of a celebration message.

maybe we can even style it like a success message some way. so its more like "No replaceable dependencies were found. Your package is clean! 🎉 " but better wording

[AlexanderKaran]

I actually had a gift in here but removed as I thought it was too silly.

Will make it a celebration.

[AlexanderKaran]

@43081j How is this

[AlexanderKaran]

Added the internet 90s kid lol maybe to fun

[43081j]

I'd maybe make the subtitle something more like "Your dependencies look good!"

The meme is good fun 😄 but let's see what the others think

[AlexanderKaran]

Wording changed will wait to see what the others say

[AlexanderKaran]

i think an input is the wrong choice of form control.

we're basically either:

• drag/dropping a file
• pasting a file
• pasting text

so i'd actually just have a drop zone and a paste handler on the window.

that way if i paste something in the page in general, it gets "dropped". meanwhile, if i drag/drop onto the dropzone, it also gets dropped.

Sorry @43081j missed this comment.

So this is actually based on NPMGraph, which uses an input. This is just the first PR, which does paste package.json. In the second PR, we will drag or paste in a local file. It will come with a drop zone and some changes but around the input like NPMGraph.

Happy to change if you do not like. I tested there out and liked it so copied it lol

[43081j]

npmgraph doesn't paste into the input, though.

the handler picks it up regardless of what is focused. the input is just used to search by name.

so im agreeing with what npmgraph does, but we don't need a search in our case, which is why i think a dropzone rather than an input makes more sense even beyond this PR

[paoloricciuti]

Not able to review yet but just to chime in, I think we should have an input there for the users who are still loading JS

[paoloricciuti]

Just as an additional comment: once we switch to remote functions it could be useful to also extract the logic to find the replacements and use the enhance method so that if JS is enabled we don't go to the server and we just do the same logic on the client.