@zjy4fun/json-open 0.1.3 → 0.2.0

package/.github/workflows/publish.yml

@@ -18,9 +18,8 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           registry-url: 'https://registry.npmjs.org'
-          cache: 'npm'
 
       - run: npm ci
       - run: npm test --if-present
@@ -33,3 +32,5 @@ jobs:
           [ "$TAG_VERSION" = "$PKG_VERSION" ] || (echo "Tag $TAG_VERSION != package.json $PKG_VERSION" && exit 1)
 
       - run: npm publish --access public --provenance
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/README.md

@@ -1,56 +1,59 @@
 # json-open
 
-Open JSON in your browser with a collapsible tree view (supports stdin and inline JSON text).
+Open JSON in your browser as a collapsible tree view.
 
-> A tiny CLI for command-line users: feed JSON, instantly inspect it in a browser with foldable structure.
-
-## Demo
+> A tiny CLI for quickly inspecting JSON from APIs, logs, or inline text.
 
 ![json-open demo](./demo.gif)
 
 ---
 
-## Why this exists
+## Why json-open?
 
-Reading JSON in a terminal is often painful:
+Reading JSON in terminal is often painful:
 
 - Long output is hard to scan
 - Deep nesting is hard to understand quickly
-- Heavy tools feel overkill for quick debugging
+- Full-featured tools can feel heavy for quick checks
 
-`json-open` keeps this simple: **make JSON inspection fast and visual**.
+`json-open` keeps it simple: **pipe JSON in, inspect it visually in seconds**.
 
 ---
 
 ## Features
 
-- ✅ Pipe input: `curl ... | json`
-- ✅ Inline JSON: `json '{"a":1}'`
-- ✅ Collapsible tree view in browser
-- ✅ Expand all / Collapse all buttons
-- ✅ Rendered from local temp file (no remote upload)
-- ✅ Cross-platform browser open (macOS / Linux / Windows)
+- ✅ Read from stdin (pipe)
+- ✅ Read inline JSON text
+- ✅ Open browser automatically (macOS / Linux / Windows)
+- ✅ Collapsible tree view
+- ✅ Expand all / Collapse all
+- ✅ Local temp file rendering (no remote upload)
+- ✅ **Auto-parse serialized JSON strings** (escaped/double-encoded)
+- ✅ **Deep nested JSON string expansion** (auto-unwrap JSON strings inside objects)
 
 ---
 
 ## Installation
 
-### Option A: GitHub Packages (current primary channel)
+### npm (recommended)
 
-Configure npm for GitHub Packages first:
+```bash
+npm i -g @zjy4fun/json-open
+```
+
+After install, use the global command:
 
 ```bash
-echo "@zjy4fun:registry=https://npm.pkg.github.com" >> ~/.npmrc
-echo "//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN" >> ~/.npmrc
+json --version
 ```
 
-Then install:
+### Run once with npx (no global install)
 
 ```bash
-npm i -g @zjy4fun/json-open
+npx @zjy4fun/json-open '{"hello":"world"}'
 ```
 
-### Option B: Local development install
+### Local development
 
 ```bash
 git clone https://github.com/zjy4fun/json-open.git
@@ -59,11 +62,9 @@ npm install
 npm link
 ```
 
-After that, the `json` command is available globally.
-
 ---
 
-## Quick start
+## Quick Start
 
 ```bash
 # 1) API response
@@ -76,41 +77,25 @@ json '{"hello":"world","list":[1,2,3]}'
 cat response.json | json
 ```
 
-The command opens your browser and shows a JSON tree view.
+The command opens your default browser and shows a structured JSON tree.
 
 ---
 
-## Common use cases
-
-1. **API debugging**  
-   Inspect response shape quickly, especially nested data.
-
-2. **Backend/frontend integration checks**  
-   Verify missing fields or type mismatches after API changes.
-
-3. **Ad-hoc JSON inspection**  
-   Visualize JSON copied from logs, queues, or snapshots.
-
-4. **Team discussion/demo**  
-   Share a clearer structure view when discussing payloads.
-
----
-
-## Command behavior
+## CLI Usage
 
 ```bash
-json
+json [inline-json]
 ```
 
