reactive mirror

[HEAVYPOLY]

Hi, I have a reactive object like this:

const toolSettings = vanX.reactive({
  txX: { readable: 'Stretch X', v: 1.0, max: 4.5, center: 1.0 },
  txY: { readable: 'Stretch Y', v: 1.5, max: 4.5, center: 1.0 },
  ...
  ...
})

const rtl = van.derive(vanX.reactive(
  Object.entries(toolSettings).map(([key, v]) => [key, v.v])
))

And I want to mirror it like this, so that rtl.txX matches settingsInfo.txX.v with a two way binding.
This works for initialization but isn't updating when settingsInfo.txX.v changes

Edit:

const rtl = vanX.reactive(Object.fromEntries(
  Object.entries(defaultToolSettings).map(([key, v]) => [key, v.v])
))
van.derive(() => {
  const toolSettingsCollapsed = {}
  Object.entries(toolSettings).forEach(([key, value]) => {
    toolSettingsCollapsed[key] = value.v
  })
  prnt('hi', toolSettingsCollapsed)
  vanX.replace(rtl, toolSettingsCollapsed)
})

This seems to work, it goes through every setting each time which I hope isn't too inefficient

[Tao-VanJS]

For your purpose, you can try "calculated fields" in VanX.

[sirenkovladd]

I don't think that we really need any reactive or calculated fields

Try to look on

const toolSettings = vanX.reactive({
  txX: { readable: 'Stretch X', v: 1.0, max: 4.5, center: 1.0 },
  txY: { readable: 'Stretch Y', v: 1.5, max: 4.5, center: 1.0 },
})

const rtl = new Proxy(toolSettings, {
	get(target, prop) {
    return target[prop].v;
  },
  set(target, prop, value) {
    return target[prop].v = value;
  }
})

van.derive(() => {
	console.log('result', rtl)
})

/**
"result", {
  txX: 1,
  txY: 1.5
}
*/

toolSettings.txY.v = 5
/**
"result", {
  txX: 1,
  txY: 5
}
*/
rtl.txX = 2
/**
"result", {
  txX: 2,
  txY: 5
}
*/

[sirenkovladd]

https://jsfiddle.net/Sirenko/u1ms0xnv/21/

[HEAVYPOLY]

This is exactly what I was looking for, thank you!

[HEAVYPOLY]

Is there to get rtl to reactive to be used with vanX.list?

const toolSettings = vanX.reactive(defaultToolSettings)

const rtl = new Proxy(toolSettings, {
  get (target, prop) { return target[prop].v },
  set (target, prop, value) { return target[prop].v = value }
})
console.log('size', rtl.sz)

const Props = (object) => {
  return vanX.list(
    div({
      class: 'gridMd f1',
      style: `width:100%;gap:1rem;height:min-content;
        grid-template-columns:repeat(auto-fill,minmax(29rem, 1fr));`
    }),
    object,
    ({ val: v }, _, key) => {
      div('hi')
    })
}
van.add(document.body, Props(vanX.reactive(rtl)))

log size works correctly but not Props()

Edit: skipping the symbols in rtl object worked

const rtl = new Proxy(toolSettings, {
  get (target, prop) { if (typeof prop !== 'symbol') return target[prop].v },
  set (target, prop, value) { return target[prop].v = value }
})

  const newStroke = { ...rtl }
  prnt('CREATE STROKE', newStroke.sz)
  return newStroke

[HEAVYPOLY]

@Tao-VanJS calc worked, thanks!

const rtl = vanX.reactive(
  Object.entries(toolSettings).reduce((acc, [key, value]) => {
    acc[key] = vanX.calc(() => value.v)
    return acc
  }, {})
)
console.log('size', rtl)

const Props = (object) => {
  prnt('props,', object)
  return vanX.list(div({ class: 'absolute red column' }), object, ({ val: v }, _, key) => {
    return div(key, v)
  })
}