|
1 | | -## React Acode Plugin Template |
| 1 | +# JSON to Graph Visualizer Plugin for Acode |
2 | 2 |
|
3 | | -This template is designed to help developers create plugins for the **Acode** mobile code editor, using **React** as the frontend framework. The template is pre-configured with **Webpack**, **Babel**, and **React 18**, making it easy to set up, develop, and package plugins for the Acode editor. |
| 3 | +**JSON to Graph Visualizer** is a plugin for Acode that allows you to visualize JSON data as an interactive graph. This tool is especially useful for developers who want to quickly understand complex JSON structures by exploring them in a graphical format. |
4 | 4 |
|
5 | | -### Table of Contents |
6 | | -- [About](#about) |
7 | | -- [Features](#features) |
8 | | -- [Prerequisites](#prerequisites) |
9 | | -- [Installation](#installation) |
10 | | -- [Development](#development) |
11 | | -- [Building the Plugin](#building-the-plugin) |
12 | | -- [Configuration](#configuration) |
13 | | -- [Contributing](#contributing) |
14 | | -- [License](#license) |
| 5 | +## Features |
15 | 6 |
|
16 | | ---- |
| 7 | +- **Interactive JSON Visualization**: Converts JSON files into a graphical representation, making it easier to navigate and understand nested structures. |
| 8 | +- **JSON Visualization Toggle**: A toggle button will appear in the editor when a JSON file is active, allowing you to visualize the file’s structure. |
| 9 | +- **Customizable Graph Options**: Change the theme, direction, and control over child nodes or collapse buttons for better readability. |
17 | 10 |
|
18 | | -### About |
| 11 | +## How to Use |
19 | 12 |
|
20 | | -The React Acode Plugin Template provides a modern development environment for creating plugins for Acode using React. By leveraging the flexibility of React components and the power of Webpack, this template simplifies the plugin development workflow. This template includes all necessary configurations for JSX, React, and bundling, ensuring a seamless experience when developing Acode plugins. |
| 13 | +1. **Open a JSON file**: Once you have a JSON file open in Acode, you will see the **JSON Visualization Toggle** button appear. |
| 14 | +2. **Click the Toggle Button**: Clicking the button will open the JSON visualization in a new page, allowing you to interact with the data graphically. |
| 15 | +3. **Explore the Graph**: You can zoom in and out, collapse nodes, and explore the hierarchical structure of your JSON data with ease. |
21 | 16 |
|
22 | | -### Features |
| 17 | +## Installation |
23 | 18 |
|
24 | | -- **React 18 Ready**: Fully compatible with React 18's new `createRoot` API. |
25 | | -- **Webpack & Babel**: A configured Webpack bundler with Babel for JSX and ES6+ support. |
26 | | -- **Hot Reload**: Fast iteration while developing your plugin. |
27 | | -- **Error Boundaries**: Example error handling for robust React applications. |
28 | | -- **Plugin Packaging**: Automatic packaging for Acode plugins. |
| 19 | +1. Open the **Acode Plugin Market**. |
| 20 | +2. Search for **JSON to Graph Visualizer**. |
| 21 | +3. Install and activate the plugin. |
| 22 | +4. Open any JSON file in the Acode editor, and the **JSON Visualization Toggle** button will appear when the file is active. |
29 | 23 |
|
30 | | ---- |
| 24 | +## Built With |
31 | 25 |
|
32 | | -### Prerequisites |
| 26 | +- **React**: The plugin is built using the React Acode template. |
| 27 | +- **jsongraph-react**: It leverages the [jsongraph-react](https://github.com/karolkrupa/jsongraph-react) library to render the JSON data as a graph. Special acknowledgment to **jsongraph-react** for providing the foundation for visualizing JSON structures. |
33 | 28 |
|
34 | | -Before getting started, make sure you have the following installed: |
| 29 | +## Customization |
35 | 30 |
|
36 | | -- [Node.js](https://nodejs.org/) (v14 or higher) |
37 | | -- [NPM](https://www.npmjs.com/) (Comes with Node.js) |
38 | | -- Acode editor (Available on Android) |
| 31 | +You can pass options to customize the graph layout: |
39 | 32 |
|
40 | | ---- |
| 33 | +- **Theme**: Change the graph’s theme (light/dark). |
| 34 | +- **Direction**: Control the layout direction (e.g., left-to-right or top-down). |
| 35 | +- **Hide Children Count**: Toggle whether to show or hide the number of child nodes. |
| 36 | +- **Hide Collapse Button**: Enable or disable the collapse button for child nodes. |
41 | 37 |
|
42 | | -### Installation |
| 38 | +## Example |
43 | 39 |
|
44 | | -1. Clone the repository: |
45 | | - ```bash |
46 | | - git clone https://github.com/your-username/react-acode-plugin-template.git |
47 | | - cd react-acode-plugin-template |
48 | | - ``` |
| 40 | +Once a JSON file is open, click the **JSON Visualization Toggle** button to launch the visualization page. You'll then be able to navigate and explore your JSON data as an interactive graph. |
49 | 41 |
|
50 | | -2. Install dependencies: |
51 | | - ```bash |
52 | | - npm install |
53 | | - ``` |
| 42 | +## Contribution |
54 | 43 |
|
55 | | ---- |
56 | | - |
57 | | -### Development |
58 | | - |
59 | | -To start developing the plugin, follow these steps: |
60 | | - |
61 | | -1. **Modify Plugin ID**: Update the `plugin.json` file to reflect your plugin's unique ID and details. |
62 | | - |
63 | | -2. **Run Development Server**: |
64 | | - ```bash |
65 | | - npm run start-dev |
66 | | - ``` |
67 | | - |
68 | | - This command starts the development server, watching for changes and rebuilding automatically. |
69 | | - |
70 | | -3. **Edit Code**: |
71 | | - - The main entry point is located in `src/main.js`. |
72 | | - - The main React component is in `src/App.jsx`. |
73 | | - |
74 | | -4. **Live Preview**: Open the Acode editor on your Android device, load your plugin, and test changes. |
75 | | - |
76 | | ---- |
77 | | - |
78 | | -### Building the Plugin |
79 | | - |
80 | | -When you're ready to build the plugin for distribution, run: |
81 | | - |
82 | | -```bash |
83 | | -npm run build |
84 | | -``` |
85 | | - |
86 | | -This command will bundle your code and generate the output in the `dist` folder. The `pack-zip.js` script will create a `.zip` file containing your plugin, ready to be uploaded to the Acode marketplace. |
87 | | - |
88 | | ---- |
89 | | - |
90 | | -### Configuration |
91 | | - |
92 | | -#### Webpack |
93 | | - |
94 | | -The Webpack configuration (`webpack.config.js`) handles compiling JavaScript and JSX files. It includes: |
95 | | -- Babel loader for transpiling ES6+ and JSX. |
96 | | -- Support for `.js` and `.jsx` file extensions. |
97 | | - |
98 | | -#### Babel |
99 | | - |
100 | | -The Babel configuration (`.babelrc`) is set up to use: |
101 | | -- `@babel/preset-env`: For ES6+ support. |
102 | | -- `@babel/preset-react`: For JSX support. |
103 | | - |
104 | | -You can modify this file if you need to customize the Babel transformation process. |
105 | | - |
106 | | -#### Plugin Metadata |
107 | | - |
108 | | -The `plugin.json` file contains metadata about the plugin: |
109 | | -- `id`: Unique plugin identifier. |
110 | | -- `name`: Plugin name. |
111 | | -- `version`: Version number. |
112 | | -- `main`: Entry point file (`main.js`). |
113 | | - |
114 | | ---- |
115 | | - |
116 | | -### Example Usage |
117 | | - |
118 | | -The `App.jsx` file contains a simple React component that interacts with Acode's API: |
119 | | - |
120 | | -```jsx |
121 | | -const App = ({ cacheFile, cacheFileUrl }) => { |
122 | | - return ( |
123 | | - <div> |
124 | | - <h1>Hello from React inside Acode Plugin!</h1> |
125 | | - <p>Cache File URL: {cacheFileUrl}</p> |
126 | | - </div> |
127 | | - ); |
128 | | -}; |
129 | | - |
130 | | -export default App; |
131 | | -``` |
132 | | - |
133 | | -You can extend this component to add custom functionality based on the plugin's needs. |
134 | | - |
135 | | ---- |
136 | | - |
137 | | -### Contributing |
138 | | - |
139 | | -Contributions are welcome! If you have suggestions for improvements or new features, feel free to fork the repo and submit a pull request. Please make sure to test your changes before submitting. |
140 | | - |
141 | | ---- |
142 | | - |
143 | | -### License |
144 | | - |
145 | | -This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details. |
146 | | - |
147 | | ---- |
148 | | - |
149 | | -### Additional Notes |
150 | | - |
151 | | -- The Acode editor allows plugin developers to interact with its API for file operations. This template provides a simple way to initialize a plugin and render React components within the editor. |
152 | | -- Customize the template as per your plugin requirements, such as adding new React components, managing state, and utilizing Acode's API for more complex interactions. |
| 44 | +Feel free to contribute by submitting pull requests or reporting any issues via the GitHub repository. |
0 commit comments