Interacting with a global Store/State/Vanilla (Collection)

[DennisSmolek]

There are many good issues, discussions, feedback, and even clever hacks related to how to interact with a global state.

I'm using this to centralize/reference to organize the discussion.

ALL Issue References: (I will try and sort this later)

• Query exposing certain internals #265
• Feature request: Export store class so it can be used with Jotai #261
• How to use leva without react #229
• Using with state management #184
• API Request: Persistence #113
• Vanilla JS api #108
• Leva portability to SolidJS #283
• Provide a way to hook into the editing state #181
• Programatically set a value outside of UI #164
• Same key name in nested folders #235

[jo-chemla]

It would be great if Leva could support external stores. This would allow for persistence, without relying on onChange and levaStore.set() events/callbacks, and could allow for jotai/zustand or really any other store, eventually with localStorage persistence. This comment shows a good flow, but involves setting these callbacks for each value of the state to persist, which might be cumbersome for large Leva panels with say a dozen props.

Also related: #12

[jo-chemla]

Sidenote: is it possible to set the onChange(value, path, context) globally on the object passed to useControls so it is not required to add the onChange prop to every key that we want to apply onChange for? For now, my current workaround is pretty convoluted below, but does work with every leva prop type (numbers, select, strings, bools, folders at any nesting hierarchy - :

function eachRecursiveLeva(obj, newProps, lvl=0) {
  const obj2 = structuredClone(obj)
  console.log('obj2', obj2)
  for (var k in obj)
  {
    // If it is an object, go deeper
    if (typeof obj[k] == "object" && obj[k] !== null && !Array.isArray(obj[k]) && !obj[k].value) {
      console.log(Array(lvl + 1).join(" "), 'eachRecursive', k, obj[k])
      if (obj[k].type === 'FOLDER') {
        obj2[k] = {...obj[k], schema: eachRecursiveLeva(obj[k].schema, newProps, lvl + 1)};
        // obj2[k] = eachRecursiveLeva(obj[k].schema, newProps, lvl + 1);
      } else {
        obj2[k] = eachRecursiveLeva(obj[k], newProps, lvl + 1);
      }
    }
    // Otherwise, add newProps, either to the object or into a new object with value prop
    else {
      console.log(Array(lvl + 1).join(" "), k, obj[k])
      if (obj2[k].value) {
        obj2[k] = {
          ...obj2[k], 
          ...newProps
        }
      } else {
        obj2[k] = {
          value: obj2[k], 
          ...newProps
        }
      }
    }
  }
  return obj2
}


const onChangeLeva = (value, path, context) => {
  localStorage.setItem( path, value );
}

const levaParams = {
  // onChange: 'onChangeLeva', // cannot be applied at object level 
  bool: false, 
  array: {
    value: [1, 2, 3],
    step: 0.001,
  },
  select:{
    value: '1',
    options: { 
      '1': '1',
      '2': '2',
    },
  },
  'folder': folder({
    string: 'string', 
    number: 10,
  })
};

const modifiedLevaParams = eachRecursiveLeva(
  levaParams, 
  {onChange: onChangeLeva, transient: false}
  // important: add onChange callback and transient: false
)
console.log(levaParams, '\n', modifiedLevaParams)

// Can then be called via: 
const { debug, fade, lon_lat_height, googleApiKey, ionAccessToken, ionAssetId, tilesetPath } = useControls(modifiedLevaParams)