Interactive Query Building

Discover more in your dependencies, without learning the syntax.

tl;dr

• The GUI has changed a lot since we last covered it, it’s more refined and easier to navigate.
• You can now interactively create queries in the GUI without having to know our dependency selector syntax.

Why Though?

In modern JavaScript projects, and especially in large monorepos, your dependencies form an ever-evolving and complex tree structure.

In fact, the core of our GUI experience is built on a CSS-like syntax we call DSS (Dependency Selector Syntax).

Unlocking Insights

With DSS, you can query your dependencies to unlock insights like:

1. Which dependencies are outdated?
2. Where are my peer dependencies?
3. What depends on react?
4. Which workspace packages include mismatched versions of a library?

Until now, answering these questions required knowing DSS. DSS is powerful, it lets you traverse your project’s dependency tree with precision. But we also know that not everyone wants to memorize selectors, especially when just getting started with vlt. There had to be an easier way.

How It Works

Focus on the query bar, and the Query Builder UI expands beneath it (shown by default whenever the bar is active).

You’ll also notice a new “expand” icon on the right. Click it to toggle the Query Builder UI on or off.

The Query Builder breaks down a query into human-readable tokens, so it’s clear what each part is doing.

On the left, there’s a “+” button. Clicking it opens a dropdown with all supported selectors. You can search for whatever you want to query. Hovering over an option reveals a description of what that selector does.

How To Use It

Let’s walk through a few examples, starting simple and moving to more advanced.

Easy

I want to find outdated dependencies that are direct children of my project.

Instead of typing out :root > :outdated(any)

Intermediate

I want to see all dev dependencies that include eslint in their name.

Typing this one out: :dev :attr([name*="eslint" i])

Advanced

I want to find all production dependencies that contain React in the name, and only show the ones that are outdated.

Don't bother with: :prod :attr([name~="react" i]) ~ :outdated(any)

Each of these can be composed visually, step by step, without ever touching the syntax.

What’s Next For Queries?

Composing queries visually is a big step for discoverability inside your node_modules. The next step is taking action on those results. Soon you’ll be able to compose queries visually and then, with a single click, apply modifiers or overrides.