Jugnu for go_router

Version 1.0.0 · pub.dev · Marketplace · Setup guide · GitHub · sanketmanohar.com

Overview

Jugnu (Hindi for firefly) is an editor extension for Flutter apps that use go_router. It reads your Dart source and shows your routes in one place. It also suggests paths as you type, flags navigation calls that lead nowhere, and produces a route report you can share.

Everything happens inside the editor, from your source files. The app doesn't need to be running, and no build step is required.

Getting started

1. Install the extension. Open the Extensions view (Ctrl+Shift+X on Windows, Cmd+Shift+X on macOS), search for Jugnu, and click Install. To install from a file instead, open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P), run Extensions: Install from VSIX… and pick jugnu-1.0.0.vsix.
2. Open your Flutter project as a folder. It should be the one that contains pubspec.yaml.
3. Click the firefly icon in the activity bar. The Routes view lists every route Jugnu found.
4. Take the tour. The walkthrough opens the first time Jugnu starts. You can open it again with Jugnu: Open Walkthrough.

Requirements: editor version 1.85 or later, on macOS, Windows or Linux. No other setup is needed.

Features

Manual

The Routes view

The tree follows the shape of your GoRouter configuration.

Click a route to open its builder. Right-click a route to copy its path or name, show its usages, add a child route, or convert it to a typed route. The toolbar at the top of the view searches routes, adds a route, opens the diagram, writes a report, and refreshes the view.

Routes kept in other files are joined up as well. For example, if routes: [...authRoutes] refers to a list in auth_routes.dart, those routes show up under the right parent. Paths kept in constants such as path: AppPaths.home are resolved too.

Writing navigation calls

Start typing a string inside a navigation call and the known routes appear:

context.go('/orders/42');
context.push('/settings');
context.goNamed('profile', pathParameters: {'userId': user.id});
GoRouter.of(context).replace('/cart');

A path with parameters, like /orders/:orderId, is inserted with the cursor on orderId so you can type the value straight away.

Problem checks and quick fixes

Problems appear in the Problems panel and as underlines in the editor:

When there's a close match, put the cursor on the underline and press Ctrl+. (Cmd+. on macOS) to apply the fix.

Paths with interpolation, such as '/orders/$id', are matched against parameter segments, so they aren't flagged. If any route path can only be known at runtime, unknown-path checks pause to avoid false warnings.

Moving around the code

The route diagram

Run Jugnu: Show Route Diagram. Solid lines join parents and children, dashed boxes are shell routes and branches, and dashed orange arrows show where redirects can send the user. Drag to move around, scroll to zoom, and type in Find a route to highlight matches. Click a box to open that route.

Export… saves the diagram as SVG or PNG for documents and slides, or as flowchart markup (.mmd) for project wikis.

Adding a route

Click + in the Routes view, or choose Add child route… from the light bulb inside a GoRoute. Jugnu asks for:

1. the path (relative for child routes, for example returns/:returnId)
2. an optional name
3. the widget to show

It then writes the route into the right list, matching your file's indentation:

GoRoute(
  path: 'returns/:returnId',
  name: 'returns',
  builder: (context, state) => ReturnsScreen(returnId: state.pathParameters['returnId']!),
),

Converting to typed routes

Put the cursor inside a GoRoute and choose Convert to typed route from the light bulb. Jugnu:

1. writes a route data class for the route and each of its children
2. turns path parameters into fields and moves your builder and redirect into build and redirect
3. replaces the original GoRoute with the generated getter, and adds the part line if it's missing

Then run Jugnu: Run build_runner to generate the remaining code. This needs go_router_builder and build_runner in your dev_dependencies.

Route reports

Run Jugnu: Generate Route Report (PDF)…, choose a password, enter it a second time, and pick where to save the file. The report contains:

• a summary of routes, names, parameters, shells, redirects, navigation calls and issues
• the router setup (initial location, redirect, error page)
• the full route tree
• every route with its name, type, number of uses and location
• open issues, unused routes and redirects
• navigation calls per file

The file is encrypted with AES-256 and can only be opened with the password. Printing is allowed; copying text and editing are not. To create a report without a password, turn off Jugnu › Report: Password Protect.

Settings

Commands

Testing

To check that Jugnu sees your app correctly:

1. Open the Routes view and compare the tree with your GoRouter setup.
2. Type context.go('/ in any widget; your paths should be listed.
3. Change a path in a navigation call to something that doesn't exist; a warning should appear within a second.

To work on the extension itself:

npm install
npm run build              # bundles the extension into dist/
npm run test:unit          # parser, matching, code edits and PDF output
npm run test:integration   # runs inside the editor against test/fixtures/sample_app
npm run package            # writes jugnu-1.0.0.vsix

The sample app in test/fixtures/sample_app covers nested routes, shell routes, branches, typed routes, redirects, constants and route lists split across files.

Deep links

The Jugnu Dart package on pub.dev includes a deep link generator that reads the same route definitions:

dart run jugnu:deeplink --list
dart run jugnu:deeplink --route order-details --param orderId=42 --scheme myapp

In the extension, use Copy Path from a route's right-click menu to get the route's full path for a link.

Privacy

• Jugnu works entirely on your machine. It doesn't connect to the internet and doesn't collect usage data.
• It only reads .dart files in the open workspace, plus pubspec.yaml when converting typed routes.
• Report passwords are used only to encrypt the PDF and are never stored.
• Files are written only when you ask: added or converted routes, exported diagrams and saved reports.

Disclaimer

Jugnu is an independent project. It is not affiliated with, endorsed by, sponsored by or otherwise connected to the owners of go_router, Flutter, Dart, Visual Studio Code or any other product named in this document. These names and any trademarks belong to their respective owners and appear here only to say what Jugnu works with.

Jugnu is provided "as is", without warranty of any kind. Check changes made by Add Route and Convert to typed route before you commit them. The author accepts no responsibility for any loss or damage that comes from using it. See the LICENSE file included with Jugnu for the full terms.

About

Jugnu is designed and developed by Sanket Santosh Vidya Manohar. More work and contact details are at sanketmanohar.com.

Licensed under the BSD 3-Clause License.