Hi :wave:, I'm creating a code explorer inspired b...
# share-your-work
d
Hi 👋, I'm creating a code explorer inspired by

Code bubbles

. The difference is that bubbles are not draggable, and everything has an automatic layout. Here is a video with the progress of the first weeks. You can give it a try to this really early version at https://minimalistidev2.netlify.app/
👍🏽 1
👍 9
a
That's cool! What are you using to navigate to the definitions? I built something similar in the past using ts-morph
d
ts-morph looks cool, for now I'm using the output of Acorn to navigate. The code is still pretty hardcoded but I'm using this
x
This is awesome! Could you make it usable for any programming language ? You could perhaps implement this UI ontop of VSCode.
d
Yeah, it could work for any language, for now it only works for javascript. I want to focus on a research phase to see what UX interactions are useful, so I'm building it as a SPA for now. I might work on a VSCode extension in the future 🤷‍♂️
👍 1
One thing that's not shown in the video is that the bubles open in the order that the functions are defined. A second comment is that the
show
function opens twice because I want to have a call tree and it will make more sense once live values are added.
One of my favorite features of editors is when I click a term and all its uses are highlighted, but why is the highlight constrained to a single file? I spend so much time looking at multiple files trying to trace where a value was defined or modified. Here is a demo of a multilevel highlight, looking forward to read your comments 😃
k
So function arguments know the variable passed in at the call site? What if the caller had multiple calls to the function with contradictory arguments?
d
Every function call will open a separate "bubble". Rn I'm in research mode exploring this option, and so far it feels good. It creates a call tree, instead of how we normally see code with a closer representation of the codebase instead of the runtime. Does it make sense @Kartik Agaram? Here is video that might make it easier to understand
k
I see. Do edits in one call get reflected in the other?
d
Ideally yes. But I'm focusing on a code explorer for now, with no editing ability. I want to make a semantic editing experience, whenever I get to that point
👍🏽 1