const adapter = await navigator.gpu.requestAdapter()!
const device = await adapter.requestDevice()!

const Foo = () => {
  const [store, setStore] = createStore({
    buffer: new Float32Array(10)
  })

  const gpuBuffer = device.createBuffer({
    size: store.buffer.byteLength,
    usage: GPUBufferUsage.COPY_DST
  })

  createEffect(() => {
    console.log('buffer changed!', store.buffer)
    // sync buffer data change to GPUBuffer
    device.queue.writeBuffer(gpuBuffer, 0, store.buffer)
  })

  // this trigger a update as excepted
  // setStore('buffer', v => {
  //   v[0] = 1
  //   return new Float32Array(v)
  // })

  // but I want to avoid buffer recreation for performance reason
  setStore('buffer', v => {
    v[0] = 1
    // maybe somehow I can tell solid-js they are not same here?
    return v
  })

  return null
}

const adapter = await navigator.gpu.requestAdapter()!
const device = await adapter.requestDevice()!

const Foo = () => {
  const [store, setStore] = createStore({
    buffer: new Float32Array(10)
  })

  const gpuBuffer = device.createBuffer({
    size: store.buffer.byteLength,
    usage: GPUBufferUsage.COPY_DST
  })

  createEffect(() => {
    console.log('buffer changed!', store.buffer)
    // sync buffer data change to GPUBuffer
    device.queue.writeBuffer(gpuBuffer, 0, store.buffer)
  })

  // this trigger a update as excepted
  // setStore('buffer', v => {
  //   v[0] = 1
  //   return new Float32Array(v)
  // })

  // but I want to avoid buffer recreation for performance reason
  setStore('buffer', v => {
    v[0] = 1
    // maybe somehow I can tell solid-js they are not same here?
    return v
  })

  return null
}