arraybuffer not working

[HEAVYPOLY]

Hi, I am trying to render arraybuffer as image with vanX.list.

The issue is v.val.data is a Proxy(arrayBuffer), How can I get the actual arrayBuffer?

const Versions = () => {
  const Content = div(
    { style: () => 'min-width:20rem;min-height:20rem;' },
    vanX.list(div({ class: 'grid' }), versions.list, v => button({ class: 'hbox autosaveItem', onclick: () => loadVersion(v.val) },
      div({
        style: () => {
          const arrayBuffer = v.val.data
          const uint8Array = new Uint8Array(arrayBuffer)
          const blob = new Blob([uint8Array], { type: 'image/webp' })
          const imageUrl = URL.createObjectURL(blob)
          prnt({ arrayBuffer })
          return `
          background-image: url(${imageUrl});
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          min-width: 10rem;
          min-height: 10rem;
        `
        },
      }),

      div({ style: 'margin-right:auto;margin-left:auto', class: 'label' }, prettifyVersionKey(v.val)
      ),
    ),),

  )
  return { Content }
}

[sirenkovladd]

https://vanjs.org/x#caveat-native-reactivity
You should avoid it

[Tao-VanJS]

I just released VanX 0.6.0 (#311), which adds a new function vanX.noreactive to exempt certain fields from reactivity conversion. With the new function, the following code can work properly in VanX 0.6.0:

const {div} = van.tags

const data = vanX.reactive([
  vanX.noreactive(new ArrayBuffer(8)),
  vanX.noreactive(new ArrayBuffer(16)),
])

const App = () => div(
  vanX.list(div, data, v => div(v.val.byteLength)),
  div(button({onclick: () => data.push(vanX.noreactive(new ArrayBuffer(24)))}, "Push")),
)

van.add(document.body, App())

[HEAVYPOLY]

  vanX.replace(versions.list, [])
  const versionsData = await getVersionsData()
  for (const v of versionsData) {
    versions.list.push(
      vanX.reactive({
        recordId: v.recordId,
        dateCreated: v.dateCreated,
        imgBuffer: vanX.noreactive(v.imgBuffer),
      })
    )
  }

0.6.0 works! Thank you!