Making properties un-redundant (but needing a default value)

There is still a blink, but we would need async data in vuejs.
Consider changing how the default is given, currently, not so vuejs:
   props = ['i']
   i = 0
could be the more verbose, more vuejs (check):
   props = {'val': {'default': 0}}

Author: Atohallan

example-8.html

@@ -20,10 +20,10 @@
     <progress style="width: 500px" max="100" :value="i"></progress>
     <my-show :val="i" pre="my-show 1:"></my-show>
     <my-show :val="i" pre="my-show 2:"></my-show>
+    <my-square :val="i" pre="my-square 1:"></my-square>
+    <my-square :val="i" :pre="'my-square '+i+':'"></my-square>
     <my-dummy></my-dummy>
     <my-dummy></my-dummy>
-    <my-square :val="i" pre="my-square 1:"></my-square>
-    <my-square :val="i" pre="my-square 2:"></my-square>
   </div>
 
   <script src="vuejspython.js"></script>
@@ -36,12 +36,9 @@
   /* vuejspython component */
   vuejspython.component('Dummy', 'my-dummy', {
     template: '<div> {{i}} <button @click="incr(1)">+</button> -> {{i**2}} (in the vjspy template)</div>',
-    beforeCreate: () => {console.log("beforeCreate")},
-    created: () => {console.log("created")},
-    data: () => ({i:parseInt(Math.random()*100)})
   })
   vuejspython.component('Square', 'my-square', {
-    props: ['val', 'pre'],
+    props: ['pre'], /* these props are visible only on the js side */
     template: '<div> {{pre}} {{val}} -> {{square}} (py-computed value, in the component)</div>',
     data: () => ({})
   })

example-8.py

@@ -26,7 +26,9 @@ def incr(self, d):
 
 @model
 class Square:
-    val = 0 # prop
+    props = ['val'] # python defined props
+    val = 0 # need a value for typing reasons, maybe this will change
+    # TODO? consider a more vuejs syntax like: props = {'val': {'default': 0}}
 
     def computed_square(self):
         return self.val ** 2

vuejspython.js

