https://github.com/vimtor/filant
Open web components in your editor with a single click
https://github.com/vimtor/filant
browser-extension chrome-extension editor ide productivity
Last synced: 7 months ago
JSON representation
Open web components in your editor with a single click
- Host: GitHub
- URL: https://github.com/vimtor/filant
- Owner: vimtor
- License: mit
- Created: 2021-04-10T17:59:46.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-30T10:45:45.000Z (over 4 years ago)
- Last Synced: 2025-03-15T08:37:47.541Z (11 months ago)
- Topics: browser-extension, chrome-extension, editor, ide, productivity
- Language: HTML
- Homepage: https://chrome.google.com/webstore/detail/filant/eilfjabonchhnfknjldhlbedoimgdkfp
- Size: 1000 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
filant 📄
Open web components in your editor with a single click
## 🧠 Why
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
## 📦 Setup
1. Install the browser extension for
[Chrome](https://chrome.google.com/webstore/detail/eilfjabonchhnfknjldhlbedoimgdkfp)
2. Add the plugin [babel-plugin-filant](/packages/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
## 📜 Examples
Check the [examples](/examples) folder to see how to configure the plugin:
- [React.js](/examples/example-react) using [parcel-bundler](https://parceljs.org/)
- [Preact](/examples/example-preact) using [parcel-bundler](https://parceljs.org/)
## ❓ Questions
My code editor is not supported
We tried to support all major code editors. If you think you can help adding your IDE, head over to the contributing section
My Javascript framework is not supported
We are not experts on other Javascript frameworks. But we are more than welcome to accept pull requests and suggestions
on how to make filant work with other frameworks. If you think you can help, head over the contributing section
The data attributes clutter my HTML
We plan in the future to add the data attributes differently to make the HTML less cluttered.
However, this is not a priority right now since adding support for other frameworks is more important for us.
If you think you can help, head over the contributing section
## 👋 Contributing
We welcome pull requests to add further capabilities and support to _filant_. Here we'll see the most common scenarios
### How it works internally
As you will see exploring the `packages` folder, the concept is fairly easy. The
[babel-plugin-filant](/packages/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:
```html
Hello World!
```
In short, it adds the following to all HTML elements:
```html
```
### Adding support for a new Javascript framework
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
### Adding support for a new code editor
To add support for a new code editor, you will need to submit a pull request with the following changes to the
[browser-extension](/packages/browser-extension) package:
- Add the new icon to the [images](/packages/browser-extension/images) folder
- Add the image to the IDE list on the [popup/index.html](/packages/browser-extension/popup/index.html) file
- Add the explanation to the IDE footer on the [popup/index.html](/packages/browser-extension/popup/index.html) file
- Add a way to open it on the [background.js](/packages/browser-extension/background.js) file
## 💖 Support
If you found filant useful you may consider [buying us a coffee](https://buymeacoffee.com/pocketapps) 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.