statebus 6.1.20 → 7.0.0

package/{client.js → clients.js}

@@ -2,6 +2,7 @@
     var websocket_prefix = (clientjs_option('websocket_path')
                             || '_connect_to_statebus_')
 
+    // Todo: remove this global
     window.dom = window.dom || new Proxy({}, {
         get: function (o, k) { return o[k] },
         set: function (o, k, v) {
@@ -37,12 +38,12 @@
         //     link.href = url
         //     url = link.href
         // }
-        console.log('opening websocket to', url)
+
         return new WebSocket(url + '/' + websocket_prefix + '/websocket')
         // return new SockJS(url + '/' + websocket_prefix)
     }
     function client_creds (server_url) {
-        var me = bus.fetch('ls/me')
+        var me = bus.get('ls/me')
         bus.log('connect: me is', me)
         if (!me.client) {
             // Create a client id if we have none yet.
@@ -51,19 +52,20 @@
             me.client = c || (Math.random().toString(36).substring(2)
                               + Math.random().toString(36).substring(2)
                               + Math.random().toString(36).substring(2))
-            bus.save(me)
+            bus.set(me)
         }
 
         set_cookie('client', me.client)
         return {clientid: me.client}
     }
 
-    function braid_http_mount (prefix, url) {
+    function http_mount (prefix, url) {
         var preprefix = prefix.slice(0,-1)
         var has_prefix = new RegExp('^' + preprefix)
         var is_absolute = /^https?:\/\//
-        var client_fetched_keys = new bus.Set()
-        //if (url[url.length-1]=='/') url = url.substr(0,url.length-1)
+        var subscriptions = {}
+        var put_counter = 0
+
         function add_prefix (key) {
             return is_absolute.test(key) ? key : preprefix + key }
         function rem_prefix (key) {
@@ -73,45 +75,146 @@
         function rem_prefixes (obj) {
             return bus.translate_keys(bus.clone(obj), rem_prefix) }
 
-        bus(prefix).to_save   = function (obj, t) {
-            bus.save.fire(obj)
+        var puts = new Map()
+        function enqueue_put (url, body) {
+            var id = put_counter++
+            puts.set(id, {url: url, body: body, id: id})
+            send_put(id)
+        }
+        function send_put (id) {
+            try {
+                puts.get(id).status = 'sending'
+                braid_fetch(
+                    puts.get(id).url,
+                    {
+                        method: 'put',
+                        headers: {
+                            'content-type': 'application/json',
+                            'put-order': id,
+                        },
+                        body: puts.get(id).body
+                    }
+                ).then(function (res) {
+                    if (res.status !== 200)
+                        console.error('Server gave error on PUT:',
+                                      e, 'for', puts.get(id).body)
+                    puts.delete(id)
+                }).catch(function (e) {
+                    console.error('Error on PUT, waiting...', puts.get(id).url)
+                    puts.get(id).status = 'waiting'
+                })
+            } catch (e) {
+                console.error('Error on PUT, waiting...', puts.get(id).url)
+                puts.get(id).status = 'waiting'
+            }
+        }
+        function retry_put (id) {
+            setTimeout(function () {send_put(id)}, 1000)
+        }
+        function send_all_puts () {
+            for (var id of puts.keys())
+                if (puts.get(id).status === 'waiting') {
+                    console.log('Sending waiting put', id)
+                    send_put(id)
+                }
+        }
 
-            // var x = {save: obj}
-            // if (t.version) x.version = t.version
-            // if (t.parents) x.parents = t.parents
-            // if (t.patch)   x.patch   = t.patch
-            // if (t.patch)   x.save    = rem_prefix(x.save.key)
+        bus(prefix).to_set   = function (obj, t) {
+            bus.set.fire(obj)
 
-            braid_fetch(url + rem_prefix(obj.key),
-                        {
-                            method: 'put',
-                            'content-type': 'application/json',
-                            body: JSON.stringify(obj.val)
-                        })
+            var put = {
+                url: url + rem_prefix(obj.key),
+                body: JSON.stringify(obj.val)
+            }
+            if (t.version) put.version = t.version
+            if (t.parents) put.parents = t.parents
+            if (t.patch)   put.patch   = t.patch
+            var put_id = put_counter++
+            puts.set(put_id, put)
+            send_put(put_id)
         }
 
-        bus(prefix).to_fetch  = function (key, t) {
-            try {
-                braid_fetch(url + rem_prefix(key),
-                            {
-                                method: 'get',
-                                subscribe: true,
-                                headers: {accept: 'application/json'}
-                            }
-                           ).andThen( function (x) {
-                               t.return({
-                                   key: key,
-                                   val: add_prefixes(JSON.parse(x.body))
-                               })
-                           })
-            } catch (e) {
-                console.error('Braid-HTTP network error:', e)
+        bus(prefix).to_get  = function (key, t) {
+            // Subscription can be in states:
+            // - connecting
+            // - connected
+            // - reconnect
+            // - reconnecting
+            // - aborted
+
+            // If we have an outstanding get running, then let's tell it to
+            // re-activate!
+            if (subscriptions[key]) {
+                // We should only be here if an existing subscription was
+                // aborted, but hasn't cleared yet.
+                console.assert(subscriptions[key].status === 'aborted',
+                               'Regetting a subscription of status '
+                               + subscriptions[key].status)
+
+                console.trace('foo')
+
+                // Let's tell it to reconnect when it tries to clear!
+                subscriptions[key].status = 'reconnect'
+            }
+
+            // Otherwise, create a new subscription
+            else
+                subscribe (key, t)
+
+            function subscribe (key, t) {
+                var aborter = new AbortController(),
+                    reconnect_attempts = 0
+
+                // Start the subscription!
+                braid_fetch(
+                    // URL
+                    url + rem_prefix(key),
+
+                    // Options
+                    {
+                        method: 'get',
+                        subscribe: true,
+                        headers: {accept: 'application/json'},
+                        signal: aborter.signal
+                    }
+                ).andThen( function (x) {
+                    // New update received!
+                    if (subscriptions[key].status === 'connecting') {
+                        console.log('%c[*] opened ' + key,
+                                    'color: blue')
+                        reconnect_attempts = 0
+                        subscriptions[key].status = 'connected'
+                        send_all_puts()
+                    }
+
+                    // Return the update
+                    t.return({
+                        key: key,
+                        val: add_prefixes(JSON.parse(x.body))
+                    })
+                }).catch( function (e) {
+                    if (subscriptions[key].status === 'aborted') {
+                        // Then this get is over and done with!
+                        delete subscriptions[key]
+                        return
+                    }
+
+                    // Reconnect!
+                    setTimeout(function () { subscribe(key, t) },
+                               reconnect_attempts > 0 ? 5000 : 1500)
+                    subscriptions[key].status = 'reconnecting'
+                })
+
+                // Remember this subscription
+                subscriptions[key] = {
+                    aborter: aborter,
+                    status: 'connecting'
+                }
             }
-            client_fetched_keys.add(key)
         }
         bus(prefix).to_forget = function (key) {
-            // send({forget: key}),
-            client_fetched_keys.delete(key)
+            subscriptions[key].status = 'aborted'
+            subscriptions[key].aborter.abort()
         }
     }
 
@@ -127,31 +230,31 @@
         var bus = this
         bus.log(this)
 
-        // Fetch returns the value immediately in a save
-        // Saves are queued up, to store values with a delay, in batch
-        var saves_are_pending = false
-        var pending_saves = {}
+        // Get returns the value immediately in a set
+        // Sets are queued up, to store values with a delay, in batch
+        var sets_are_pending = false
+        var pending_sets = {}
 
-        function save_the_pending_saves() {
-            bus.log('localstore: saving', pending_saves)
-            for (var k in pending_saves)
-                localStorage.setItem(k, JSON.stringify(pending_saves[k]))
-            saves_are_pending = false
+        function set_the_pending_sets() {
+            bus.log('localstore: saving', pending_sets)
+            for (var k in pending_sets)
+                localStorage.setItem(k, JSON.stringify(pending_sets[k]))
+            sets_are_pending = false
         }
 
-        bus(prefix).to_fetch = function (key) {
+        bus(prefix).to_get = function (key) {
             var result = localStorage.getItem(key)
             return result ? JSON.parse(result) : {key: key}
         }
-        bus(prefix).to_save = function (obj) {
+        bus(prefix).to_set = function (obj) {
             // Do I need to make this recurse into the object?
-            bus.log('localStore: on_save:', obj.key)
-            pending_saves[obj.key] = obj
-            if (!saves_are_pending) {
-                setTimeout(save_the_pending_saves, 50)
-                saves_are_pending = true
+            bus.log('localStore: on_set:', obj.key)
+            pending_sets[obj.key] = obj
+            if (!sets_are_pending) {
+                setTimeout(set_the_pending_sets, 50)
+                sets_are_pending = true
             }
-            bus.save.fire(obj)
+            bus.set.fire(obj)
             return obj
         }
         bus(prefix).to_delete = function (key) { localStorage.removeItem(key) }
@@ -160,6 +263,7 @@
         // Hm... this update stuff doesn't seem to work on file:/// urls in chrome
         function update (event) {
             bus.log('Got a localstorage update', event)
+            bus.dirty(event.key)
             //this.get(event.key.substr('statebus '.length))
         }
         if (window.addEventListener) window.addEventListener("storage", update, false)
@@ -184,39 +288,16 @@
         data = (data && JSON.parse(data)) || {key : key}
         // Then I would need to:
         //  - Change the key prefix
-        //  - Save this into the cache
+        //  - Set this into the cache
 
-        bus(prefix).to_save = function (obj) {
+        bus(prefix).to_set = function (obj) {
             window.history.replaceState(
                 '',
                 '',
                 document.location.origin
                     + document.location.pathname
                     + escape('?'+key+'='+JSON.stringify(obj)))
-            bus.save.fire(obj)
-        }
-    }
-
-    function live_reload_from (prefix) {
-        if (!window.live_reload_initialized) {
-            var first_time = true
-            this(function () {
-                var re = new RegExp(".*/" + prefix + "/(.*)")
-                var file = window.location.href.match(re)[1]
-                var code = bus.fetch('/code/invisible.college/' + file).code
-                if (!code) return
-                if (first_time) {first_time = false; return}
-                var old_scroll_position = window.pageYOffset
-                document.body.innerHTML = code
-                var i = 0
-                var d = 100
-                var interval = setInterval(function () {
-                    if (i > 500) clearInterval(interval)
-                    i += d
-                    window.scrollTo(0, old_scroll_position)
-                }, d)
-            })
-            window.live_reload_initialized = true
+            bus.set.fire(obj)
         }
     }
 
@@ -224,30 +305,40 @@
     // ****************
     // Wrapper for React Components
 
+    function react_version () {
+        if (!window.React) return undefined;
+        return Number(window.React.version.split('.')[0])
+    }
+
+    // Newer React requires createReactClass as a separate libary
+    if (window.React && !React.createClass && window.createReactClass)
+        React.createClass = createReactClass
+
     // XXX Currently assumes there's a statebus named "bus" in global
     // XXX scope.
 
     var components = {}                  // Indexed by 'component/0', 'component/1', etc.
     var components_count = 0
     var dirty_components = {}
-    function React_View(component) {
+    function create_react_class(component) {
         function wrap(name, new_func) {
             var old_func = component[name]
             component[name] = function wrapper () { return new_func.bind(this)(old_func) }
         }
         
         // Register the component's basic info
-        wrap('componentWillMount', function new_cwm (orig_func) {
-            if (component.displayName === undefined)
-                throw 'Component needs a displayName'
-            this.name = component.displayName.toLowerCase().replace(' ', '_')
+        wrap((react_version() >= 16 ? 'UNSAFE_' : '') + 'componentWillMount',
+             function new_cwm (orig_func) {
+            // if (component.displayName === undefined)
+            //     throw 'Component needs a displayName'
+            //this.name = component.displayName.toLowerCase().replace(' ', '_')
             this.key = 'component/' + components_count++
             components[this.key] = this
 
             function add_shortcut (obj, shortcut_name, to_key) {
                 delete obj[shortcut_name]
                 Object.defineProperty(obj, shortcut_name, {
-                    get: function () { return bus.fetch(to_key) },
+                    get: function () { return bus.get(to_key) },
                     configurable: true })
             }
             add_shortcut(this, 'local', this.key)
@@ -268,7 +359,7 @@
                             && typeof this.props[k] === 'object'
                             && this.props[k].key)
                             
-                            bus.fetch(this.props[k].key)
+                            bus.get(this.props[k].key)
                     
                     // Call the renderer!
                     return orig_render.apply(this, arguments)
@@ -339,17 +430,12 @@
             props['data-key'] = props.key
             props['data-widget'] = component.displayName
 
-            return (React.version >= '0.12.'
-                    ? React.createElement(react_class, props, children)
-                    : react_class(props, children))
+            return React.createElement(react_class, props, children)
         }
-        // Give it the same prototype as the original class so that it
-        // passes React.isValidClass() inspection
-        result.prototype = react_class.prototype
+        Object.defineProperty(result, 'name',
+                              {value: component.displayName, writable: false})
         return result
     }
-    window.React_View = React_View
-    if (window.statebus) window.statebus.create_react_class = window.statebus.createReactClass = React_View
 
     // *****************
     // Re-rendering react components
@@ -384,7 +470,7 @@
 
     function make_client_statebus_maker () {
         var extra_stuff = ['localstorage_client make_websocket client_creds',
-                           'url_store components live_reload_from'].join(' ').split(' ')
+                           'url_store components'].join(' ').split(' ')
         if (window.statebus) {
             var orig_statebus = statebus
             window.statebus = function make_client_bus () {
@@ -405,17 +491,17 @@
             if (statebus_dir) statebus_dir = statebus_dir[1] + '/'
             else statebus_dir = ''
 
-            var js_urls = {
-                react: statebus_dir + 'extras/react.js',
-                sockjs: statebus_dir + 'extras/sockjs.js',
-                coffee: statebus_dir + 'extras/coffee.js',
-                statebus: statebus_dir + 'statebus.js'
-            }
-            if (statebus_dir == 'https://stateb.us/')
-                js_urls.statebus = statebus_dir + 'statebus4.js'
+            // var js_urls = {
+            //     react: statebus_dir + 'extras/react.js',
+            //     sockjs: statebus_dir + 'extras/sockjs.js',
+            //     coffee: statebus_dir + 'extras/coffee.js',
+            //     statebus: statebus_dir + 'statebus.js'
+            // }
+            // if (statebus_dir == 'https://stateb.us/')
+            //     js_urls.statebus = statebus_dir + 'statebus4.js'
 
-            for (var name in js_urls)
-                document.write('<script src="' + js_urls[name] + '" charset="utf-8"></script>')
+            // for (var name in js_urls)
+            //     document.write('<script src="' + js_urls[name] + '" charset="utf-8"></script>')
 
             document.addEventListener('DOMContentLoaded', scripts_ready, false)
         }
@@ -426,57 +512,50 @@
     function clientjs_option (option_name) {
         // This function must be copy/paste synchronized with statebus.js.  Be
         // sure to clone all edits there.
-        var script_elem = (
-            document.querySelector('script[src*="/client"][src$=".js"]') ||
-            document.querySelector('script[src^="client"][src$=".js"]'))
+        var script_elem = document.querySelector('script[src$="statebus/client.js"]')
         return script_elem && script_elem.getAttribute(option_name)
     }
     var loaded_from_file_url = window.location.href.match(/^file:\/\//)
-    window.statebus_server = window.statebus_server || clientjs_option('server') ||
-        (loaded_from_file_url ? 'https://stateb.us:3006' : '/')
-    window.statebus_backdoor = window.statebus_backdoor || clientjs_option('backdoor')
+
+    // Todo: remove this global
+    window.statebus_server = clientjs_option('server')
     var react_render
     function scripts_ready () {
-        react_render = React.version >= '0.14.' ? ReactDOM.render : React.render
+        react_render = ReactDOM.render
         make_client_statebus_maker()
         window.bus = window.statebus()
         bus.label = 'bus'
-        if (clientjs_option('braid_mode'))
-            bus.state = bus.braid_proxy()
-        else
-            window.sb = bus.sb
-        statebus.widget = React_View
-        statebus.create_react_class = React_View
-        statebus.createReactClass = React_View
-
-        improve_react()
-        window.ignore_flashbacks = false
-        if (statebus_server !== 'none') {
-            if (clientjs_option('braid_mode')) {
-                console.log('We socket-free!')
-                braid_http_mount ('/*', statebus_server)
-            } else {
-                bus.net_mount ('/*', statebus_server)
-                console.log('We going websocket!')
-            }
-        }
 
-        if (window.statebus_backdoor) {
-            window.master = statebus()
-            master.net_mount('*', statebus_backdoor)
-        }
+        statebus.create_react_class = create_react_class
+        statebus.createReactClass = create_react_class
+
+        // improve_react()
+        statebus.ignore_flashbacks = false
+        bus.libs = {}
+        bus.libs.http_out = http_mount
+        bus.libs.react_class = create_react_class
+        bus.libs.input = make_better_input_17()
+        // if (statebus_server !== 'none') {
+        //     if (clientjs_option('braid_mode')) {
+        //         console.log('Using Braid-HTTP!')
+        //         http_mount ('/*', statebus_server)
+        //     } else {
+        //         bus.ws_mount ('/*', statebus_server)
+        //     }
+        // }
+
         bus.net_automount()
 
         // This /new/* code is deprecated
         if (!clientjs_option('braid_mode')) {
-            bus('/new/*').to_save = function (o) {
+            bus('/new/*').to_set = function (o) {
                 if (o.key.split('/').length > 3) return
 
                 var old_key = o.key
                 o.key = old_key + '/' + Math.random().toString(36).substring(2,12)
                 statebus.cache[o.key] = o
                 delete statebus.cache[old_key]
-                bus.save(o)
+                bus.set(o)
             }
         }
 
@@ -486,6 +565,17 @@
         statebus.load_client_code = load_client_code
         statebus.load_widgets = load_widgets
 
+        if (clientjs_option('globals')) {
+            // Setup globals
+            var globals = ['get', 'set', 'state']
+
+            for (var i=0; i<globals.length; i++) {
+                console.log('globalizing', globals[i], 'as',
+                            eval('bus.' + globals[i]))
+                window[globals[i]] = eval('bus.' + globals[i])
+            }
+        }
+
         document.addEventListener('DOMContentLoaded', function () {
             if (window.statebus_ready)
                 for (var i=0; i<statebus_ready.length; i++)
@@ -605,7 +695,7 @@
             for (var i=0; i<arguments.length; i++) {
                 args.push(arguments[i])
                 if (arguments[i].state)
-                    args[i].src = 'data:;base64,' + fetch(args[i].state)._
+                    args[i].src = 'data:;base64,' + bus.get(args[i].state)._
             }
             return og_img.apply(this, args)
         }
@@ -637,12 +727,38 @@
     }
 
 
+    // This one is for react v17+
+    function make_better_input_17 () {
+        return createReactClass({
+            getInitialState: function() {
+                return {value: this.props.value}
+            },
+            UNSAVE_componentWillReceiveProps: function(new_props) {
+                this.setState({value: new_props.value})
+            },
+            onChange: function(e) {
+                this.props.onChange && this.props.onChange(e)
+                if (this.props.value)
+                    this.setState({value: e.target.value})
+            },
+            render: function() {
+                var new_props = {}
+                for (var k in this.props)
+                    if (this.props.hasOwnProperty(k))
+                        new_props[k] = this.props[k]
+                if (this.state.value) new_props.value = this.state.value
+                new_props.onChange = this.onChange
+                return React.createElement('input', new_props)
+            }
+        })
+    }
+
     // Load the components
     var users_widgets = {}
     function make_component(name, func) {
         // Define the component
 
-        window[name] = users_widgets[name] = window.React_View({
+        window[name] = users_widgets[name] = statebus.create_react_class({
             displayName: name,
             render: function () {
                 var args = []