{"_id":"@asmalcev/wc-json-tree","name":"@asmalcev/wc-json-tree","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@asmalcev/wc-json-tree","version":"0.0.1","description":"A small web component for rendering json in the form of a tree","main":"./dist/json-tree.js","scripts":{"dev":"vite","build":"vite build"},"repository":{"type":"git","url":"git+https://github.com/asmalcev/wc-json-tree.git"},"keywords":["web-component","json","tree","json-tree"],"author":{"name":"asmalcev"},"license":"MIT","bugs":{"url":"https://github.com/asmalcev/wc-json-tree/issues"},"homepage":"https://github.com/asmalcev/wc-json-tree#readme","devDependencies":{"vite":"^6.2.1"},"type":"module","exports":{"./json-tree":"./dist/json-tree.js"},"_id":"@asmalcev/wc-json-tree@0.0.1","gitHead":"cb3feff3849f4a67fac3378af514e5ce8e61911b","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-DuEVnE883K/sXz36qSjQ0s53/vs1nLBmY+BgDTNdAj23S7p6p7my+v0mT0DEtlK8g6Em5nXBvJZrvXue/jQmkg==","shasum":"ddec24b894210827f3b092077d07107bb0a4761e","tarball":"https://registry.npmjs.org/@asmalcev/wc-json-tree/-/wc-json-tree-0.0.1.tgz","fileCount":4,"unpackedSize":8004,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDsr6/rouMOzcEwb841f25HsjpS4yebnphKKEW6bh4lOAiBAgG+PZcbOfpmvWh/uwfRH/GSLVR/r+sC+u4piIiw6rQ=="}]},"_npmUser":{"name":"asmalcev","email":"aleksmalcevrmg@gmail.com"},"directories":{},"maintainers":[{"name":"asmalcev","email":"aleksmalcevrmg@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/wc-json-tree_0.0.1_1741518341590_0.591709809972373"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-09T11:05:41.478Z","0.0.1":"2025-03-09T11:05:41.771Z","modified":"2025-03-09T11:05:42.026Z"},"maintainers":[{"name":"asmalcev","email":"aleksmalcevrmg@gmail.com"}],"description":"A small web component for rendering json in the form of a tree","homepage":"https://github.com/asmalcev/wc-json-tree#readme","keywords":["web-component","json","tree","json-tree"],"repository":{"type":"git","url":"git+https://github.com/asmalcev/wc-json-tree.git"},"author":{"name":"asmalcev"},"bugs":{"url":"https://github.com/asmalcev/wc-json-tree/issues"},"license":"MIT","readme":"# Web Component JsonTree\n\nA small web component for rendering json in the form of a tree\n\n## Reference\n| Attribute | Purpose                           | Example values     |\n| --------- | --------------------------------- | ------------------ |\n| `style`   | Pass custom styles into component | `p { color: red }` |\n\n\n| Property   | Purpose                            | Example value                         |\n| ---------- | ---------------------------------- | ------------------------------------- |\n| `data`     | Pass data into component           | `{ a: 1, b: 2, c: { c1: 3, c2: 4 } }` |\n| `style`    | Pass custom styles into component  | `p { color: red }`                    |\n| `replacer` | Replace any default node rendering | `({ defaultNode }) => defaultNode()`  |\n\n| CSS Property | Purpose                                          | Example value |\n| ------------ | ------------------------------------------------ | ------------- |\n| `--tab`      | Indentation from the left edge to create nesting | `10px`, `5%`  |\n| `--space`    | Padding of rows                                  | `10px`, `5%`  |\n\n### `replacer`\n\nProps:\n- `key: string` — name of key from passed object\n- `node: any` — value of node from passed object\n- `level: number` — level of nesting\n- `defaultNode: function` — function, that returns default node\n- `parentNode: HTMLLiElement` — parent inside which the node will be rendered\n\nReturns:\n- `HTMLElement` — node to render\n\n## Examples\n\n### Valid JSON as child\n\n```html\n<json-tree>{ \"a\": 1, \"b\": 2, \"c\": { \"c1\": 3, \"c2\": 4 }}</json-tree>\n```\n\n### js-object as property\n\n```html\n<json-tree></json-tree>\n\n<script>\n    const tree = document.querySelector('json-tree');\n    tree.data = { a: 1, b: 2, c: { c1: 3, c2: 4 } };\n</script>\n```\n\n### Properties with `color: red`\n\n```html\n<json-tree style=\"p { color: red }\"></json-tree>\n\n<script>\n    const tree = document.querySelector('json-tree');\n    tree.data = {\n        a: 1,\n        b: 2,\n        c: { c1: 3, c2: 4 },\n    };\n</script>\n```\n\n### Renderer and style for displaying array with square brackets\n\n```html\n<json-tree></json-tree>\n\n<script>\n    const tree = document.querySelector('json-tree');\n    tree.data = {\n        a: 1,\n        b: 2,\n        c: { c1: 3, c2: 4 },\n        arr: [1, 2, { el: 3 }],\n    };\n\n    tree.renderer = ({ key, node, level, defaultNode, parentNode }) => {\n        const _node = defaultNode();\n\n        if (!Array.isArray(node)) return _node;\n\n        const openBracket = document.createElement('span');\n        openBracket.textContent = ' [';\n\n        const closeBracket = document.createElement('p');\n        closeBracket.textContent = ']';\n\n        _node.querySelector('summary').appendChild(openBracket);\n        _node.appendChild(closeBracket);\n\n        _node.classList.add('array');\n\n        return _node;\n    };\n\n    // this will result in displaying [...] after the closed details with an array inside\n    tree.style = `details.array:not(*[open]) summary::after { content: '...]' }`;\n</script>\n```","readmeFilename":"README.md","_rev":"1-31099ea3f93a194ad0ae70b76e641f8e"}