Using proxies in Nue.js

[hichem-dahi]

Can someone explain what purpose this Proxy object serves in the code?

const ctx = new Proxy({}, {
    get(__, key) {
      // keep this order
      for (const el of [self, impl, data, $parent, $parent.bind]) {
        const val = el && el[key]
        if (val != null) return val
      }
    },
    set(__, key, val) {
      // parent key? (loop items)
      if ($parent && $parent[key] !== undefined) {
        $parent[key] = val
        $parent.update()
      } else {
        self[key] = val
      }
      return true
    }
  })

https://github.com/nuejs/nuejs/blob/master/src/nue.js#L296

[tipiirai]

That proxy is a vital part of Nue JS. An expression like{ title } attempts to get the value of the title- property first from the component instance (self), then from the class instance (impl), then from the provided data object (data), then from the parent object ($parent), and finally from the bind attribute ($parent.bind). This indeed looks hacky, but is a very simple/powerful way to deal with data access.

[hichem-dahi]

Thank you for clarifying things.
Can you give an example of when and where the proxy's trap gets triggered? I'm having difficulty understanding this since there's no target object.

[tipiirai]

The { title } expression gets compiled to a function like this (_) => _.title which is called by Nue JS on the client side. The _ variable is the proxy instance we talked about. The compiler is here:

https://github.com/nuejs/nuejs/blob/master/ssr/compile.js

And here is the exact spot where a variable is prefixed with the context:

https://github.com/nuejs/nuejs/blob/master/ssr/expr.js#L25