Introducing Bibimbob: VSCode Extension for ReScript Dependency Visualization

1

Hi,

Just wanted to share a tool I built: Bibimbob - a VSCode extension that visualizes module dependencies in your ReScript projects.

What does it do?

Bibimbob shows you how your ReScript modules connect to each other. It creates interactive graphs that let you see:

  • A full map of your project’s dependencies
  • Focused views of specific modules (what they depend on and what depends on them)
  • Clear visualizations you can click through to explore your codebase

Sample visualization
Sample visualization2100×1650 26.9 KB

How to use it

Just install from the VSCode Marketplace, then use the Command Palette to run:

  • ReScript: Show Dependency Graph
  • ReScript: Focus On Module Dependencies

Current limitations

Works on macOS and Linux (Windows support coming in the future).

Links

Give it a try and let me know what you think! Feedback and contributions welcome.

8 Likes
2

This looks awesome but didn’t work for me :cry: I assume it has to do with the fact I’m using rewatch?

3

Very nice! I always had this idea but never came around to do it myself.

IMO at some point rewatch should do it since it has probably all the necessary information to even display the graph over package boundaries.

And, it’s not working for me either in a (yarn) workspaced project (that might be the culprit, and not rewatch itself?).

1 Like
4

Very cool! However I also have a yarn workspace project (not with rewatch though) and it’s not displaying any info for me.

5

I haven’t tested this with rewatch yet. Would you be able to open an issue? It would be helpful if you could include some basic information about your project structure.

6

I haven’t had a chance to test with yarn workspaces either. It’s likely a path issue that shouldn’t be too difficult to fix.

7

Thank you! I hadn’t considered rewatch and monorepo setups. I’ll work on addressing these in a future version.

2 Likes
8

I created a very simple project, built it with rewatch, and tested it - it seems to work as intended. Are you perhaps using rewatch in a monorepo setup?

9

Yeah, rewatch with pnpm workspaces similar to this sample repo - GitHub - hellos3b/rewatch-pnpm: Sample project for using rewatch with pnpm workspaces

1 Like
10

Thanks, I’m struggling to setup the monorepo with rewatch actually. It would be much helpful to fix the issue.

11

I cloned the shared pnpm_workspace repository and tried to build it according to the README instructions, but I’m encountering errors. How should I manage dependencies and orchestrate the build process?

pnpm --filter "@testrepo/dep01" res:build

> @testrepo/dep01@0.0.1 res:build /Users/woonki/GitHub/projects/rewatch-pnpm/packages/dep01
> rescript

>>>> Start compiling
Warning: bsconfig.json is deprecated. Migrate it to rescript.json


  Warning number 3
  /Users/woonki/GitHub/projects/rewatch-pnpm/packages/dep01/bsconfig.json:7:20-22

  5 ┆   "subdirs": true
  6 ┆ },
  7 ┆ "package-specs": {
  8 ┆   "module": "es6",
  9 ┆   "in-source": true
 10 ┆ },

  deprecated: Option "es6" is deprecated. Use "esmodule" instead.

File "bsconfig.json", line 1
Error: package @testrepo/new-namespace not found or built 
- Did you install it?
>>>> Finish compiling (exit: 2)
/Users/woonki/GitHub/projects/rewatch-pnpm/packages/dep01:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @testrepo/dep01@0.0.1 res:build: `rescript`
Exit status 2
12

Yes, this should be some sort of dump command from Rewatch that provides this information in JSON format.

1 Like
13

@jfrolich has talked about an RPC-style interface to Rewatch. Maybe this would be a good first feature candidate.

3 Likes
14

I’ve identified that the issue in monorepos appears to be related to path resolution. If you open your IDE at the package or app root level within the monorepo, the dependency information should display correctly. However, if you open the IDE at the monorepo root and use the extension, the information likely won’t appear. I’ll be releasing an updated version that supports monorepos soon.

2 Likes
15

OH yeah sorry, was on mobile last night but that repo was created specifically for reproducing that issue in rewatch with pnpm. Just thought it’d help showcase project structure

If it’d help, I know how to fix for it and can update the repository so that it actually works

2 Likes
16

Other loose ideas on this topic (do with it what you will):

  • Sort nodes on the most vs least dependencies
  • Filter nodes on least/max amount of dependents and/or dependencies
  • Highlight all paths to a node
  • Show what file modules have interfaces vs not
  • This doesn’t exist, but if Rewatch can produce compilation info (like average speed of compilation for said file) per file, that could be shown per file module as well
4 Likes
17

Thanks for the ideas. I agree that sort and filter are essential features that I’ve been thinking about too. And to add a few more suggestions:

  • Showing unused props for React component modules
  • Displaying dependencies of modules defined within a file module

These would be great additions as well.

4 Likes
18

@hellos3b @fham @illusionalsagacity I released version v0.5.0 which supports monorepos. After some investigation, it seems that ReScript projects have slightly different monorepo structures. For example, whether the rescript.json file exists in the monorepo root or not. If you encounter any issues with your specific monorepo configuration, please contact me with additional inquiries or create an issue. Thank you.

2 Likes