haroenv / dev-ui

[WIP] Browser UI for npm and yarn (scripts, dependencies …)

dev-ui

I very quickly tried to make scaffolding for a UI on top of npm/yarn, like Sunil Pai suggested.

How to use

Right now it's not published. What you can already try is:

• yarn develop and open localhost:3000
• To try it on another project, run yarn link, switch to the project's root directory and run dev-ui

Todo

• stream output correctly
• get possible scripts (/scripts)
• run script (/scripts/run/:script)
• get installed dependencies (/dependencies)
• install dependency
• remove dependency
• search for dependency (https://github.com/algolia/npm-search)
• UI

Contributors

Thanks goes to these wonderful people (emoji key):

Sunil Pai 🤔	Haroen Viaene 💻 🐛 🚇 🤔 👀 ⚠️	Lucas Azzola 💻 🐛 🚇 🤔 👀 ⚠️ 🔧	ranfdev 💻 🎨 🤔	Raathigeshan Kugarajan 🤔 📦 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

dev-ui's Issues

Add and delete scripts

Bug or a feature

feature

Describe the current situation

scripts can be ran and viewed

How should it be changed

you can add and remove scripts from package.json

Deal with monorepos

Probably we can detect if something is a monorepo by seeing if the parent of the current cwd also has a package.json. In that case we should list all packages in it based on “workspaces” key in it.

project structure

So there's both a server (api) and the static app (the main entry point). I've looked around for a little bit, but I don't really find a clear way on how to make both of those work simply together in both dev and production.

Who has experience in a (as simple as possible) solution, preferably React, backend can be micro or express something else, no big preference. If it's simpler to use e.g. next, how do we do that?

Accessibility of terminal output

Bug or a feature

bug

Describe the current situation

The current terminal theme is very hard to read for foreground colours like yellow. Adding a theme made the output flaky

How should it be changed

Puck accessible foreground or background colours

Naming

The name dev-ui isn't possible to publish because

• devui already exists
• npm-ui also already existed.

What other names could we use?

• yarn-ui also already exists

---

• dependency-ui is free
• package-ui is free
• script-ui is free
• module-ui is free

Open a browser shell instead of a tab

Bug or a feature

feature

Describe the current situation

We open a browser tab, which is nice, but can be confusing to reach to from within browsing if you have a lot open

How should it be changed

1. Get the default browser on the system (with x-default-browser for example)
2. try to spawn a window with as little window chrome as possible

Stream output from terminal commands

I did the very basics of streaming the output of execa, but not correctly I think

1. click on a command name (there should be a "run" button next to it IMO)
2. command starts on the server
3. streams to frontend
4. output continually gets shown in terminal output

• can be done later: colouring

There should be an in-memory storage of the ran scripts, which is removed when the command is done, so .kill() can be called to the command from the frontend

Add and delete packages

The endpoints already exist, but they don't stream (see also #12) correctly yet. The removal of a dependency should be done in the left sidebar, the addition in the Hit component.

There should be an output channel under the adding of dependencies for the output of the add/remove command

Things to do:

• add dependency
• remove dependency
• specify dependency version
• show output on the bottom

Monorepo use case load strategy

Do we:

a. Load all the package.json files (scripts, dependencies) on load
b. Defer until the package is selected from the drop-down.

❓

browser UI

Could be a react app interacting with the node server

first tab: scripts, left the list of all the scripts (/scripts), and if clicked on "run" button it will stream the stdout and stderr to the info to the side. There should be some way to stop as well

second tab: dependencies, left a list of all dependencies (/dependencies) (devdeps in a separate group), right a search for adding dependencies (basically the same as https://codesandbox.io UI, but local)

cc @threepointone

UI Library

A fancy UI can make an impression and I'm a big fan of these two UI libraries because they have a wide set of components that compose together well.

• https://react.semantic-ui.com/introduction
• http://blueprintjs.com/

Would you be open to bringing any of these in or you prefer to build the UI from scratch?

consolidate work

Bug or a feature

feature

Describe the current situation

@alex-saunders is working on the same thing as us, at https://github.com/alex-saunders/npm-ui

How should it be changed

Maybe both projects should be working together?

I like this issue so I will

• contribute with this issue

Files with : in the name make windows freak out

Any particular reason why certain files start with :? Windows having trouble dealing with those files!

Looking for feedback

May be this is not the best place to discuss this so feel free to close this issue.

This is some super fast work in a short amount of time. Keep this going 💯

I've been thinking of ways to create non-electron dev tools like this and I was thinking of putting together a framework to make building these kinds of apps faster.

The framework would basically consists of

• A socket server which would allow you to communicate between the CLI and the Browser UI.
• Easily invoke methods (kind of how remote works in electron) of CLI from Web UI without worrying about handing socket messages and vice versa
• Inbuilt updater which would update the installed module
• Anything that would be useful?

I thought it would be interesting to get your perspective on whether something like that would be helpful or Is it just me thinking it would be useful? 😄