React Editable Json Tree

 ![npm]()  

⚠ Security advisory

This library was previously affected by an eval security vulnerability.
We have taken steps to mitigate this issue with non-breaking changes in this
patch, v2.2.2, but for more info, please read
our security advisory.

If you do not have time to read and want to completely mitigate this issue,
simply set the allowFunctionEvaluation
prop to false. In the next major version, we will set this value to false by
default.

Table of Contents

- Demo
- Features
- How to use
- Props
- Design
- Development
- Inspired by
- Thanks
- Author
- License

Demo

Demo is available here: Demo

Features

- Json viewer
- Collapse node conditionally via callback function
- Add/remove/update node values
- Implicit type inference of new values ({} for objects, [] for arrays,
true for booleans, etc.)
- Style via callback function
- Make entire structure read-only (or individual nodes, by callback function)
- Callback on global and delta updates
- Supply custom buttons, inputs, etc. via props
- Ability to confirm add/remove/update actions

How to use

$3

``bash
npm install react-editable-json-tree


or


yarn add react-editable-json-tree
`

$3

`jsx
// Import
import {
JsonTree,
ADD_DELTA_TYPE,
REMOVE_DELTA_TYPE,
UPDATE_DELTA_TYPE,
DATA_TYPES,
INPUT_USAGE_TYPES,
} from 'react-editable-json-tree'

// Data
const data = {
error: new Error('error'),
text: 'text',
int: 100,
boolean: true,
null: null,
object: {
text: 'text',
int: 100,
boolean: true,
},
array: [
1,
{
string: 'test',
},
],
}

// Component

