Creating an options selecter

[HEAVYPOLY]

const Options = ({ label, options, setting }) => {
  return div({
    class: 'dark blurry',
    style: 'pointer-events:all;min-height:100%;flex-direction:row;min-width:max-content;gap:1rem;border-radius:.5rem;box-sizing:border-box;margin:.1rem',
    onclick: (e) => { e.stopPropagation() }
  },
  div({ class: 'f2 cJ', style: 'padding:1rem;width:min-content;' }, label),
  select(
    {
      style: 'margin:.5rem;box-sizing:border-box',
      oninput: e => { setting.val = e.target.value; prnt('setting', setting.val, exportOptions) },
    },
    options.map(c => option({ value: c, selected: c == setting }, c))
  ),
  )
}

const Export = () => {
  return div({ style: 'flex-direction:row;' },
    Options({ label: 'Size Mult', options: [0.25, 0.5, 1, 1.5, 2, 3], setting: vanX.stateFields(exportOptions).multiplier }),

Hi, I'm trying to make an options selecter, passing in a vanX.reative object as setting (exportOptions)

This prints the correct values (setting.val) but exportOptions object is not updated. Is there a way to do this?

[Tao-VanJS]

For option({ value: c, selected: c == setting }, c), should setting be setting.val?

[Tao-VanJS]

Also you need to wrap c == ... in a binding function.

[HEAVYPOLY]

const exportOptions = vanX.reactive({
   width: 1920,
   height: 1920,
   multiplier: 1,
   imageType: 'png',
})

options.map(c => option({ value: c, selected: () => (c == setting.val) }, c))
Tried like this.

  oninput: e => { setting.val = e.target.value; prnt('info', setting.val, exportOptions) },

this prints

info! 2 Proxy(Object) {width: 1920, height: 1920, multiplier: 1, imageType: 'png', Symbol(): {…}, …}

I'm confused because setting.val looks correct, but exportOptions is unchanged (multiplier should be 2)

[Tao-VanJS]

exportOptions should have the right value if you access its fields. But the value displayed in the console is not updated.

[HEAVYPOLY]

Ah, that was it. Works correctly now. Is console updated afterwards?

[Tao-VanJS]

No. Console value won't be updated. This can be improved in the next version of VanX.

[HEAVYPOLY]

Ok thanks. If it's bad for performance having console value isn't a big deal

[Tao-VanJS]

I probably have an idea of improving the console value without performance overhead. Will try it out 😀.

[Tao-VanJS]

Hi @HEAVYPOLY,

VanX 0.5.0 was just released (#300), which improved the debugability when reactive objects are logged in the console.

[HEAVYPOLY]

Thank you! Also want to say I am converting my entire webapp over to vanJS and I'm very happy with the results so far! www.webbypaint.com

I'm also wondering does vanX.reactive have val / oldVal comparison and not update if val === oldVal?

[Tao-VanJS]

Good to know!

Also your feedback has helped VanJS and VanX evolve through multiple versions.