statebus 7.0.2 → 7.0.5

package/{clients.js → client-library.js}

@@ -2,15 +2,14 @@
     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) {
-            o[k] = v
-            make_component(k, v)
-            return true
-        }
-    })
+    var react_render = ReactDOM.render
+    // make_client_statebus_maker()
+    window.bus = window.statebus()
+    bus.label = 'bus'
+
+    bus.libs = {}
+    bus.libs.react12 = {}
+    bus.libs.react17 = {}
 
     // ****************
     // Connecting over the Network
@@ -43,37 +42,43 @@
         // return new SockJS(url + '/' + websocket_prefix)
     }
     function client_creds (server_url) {
+        // This function is only used for websocket connections.
+        // http connections set the cookie on the server.
         var me = bus.get('ls/me')
         bus.log('connect: me is', me)
         if (!me.client) {
             // Create a client id if we have none yet.
             // Either from a cookie set by server, or a new one from scratch.
-            var c = get_cookie('client')
+            var c = get_cookie('peer')
             me.client = c || (Math.random().toString(36).substring(2)
                               + Math.random().toString(36).substring(2)
                               + Math.random().toString(36).substring(2))
             bus.set(me)
         }
 
-        set_cookie('client', me.client)
+        set_cookie('peer', me.client)
         return {clientid: me.client}
     }
 