`

Here is a screenshot of the result:

!Screenshot

Props

$3

| Key | Description | Type | Required | Default |
| :--: | :-------------------------: | :-------------------: | :------: | :-----: |
| data | Data to be displayed/edited | Object | Array | True | None |

$3

| Key | Description | Type | Required | Default |
| :------: | :---------------------: | :------: | :------: | :-----: |
| rootName | Name of the root object | string | False | root |

$3

| Key | Description | Type | Required | Default |
| :---------: | :----------------------------------------------------: | :--------: | :------: | :-------------------------------: |
| isCollapsed | Whether the node is collapsed (for Array/Object/Error) | Function | False | (keyPath, deep) => (deep !== 0) |

Function parameters:

| Key | Description | Type | Example |
| :-----: | :----------------------------: | :--------: | :-------------------------------------------------------------: |
| keyPath | Path to the current node/value | string[] | ['object'] for data: { object: { string: 'test' } } |
| deep | Depth of the current node | number | 1 for data: { object: { string: 'test' } } on 'object' node |
| data | Data of the current node/value | unknown | { string: 'test' } for data: { object: { string: 'test' } } |

$3

| Key | Description | Type | Required | Default |
| :-----------: | :--------------------------------------------------------------------------: | :--------: | :------: | :--------: |
| onFullyUpdate | Callback function called upon each update with the entire new data structure | Function | False | () => {} |

Function parameters:

| Key | Description | Type |
| :--: | :----------: | :--------------------------------------------------: |
| data | Updated data | Object | Array (same type as the data prop) |

$3

| Key | Description | Type | Required | Default |
| :-----------: | :---------------------------------------------------------------------------: | :--------: | :------: | :--------: |
| onDeltaUpdate | Callback function called upon each update with only the data that has changed | Function | False | () => {} |

Function parameters:

| Key | Description | Type |
| :--: | :---------: | :------: |
| data | Delta data | Object |

Delta data structure:

| Key | Description | Type | Example |
| :------: | :-------------------------------: | :--------: | :-----------------------------------------------------------------: |
| type | Delta type | string | 'ADD_DELTA_TYPE', 'REMOVE_DELTA_TYPE', or 'UPDATE_DELTA_TYPE' |
| keyPath | Path to the current node/value | string[] | ['object'] for data: { object: { string: 'test' } } |
| deep | Depth of the current node | number | 1 for data: { object: { string: 'test' } } on 'object' node |
| key | Modified/created/removed key name | string | None |
| newValue | New value | unknown | None |
| oldValue | Old value | unknown | None |

$3

| Key | Description | Type | Required | Default |
| :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------: | :------: | :-------------------------------------------------: |
| readOnly | If a boolean, whether the entire structure should be read-only. If a function, whether the node/value supplied to the function should be read-only (called for all nodes/values). | boolean | Function | False | (keyName, data, keyPath, deep, dataType) => false |

This function must return a boolean.

Function parameters:

| Key | Description | Type | Example |
| :------: | :---------------------------------: | :--------: | :------------------------------------------------------------------------: |
| keyName | Key name of the current node/value | string | 'object' for data: { object: { string: 'test' } } |
| data | Data of the current node/value | unknown | { string: 'test' } for data: { object: { string: 'test' } } |
| keyPath | Path to the current node/value | string[] | ['object'] for data: { object: { string: 'test' } } |
| deep | Depth of the current node | number | 1 for data: { object: { string: 'test' } } on 'object' node |
| dataType | Data type of the current node/value | string | 'Object', 'Array', 'Null', 'Undefined', 'Error', 'Number', ... |

$3

| Key | Description | Type | Required | Default |
| :------: | :---------------------------------------------------------------------: | :--------: | :------: | :-------------------------------------------------: |
| getStyle | Callback function which should return the CSS style for each node/value | Function | False | (keyName, data, keyPath, deep, dataType) => {...} |

Function parameters:

| Key | Description | Type | Example |
| :------: | :---------------------------------: | :--------: | :------------------------------------------------------------------------: |
| keyName | Key name of the current node/value | string | 'object' for data: { object: { string: 'test' } } |
| data | data of the current node/value | unknown | { string: 'test' } for data: { object: { string: 'test' } } |
| keyPath | Path to the current node/value | string[] | ['object'] for data: { object: { string: 'test' } } |
| deep | Depth of the current node | number | 1 for data: { object: { string: 'test' } } on 'object' node |
| dataType | Data type of the current node/value | string | 'Object', 'Array', 'Null', 'Undefined', 'Error', 'Number', ... |

An example of return:

`javascript
{
minus: {
color: 'red',
},
plus: {
color: 'green',
},
collapsed: {
color: 'grey',
},
delimiter: {},
ul: {
padding: '0px',
margin: '0 0 0 25px',
listStyle: 'none',
},
name: {
color: '#2287CD',
},
addForm: {},
}
`

You can see the default style definitions in src/utils/styles.js.

$3

| Key | Description | Type | Required | Default |
| :--------------: | :--------------------------------------------------------------------------: | :-----------: | :------: | :------------------: |
| addButtonElement | Custom add button element (to confirm adding a new value to an object/array) | JSX.Element | False | + |

The library will add an onClick handler to the element.

$3

| Key | Description | Type | Required | Default |
| :-----------------: | :------------------------------------------------------: | :-----------: | :------: | :------------------: |
| cancelButtonElement | Custom cancel button element (to cancel editing a value) | JSX.Element | False | c |

The library will add an onClick handler to the element.

$3

| Key | Description | Type | Required | Default |
| :---------------: | :----------------------------------------------------: | :-----------: | :------: | :------------------: |
| editButtonElement | Custom edit button element (to finish editing a value) | JSX.Element | False | e |

The library will add an onClick handler to the element.

$3

| Key | Description | Type | Required | Default |
| :----------: | :-----------------------------------------: | :---------------------------: | :------: | :------------------------------------------------------------: |
| inputElement | Custom text input element (to edit a value) | JSX.Element | Function | False | (usage, keyPath, deep, keyName, data, dataType) => |

The library will add a placeholder, ref, and defaultValue prop to the
element. This element will be focused when possible.

Function parameters:

| Key | Description | Type | Example |
| :------: | :----------------------------: | :--------: | :-------------------------------------------------------------------------------------------------------------------------------------------: |
| usage | Usage of the generated input | string | All values are listed in INPUT_USAGE_TYPES |
| keyPath | Path to the current node/value | string[] | [] for data: { object: { string: 'test' } } |
| deep | Depth of the current node | number | 1 for data: { object: { string: 'test' } } on 'object' node |
| key | Key of the current node/value | string | 'object' for data: { object: { string: 'test' } } |
| value | Value of the key | unknown | { string: 'test' } for data: { object: { string: 'test' } } on 'object' node |
| dataType | Data type of the value | string | All values are listed in DATA_TYPES |

$3

| Key | Description | Type | Required | Default |
| :-------------: | :------------------------------------------------------------: | :---------------------------: | :------: | :---------------------------------------------------------------: |
| textareaElement | Custom textarea element (to edit a long value, like functions) | JSX.Element | Function | False | (usage, keyPath, deep, keyName, data, dataType) => <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |</p><p class="my-3">The library will add a </code>ref<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>defaultValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop to the element. This<br />element will be focused when possible.</p><p class="my-3">Function parameters:</p><p class="my-3">| Key | Description | Type | Example |<br />| :------: | :----------------------------: | :--------: | :-------------------------------------------------------------------------------------------------------------------------------------------: |<br />| usage | Usage of the generated input | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | All values are listed in <a href="https://github.com/oxyno-zeta/react-editable-json-tree/blob/master/src/types/inputUsageTypes.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">INPUT_USAGE_TYPES</a> |<br />| keyPath | Path to the current node/value | </code>string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| deep | Depth of the current node | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on 'object' node |<br />| key | Key of the current node/value | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'object'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| value | Value of the key | </code>unknown<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>{ string: 'test' }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on 'object' node |<br />| dataType | Data type of the value | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | All values are listed in <a href="https://github.com/oxyno-zeta/react-editable-json-tree/blob/master/src/types/dataTypes.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">DATA_TYPES</a> |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| Key | Description | Type | Required | Default |<br />| :--------------: | :----------------------------------------------------------------: | :-----------: | :------: | :----------------: |<br />| minusMenuElement | Custom minus menu element (to remove a value from an object/array) | </code>JSX.Element<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | False | </code><span> - </span><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |</p><p class="my-3">The library will add an </code>onClick<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>className<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>style<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop to the element.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| Key | Description | Type | Required | Default |<br />| :-------------: | :-----------------------------------------------------------------------: | :-----------: | :------: | :----------------: |<br />| plusMenuElement | Custom plus menu element (to begin adding a new value to an object/array) | </code>JSX.Element<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | False | </code><span> + </span><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |</p><p class="my-3">The library will add an </code>onClick<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>className<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>style<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop to the element.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| Key | Description | Type | Required | Default |<br />| :----------------: | :-------------------------------------------------------------------------------------------: | :--------: | :------: | :-------------------------------------------------------------------: |<br />| beforeRemoveAction | Async function called upon the user trying to remove a node/value with the minus menu element | </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | False | </code>(key, keyPath, deep, oldValue) => new Promise(resolve => resolve())<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |</p><p class="my-3">This function must return a </code>Promise<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. If the promise is resolved, the<br />node/value will be removed. Otherwise, if rejected, nothing will be done.</p><p class="my-3">Function parameters:</p><p class="my-3">| Key | Description | Type | Example |<br />| :------: | :--------------------------------: | :--------: | :------------------------------------------------------------------------------: |<br />| key | Key name of the current node/value | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'object'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| keyPath | Path to the current node/value | </code>string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| deep | Depth of the current node | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on 'object' node |<br />| oldValue | Old value of the key | </code>unknown<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>{ string: 'test' }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on 'object' node |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| Key | Description | Type | Required | Default |<br />| :-------------: | :--------------------------------------------------------------------------------------: | :--------: | :------: | :-------------------------------------------------------------------: |<br />| beforeAddAction | Async function called upon the user trying to add a node/value with the add menu element | </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | False | </code>(key, keyPath, deep, newValue) => new Promise(resolve => resolve())<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |</p><p class="my-3">This function must return a </code>Promise<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. If the promise is resolved, the<br />node/value will be added. Otherwise, if rejected, nothing will be done.</p><p class="my-3">Function parameters:</p><p class="my-3">| Key | Description | Type | Example |<br />| :------: | :----------------------------: | :--------: | :------------------------------------------------------------------: |<br />| key | Key of the current node/value | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'string'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| keyPath | Path to the current node/value | </code>string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>['object']<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| deep | Depth of the current node | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on 'object' node |<br />| newValue | New value of the key | </code>unknown<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'test'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on 'string' node |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| Key | Description | Type | Required | Default |<br />| :----------------: | :-------------------------------------------------------------: | :--------: | :------: | :-----------------------------------------------------------------------------: |<br />| beforeUpdateAction | Async function called upon the user trying to edit a node/value | </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | False | </code>(key, keyPath, deep, oldValue, newValue) => new Promise(resolve => resolve())<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |</p><p class="my-3">This function must return a </code>Promise<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. If the promise is resolved, the<br />node/value will be updated. Otherwise, if rejected, nothing will be done.</p><p class="my-3">Function parameters:</p><p class="my-3">| Key | Description | Type | Example |<br />| :------: | :----------------------------: | :--------: | :----------------------------------------------------------------------: |<br />| key | Key of the current node/value | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'string'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| keyPath | Path to the current node/value | </code>string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>['object']<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| deep | Depth of the current node | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on 'object' node |<br />| oldValue | Old value of the key | </code>unknown<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'test'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on 'string' node |<br />| newValue | New value of the key | </code>unknown<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'update'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'update' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on 'string' node |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| Key | Description | Type | Required | Default |<br />| :----: | :-------------------------------------------------------------------------: | :------: | :------: | :-------------------: |<br />| logger | Object used to log errors caught from promises (using only the 'error' key) | </code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | False | </code>{ error: () => {} }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| Key | Description | Type | Required | Default |<br />| :-----------------: | :--------------------------------------------------------------------------------------------------------------------------------------------: | :--------: | :------: | :--------------------------------------------------------------------: |<br />| onSubmitValueParser | Function called upon every value addition/update to parse raw string data from inputElements or textareaElements into the correct object types | </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | False | </code>(isEditMode, keyPath, deep, key, rawValue) => nativeParser(rawValue)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |</p><p class="my-3">Function parameters:</p><p class="my-3">| Key | Description | Type | Example |<br />| :--------: | :-------------------------------------------------------------------------------------------: | :--------: | :-------------------------------------------------------------: |<br />| isEditMode | Whether the value is being edited on an existing node/value, otherwise it's being newly added | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>True<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| keyPath | Path to the current node/value | </code>string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>['object']<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| deep | Depth of the current node | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on 'object' node |<br />| key | Key of the current node/value | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'string'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| rawValue | Raw string value from the inputElement or textareaElement | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'test'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for data: </code>{ object: { string: 'test' } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| Key | Description | Type | Required | Default |<br />| :---------------------: | :-----------------------------------------------------------------------------------------------------: | :-------: | :------: | :-----: |<br />| allowFunctionEvaluation | Allow strings that appear to be Javascript function definitions to be evaluated as Javascript functions | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | False | True |</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Design</h2></p><p class="my-3">The library assigns a CSS class to every element. All classes are prefixed with<br />"rejt" to avoid name clashes. To avoid being linked with a CSS file, the<br />library itself uses inline styles.</p><p class="my-3">Here is the list of CSS classes, ordered by REJT element and depth, with the<br />default HTML element on which each class is applied.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- </code>rejt-tree<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (div)</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Collapsed</p><p class="my-3">- </code>rejt-object-node<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (div)<br /> - </code>rejt-name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-collapsed<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-collapsed-text<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-minus-menu<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)</p><p class="my-3">#### Not Collapsed</p><p class="my-3">- </code>rejt-object-node<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (div)<br /> - </code>rejt-name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-not-collapsed<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-not-collapsed-delimiter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-not-collapsed-list<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (ul)<br /> - </code>rejt-not-collapsed-delimiter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-add-form<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-plus-menu<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-minus-menu<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Collapsed</p><p class="my-3">- </code>rejt-array-node<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (div)<br /> - </code>rejt-name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-collapsed<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-collapsed-text<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-minus-menu<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)</p><p class="my-3">#### Not Collapsed</p><p class="my-3">- </code>rejt-array-node<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (div)<br /> - </code>rejt-name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-not-collapsed<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-not-collapsed-delimiter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-not-collapsed-list<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (ul)<br /> - </code>rejt-not-collapsed-delimiter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-add-form<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-plus-menu<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-minus-menu<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- </code>rejt-add-value-node<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- </code>rejt-function-value-node<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (li)<br /> - </code>rejt-name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-edit-form<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-minus-menu<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- </code>rejt-value-node<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (li)<br /> - </code>rejt-name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-edit-form<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)<br /> - </code>rejt-minus-menu<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (span)</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Development</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Build</p><p class="my-3">Build the library to </code>dist/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> using parcel.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />npm run build<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Publish</p><p class="my-3">Publishes the library to npm. This runs a parcel build.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />npm publish<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">We have an app available in <a href="./dev_app" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>dev_app/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> to test this library in<br />your browser during development. We use <a href="https://github.com/wclr/yalc" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">yalc</a><br />to build and link the REJT library inside this subpackage.</p><p class="my-3">If you want to use this dev app, you must run the following command once to<br />initialize yalc:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />npm run yalcInit<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">This will tell yalc to link </code>dev_app/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to the root REJT library (this link<br />is usually stored in </code>~/.yalc/installations.json<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if you're curious). After<br />initializing, you can run the following command in the root package every<br />time you make changes to REJT to push the changes to the dev app<br />(with hot-loading!):</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />npm run yalcPush<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">You can run the dev app just like any old create-react-app application (make<br />sure you're running this inside the </code>dev_app/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> subpackage):</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />npm start<br /></code>``</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Inspired by</h2></p><p class="my-3">- <a href="https://github.com/alexkuz/react-json-tree" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">alexkuz/react-json-tree</a><br />- <a href="https://github.com/krispo/json-tree" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">krispo/json-tree</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Thanks</h2></p><p class="my-3">- My wife BH to support me doing this</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Author</h2></p><p class="my-3">- <a href="https://github.com/oxyno-zeta" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Oxyno-zeta (Havrileck Alexandre)</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <a href="https://github.com/Phanabani" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Phanabani</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">MIT (see <a href="https://github.com/oxyno-zeta/react-editable-json-tree/blob/master/LICENSE.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">License.md</a>).<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"27:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16 || ^17 || ^18\"}]]}],[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16 || ^17 || ^18\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"28:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":8}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"eslint\",{\"href\":\"/package/eslint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.24.0\"}]]}],[\"$\",\"$L5\",\"eslint-config-airbnb\",{\"href\":\"/package/eslint-config-airbnb\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint-config-airbnb\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.0.4\"}]]}],[\"$\",\"$L5\",\"eslint-plugin-import\",{\"href\":\"/package/eslint-plugin-import\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L2a\",\"$undefined\"]}],\"eslint-plugin-import\"]}],\"$L2b\"]}],\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2a:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2b:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.0\"}]\n2c:[\"$\",\"$L5\",\"eslint-plugin-jsx-a11y\",{\"href\":\"/package/eslint-plugin-jsx-a11y\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint-plugin-jsx-a11y\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.5.1\"}]]}]\n2d:[\"$\",\"$L5\",\"eslint-plugin-react\",{\"href\":\"/package/eslint-plugin-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint-plugin-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.30.0\"}]]}]\n2e:[\"$\",\"$L5\",\"eslint-plugin-react-hooks\",{\"href\":\"/package/eslint-plugin-react-hooks\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint-plugin-react-hooks\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.6.0\"}]]}]\n2f:[\"$\",\"$L5\",\"parcel\",{\"href\":\"/package/parcel\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"parcel\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.7.0\"}]]}]\n30:[\"$\",\"$L5\",\"yalc\",{\"href\":\"/package/yalc\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinej"])</script><script>self.__next_f.push([1,"oin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"yalc\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0-pre.53\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>