Type problem when calling addBinding dynamically about tweakpane

[lucafaggianelli]

mmm my bad, indeed I finalized my code and it's working with Object.entries:

import type { BindingParams } from 'tweakpane'

export interface ThemeOption {
  default: string | number
  options?: BindingParams
}

export type ThemeOptions = Record<string, ThemeOption>

const initDesigner = (
  container: HTMLElement,
  theme: ThemeOptions,
  onChange: (key: string, value: string | number) => void,
) => {
  const pane = new Pane({
    title: 'Resume Designer',
    expanded: true,
    container,
  })

  const initialData: Record<string, string | number> = {}

  Object.entries(theme).forEach(([key, option]) => {
    initialData[key] = option.default
    pane
      .addBinding(initialData, key, option.options)
      .on('change', (event) => {
        onChange(key, event.value)
      })
  })
 
  pane.addButton({ title: 'Reset' }).on('click', () => {
    // pane.importState({})
  })

  return {...initialData}
}

Thanks for your help!

[davelsan]

That error makes sense to me. You are trying to bind theme keys to the data object. But even if you fix that, there is stil the limitation of Object.entries, which does not produce a fully typed object.

Assuming theme is of type ThemeOptions, you could do the following.

const TypedObject = {
  entries: <T extends {}>(obj: T) => {
    return Object.entries(obj) as [keyof T, T[keyof T]][];
  }
}

TypedObject.entries(theme).forEach(([key, option]) => {
  pane.addBinding(theme, key, option.options); // changed `data` for `theme`
})

Edit: Actually, Object.entries will work just fine in this case too, if you use theme instead of data. Maybe I'm missing something about what you are trying to achieve?

[lucafaggianelli]

Closing as this is not a bug

[davelsan]

Happy to hear you got it working.