How evil is this?

[cphillips]

First, why would I want this?
Answer:
Deep Nested reactivity like mobx
Want to construct complex class trees at runtime
Want to pass reactive objects into deeply nested UI ( avoid passing both proxy and snapshot into every component )
Want reactivity to survive useSnapshot()

import { proxy } from 'valtio'

class MyViewModel {
  prop1: string
  proxy?: MyViewModel

  constructor() {
    this.prop1 = 'Some String'

    //Make MobX style reactive, proxy will survive map, for() useSnapshot etc
    if (typeof (window) !== 'undefined') {//Only do this client side
      const prox = proxy(this)
      this.proxy = ref(prox)
      return prox
    }
  }

  updateProp() {
    (this.proxy ?? this).prop1 = 'Some Other String'
  }
}

function DeeplyNested( props:{ model:MyViewModel } ){
    const model = useSnapshot(props.model)

    return <button onClick={()=>model.updateProp()}> Click Me </button> 
}