-Input source:
+Input sources:
 
-- stdin (pipe)
-- inline argument JSON string
+- `stdin` (pipe)
+- Inline JSON argument
 
 Options:
 
-- `-h, --help` show help
-- `-v, --version` show CLI version
+- `-h, --help` Show help
+- `-v, --version` Show version
 
 Examples:
 
@@ -120,19 +105,43 @@ json --version
 json '{"ok":true}'
 ```
 
-If no input is provided, it prints usage help.
+If no input is provided, usage help is printed.
 
 ---
 
-## Release & distribution
+## Serialized JSON String Support
 
-Included GitHub Actions workflows:
+`json-open` now automatically handles serialized/escaped JSON strings — a common pain point when working with logs, databases, and APIs.
 
-- `CI`: basic validation flow
-- `Publish to GitHub Packages`: publish to GPR
-- `Publish to npm (Trusted Publishing)`: reserved for npm OIDC flow
+```bash
+# Double-encoded JSON string (e.g. from database or API response body)
+json '"{\"name\":\"test\",\"age\":25}"'
+# → auto-detects and parses as { "name": "test", "age": 25 }
 
-Current primary distribution: **GitHub Packages**.
+# Nested JSON strings inside objects
+json '{"status":"ok","data":"{\"users\":[{\"id\":1}]}"}'
+# → auto-expands "data" field into a real JSON tree
+
+# Multi-level serialization
+json '"\"[1,2,3]\""'
+# → recursively unwraps to [1, 2, 3]
+```
+
+This works for:
+- Escaped JSON from `JSON.stringify()` output
+- Log files with embedded JSON payloads
+- API responses where a field contains a JSON string
+- Database columns storing serialized JSON
+
+---
+
+## Common Use Cases
+
+- API debugging (inspect response shape quickly)
+- Backend/frontend contract checks
+- Ad-hoc JSON visualization from logs
+- Payload discussion/demo with teammates
+- **Inspecting serialized JSON from databases or message queues**
 
 ---
 
@@ -142,24 +151,18 @@ Issues and PRs are welcome.
 
 ### Good contribution ideas
 
-- Better error diagnostics (e.g. JSON syntax location)
+- Better JSON parse error location hints
 - Theme switch (light/dark)
 - Direct file path support (e.g. `json ./data.json`)
-- Rich interactions (search, highlight, copy JSON path)
+- Search / highlight / copy JSON path
 
-### Local development
+### Local dev
 
 ```bash
 npm install
 npm test
 ```
 
-Before submitting:
-
-- Ensure code runs correctly
-- Ensure README examples still work
-- Keep changes focused and clear
-
 ---
 
 ## License

package/bin/json.js

@@ -100,8 +100,11 @@ function valueToHtml(value, key = null) {
   return `<div class=\"line\">${keyHtml}<span>${escapeHtml(String(value))}</span></div>`
 }
 
