https://github.com/midori-profile/sourcecode-seeker

This is a development tool that supports one-click navigation from web components to the source code and supports both React and Vue.
https://github.com/midori-profile/sourcecode-seeker

babel chrome development-efficiency react source-code-analysis vuejs

Last synced: 25 days ago
JSON representation

This is a development tool that supports one-click navigation from web components to the source code and supports both React and Vue.

• Host: GitHub
• URL: https://github.com/midori-profile/sourcecode-seeker
• Owner: midori-profile
• Created: 2024-04-04T11:10:27.000Z (7 months ago)
• Default Branch: master
• Last Pushed: 2024-06-24T13:03:26.000Z (4 months ago)
• Last Synced: 2024-09-28T02:40:29.426Z (about 1 month ago)
• Topics: babel, chrome, development-efficiency, react, source-code-analysis, vuejs
• Language: TypeScript
• Homepage:
• Size: 1.61 MB
• Stars: 49
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


**Code Seek** is a frontend development tool that allows you to locate your component's source code with a single click from the browser. It currently supports React, and will support Vue soon.

# Installation

The plugin has not been published to the application market yet. You can import the `dist` package from the root directory of this repository into your Chrome extension.

Follow these steps:

1. Click on the Chrome plugin button and then click on "Manage extensions".



2. Click "Enable developer mode" in the top right corner.



3. Click "Load unpacked".



4. Import the `dist` package from the root directory of this repository.



5. The plugin has been successfully installed in your Chrome browser.



# How to Use

Babel configuration reference: [`.babelrc`](https://github.com/midori-profile/sourcecode-seeker/blob/master/example/react/.babelrc)

This configuration allows you to use the latest JS, JSX, and TS features:

```json

{

  "presets": [

    ["@babel/preset-env", { "targets": "defaults" }],

    ["@babel/preset-react", { "development": true }],

    "@babel/preset-typescript"

  ]

}

```

In your Webpack configuration, the `devtool: "source-map"` option enables Webpack to generate source maps. Refer to this file: [webpack.config.js](https://github.com/midori-profile/sourcecode-seeker/blob/master/example/react/webpack.config.js).

Then, enable the Source Code Seeker:



Open the Inspector (this step is crucial):



Option/Alt-click the component you want to locate:



You will be directed to the source code:



# Exploring

I have provided an example for you to experience the plugin's features:

```sh

cd example/react

pnpm install

pnpm start

```

# Planned Features

1. **Vue Support**: Currently under development and will be added soon.