Reactive browser console

bindConsole.js

const setWm = (wm, obj, v) => {
  wm.set(obj, Object.assign(wm.get(obj), { internal: v }))
  wm.get(obj).listener(v)
}

const bindWm = (wm, obj, ref, f) => {
  wm.set(obj, {
    listener: () => {},
    listen: function(listener) { this.listener = listener },
    internal: ref,
  })
  wm.get(obj).listen(f)
}

const bindConsole = (obj, str, ref, f) => {
  const wm = new WeakMap()

  const pattern = {
    get()  { return wm.get(this).internal },
    set(v) { setWm(wm, this, v) }
  }

  bindWm(wm, obj, ref, f)
  Object.defineProperty(obj, str, pattern)
}

export default bindConsole

component.html

<script>
  // this is actually a svelte component
  // .html is just for syntax highlight
  import bindConsole from './bindConsole'

  let myProp = 10                // svelte state
  window.app = {}               //  assign global variable app
  window.app.myProp = myProp   //   assign myProp (not reactive yet)

  // tada! 
  bindConsole(window.app, 'myProp', myProp, (newVal) => { myProp = newVal })

  // global app.myProp is now reactive with internal svelte variable myProp
</script>

<h1> myProp: {myProp} </h1>

repl.link

https://svelte.dev/repl/e139ee91c1834124a2dcf891c2049b83?version=3.52.0