-    function http_mount (prefix, url) {
+    bus.libs.http_out = (prefix, url) => {
         var preprefix = prefix.slice(0,-1)
         var has_prefix = new RegExp('^' + preprefix)
         var is_absolute = /^https?:\/\//
         var subscriptions = {}
         var put_counter = 0
 
-        function add_prefix (key) {
-            return is_absolute.test(key) ? key : preprefix + key }
-        function rem_prefix (key) {
-            return has_prefix.test(key) ? key.substr(preprefix.length) : key }
+        function add_prefix (url) {
+            return is_absolute.test(url) ? url : preprefix + url }
+        function rem_prefix (url) {
+            return has_prefix.test(url) ? url.substr(preprefix.length) : url }
         function add_prefixes (obj) {
-            return bus.translate_keys(bus.clone(obj), add_prefix) }
+            var keyed = bus.translate_keys(bus.clone(obj), add_prefix)
+            return bus.translate_links(bus.clone(keyed), add_prefix)
+        }
         function rem_prefixes (obj) {
-            return bus.translate_keys(bus.clone(obj), rem_prefix) }
+            var keyed = bus.translate_keys(bus.clone(obj), rem_prefix)
+            return bus.translate_links(bus.clone(keyed), rem_prefix)
+        }
 
         var puts = new Map()
         function enqueue_put (url, body) {
@@ -112,14 +117,15 @@
             setTimeout(function () {send_put(id)}, 1000)
         }
         function send_all_puts () {
-            for (var id of puts.keys())
-                if (puts.get(id).status === 'waiting') {
+            puts.forEach(function (value, id) {
+                if (value.status === 'waiting') {
                     console.log('Sending waiting put', id)
                     send_put(id)
                 }
+            })
         }
 
-        bus(prefix).to_set   = function (obj, t) {
+        bus(prefix).setter   = function (obj, t) {
             bus.set.fire(obj)
 
             var put = {
@@ -134,7 +140,7 @@
             send_put(put_id)
         }
 
-        bus(prefix).to_get  = function (key, t) {
+        bus(prefix).getter  = function (key, t) {
             // Subscription can be in states:
             // - connecting
             // - connected
@@ -212,16 +218,35 @@
                 }
             }
         }
-        bus(prefix).to_forget = function (key) {
+        bus(prefix).forgetter = function (key) {
             subscriptions[key].status = 'aborted'
             subscriptions[key].aborter.abort()
         }
     }
 
+    function http_automount () {
+        function get_domain (key) { // Returns e.g. "state://foo.com"
+            var m = key.match(/^https?\:\/\/(([^:\/?#]*)(?:\:([0-9]+))?)/)
+            return m && m[0]
+        }
+
+        var old_route = bus.route
+        var connections = {}
+        bus.route = function (key, method, arg, t) {
+            var d = get_domain(key)
+            if (d && !connections[d]) {
+                bus.libs.http_out(d + '/*', d + '/')
+                connections[d] = true
+            }
+
+            return old_route(key, method, arg, t)
+        }
+    }
+
 
     // ****************
     // Manipulate Localstorage
-    function localstorage_client (prefix) {
+    bus.libs.localstorage = (prefix) => {
         try { localStorage } catch (e) { return }
 
         // Sets are queued up, to store values with a delay, in batch
@@ -235,11 +260,11 @@
             sets_are_pending = false
         }
 
-        bus(prefix).to_get = function (key) {
+        bus(prefix).getter = function (key) {
             var result = localStorage.getItem(key)
             return result ? JSON.parse(result) : {key: key}
         }
-        bus(prefix).to_set = function (obj) {
+        bus(prefix).setter = function (obj) {
             // Do I need to make this recurse into the object?
             bus.log('localStore: on_set:', obj.key)
             pending_sets[obj.key] = obj
@@ -250,7 +275,7 @@
             bus.set.fire(obj)
             return obj
         }
-        bus(prefix).to_delete = function (key) { localStorage.removeItem(key) }
+        bus(prefix).deleter = function (key) { localStorage.removeItem(key) }
 
 
         // Hm... this update stuff doesn't seem to work on file:/// urls in chrome
@@ -283,7 +308,7 @@
         //  - Change the key prefix
         //  - Set this into the cache
 
-        bus(prefix).to_set = function (obj) {
+        bus(prefix).setter = function (obj) {
             window.history.replaceState(
                 '',
                 '',
@@ -461,46 +486,19 @@
     // ###  Full-featured single-file app methods
     // ###
 
-    function make_client_statebus_maker () {
-        var extra_stuff = ['localstorage_client make_websocket client_creds',
-                           'url_store components'].join(' ').split(' ')
-        if (window.statebus) {
-            var orig_statebus = statebus
-            window.statebus = function make_client_bus () {
-                var bus = orig_statebus()
-                for (var i=0; i<extra_stuff.length; i++)
-                    bus[extra_stuff[i]] = eval(extra_stuff[i])
-                bus.localstorage_client('ls/*')
-                return bus
-            }
-        }
-    }
-
-    function load_scripts() {
-        // console.info('Loading scripts! if', !!!window.statebus)
-        if (!window.statebus) {
-            var statebus_dir = clientjs_option('src')
-            if (statebus_dir) statebus_dir = statebus_dir.match(/(.*)[\/\\]/)
-            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'
-
-            // for (var name in js_urls)
-            //     document.write('<script src="' + js_urls[name] + '" charset="utf-8"></script>')
-
-            document.addEventListener('DOMContentLoaded', scripts_ready, false)
-        }
-        else
-            scripts_ready()
-    }
+    // function make_client_statebus_maker () {
+    //     var extra_stuff = ['make_websocket client_creds',
+    //                        'url_store components'].join(' ').split(' ')
+    //     if (window.statebus) {
+    //         var orig_statebus = statebus
+    //         window.statebus = function make_client_bus () {
+    //             var bus = orig_statebus()
+    //             for (var i=0; i<extra_stuff.length; i++)
+    //                 bus[extra_stuff[i]] = eval(extra_stuff[i])
+    //             return bus
+    //         }
+    //     }
+    // }
 
     function clientjs_option (option_name) {
         // This function must be copy/paste synchronized with statebus.js.  Be
@@ -512,97 +510,35 @@
 
     // Todo: remove this global
     window.statebus_server = clientjs_option('server')
-    var react_render
-    function scripts_ready () {
-        react_render = ReactDOM.render
-        // make_client_statebus_maker()
-        window.bus = window.statebus()
-        bus.label = 'bus'
-
-        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()
-        bus.libs.localstorage = localstorage_client
-
-        // 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_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.set(o)
-            }
-        }
-
-        load_coffee()
+    function is_css_prop (name) {
+        if (!is_css_prop.memoized) {
+            // Precompute all the css props
+            is_css_prop.memoized = {}
 
-        statebus.compile_coffee = compile_coffee
-        statebus.load_client_code = load_client_code
-        statebus.load_widgets = load_widgets
+            // We used to get all_css_props like this:
+            //
+            //   var all_css_props = Object.keys(document.body.style)
+            //   if (all_css_props.length < 100) // Firefox
+            //       all_css_props = Object.keys(document.body.style.__proto__)
+            //
+            // But now I've hard-coded them:
+            var all_css_props = ["alignContent","alignItems","alignSelf","alignmentBaseline","all","animation","animationDelay","animationDirection","animationDuration","animationFillMode","animationIterationCount","animationName","animationPlayState","animationTimingFunction","backfaceVisibility","background","backgroundAttachment","backgroundBlendMode","backgroundClip","backgroundColor","backgroundImage","backgroundOrigin","backgroundPosition","backgroundPositionX","backgroundPositionY","backgroundRepeat","backgroundRepeatX","backgroundRepeatY","backgroundSize","baselineShift","blockSize","border","borderBottom","borderBottomColor","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderImage","borderImageOutset","borderImageRepeat","borderImageSlice","borderImageSource","borderImageWidth","borderLeft","borderLeftColor","borderLeftStyle","borderLeftWidth","borderRadius","borderRight","borderRightColor","borderRightStyle","borderRightWidth","borderSpacing","borderStyle","borderTop","borderTopColor","borderTopLeftRadius","borderTopRightRadius","borderTopStyle","borderTopWidth","borderWidth","bottom","boxShadow","boxSizing","breakAfter","breakBefore","breakInside","bufferedRendering","captionSide","caretColor","clear","clip","clipPath","clipRule","color","colorInterpolation","colorInterpolationFilters","colorRendering","columnCount","columnFill","columnGap","columnRule","columnRuleColor","columnRuleStyle","columnRuleWidth","columnSpan","columnWidth","columns","contain","content","counterIncrement","counterReset","cursor","cx","cy","d","direction","display","dominantBaseline","emptyCells","fill","fillOpacity","fillRule","filter","flex","flexBasis","flexDirection","flexFlow","flexGrow","flexShrink","flexWrap","float","floodColor","floodOpacity","font","fontDisplay","fontFamily","fontFeatureSettings","fontKerning","fontSize","fontStretch","fontStyle","fontVariant","fontVariantCaps","fontVariantEastAsian","fontVariantLigatures","fontVariantNumeric","fontVariationSettings","fontWeight","gap","grid","gridArea","gridAutoColumns","gridAutoFlow","gridAutoRows","gridColumn","gridColumnEnd","gridColumnGap","gridColumnStart","gridGap","gridRow","gridRowEnd","gridRowGap","gridRowStart","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","hyphens","imageRendering","inlineSize","isolation","justifyContent","justifyItems","justifySelf","left","letterSpacing","lightingColor","lineBreak","lineHeight","listStyle","listStyleImage","listStylePosition","listStyleType","margin","marginBottom","marginLeft","marginRight","marginTop","marker","markerEnd","markerMid","markerStart","mask","maskType","maxBlockSize","maxHeight","maxInlineSize","maxWidth","maxZoom","minBlockSize","minHeight","minInlineSize","minWidth","minZoom","mixBlendMode","objectFit","objectPosition","offset","offsetDistance","offsetPath","offsetRotate","opacity","order","orientation","orphans","outline","outlineColor","outlineOffset","outlineStyle","outlineWidth","overflow","overflowAnchor","overflowWrap","overflowX","overflowY","overscrollBehavior","overscrollBehaviorX","overscrollBehaviorY","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","page","pageBreakAfter","pageBreakBefore","pageBreakInside","paintOrder","perspective","perspectiveOrigin","placeContent","placeItems","placeSelf","pointerEvents","position","quotes","r","resize","right","rowGap","rx","ry","scrollBehavior","shapeImageThreshold","shapeMargin","shapeOutside","shapeRendering","size","speak","src","stopColor","stopOpacity","stroke","strokeDasharray","strokeDashoffset","strokeLinecap","strokeLinejoin","strokeMiterlimit","strokeOpacity","strokeWidth","tabSize","tableLayout","textAlign","textAlignLast","textAnchor","textCombineUpright","textDecoration","textDecorationColor","textDecorationLine","textDecorationSkipInk","textDecorationStyle","textIndent","textOrientation","textOverflow","textRendering","textShadow","textSizeAdjust","textTransform","textUnderlinePosition","top","touchAction","transform","transformBox","transformOrigin","transformStyle","transition","transitionDelay","transitionDuration","transitionProperty","transitionTimingFunction","unicodeBidi","unicodeRange","userSelect","userZoom","vectorEffect","verticalAlign","visibility","webkitAlignContent","webkitAlignItems","webkitAlignSelf","webkitAnimation","webkitAnimationDelay","webkitAnimationDirection","webkitAnimationDuration","webkitAnimationFillMode","webkitAnimationIterationCount","webkitAnimationName","webkitAnimationPlayState","webkitAnimationTimingFunction","webkitAppRegion","webkitAppearance","webkitBackfaceVisibility","webkitBackgroundClip","webkitBackgroundOrigin","webkitBackgroundSize","webkitBorderAfter","webkitBorderAfterColor","webkitBorderAfterStyle","webkitBorderAfterWidth","webkitBorderBefore","webkitBorderBeforeColor","webkitBorderBeforeStyle","webkitBorderBeforeWidth","webkitBorderBottomLeftRadius","webkitBorderBottomRightRadius","webkitBorderEnd","webkitBorderEndColor","webkitBorderEndStyle","webkitBorderEndWidth","webkitBorderHorizontalSpacing","webkitBorderImage","webkitBorderRadius","webkitBorderStart","webkitBorderStartColor","webkitBorderStartStyle","webkitBorderStartWidth","webkitBorderTopLeftRadius","webkitBorderTopRightRadius","webkitBorderVerticalSpacing","webkitBoxAlign","webkitBoxDecorationBreak","webkitBoxDirection","webkitBoxFlex","webkitBoxOrdinalGroup","webkitBoxOrient","webkitBoxPack","webkitBoxReflect","webkitBoxShadow","webkitBoxSizing","webkitClipPath","webkitColumnBreakAfter","webkitColumnBreakBefore","webkitColumnBreakInside","webkitColumnCount","webkitColumnGap","webkitColumnRule","webkitColumnRuleColor","webkitColumnRuleStyle","webkitColumnRuleWidth","webkitColumnSpan","webkitColumnWidth","webkitColumns","webkitFilter","webkitFlex","webkitFlexBasis","webkitFlexDirection","webkitFlexFlow","webkitFlexGrow","webkitFlexShrink","webkitFlexWrap","webkitFontFeatureSettings","webkitFontSizeDelta","webkitFontSmoothing","webkitHighlight","webkitHyphenateCharacter","webkitJustifyContent","webkitLineBreak","webkitLineClamp","webkitLocale","webkitLogicalHeight","webkitLogicalWidth","webkitMarginAfter","webkitMarginAfterCollapse","webkitMarginBefore","webkitMarginBeforeCollapse","webkitMarginBottomCollapse","webkitMarginCollapse","webkitMarginEnd","webkitMarginStart","webkitMarginTopCollapse","webkitMask","webkitMaskBoxImage","webkitMaskBoxImageOutset","webkitMaskBoxImageRepeat","webkitMaskBoxImageSlice","webkitMaskBoxImageSource","webkitMaskBoxImageWidth","webkitMaskClip","webkitMaskComposite","webkitMaskImage","webkitMaskOrigin","webkitMaskPosition","webkitMaskPositionX","webkitMaskPositionY","webkitMaskRepeat","webkitMaskRepeatX","webkitMaskRepeatY","webkitMaskSize","webkitMaxLogicalHeight","webkitMaxLogicalWidth","webkitMinLogicalHeight","webkitMinLogicalWidth","webkitOpacity","webkitOrder","webkitPaddingAfter","webkitPaddingBefore","webkitPaddingEnd","webkitPaddingStart","webkitPerspective","webkitPerspectiveOrigin","webkitPerspectiveOriginX","webkitPerspectiveOriginY","webkitPrintColorAdjust","webkitRtlOrdering","webkitRubyPosition","webkitShapeImageThreshold","webkitShapeMargin","webkitShapeOutside","webkitTapHighlightColor","webkitTextCombine","webkitTextDecorationsInEffect","webkitTextEmphasis","webkitTextEmphasisColor","webkitTextEmphasisPosition","webkitTextEmphasisStyle","webkitTextFillColor","webkitTextOrientation","webkitTextSecurity","webkitTextSizeAdjust","webkitTextStroke","webkitTextStrokeColor","webkitTextStrokeWidth","webkitTransform","webkitTransformOrigin","webkitTransformOriginX","webkitTransformOriginY","webkitTransformOriginZ","webkitTransformStyle","webkitTransition","webkitTransitionDelay","webkitTransitionDuration","webkitTransitionProperty","webkitTransitionTimingFunction","webkitUserDrag","webkitUserModify","webkitUserSelect","webkitWritingMode","whiteSpace","widows","width","willChange","wordBreak","wordSpacing","wordWrap","writingMode","x","y","zIndex","zoom"]
 
-        if (clientjs_option('globals')) {
-            // Setup globals
-            var globals = ['get', 'set', 'state']
+            var ignore = {d:1, cx:1, cy:1, rx:1, ry:1, x:1, y:1,
+                          content:1, fill:1, stroke:1, src:1}
 
-            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])
-            }
+            for (var i=0; i<all_css_props.length; i++)
+                if (!ignore[all_css_props[i]])
+                    is_css_prop.memoized[all_css_props[i]] = true
         }
-
-        document.addEventListener('DOMContentLoaded', function () {
-            if (window.statebus_ready)
-                for (var i=0; i<statebus_ready.length; i++)
-                    statebus_ready[i]()
-        }, false)
-
-        document.addEventListener('DOMContentLoaded', load_widgets, false)
-        
-        // if (dom.Body || dom.body || dom.BODY)
-        //     react_render((window.Body || window.body || window.BODY)(), document.body)
+        return is_css_prop.memoized[name]
     }
 
-    function improve_react() {
-        function capitalize (s) {return s[0].toUpperCase() + s.slice(1)}
-        function camelcase (s) { var a = s.split(/[_-]/)
-                                 return a.slice(0,1).concat(a.slice(1).map(capitalize)).join('') }
-
-        // We used to get all_css_props like this:
-        //
-        //   var all_css_props = Object.keys(document.body.style)
-        //   if (all_css_props.length < 100) // Firefox
-        //       all_css_props = Object.keys(document.body.style.__proto__)
-        //
-        // But now I've hard-coded them:
-        var all_css_props = ["alignContent","alignItems","alignSelf","alignmentBaseline","all","animation","animationDelay","animationDirection","animationDuration","animationFillMode","animationIterationCount","animationName","animationPlayState","animationTimingFunction","backfaceVisibility","background","backgroundAttachment","backgroundBlendMode","backgroundClip","backgroundColor","backgroundImage","backgroundOrigin","backgroundPosition","backgroundPositionX","backgroundPositionY","backgroundRepeat","backgroundRepeatX","backgroundRepeatY","backgroundSize","baselineShift","blockSize","border","borderBottom","borderBottomColor","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderImage","borderImageOutset","borderImageRepeat","borderImageSlice","borderImageSource","borderImageWidth","borderLeft","borderLeftColor","borderLeftStyle","borderLeftWidth","borderRadius","borderRight","borderRightColor","borderRightStyle","borderRightWidth","borderSpacing","borderStyle","borderTop","borderTopColor","borderTopLeftRadius","borderTopRightRadius","borderTopStyle","borderTopWidth","borderWidth","bottom","boxShadow","boxSizing","breakAfter","breakBefore","breakInside","bufferedRendering","captionSide","caretColor","clear","clip","clipPath","clipRule","color","colorInterpolation","colorInterpolationFilters","colorRendering","columnCount","columnFill","columnGap","columnRule","columnRuleColor","columnRuleStyle","columnRuleWidth","columnSpan","columnWidth","columns","contain","content","counterIncrement","counterReset","cursor","cx","cy","d","direction","display","dominantBaseline","emptyCells","fill","fillOpacity","fillRule","filter","flex","flexBasis","flexDirection","flexFlow","flexGrow","flexShrink","flexWrap","float","floodColor","floodOpacity","font","fontDisplay","fontFamily","fontFeatureSettings","fontKerning","fontSize","fontStretch","fontStyle","fontVariant","fontVariantCaps","fontVariantEastAsian","fontVariantLigatures","fontVariantNumeric","fontVariationSettings","fontWeight","gap","grid","gridArea","gridAutoColumns","gridAutoFlow","gridAutoRows","gridColumn","gridColumnEnd","gridColumnGap","gridColumnStart","gridGap","gridRow","gridRowEnd","gridRowGap","gridRowStart","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","hyphens","imageRendering","inlineSize","isolation","justifyContent","justifyItems","justifySelf","left","letterSpacing","lightingColor","lineBreak","lineHeight","listStyle","listStyleImage","listStylePosition","listStyleType","margin","marginBottom","marginLeft","marginRight","marginTop","marker","markerEnd","markerMid","markerStart","mask","maskType","maxBlockSize","maxHeight","maxInlineSize","maxWidth","maxZoom","minBlockSize","minHeight","minInlineSize","minWidth","minZoom","mixBlendMode","objectFit","objectPosition","offset","offsetDistance","offsetPath","offsetRotate","opacity","order","orientation","orphans","outline","outlineColor","outlineOffset","outlineStyle","outlineWidth","overflow","overflowAnchor","overflowWrap","overflowX","overflowY","overscrollBehavior","overscrollBehaviorX","overscrollBehaviorY","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","page","pageBreakAfter","pageBreakBefore","pageBreakInside","paintOrder","perspective","perspectiveOrigin","placeContent","placeItems","placeSelf","pointerEvents","position","quotes","r","resize","right","rowGap","rx","ry","scrollBehavior","shapeImageThreshold","shapeMargin","shapeOutside","shapeRendering","size","speak","src","stopColor","stopOpacity","stroke","strokeDasharray","strokeDashoffset","strokeLinecap","strokeLinejoin","strokeMiterlimit","strokeOpacity","strokeWidth","tabSize","tableLayout","textAlign","textAlignLast","textAnchor","textCombineUpright","textDecoration","textDecorationColor","textDecorationLine","textDecorationSkipInk","textDecorationStyle","textIndent","textOrientation","textOverflow","textRendering","textShadow","textSizeAdjust","textTransform","textUnderlinePosition","top","touchAction","transform","transformBox","transformOrigin","transformStyle","transition","transitionDelay","transitionDuration","transitionProperty","transitionTimingFunction","unicodeBidi","unicodeRange","userSelect","userZoom","vectorEffect","verticalAlign","visibility","webkitAlignContent","webkitAlignItems","webkitAlignSelf","webkitAnimation","webkitAnimationDelay","webkitAnimationDirection","webkitAnimationDuration","webkitAnimationFillMode","webkitAnimationIterationCount","webkitAnimationName","webkitAnimationPlayState","webkitAnimationTimingFunction","webkitAppRegion","webkitAppearance","webkitBackfaceVisibility","webkitBackgroundClip","webkitBackgroundOrigin","webkitBackgroundSize","webkitBorderAfter","webkitBorderAfterColor","webkitBorderAfterStyle","webkitBorderAfterWidth","webkitBorderBefore","webkitBorderBeforeColor","webkitBorderBeforeStyle","webkitBorderBeforeWidth","webkitBorderBottomLeftRadius","webkitBorderBottomRightRadius","webkitBorderEnd","webkitBorderEndColor","webkitBorderEndStyle","webkitBorderEndWidth","webkitBorderHorizontalSpacing","webkitBorderImage","webkitBorderRadius","webkitBorderStart","webkitBorderStartColor","webkitBorderStartStyle","webkitBorderStartWidth","webkitBorderTopLeftRadius","webkitBorderTopRightRadius","webkitBorderVerticalSpacing","webkitBoxAlign","webkitBoxDecorationBreak","webkitBoxDirection","webkitBoxFlex","webkitBoxOrdinalGroup","webkitBoxOrient","webkitBoxPack","webkitBoxReflect","webkitBoxShadow","webkitBoxSizing","webkitClipPath","webkitColumnBreakAfter","webkitColumnBreakBefore","webkitColumnBreakInside","webkitColumnCount","webkitColumnGap","webkitColumnRule","webkitColumnRuleColor","webkitColumnRuleStyle","webkitColumnRuleWidth","webkitColumnSpan","webkitColumnWidth","webkitColumns","webkitFilter","webkitFlex","webkitFlexBasis","webkitFlexDirection","webkitFlexFlow","webkitFlexGrow","webkitFlexShrink","webkitFlexWrap","webkitFontFeatureSettings","webkitFontSizeDelta","webkitFontSmoothing","webkitHighlight","webkitHyphenateCharacter","webkitJustifyContent","webkitLineBreak","webkitLineClamp","webkitLocale","webkitLogicalHeight","webkitLogicalWidth","webkitMarginAfter","webkitMarginAfterCollapse","webkitMarginBefore","webkitMarginBeforeCollapse","webkitMarginBottomCollapse","webkitMarginCollapse","webkitMarginEnd","webkitMarginStart","webkitMarginTopCollapse","webkitMask","webkitMaskBoxImage","webkitMaskBoxImageOutset","webkitMaskBoxImageRepeat","webkitMaskBoxImageSlice","webkitMaskBoxImageSource","webkitMaskBoxImageWidth","webkitMaskClip","webkitMaskComposite","webkitMaskImage","webkitMaskOrigin","webkitMaskPosition","webkitMaskPositionX","webkitMaskPositionY","webkitMaskRepeat","webkitMaskRepeatX","webkitMaskRepeatY","webkitMaskSize","webkitMaxLogicalHeight","webkitMaxLogicalWidth","webkitMinLogicalHeight","webkitMinLogicalWidth","webkitOpacity","webkitOrder","webkitPaddingAfter","webkitPaddingBefore","webkitPaddingEnd","webkitPaddingStart","webkitPerspective","webkitPerspectiveOrigin","webkitPerspectiveOriginX","webkitPerspectiveOriginY","webkitPrintColorAdjust","webkitRtlOrdering","webkitRubyPosition","webkitShapeImageThreshold","webkitShapeMargin","webkitShapeOutside","webkitTapHighlightColor","webkitTextCombine","webkitTextDecorationsInEffect","webkitTextEmphasis","webkitTextEmphasisColor","webkitTextEmphasisPosition","webkitTextEmphasisStyle","webkitTextFillColor","webkitTextOrientation","webkitTextSecurity","webkitTextSizeAdjust","webkitTextStroke","webkitTextStrokeColor","webkitTextStrokeWidth","webkitTransform","webkitTransformOrigin","webkitTransformOriginX","webkitTransformOriginY","webkitTransformOriginZ","webkitTransformStyle","webkitTransition","webkitTransitionDelay","webkitTransitionDuration","webkitTransitionProperty","webkitTransitionTimingFunction","webkitUserDrag","webkitUserModify","webkitUserSelect","webkitWritingMode","whiteSpace","widows","width","willChange","wordBreak","wordSpacing","wordWrap","writingMode","x","y","zIndex","zoom"]
-
-        var ignore = {d:1, cx:1, cy:1, rx:1, ry:1, x:1, y:1,
-                      content:1, fill:1, stroke:1, src:1}
-        var is_css_prop = {}
-        for (var i=0; i<all_css_props.length; i++)
-            if (!ignore[all_css_props[i]])
-                is_css_prop[all_css_props[i]] = true
+    // ================================================================
+    // React v12 Support
+
+    bus.libs.react12.improve_react = () => {
 
         function better_element(el) {
             // To do:
@@ -631,7 +567,7 @@
                     // Styles get redirected to the style field
                     else if (arg instanceof Object)
                         for (var k in arg)
-                            if (is_css_prop[k]
+                            if (is_css_prop(k)
                                 && !(k in {width:1,height:1,size:1}
                                      && el in {canvas:1, input:1, embed:1, object:1}))
                                 attrs.style[k] = arg[k]        // Merge styles
@@ -654,6 +590,13 @@
         for (var el in React.DOM)
             window[el.toUpperCase()] = better_element(el)
         
+        // Fixes React controlled textarea widgets so they can work with state
+        // updates triggered by forceUpdate, rather than just setState(),
+        // because statebus keeps its own state outside of React's setState(),
+        // but react doesn't know how to preserve the cursor (and selection)
+        // position for updates unless they go through setState().  So this
+        // function just wraps input widgets with a component that uses
+        // setState().
         function make_better_input (name, element) {
             window[name] = React.createFactory(React.createClass({
                 getInitialState: function() {
@@ -711,24 +654,141 @@
         }
     }
 
-    function autodetect_args (func) {
-        if (func.args) return
+    bus.libs.react17.reactive_dom = () => {
+        // The window.dom object lets the user define new react components as
+        // functions
+        window.dom = window.dom || new Proxy({}, {
+            get: function (o, k) { return o[k] },
+            set: function (o, k, v) {
+                o[k] = v
+                make_component(k, v)
+                return true
+            }
+        })
 
-        // Get an array of the func's params
-        var comments = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg,
-            params = /([^\s,]+)/g,
-            s = func.toString().replace(comments, '')
-        func.args = s.slice(s.indexOf('(')+1, s.indexOf(')')).match(params) || []
-    }
+        // We'll define functions for all HTML tags...
+        var function_for_tag = (tag) =>
+            (...arguments) => {
+                var children = []
+                var attrs = {style: {}}
+                
+                for (var i=0; i<arguments.length; i++) {
+                    var arg = arguments[i]
+
+                    if (arg === undefined)
+                        continue
+
+                    // Strings, DOM nodes, and arrays become children
+                    else if (typeof arg === 'string'   // For "foo"
+                        || arg instanceof String  // For new String()
+                        || arg && React.isValidElement(arg)
+                        || arg instanceof Array)
+                        children.push(arg)
+
+                    // // Arrays append onto the children
+                    // else if (arg instanceof Array)
+                    //     Array.prototype.push.apply(children, arg)
+
+                    // Pure objects get merged into object city
+                    // Styles get redirected to the style field
+                    else if (arg instanceof Object)
+                        for (var k in arg)
+                            if (is_css_prop(k)
+                                && !(k in {width:1,height:1,size:1}
+                                     && tag in {canvas:1, input:1, embed:1, object:1}))
+                                attrs.style[k] = arg[k]        // Merge styles
+                            else if (k === 'style')            // Merge insides of style tags
+                                for (var k2 in arg[k])
+                                    attrs.style[k2] = arg[k][k2]
+                            else
+                                attrs[k] = arg[k]          // Or be normal.
+                }
+
+                // Now call React.createElement(tag, attrs, children...)
+                return React.createElement.apply(
+                    null,
+                    [tag, attrs].concat(children)
+                )
+            }
+
+        // ... or at least most of them -- there are just a few missing from
+        // this list.
+        var all_tags = 'a,abbr,address,area,article,aside,audio,b,base,bdi,bdo,blockquote,body,br,button,canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,link,main,map,mark,menu,meta,meter,nav,noscript,object,ol,optgroup,option,output,p,param,picture,pre,progress,q,s,samp,script,section,select,slot,small,source,span,strong,style,sub,summary,sup,table,tbody,td,template,tfoot,th,thead,title,tr,u,ul,video,input'.split(',')
+        all_tags.forEach((tagname) => {
+            window[tagname.toUpperCase()] = function_for_tag(tagname)
+        })
+
+        // We create special functions for INPUT and TEXTAREA, because they
+        // have to do extra work to maintain the cursor when we use statebus
+        // instead of React's setState() for state updates.
+        window.INPUT    = function_for_tag(make_fixed_textbox('input'))
+        window.TEXTAREA = function_for_tag(make_fixed_textbox('textarea'))
+
+
+        // Improve the functions ^^^ put this above
+        function better_element(el) {
+            // To do:
+            //  - Don't put all args into a children array, cause react thinks
+            //    that means they need a key.
+
+            return function () {
+                var children = []
+                var attrs = {style: {}}
+                
+                for (var i=0; i<arguments.length; i++) {
+                    var arg = arguments[i]
+
+                    // Strings and DOM nodes and undefined become children
+                    if (typeof arg === 'string'   // For "foo"
+                        || arg instanceof String  // For new String()
+                        || arg && React.isValidElement(arg)
+                        || arg === undefined)
+                        children.push(arg)
 
+                    // Arrays append onto the children
+                    else if (arg instanceof Array)
+                        Array.prototype.push.apply(children, arg)
+
+                    // Pure objects get merged into object city
+                    // Styles get redirected to the style field
+                    else if (arg instanceof Object)
+                        for (var k in arg)
+                            if (is_css_prop(k)
+                                && !(k in {width:1,height:1,size:1}
+                                     && el in {canvas:1, input:1, embed:1, object:1}))
+                                attrs.style[k] = arg[k]        // Merge styles
+                            else if (k === 'style')            // Merge insides of style tags
+                                for (var k2 in arg[k])
+                                    attrs.style[k2] = arg[k][k2]
+                            else {
+                                attrs[k] = arg[k]          // Or be normal.
+
+                                if (k === 'key')
+                                    attrs['data-key'] = arg[k]
+                            }
+                }
+                if (children.length === 0) children = undefined
+                return React.DOM[el](attrs, children)
+            }
+        }
+    }
 
-    // This one is for react v17+
-    function make_better_input_17 () {
+    // Fixes React controlled textarea widgets so they can work with state
+    // updates triggered by forceUpdate, rather than just setState(),
+    // because statebus keeps its own state outside of React's setState(),
+    // but react doesn't know how to preserve the cursor (and selection)
+    // position for updates unless they go through setState().  So this
+    // function just wraps input widgets with a component that uses
+    // setState().
+    //
+    // This one is for react v17+.
+    function make_fixed_textbox (tagname) {
+        // `tagname` can be either "input" or "textarea"
         return createReactClass({
             getInitialState: function() {
                 return {value: this.props.value}
             },
-            UNSAVE_componentWillReceiveProps: function(new_props) {
+            UNSAFE_componentWillReceiveProps: function(new_props) {
                 this.setState({value: new_props.value})
             },
             onChange: function(e) {
@@ -741,19 +801,30 @@
                 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
+                if (this.state.hasOwnProperty('value'))
+                    new_props.value = this.state.value
                 new_props.onChange = this.onChange
-                return React.createElement('input', new_props)
+                return React.createElement(tagname, new_props)
             }
         })
     }
 
+    function autodetect_args (func) {
+        if (func.args) return
+
+        // Get an array of the func's params
+        var comments = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg,
+            params = /([^\s,]+)/g,
+            s = func.toString().replace(comments, '')
+        func.args = s.slice(s.indexOf('(')+1, s.indexOf(')')).match(params) || []
+    }
+
     // Load the components
     var users_widgets = {}
     function make_component(name, func) {
         // Define the component
 
-        window[name] = users_widgets[name] = statebus.create_react_class({
+        window[name] = users_widgets[name] = create_react_class({
             displayName: name,
             render: function () {
                 var args = []
@@ -776,10 +847,10 @@
                 }
 
                 // Wrap plain JS values with SPAN, so react doesn't complain
-                if (!React.isValidElement(vdom))
-                    // To do: should arrays be flattened into a SPAN's arguments?
-                    vdom = React.DOM.span(null, (typeof vdom === 'string')
-                                          ? vdom : JSON.stringify(vdom))
+                // if (!React.isValidElement(vdom))
+                //     // To do: should arrays be flattened into a SPAN's arguments?
+                //     vdom = React.DOM.span(null, (typeof vdom === 'string')
+                //                           ? vdom : JSON.stringify(vdom))
                 return vdom
             },
             componentDidMount: function () {
@@ -803,103 +874,6 @@
         })
     }
 
-    function make_syncarea () {
-        // a textarea that syncs with other textareas via diffsync
-        // options:
-        //     textarea_style : hashmap of styles to add to the textarea
-        //     cursor_style : hashmap of styles to add to each peer's cursor
-        //     autosize : true --> resizes the textarea vertically to fit the text inside it
-        //     ws_url : websocket url for the diffsync server,
-        //              e.g. 'wss://invisible.college:' + diffsync.port
-        //     channel : 'diffsync_channel' --> diffsync channel to connect to
-        window['SYNCAREA'] = users_widgets['SYNCAREA'] = React.createClass({
-            getInitialState : function () {
-                return { cursor_positions : {} }
-            },
-            on_text_changed : function () {
-                if (this.props.autosize) {
-                    var t = this.textarea_ref
-                    t.style.height = null
-                    while (t.rows > 1 && t.scrollHeight < t.offsetHeight) t.rows--
-                    while (t.scrollHeight > t.offsetHeight) t.rows++
-                }
-            },
-            componentDidMount : function () {
-                var self = this
-                self.on_ranges = function (ranges) {
-                    self.ranges = ranges
-                    var cursor_positions = {}
-                    Object.keys(ranges).forEach(function (k) {
-                        var r = ranges[k]
-                        var xy = getCaretCoordinates(self.textarea_ref, r[0])
-                        var x = self.textarea_ref.offsetLeft - self.textarea_ref.scrollLeft + xy.left + 'px'
-                        var y = self.textarea_ref.offsetTop - self.textarea_ref.scrollTop + xy.top + 'px'
-                        cursor_positions[k] = [x, y]
-                    })
-                    self.setState({ cursor_positions : cursor_positions })
-                }
-
-                this.ds = diffsync.create_client({
-                    ws_url : this.props.ws_url,
-                    channel : this.props.channel,
-                    get_text : function () {
-                        return self.textarea_ref.value
-                    },
-                    get_range : function () {
-                        var t = self.textarea_ref
-                        return [t.selectionStart, t.selectionEnd]
-                    },
-                    on_text : function (s, range) {
-                        self.textarea_ref.value = s
-                        self.textarea_ref.setSelectionRange(range[0], range[1])
-                        self.on_text_changed()
-                    },
-                    on_ranges : this.on_ranges
-                })
-            },
-            render : function () {
-                var self = this
-                var cursors = []
-                Object.keys(this.state.cursor_positions).forEach(function (k) {
-                    var p = self.state.cursor_positions[k]
-                    var style = {
-                        position : 'absolute',
-                        left : p[0],
-                        top : p[1]
-                    }
-                    Object.keys(self.props.cursor_style).forEach(function (k) {
-                        style[k] = self.props.cursor_style[k]
-                    })
-                    cursors.push(React.createElement('div', {
-                        key : k,
-                        style : style
-                    }))
-                })
-                return React.createElement('div', {
-                    style : {
-                        clipPath : 'inset(0px 0px 0px 0px)'
-                    },
-                }, React.createElement('textarea', {
-                    ref : function (t) { self.textarea_ref = t },
-                    style : this.props.textarea_style,
-                    onChange : function (e) {
-                        self.ds.on_change()
-                        self.on_text_changed()
-                    },
-                    onMouseDown : function () {
-                        setTimeout(function () { self.ds.on_change() }, 0)
-                    },
-                    onKeyDown : function () {
-                        setTimeout(function () { self.ds.on_change() }, 0)
-                    },
-                    onScroll : function () {
-                        self.on_ranges(self.ranges)
-                    }
-                }), cursors)
-            }
-        })
-    }
-
     function compile_coffee (coffee, filename) {
         var compiled
         try {
@@ -930,10 +904,12 @@
         return compiled
     }
     function load_client_code (code) {
-        var dom = {}, ui = {}
-        if (code) eval(code)
-        else { dom = window.dom; ui = window.ui }
-        for (var k in ui) dom[k] = dom[k] || ui[k]
+        // What is this function for?
+        var dom = {}
+        if (code)
+            eval(code)
+        else
+            dom = window.dom
         for (var widget_name in dom)
             window.dom[widget_name] = dom[widget_name]
     }
@@ -945,6 +921,11 @@
             if (scripts[i].getAttribute('type')
                 in {'statebus':1, 'coffeedom':1,'statebus-js':1,
                     'coffee':1, 'coffeescript':1}) {
+
+                if (!window.CoffeeScript) {
+                    console.error('Cannot load <script type="coffee"> because coffeescript library isn\'t present')
+                    return
+                }
                 // Compile coffeescript to javascript
                 var compiled = scripts[i].text
                 if (scripts[i].getAttribute('type') !== 'statebus-js')
@@ -976,15 +957,63 @@
         return widge(props, children)
     }
 
-    window.users_widgets = users_widgets
-    function load_widgets () {
-        for (var w in users_widgets) {
-            var nodes = document.getElementsByTagName(w)
-            for (var i=0; i<nodes.length; i++)
-                if (!nodes[i].seen)
-                    react_render(dom_to_widget(nodes[i]), nodes[i])
-        }
+    // window.users_widgets = users_widgets
+    // function load_widgets () {
+    //     for (var w in users_widgets) {
+    //         var nodes = document.getElementsByTagName(w)
+    //         for (var i=0; i<nodes.length; i++)
+    //             if (!nodes[i].seen)
+    //                 react_render(dom_to_widget(nodes[i]), nodes[i])
+    //     }
+    // }
+
+
+    bus.libs.react17.react_class = create_react_class
+    bus.libs.react17.coffreact = () => {
+        bus.libs.react17.reactive_dom()
+        load_coffee()
+        if (dom.BODY)
+            document.addEventListener(
+                'DOMContentLoaded',
+                () => {
+                    var root = document.createElement('root')
+                    document.body.appendChild(root)
+                    ReactDOM.render(BODY(), root)
+                },
+                false
+            )
     }
 
-    load_scripts()
+    // if (statebus_server !== 'none') {
+    //     if (clientjs_option('braid_mode')) {
+    //         console.log('Using Braid-HTTP!')
+    //         bus.libs.http_out ('/*', statebus_server)
+    //     } else {
+    //         bus.ws_mount ('/*', statebus_server)
+    //     }
+    // }
+
+    http_automount()
+
+    statebus.compile_coffee = compile_coffee
+    statebus.load_client_code = load_client_code
+
+    // 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++)
+                statebus_ready[i]()
+    }, false)
+
+    // document.addEventListener('DOMContentLoaded', load_widgets, false)
 })()