solid-edit-objects

Installation

From a Solid JS project directory:

``
npm i solid-edit-objects
`

In a component file (must use module syntax):

`
import { EditableObject, EditableArray } from 'solid-edit-objects'
`

Usage

in plain JS:

`
import { createEffect, createSignal } from 'solid-js'
import { EditableObject, EditableArray } from 'solid-edit-objects'

const MyComponent = () => {
//Declaring object and array to be edited
let obj = {
foo: ['foo', 'bar' ],
bar: { foo: 'bar'}
hello: 'foo',
num: 23
}
let arr = ['foo', 23, {foo: 'bar'}, ['foo','bar']]

//Declaring signal getter/setter function pairs to make reactive versions of the above values
let [ object, setObject ] = createSignal(obj)
let [ array, setArray ] = createSignal(arr)

//Declare boolean signal for open/close functionality
let [ openObj, setOpenObject ] = createSignal(false)
let [ openArr, setOpenArray ] = createSignal(false)

//create effect that will update the value stored in parent whenever its reactive clone is updated (because its value is read inside the effect). It is best to create separate effects for separate values so that only the relevant effects run when values change.

createEffect(()=>{
obj = object()
})
createEffect(()=>{
arr = array()
})

//JSX for rendering
return(
<>
onclick={(e)=>{
e.preventDefault()
setOpenObject(true)
}}
>
)}>
model={object()}
open={setOpenObject}
setter={setObject}
/>

onclick={(e)=>{
e.preventDefault()
setOpenArray(true)
}}
>
)}>
model={array()}
open={setOpenArray}
setter={setArray}
/>


)
}
``
If the modified value is needed in a parent component when it updates, you can pass it a setter function from the parent similarly to how the setter function is used in the example above to update the original value in EditableObject's parent, MyComponent.