initial commit of project
generated by OpenCode and MiniMax M3.1 Flash Free
This commit is contained in:
@@ -1,2 +1,159 @@
|
||||
# JSONdevTools
|
||||
# JSON DevTools
|
||||
|
||||
Kompletný jednostránkový nástroj na prácu s JSON-om pri vývoji REST API.
|
||||
Bez frameworkov, bez npm, bez build procesu a bez backendu.
|
||||
|
||||
**Formatter · Tree viewer · Diff · API Request builder · História**
|
||||
|
||||
---
|
||||
|
||||
## Ukážky
|
||||
|
||||
### Formatter — živá validácia a syntax highlighting
|
||||
|
||||
|
||||
|
||||
Vľavo vstup, vpravo zvýraznený výstup. Chyba vo vstupe sa zobrazí s presným
|
||||
riadkom, stĺpcom a výrezom textu.
|
||||
|
||||
### Tree viewer — typy, počty položiek, JSONPath
|
||||
|
||||
|
||||
|
||||
Strom zobrazuje typ každej hodnoty (`string`, `number`, `boolean`, `null`) a počet
|
||||
položiek objektov/polí (`{6}`, `[5]`). Každý uzol sa dá skopírovať ako **JSONPath**
|
||||
alebo ako **konkrétna hodnota**.
|
||||
|
||||
### API Request builder — stav, trvanie, headers, odpoveď
|
||||
|
||||
|
||||
|
||||
Status, trvanie požiadavky, response headers a automaticky naformátovaná JSON
|
||||
odpoveď. Pri chybe CORS sa zobrazí podrobné vysvetlenie príčiny.
|
||||
|
||||
---
|
||||
|
||||
## Spustenie
|
||||
|
||||
Aplikácia je čisto statická — otvorte **`src/index.html`** priamo v prehliadači
|
||||
(dvojklikom) a všetko beží lokálne.
|
||||
|
||||
Voliteľne cez lokálny server (odporúčané, ak chcete testovať `fetch()` proti
|
||||
API s CORS z `http://localhost`):
|
||||
|
||||
```bash
|
||||
python -m http.server 8080 --directory src
|
||||
# potom otvorte http://localhost:8080/
|
||||
```
|
||||
|
||||
> Otvorenie cez `file://` funguje, ale prehliadač považuje pôvod stránky za `null`
|
||||
> — časť API (hlavičky, CORS) môže byť obmedzená. Aplikácia v tom prípade zobrazí
|
||||
> podrobné vysvetlenie.
|
||||
|
||||
---
|
||||
|
||||
## Štruktúra repozitára
|
||||
|
||||
```
|
||||
JSONdevTools/
|
||||
├── src/ # samotná aplikácia (jediný adresár, ktorý sa publikuje)
|
||||
│ ├── index.html # štruktúra UI (5 panelov, ARIA role, modál skratiek)
|
||||
│ ├── style.css # tmavý / svetlý motív, responzívne rozloženie, resizable panely
|
||||
│ └── app.js # celá logika (vanilla ES6+), bez závislostí
|
||||
├── tests/
|
||||
│ └── logic.test.js # Node testy logiky (bez prehliadača)
|
||||
├── docs/
|
||||
│ ├── Screenshot-Formatter.png
|
||||
│ ├── Screenshot-Tree.png
|
||||
│ └── Screenshot-API-Request.png
|
||||
├── AGENTS.md # projektové pravidlá pre AI agenty
|
||||
├── LICENSE
|
||||
└── README.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Nástroje
|
||||
|
||||
### 1. Formatter
|
||||
* Vloženie JSON textu, načítanie súboru (tlačidlo alebo pretiahnutie myšou)
|
||||
* Živá validácia s presnou hláškou chyby: **riadok, stĺpec, pozícia, výrez textu**
|
||||
* Pretty print (2 medzery) / Minify
|
||||
* Kopírovanie výsledku, stiahnutie `.json` súboru
|
||||
* Syntax highlighting výstupu
|
||||
|
||||
### 2. Tree
|
||||
* Rozbaľovanie / zbaľovanie uzlov, zobrazenie typov a počtu položiek (`{6}`, `[5]`)
|
||||
* Vyhľadávanie v kľúčoch aj hodnotách, zvýraznenie zhôd, automatické rozbavenie
|
||||
rodičov zhôd
|
||||
* Kopírovanie **JSONPath** (`$.user.roles[1]`) a **konkrétnej hodnoty** uzla
|
||||
* Ovládanie klávesnicou: `↑`/`↓` pohyb, `→`/`←` rozbaliť/zbaliť, `Enter`/`Space`
|
||||
prepnúť, `C` kopírovať hodnotu, `P` kopírovať path
|
||||
|
||||
### 3. Diff
|
||||
* Dva editory vedľa sebe (A = pôvodné, B = nové)
|
||||
* Rekurzívne porovnanie vnorených objektov a polí
|
||||
* Rozdiely: **pridané / odstránené / zmenené** (vrátane zmeny typu) s JSONPath
|
||||
* Súhrnný počet rozdielov, kopírovanie výsledkov porovnania ako JSON
|
||||
|
||||
### 4. API Request
|
||||
* Metódy `GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS`
|
||||
* URL endpointu, query parametre, vlastné HTTP hlavičky
|
||||
* Autentifikácia: Bearer token alebo Basic (`user:heslo`)
|
||||
* JSON request body (s formátovaním / minifikovaním)
|
||||
* `fetch()` s 30 s timeoutom, meranie trvania, zobrazenie HTTP statusu
|
||||
* Response headers, automaticky naformátovaná JSON odpoveď, surový text pri
|
||||
neplatnom JSON
|
||||
* Detailné vysvetlenie **CORS** chýb (chýbajúca hlavička, preflight, `file://`,
|
||||
DNS, proxy) s návrhmi riešenia
|
||||
|
||||
### 5. História
|
||||
* Posledných **20 JSON dokumentov** a **20 API požiadaviek**
|
||||
* Ukladá sa do `localStorage`
|
||||
* Vymazanie jednotlivých záznamov aj celej historie
|
||||
* **Citlivé údaje sa neukladajú**: hlavička `Authorization`, `Cookie`, `X-Api-Key`
|
||||
sa z záznamu vymaže, tokeny žijú iba v pamäti stránky
|
||||
|
||||
---
|
||||
|
||||
## Klávesové skratky
|
||||
|
||||
| Skratka | Akcia |
|
||||
|---|---|
|
||||
| `Ctrl+Shift+F` | Pretty print |
|
||||
| `Ctrl+Shift+M` | Minify |
|
||||
| `Ctrl+Shift+C` | Kopírovať výstup |
|
||||
| `Ctrl+Shift+O` | Otvoriť JSON súbor |
|
||||
| `Ctrl+S` | Stiahnuť JSON súbor |
|
||||
| `Ctrl+Enter` | Odoslať API požiadavku |
|
||||
| `Ctrl+Shift+D` | Prepnuť motív |
|
||||
| `Ctrl+Shift+K` | Focus na vyhľadávanie v strome |
|
||||
| `Ctrl+Shift+X` | Vyčistiť aktuálny editor |
|
||||
| `1` … `5` | Prepnutie nástroja (mimo textových polí) |
|
||||
| `?` | Zoznam skratiek |
|
||||
| `Esc` | Zavrieť okno / zrušiť vyhľadávanie |
|
||||
|
||||
Na macOS použite `Cmd` namiesto `Ctrl`.
|
||||
|
||||
---
|
||||
|
||||
## Príkazy
|
||||
|
||||
```bash
|
||||
node tests/logic.test.js # testy logiky – 93 assertov, bez prehliadača
|
||||
```
|
||||
|
||||
Testy nepoužívajú žiadny prehliadač ani externé závislosti: `app.js` sa načíta
|
||||
do izolovaného `vm` kontextu s minimálnym DOM stubom a overuje sa diff algoritmus,
|
||||
sanitizácia historie, cesty uzlov, syntax highlighting a konzistencia ID medzi
|
||||
HTML a JavaScriptom.
|
||||
|
||||
---
|
||||
|
||||
## Bezpečnosť a súkromie
|
||||
|
||||
* Aplikácia je čisto statická — žiadne CDN, žiadne externé závislosti.
|
||||
* Údaje sa nikam neposielajú, **okrem API požiadaviek, ktoré sám spustíte**
|
||||
na URL, ktorú zadáte vy.
|
||||
* Všetko (história, motív, šírky panelov) sa ukladá lokálne v `localStorage`.
|
||||
* Pre zapnutie svetlého motívu jednorazovo cez URL: `src/index.html?theme=light`.
|
||||
|
||||
Reference in New Issue
Block a user