Introducing Bibimbob: VSCode Extension for ReScript Dependency Visualization

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.

3 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
19

Cool!
It works now to display the sub-projects of rescript-mui but the “Focus on module dependencies” still does not work.
Here is the repo: GitHub - cca-io/rescript-mui: ReScript bindings for MUI

I think it’s best to test the examples package.

1 Like
20

Oh, the case where rescript.json is in the monorepo root. That’s a case I haven’t tested yet. Thank you.

1 Like
21

New features have been added in version v0.7.0:

  • Unused module analysis
  • Module name search in dependency graph
  • Visualization tool changed from D3 to Graphviz
5 Likes
22

New features have been added in version v0.8.0:

  • Value Usage Count Annotation: shows usage counts for let bindings, helping you identify unused or rarely used code.
4 Likes
23

Great extension! Thank you. I always wanted to be able to quickly visualize where a React component is being used without having to cmd F “<MyComponent”. This helps quite a lot for this purpose.

I’ve got a few suggestions:

  • need to exclude a dir/file, for example my tests files are ruining some of the views, this makes the showUnusedModules feature irrelevant for my case.
  • when a list is too long for the view, the scrolling navigation would be very useful, currently the scrolling gesture is zooming on Mac and makes it very hard to navigate in.
  • need to filter out/hide quickly some tree: sometime the dependencies tree is irrelevant and takes too much space when I just want to see the dependents tree.
  • add navigation to a file: clicking on a node redirects to a focus of that node, while this is useful, adding a case like cmd modifier to makes it redirecting to the file itself would be useful.

In my large codebase, the “showDependencyGraph” feature is not loading trees, but that is to be expected!

1 Like
25

Thank you for your feedback. It overlaps a lot with the features I’d like to add. I’ll work on it and implement it step by step.

2 Likes