Adding method's return value, async methods, and example (of limitation)

Author: Atohallan

example-1.html

@@ -14,6 +14,10 @@
   <div id="main">
 
     <h3>{{ title }}</h3>
+    <a @click="titleReverse2()" class="button">swap</a>
+    <!--a @click="title = meth3(title)" class="button">swap</a-->
+    <a @click="titleReverse3()" class="button">swap</a> <!-- all methods are async -->
+    <br/>
 
     We can have a state in Python which is a counter "i".
     The Python side automatically adds 3 to the counter every few seconds. <br/>
@@ -45,7 +49,6 @@ <h3>{{ title }}</h3>
     Here is a button that modifies the list of buttons, as a test...
     <a @click="clone('more...')" class="button">+clone</a>
 
-
   </div>
 
   <script src="vuejspython.js"></script>
@@ -56,6 +59,15 @@ <h3>{{ title }}</h3>
         i2_injs: function () {
           return this.i * this.i
         }
+      },
+      methods: {
+        async titleReverse2 () { // to my knowledge, we cannot do await directly in @click
+          this.title = await this.meth2(this.title)
+        },
+        async titleReverse3 () { // to my knowledge, we cannot do await directly in @click
+          this.title = await this.meth3(this.title)
+          //           ^^^^^ async even if in pyton it is a non-async method
+        },
       }
     })
   // ^ TODO: maybe handle startup callbacks

example-1.py

@@ -37,6 +37,13 @@ def meth1(self, v):
         if v == '+1':
             self.i += 1
 
+    async def meth2(self, v):
+        await asyncio.sleep(1)
+        return str(v[::-1])
+
+    def meth3(self, v):
+        return str(v[::-1])
+
     def clone(self, v):
         print("TEST: CLONE", type(self.suggestions))
         self.suggestions += [v]

vuejspython.js

@@ -14,6 +14,7 @@ vuejspython.start = function(wsurl, opt={}) {
   }
   vuejspython.wsurl = wsurl
   var ws = new WebSocket(wsurl)
+  let calls = {}
   let atomic = false
   let toApply = {}
   let valuesWhere = {}
@@ -24,6 +25,9 @@ vuejspython.start = function(wsurl, opt={}) {
   })
   ws.addEventListener('message', function(a) {
     a = a.data
+    if (Object.keys(calls).length > 5) {
+      console.log('PROBABLY MISSING RETURN FOR METHOD CALLS', Object.keys(calls).length, 'PENDING')
+    }
     if (a.startsWith('INIT ')) {
       a = JSON.parse(a.substr('INIT '.length))
       let computed = {...opt.computed}
@@ -49,11 +53,16 @@ vuejspython.start = function(wsurl, opt={}) {
         }
       }
       for (let k of a.methods) {
-        methods[k] = function(...args) {
-          ws.send('CALL')
-          ws.send('ROOT')
-          ws.send(k)
-          ws.send(JSON.stringify(args))
+        methods[k] = async function(...args) {
+          return new Promise(function (resolve, reject) {
+            ws.send('CALL')
+            ws.send('ROOT')
+            let callId = (Math.random()*1000).toString().replace(/\./, '')
+            calls[callId] = {resolve, reject}
+            ws.send(callId)
+            ws.send(k)
+            ws.send(JSON.stringify(args))
+          })
         }
       }
       vm = new Vue({
@@ -68,8 +77,16 @@ vuejspython.start = function(wsurl, opt={}) {
         ...opt,
       })
       window.vuejspython_vm = vm // for console-based introspection
-      // TODO: ATOMIC also for the components
+    } else if (a.startsWith('RETURN ')) {
+      let parts = a.split(' ', 2)
+      let callId = parts[1]
+      if (calls[callId] !== undefined) {
+        let v = JSON.parse(a.substr(parts.join(' ').length))
+        calls[callId].resolve(v)
+        delete calls[callId]
+      }
     } else if (a.startsWith('ATOMIC ')) {
+      // TODO: ATOMIC also for the components
       let parts = a.split(' ')
       let upid = parts[1]
       // let k = parts[2] '_v_ATOMIC'

vuejspython.py

@@ -193,7 +193,6 @@ def cleanup():
                     del all[inited]
         try:
             while True:
-                print({k:len(all[k]) for k in all})
                 comm = await websocket.recv()
                 if comm == 'INIT' or comm == 'INFO':
                     clss_name = await websocket.recv()
@@ -255,13 +254,26 @@ def cleanup():
                 elif comm == 'CALL':
                     id = await websocket.recv()
                     o = g_instances[id]
+                    call_id = await websocket.recv()
+                    info('IN', 'CALL_ID', call_id)
                     meth = await websocket.recv()
                     info('IN', 'METH', meth)
                     data = await websocket.recv()
                     info('IN', 'DATA', data)
                     try:
-                        ###############
-                        res = getattr(o, meth)(*json.loads(data))
+                        method_call = getattr(o, meth)(*json.loads(data))
+                        # local block scope
+                        async def local(method_call, call_id):
+                            async def on_return(res):
+                                info('OUT', '{:.80} ...'.format('RETURN %s %s'%(call_id, json.dumps(res))))
+                                await websocket.send('RETURN %s %s'%(call_id, json.dumps(res)))
+
+                            if type(method_call).__name__ == 'coroutine':
+                                task = asyncio.ensure_future(method_call)
+                                task.add_done_callback(lambda t: asyncio.ensure_future(on_return(t.result())))
+                            else:
+                                await on_return(method_call)
+                        await local(method_call, call_id)
                     except Exception as inst:
                         info('ERR', 'Exception while calling method:', inst)
                         info_exception('ERR', '  ')