|
| 1 | +# flat-json-tree Project Context |
| 2 | + |
| 3 | +## Project Overview |
| 4 | + |
| 5 | +`flat-json-tree` is a TypeScript library that provides a simple way to manipulate JSON tree objects. The core idea is to transform a JSON tree object into a flat array, allowing standard array operations like `find`, `findIndex`, `filter`, `map`, and others. It's built as a Vue 3 composable function. |
| 6 | + |
| 7 | +The library is published as `@vuebro/flat-json-tree` with the current version being 2.1.12. It's designed to work with tree structures where each element has a unique identifier field. |
| 8 | + |
| 9 | +The project follows the AGPL-3.0 license and is maintained by Jerry Bruwes. |
| 10 | + |
| 11 | +## Architecture and Implementation |
| 12 | + |
| 13 | +The library transforms a JSON tree into a flat array while preserving the tree structure through computed properties added to each child object: |
| 14 | +- `branch`: Array of objects representing the path from root to current node |
| 15 | +- `index`: Index of the object in the sibling array |
| 16 | +- `next`: Next object in the sibling array |
| 17 | +- `parent`: Parent object |
| 18 | +- `prev`: Previous object in the sibling array |
| 19 | +- `siblings`: Array of sibling objects |
| 20 | + |
| 21 | +The main implementation is in `src/index.ts` as a default export function that takes a tree and optional configuration object, returning a composable with reactive properties and manipulation functions. |
| 22 | + |
| 23 | +## Building and Running |
| 24 | + |
| 25 | +### Prerequisites |
| 26 | +- Node.js and npm |
| 27 | + |
| 28 | +### Build Process |
| 29 | +To build the project: |
| 30 | +```bash |
| 31 | +npm run build |
| 32 | +``` |
| 33 | +This command uses TypeScript compiler (tsc) to compile the source code. |
| 34 | + |
| 35 | +### Linting |
| 36 | +To lint the code: |
| 37 | +```bash |
| 38 | +npm run lint |
| 39 | +``` |
| 40 | + |
| 41 | +### Development Setup |
| 42 | +1. Clone the repository |
| 43 | +2. Run `npm install` to install dependencies |
| 44 | +3. Run `npm run build` to build the project |
| 45 | + |
| 46 | +## Key Features and API |
| 47 | + |
| 48 | +### Main Function |
| 49 | +`useFlatJsonTree(tree, options?)` - The main composable function with the following return value: |
| 50 | +- `nodes`: ComputedRef with the flat array of objects |
| 51 | +- `nodesMap`: ComputedRef with an object mapping unique IDs to objects |
| 52 | +- Manipulation functions: `add`, `addChild`, `remove`, `down`, `left`, `right`, `up` |
| 53 | + |
| 54 | +### Manipulation Functions |
| 55 | +- `add`: Add an empty object to the siblings |
| 56 | +- `addChild`: Add an empty object to the children |
| 57 | +- `remove`: Remove an object from the tree |
| 58 | +- `down`: Move an object down by one position |
| 59 | +- `left`: Move an object left by one position |
| 60 | +- `right`: Move an object right by one position |
| 61 | +- `up`: Move an object up by one position |
| 62 | + |
| 63 | +## Development Conventions |
| 64 | + |
| 65 | +### Coding Style |
| 66 | +- The project uses TypeScript with Vue 3 reactivity |
| 67 | +- Follows ESLint linting rules defined in `@vuebro/configs/eslint` |
| 68 | +- TypeScript configuration extends `@vuebro/configs/tsconfig` |
| 69 | +- Uses Prettier formatting with `@vuebro/configs/prettierrc` configuration |
| 70 | + |
| 71 | +### File Structure |
| 72 | +- `src/index.ts`: Main implementation file |
| 73 | +- `dist/`: Compiled output directory |
| 74 | +- Configuration files at root level (eslint.config.ts, tsconfig.json, etc.) |
| 75 | + |
| 76 | +### Dependencies |
| 77 | +- Vue 3 (reactivity system) as main dependency |
| 78 | +- Development dependencies include TypeScript, Node types, and VueBro configuration packages |
0 commit comments