@@ -22,7 +22,6 @@ vuejspython.start = function(wsurl, opt={}) {
   })
   ws.addEventListener('message', function(a) {
     a = a.data
-    console.log("rcv root", a)
     if (a.startsWith('INIT ')) {
       a = JSON.parse(a.substr('INIT '.length))
       let computed = {...opt.computed}
@@ -89,37 +88,32 @@ vuejspython.component = function(pyClass, name, opt={}) {
 
   // later, consider refactoring if the two are really similar
   if (opt.props === undefined) opt.props = []
+  if (opt.data === undefined) opt.data = ()=>({})
 
   let created = opt.created || (()=>{})
-  for (let k of ['created']) delete opt[k]
-
-  // TODO make a first call to know what is in data (what is reactive)
-  //      same for python-computed I guess
-  // ... and this will make all this registration async, so async component
-  // currently, we are forced to declare it also in js
+  let props = opt.props
+  let optdata = opt.data
+  for (let k of ['created', 'data', 'props']) delete opt[k]
 
-  // TODO watch properties below to send notif
-  Vue.component(name, {
+  let description = (pyState) => ({
     created: function() {
+      let vm = this
+      vm.__id = 'NOT-SET-YET'
       let wsurl = vuejspython.wsurl
       let ws = new WebSocket(wsurl)
       let valuesWhere = {}
       ws.addEventListener('open', function(a) {
         ws.send('INIT')
         ws.send(pyClass)
-        ws.send(JSON.stringify(opt.props))
+        ws.send(JSON.stringify(vm.$props))
       })
 
-      let vm = this
-      vm.__id = 'NOT-SET-YET'
       ws.addEventListener('message', function(a) {
         a = a.data
         vm.__ws = ws
-        console.log("rcv", name, a)
         if (a.startsWith('INIT ')) {
           a = JSON.parse(a.substr('INIT '.length))
           vm.__id = a.id
-          console.log("RECEIVED INIT ID", pyClass, a.id, Object.keys(a.state))
 
           for (let k in a.state) {
             vm.$set(vm, k, a.state[k])
@@ -133,6 +127,17 @@ vuejspython.component = function(pyClass, name, opt={}) {
               ws.send(JSON.stringify(v))
             })
           }
+          for (let k of a.props) {
+            vm.$watch(k, function (v, old) {
+              if (this.__id === 'NOT-SET-YET') return
+              if (valuesWhere[k] == v) return
+              delete valuesWhere[k]
+              ws.send('UPDATE')
+              ws.send(vm.__id)
+              ws.send(k)
+              ws.send(JSON.stringify(v))
+            }, {immediate: true})
+          }
           for (let k of a.methods) {
             vm[k] = function(...args) {
               ws.send('CALL')
@@ -147,7 +152,6 @@ vuejspython.component = function(pyClass, name, opt={}) {
           let k = parts[2]
           if (upid === vm.__id) {
             let v = a.substr(parts.join(' ').length)
-            console.log(v)
             v = JSON.parse(v)
             valuesWhere[k] = v
             vm.$set(vm, k, v)
@@ -157,6 +161,31 @@ vuejspython.component = function(pyClass, name, opt={}) {
 
       created.bind(this)() // not sure when it is best to call it, or whether we should accept it at all
     },
+    data: () => ({
+      ...pyState,
+      ...optdata()
+    }),
+    props,
     ...opt
   })
+
+
+  Vue.component(name, function (resolve, reject) {
+    let wsurl = vuejspython.wsurl
+    let wsMeta = new WebSocket(wsurl)
+    wsMeta.addEventListener('open', function(a) {
+      wsMeta.send('INFO')
+      wsMeta.send(pyClass)
+    })
+    wsMeta.addEventListener('message', function(a) {
+      a = a.data
+      if (a.startsWith('INFO ')) {
+        a = JSON.parse(a.substr('INFO '.length))
+        props = [...props, ...a.props]
+        let desc = description(a.state)
+        resolve(desc)
+        wsMeta.close()
+      }
+    })
+  })
 }

vuejspython.py

@@ -3,23 +3,34 @@
 import websockets
 import json
 from observablecollections.observablelist import ObservableList
+import traceback
 
 g_components = {}
 g_instances = {}
 
 PREFIX = {
-    'IN':  '🢀║ ',
-    'OUT': ' ║🢂',
-    'END': '╚╩╝',
-    'ERR': ' │ ⚠⚠⚠',
-    'def': ' │ ►►►',
+    'IN':   '🢀║   IN',
+    'OUT':  ' ║🢂 OUT',
+    'END':  '╚╩╝',
+    'ENDx': '    ..',
+    'ENDe': '    ⚠⚠',
+    'ERR':  ' │ ⚠⚠⚠⚠⚠⚠',
+    'def':  ' │ ►►►%s►►►',
 }
-infos = ('DEPS'+' IN OUT END ERR').split()
+# list of enabled logging
+infos = ('DEPS ENDx ENDe'+' IN OUT END ERR').split()
 def info(k, *args, **kwargs):
     if k in infos:
-        pre = PREFIX['def']
-        if k in PREFIX.keys(): pre = PREFIX[k]
-        print('      ', pre, k, *args, **kwargs)
+        if k in PREFIX.keys():
+            pre = PREFIX[k]
+        else:
+            pre = PREFIX['def']%(k,)
+        print('      ', pre, *args, **kwargs)
+
+def info_exception(k, pre=''):
+    for l in traceback.format_exc().split('\n'):
+        info(k, pre + l)
+
 
 def is_ndarray(a):
     try:
@@ -40,18 +51,19 @@ def cache_stale(cache, k, v):
         return (v != cache[k]).any()
     return cache[k] != v
 
-def make_prop(k):
+def make_prop(k, no_broadcast):
     f = '_'+k
     def get(o):
         if hasattr(o, '_v_currently_computing') and o._v_currently_computing != []: # may be triggered before "start" (in __init__)
             o._v_deps[o._v_currently_computing[-1]].append(k)
-            info("DEPS", o._v_deps)
+            info('DEPS', o._v_deps)
         return getattr(o, f)
     def set(o, v):
         def trigger_on_change(*args):
             call_watcher(o, k)
             update_computed_depending_on(o, k)
-            broadcast(o, k)
+            if not no_broadcast:
+                broadcast(o, k)
         if type(v) == list:
             v = ObservableList(v)
             v.attach(trigger_on_change)
@@ -102,32 +114,34 @@ def recompute_computed(o, k):
 
 def field_should_be_synced(cls):
     novue = cls._v_novue if hasattr(cls, '_v_novue') else []
-    return lambda k: k[0] != '_' and k not in novue
+    if hasattr(cls, 'props'):
+        novue.append('props')
+    return lambda k: k[0] != '_' and not k.startswith('computed_') and k not in novue
 
 # class annotation
 def model(cls):
+    if not hasattr(cls, 'props'): setattr(cls, 'props', [])
     g_components[cls.__name__] = cls
     prefix = 'computed_'
     novue = cls._v_novue if hasattr(cls, '_v_novue') else []
     cls._v_nobroadcast = cls._v_nobroadcast if hasattr(cls, '_v_nobroadcast') else []
     computed = [k[len(prefix):] for k in dir(cls) if k.startswith(prefix)]
     cls._v_computed = {}
+    cls._v_just_schedule = True
     for k in computed:
         cls._v_computed[k] = getattr(cls, prefix+k)
         setattr(cls, k, make_computed_prop(k))
     for k in filter(field_should_be_synced(cls), dir(cls)):
         if not callable(getattr(cls, k)):
             v = getattr(cls, k)
             setattr(cls, '_'+k, v)
-            setattr(cls, k, make_prop(k))
+            setattr(cls, k, make_prop(k, k in cls.props))
     return cls
 
 
 def broadcast(self, k):
-    print("BCAST", hasattr(self, '__id'), k)
     if not hasattr(self, '__id'): return # no id yet, still building
     if k in self._v_nobroadcast: return
-    print("     ", self.__id, k, getattr(self, k))
     asyncio.ensure_future(broadcast_update(self.__id, k, getattr(self, k)))
 
 def call_watcher(o, k):
@@ -158,18 +172,19 @@ def next_instance_id():
 
     async def handleClient(websocket, path):
         # TODO: these all should be per-id? to avoid unncessary calls?
+        # TODO: cleanup g_instances (on socket disconnect at least)
         all.append(websocket)
         try:
             while True:
                 comm = await websocket.recv()
-                print("COMM", comm)
-                if comm == 'INIT':
+                if comm == 'INIT' or comm == 'INFO':
                     clss_name = await websocket.recv()
-                    print("CLASS NAME", clss_name)
+                    info('IN', comm, clss_name)
                     if clss_name == 'ROOT':
                         id = clss_name
                         o = g_instances[id]
                         clss = type(o)
+                        o._v_just_schedule = False
                     elif clss_name not in g_components:
                         info('ERR', 'Component type ' + clss_name + ' not found (missing @model?).')
                     else:
@@ -178,33 +193,43 @@ async def handleClient(websocket, path):
                         id = next_instance_id()
                         setattr(o, '__id', id)
                         setup_model_object_infra(o)
-                        data = await websocket.recv()
-                        info('IN', 'PROPS', data)
-                        data = json.loads(data)
-                        for k in data:
-                            setattr(o, k, '')
-                        setup_model_object_infra(o)
                         g_instances[id] = o
+                        if comm == 'INIT':
+                            prop_values = await websocket.recv()
+                            prop_values = json.loads(prop_values)
+                            info('IN', prop_values)
+                            for k in prop_values.keys():
+                                setattr(o, k, prop_values[k])
+                            o._v_just_schedule = False
+                            recompute_scheduled_computed(o)
+                        else:
+                            o._v_just_schedule = False
+                            # we do it as for computed, we have no reasonable default...
+                            # as they might depend on the properties (and thus their type is unknown)
+                            # it would be called anyway on state[k] = getattr(o, k) below
+                            # and for now we don't know what to put as a default value (that will be temporary present on the js side)
+                            recompute_scheduled_computed(o)
                     state = {}
+                    props = o.props if hasattr(o, 'props') else []
                     methods = []
                     for k in filter(field_should_be_synced(clss), dir(clss)):
-                        if callable(getattr(o, k)):
+                        if k in props: continue
+                        if callable(getattr(clss, k)):
                             methods.append(k)
                         else:
                             state[k] = getattr(o, k)
                             state[k] = sanitize(state[k])
                     to_send = {
                         'id': id,
+                        'props': props,
                         'state': state,
                         'methods': methods
                     }
-                    info('OUT', 'INIT', clss.__name__, id, list(state.keys()))
-                    await websocket.send('INIT ' + json.dumps(to_send))
+                    info('OUT', comm, to_send)
+                    await websocket.send(comm + ' ' + json.dumps(to_send))
                 elif comm == 'CALL':
                     id = await websocket.recv()
-                    print(type(id), id)
                     o = g_instances[id]
-                    print(o)
                     meth = await websocket.recv()
                     info('IN', 'METH', meth)
                     data = await websocket.recv()
@@ -213,7 +238,8 @@ async def handleClient(websocket, path):
                         ###############
                         res = getattr(o, meth)(*json.loads(data))
                     except Exception as inst:
-                        info('ERR', '... exception while calling method:', inst)
+                        info('ERR', 'Exception while calling method:', inst)
+                        info_exception('ERR', '  ')
                 elif comm == 'UPDATE':
                     id = await websocket.recv()
                     o = g_instances[id]
@@ -225,11 +251,18 @@ async def handleClient(websocket, path):
                         call_watcher(o, k)
                     except Exception as e:
                         info('ERR', 'Not a JSON value (or watcher error) for key', k, '->', v, '//', e)
-                        import traceback
-                        traceback.print_exc()
-        except:
-            info('END', 'websocket disconnected')
-            pass # disconnected
+                        info_exception('ERR', '  ')
+        except websockets.ConnectionClosed as e:
+            if e.code == 1001:
+                info('END', 'disconnected')
+            elif e.code == 1005:
+                info('END', 'closed')
+            else:
+                info('END', e)
+                info_exception('ENDx')
+        except Exception as e:
+            info('END', e)
+            info_exception('ENDe')
     return handleClient
 
 # decorator
@@ -245,7 +278,6 @@ def setup_model_object_infra(o):
     cls = o.__class__
     o._v_cache = {}
     o._v_currently_computing = []
-    o._v_just_schedule = False
     o._v_schedule_recomputing = []
     o._v_deps = {}
     # Set all attributes, so they get wrapped (e.g., observable) if necessary