At some moment in your developer journey you will have encountered the following situation:

1. You are working in a codebase that is large or is not well organized
2. You have to fix a bug located in a section of your application. Let's say a Download button does not work properly
3. You don't have any idea where the file that contains that button is located
4. You try to search for Download
5. You get 42 results for the word Download
6. You cry a bit and skim through the 42 results

Filant aims to make this process instantaneous. It is as simple as right-clicking the component you want to see it open in your favorite IDE

1. Install the browser extension for Chrome
2. Add the plugin babel-plugin-filant to your project

Once those things are done you can click the browser extension icon and select your IDE and follow any further instructions specific for that IDE

Now you can simply right-click any component in your app and click on the Open in IDE button in the context menu

Check the examples folder to see how to configure the plugin:

• React.js using parcel-bundler
• Preact using parcel-bundler

We welcome pull requests to add further capabilities and support to filant. Here we'll see the most common scenarios

As you will see exploring the packages folder, the concept is fairly easy. The babel-plugin-filant adds to all JSX elements an attribute data-filant with the current path, line and column that element is found. If you inspect you HTML after adding the plugin, you will see something like this:

<div data-filant="C:/Website/src/App.jsx|18|8">
  <h1 data-filant="C:/Website/src/App.jsx|19|12">Hello World!</h1>
</div>

In short, it adds the following to all HTML elements:

<div data-filant="<FULL_PATH>|<LINE>|<COLUMN>"></div>

To add support for a new JS framework, you will need to implement some kind of plugin that adds those data-filant attributes to the output HTML. The browser extension will handle the rest.

Here at Pocket Apps, we use React.js and don't have much experience with other frameworks building pipelines. So we thank you so much for helping us in this regard

To add support for a new code editor, you will need to submit a pull request with the following changes to the browser-extension package:

• Add the new icon to the images folder
• Add the image to the IDE list on the popup/index.html file
• Add the explanation to the IDE footer on the popup/index.html file
• Add a way to open it on the background.js file

If you found filant useful you may consider buying us a coffee or contributing to the repository.

We are two developers, and a cat making this possible in our free time from work, so your help will be greatly appreciated.