-function toHtml(jsonObj) {
-  const body = valueToHtml(jsonObj)
+function toHtml(jsonObj, deepParsedObj) {
+  const rawBody = valueToHtml(jsonObj)
+  const parsedBody = valueToHtml(deepParsedObj)
+  // 检测是否有差异（有嵌套 JSON 字符串可以展开）
+  const hasDiff = JSON.stringify(jsonObj) !== JSON.stringify(deepParsedObj)
   return `<!doctype html>
 <html lang=\"en\">
 <head>
@@ -130,6 +133,8 @@ function toHtml(jsonObj) {
       margin-bottom: 16px;
       display: flex;
       gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
     }
     button {
       border: 1px solid #475569;
@@ -142,6 +147,51 @@ function toHtml(jsonObj) {
     button:hover {
       background: #334155;
     }
+    /* 开关样式 */
+    .toggle-wrap {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-left: auto;
+      font-size: 13px;
+      color: #94a3b8;
+    }
+    .toggle-wrap.hidden { display: none; }
+    .toggle {
+      position: relative;
+      width: 40px;
+      height: 22px;
+      cursor: pointer;
+    }
+    .toggle input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    .toggle .slider {
+      position: absolute;
+      inset: 0;
+      background: #334155;
+      border-radius: 22px;
+      transition: background 0.2s;
+    }
+    .toggle .slider::before {
+      content: '';
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      left: 3px;
+      bottom: 3px;
+      background: #e2e8f0;
+      border-radius: 50%;
+      transition: transform 0.2s;
+    }
+    .toggle input:checked + .slider {
+      background: #58a6ff;
+    }
+    .toggle input:checked + .slider::before {
+      transform: translateX(18px);
+    }
     details {
       margin-left: 16px;
     }
@@ -174,23 +224,280 @@ function toHtml(jsonObj) {
     .null { color: #cbd5e1; }
     .symbol { color: #c4b5fd; }
     .meta { color: #64748b; }
+    /* 搜索框 */
+    .search-wrap {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .search-wrap input {
+      border: 1px solid #475569;
+      background: #1e293b;
+      color: #e2e8f0;
+      border-radius: 8px;
+      padding: 7px 12px;
+      font-size: 13px;
+      font-family: inherit;
+      width: 200px;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+    .search-wrap input:focus {
+      border-color: #58a6ff;
+    }
+    .search-wrap input::placeholder {
+      color: #64748b;
+    }
+    .search-count {
+      font-size: 12px;
+      color: #64748b;
+      min-width: 60px;
+    }
+    .search-nav button {
+      padding: 4px 8px;
+      font-size: 12px;
+      border-radius: 6px;
+    }
+    /* 搜索高亮 */
+    mark.highlight {
+      background: #f0883e;
+      color: #0d1117;
+      border-radius: 2px;
+      padding: 0 1px;
+    }
+    mark.highlight.current {
+      background: #58a6ff;
+      color: #fff;
+      box-shadow: 0 0 0 2px rgba(88,166,255,0.4);
+    }
+    /* 搜索时隐藏不匹配的行 */
+    .search-active .line.hidden-by-search,
+    .search-active li.hidden-by-search {
+      display: none;
+    }
   </style>
 </head>
 <body>
   <div class=\"toolbar\">
     <button id=\"expand-all\">Expand all</button>
     <button id=\"collapse-all\">Collapse all</button>
+    <div class=\"search-wrap\">
+      <input type=\"text\" id=\"search-input\" placeholder=\"Search...\" autocomplete=\"off\" />
+      <span class=\"search-count\" id=\"search-count\"></span>
+      <span class=\"search-nav\">
+        <button id=\"search-prev\" title=\"Previous (Shift+Enter)\">▲</button>
+        <button id=\"search-next\" title=\"Next (Enter)\">▼</button>
+      </span>
+    </div>
+    <div class=\"toggle-wrap${hasDiff ? '' : ' hidden'}\" title=\"Parse embedded JSON strings inside values\">
+      <span>Parse JSON strings</span>
+      <label class=\"toggle\">
+        <input type=\"checkbox\" id=\"deep-parse-toggle\" />
+        <span class=\"slider\"></span>
+      </label>
+    </div>
   </div>
-  <main>${body}</main>
+  <main id=\"raw-view\">${rawBody}</main>
+  <main id=\"parsed-view\" style=\"display:none\">${parsedBody}</main>
   <script>
-    const details = () => Array.from(document.querySelectorAll('details'))
+    const details = () => Array.from(document.querySelectorAll('main:not([style*=\"display:none\"]) details'))
     document.getElementById('expand-all').addEventListener('click', () => details().forEach((d) => d.open = true))
     document.getElementById('collapse-all').addEventListener('click', () => details().forEach((d) => d.open = false))
+
+    const toggle = document.getElementById('deep-parse-toggle')
+    const rawView = document.getElementById('raw-view')
+    const parsedView = document.getElementById('parsed-view')
+    if (toggle) {
+      toggle.addEventListener('change', () => {
+        if (toggle.checked) {
+          rawView.style.display = 'none'
+          parsedView.style.display = ''
+        } else {
+          rawView.style.display = ''
+          parsedView.style.display = 'none'
+        }
+        // 切换视图后重新搜索
+        if (searchInput.value.trim()) doSearch()
+      })
+    }
+
+    // ===== 搜索功能 =====
+    const searchInput = document.getElementById('search-input')
+    const searchCount = document.getElementById('search-count')
+    const searchPrev = document.getElementById('search-prev')
+    const searchNext = document.getElementById('search-next')
+    let highlights = []
+    let currentIdx = -1
+
+    function getActiveView() {
+      return parsedView.style.display === 'none' ? rawView : parsedView
+    }
+
+    function clearSearch() {
+      // 移除所有高亮
+      document.querySelectorAll('mark.highlight').forEach(mark => {
+        const parent = mark.parentNode
+        parent.replaceChild(document.createTextNode(mark.textContent), mark)
+        parent.normalize()
+      })
+      highlights = []
+      currentIdx = -1
+      searchCount.textContent = ''
+      document.body.classList.remove('search-active')
+    }
+
+    function doSearch() {
+      clearSearch()
+      const query = searchInput.value.trim()
+      if (!query) return
+
+      const view = getActiveView()
+      const regex = new RegExp(query.replace(/[.*+?^\${}()|[\\]\\\\]/g, '\\\\$&'), 'gi')
+
+      // 遍历所有文本节点进行高亮
+      const walker = document.createTreeWalker(view, NodeFilter.SHOW_TEXT, null)
+      const textNodes = []
+      while (walker.nextNode()) textNodes.push(walker.currentNode)
+
+      textNodes.forEach(node => {
+        const text = node.textContent
+        if (!regex.test(text)) return
+        regex.lastIndex = 0
+
+        const frag = document.createDocumentFragment()
+        let lastIdx = 0
+        let match
+        while ((match = regex.exec(text)) !== null) {
+          if (match.index > lastIdx) {
+            frag.appendChild(document.createTextNode(text.slice(lastIdx, match.index)))
+          }
+          const mark = document.createElement('mark')
+          mark.className = 'highlight'
+          mark.textContent = match[0]
+          frag.appendChild(mark)
+          lastIdx = regex.lastIndex
+        }
+        if (lastIdx < text.length) {
+          frag.appendChild(document.createTextNode(text.slice(lastIdx)))
+        }
+        node.parentNode.replaceChild(frag, node)
+      })
+
+      highlights = Array.from(view.querySelectorAll('mark.highlight'))
+      if (highlights.length > 0) {
+        // 展开所有包含匹配的 <details>
+        highlights.forEach(h => {
+          let el = h.parentElement
+          while (el && el !== view) {
+            if (el.tagName === 'DETAILS') el.open = true
+            el = el.parentElement
+          }
+        })
+        currentIdx = 0
+        scrollToCurrent()
+      }
+      updateCount()
+    }
+
+    function updateCount() {
+      if (highlights.length === 0 && searchInput.value.trim()) {
+        searchCount.textContent = 'No match'
+      } else if (highlights.length > 0) {
+        searchCount.textContent = (currentIdx + 1) + ' / ' + highlights.length
+      } else {
+        searchCount.textContent = ''
+      }
+    }
+
+    function scrollToCurrent() {
+      highlights.forEach((h, i) => {
+        h.classList.toggle('current', i === currentIdx)
+      })
+      if (highlights[currentIdx]) {
+        highlights[currentIdx].scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }
+      updateCount()
+    }
+
+    function goNext() {
+      if (highlights.length === 0) return
+      currentIdx = (currentIdx + 1) % highlights.length
+      scrollToCurrent()
+    }
+
+    function goPrev() {
+      if (highlights.length === 0) return
+      currentIdx = (currentIdx - 1 + highlights.length) % highlights.length
+      scrollToCurrent()
+    }
+
+    // 输入时实时搜索（防抖 200ms）
+    let debounceTimer
+    searchInput.addEventListener('input', () => {
+      clearTimeout(debounceTimer)
+      debounceTimer = setTimeout(doSearch, 200)
+    })
+
+    // Enter = 下一个，Shift+Enter = 上一个
+    searchInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        e.shiftKey ? goPrev() : goNext()
+      }
+      if (e.key === 'Escape') {
+        searchInput.value = ''
+        clearSearch()
+        searchInput.blur()
+      }
+    })
+
+    searchNext.addEventListener('click', goNext)
+    searchPrev.addEventListener('click', goPrev)
+
+    // Ctrl+F / Cmd+F 聚焦搜索框
+    document.addEventListener('keydown', (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+        e.preventDefault()
+        searchInput.focus()
+        searchInput.select()
+      }
+    })
   </script>
 </body>
 </html>`
 }
 
+/**
+ * 递归遍历 JSON 对象，尝试将值为 JSON 字符串的字段自动解析为对象
+ * 比如 { "data": "{\"name\":\"test\"}" } → { "data": { "name": "test" } }
+ * 这在 API 响应和日志中非常常见
+ */
+function deepParseJsonStrings(obj) {
+  if (obj === null || obj === undefined) return obj
+  if (Array.isArray(obj)) return obj.map(deepParseJsonStrings)
+  if (typeof obj === 'object') {
+    const result = {}
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = deepParseJsonStrings(value)
+    }
+    return result
+  }
+  if (typeof obj === 'string') {
+    const trimmed = obj.trim()
+    // 只尝试解析看起来像 JSON 对象或数组的字符串
+    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+        (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+      try {
+        const parsed = JSON.parse(trimmed)
+        return deepParseJsonStrings(parsed)
+      } catch {
+        return obj
+      }
+    }
+  }
+  return obj
+}
+
 function openInBrowser(filePath) {
   const platform = process.platform
   const command = platform === 'darwin' ? 'open' : platform === 'win32' ? 'start' : 'xdg-open'
@@ -234,11 +541,54 @@ async function main() {
   try {
     parsed = JSON.parse(input)
   } catch {
-    console.error('Input is not valid JSON.')
-    process.exit(1)
+    // 尝试处理 JSON 序列化后的字符串（双重转义）
+    // 比如："{\"name\":\"test\"}" 或 '"{\\\"name\\\":\\\"test\\\"}"'
+    // 这种情况常见于：日志输出、API 响应中嵌套的 JSON 字符串、数据库存储的 JSON
+    try {
+      // 第一步：去掉首尾引号（如果有的话）
+      let cleaned = input.trim()
+      if ((cleaned.startsWith('"') && cleaned.endsWith('"')) ||
+          (cleaned.startsWith("'") && cleaned.endsWith("'"))) {
+        cleaned = cleaned.slice(1, -1)
+      }
+      // 第二步：处理转义字符
+      // 替换 \" → "，\\ → \，\n → 换行，\t → tab
+      cleaned = cleaned
+        .replace(/\\"/g, '"')
+        .replace(/\\\\/g, '\\')
+        .replace(/\\n/g, '\n')
+        .replace(/\\t/g, '\t')
+        .replace(/\\r/g, '\r')
+      parsed = JSON.parse(cleaned)
+      console.log('ℹ️  Detected serialized JSON string, auto-unescaped.')
+    } catch {
+      // 第三步：尝试递归解析（多层序列化的情况）
+      try {
+        let result = input.trim()
+        let depth = 0
+        const maxDepth = 5
+        while (typeof result === 'string' && depth < maxDepth) {
+          result = JSON.parse(result)
+          depth++
+        }
+        if (typeof result === 'object' && result !== null) {
+          parsed = result
+          console.log(`ℹ️  Detected ${depth}-level serialized JSON string, auto-parsed.`)
+        } else {
+          console.error('Input is not valid JSON.')
+          process.exit(1)
+        }
+      } catch {
+        console.error('Input is not valid JSON.')
+        process.exit(1)
+      }
+    }
   }
 
-  const html = toHtml(parsed)
+  // 生成深度解析版本（展开嵌套 JSON 字符串），但默认不启用
+  const deepParsed = deepParseJsonStrings(parsed)
+
+  const html = toHtml(parsed, deepParsed)
   const filePath = path.join(os.tmpdir(), `json-viewer-${Date.now()}.html`)
   await fs.writeFile(filePath, html, 'utf8')
   openInBrowser(filePath)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zjy4fun/json-open",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Open JSON (stdin or inline text) in a browser with collapsible tree view",
   "type": "module",
   "bin": {
@@ -17,8 +17,12 @@
     "browser",
     "formatter"
   ],
-  "author": "",
+  "author": "zjy4fun",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zjy4fun/json-open"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"