statebus 7.0.4 → 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
@@ -61,7 +60,7 @@
         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?:\/\//
@@ -126,7 +125,7 @@
             })
         }
 
-        bus(prefix).to_set   = function (obj, t) {
+        bus(prefix).setter   = function (obj, t) {
             bus.set.fire(obj)
 
             var put = {
@@ -141,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
@@ -219,7 +218,7 @@
                 }
             }
         }
-        bus(prefix).to_forget = function (key) {
+        bus(prefix).forgetter = function (key) {
             subscriptions[key].status = 'aborted'
             subscriptions[key].aborter.abort()
         }
@@ -236,7 +235,7 @@
         bus.route = function (key, method, arg, t) {
             var d = get_domain(key)
             if (d && !connections[d]) {
-                http_mount(d + '/*', d + '/')
+                bus.libs.http_out(d + '/*', d + '/')
                 connections[d] = true
             }
 
@@ -247,7 +246,7 @@
 
     // ****************
     // 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
@@ -261,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
@@ -276,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
@@ -309,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(
                 '',
                 '',
@@ -487,24 +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 () {
-        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
@@ -516,82 +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'
-
-        // 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()
-        http_automount()
-
-        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:
@@ -620,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
@@ -643,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() {
@@ -700,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)
 
-    // This one is for react v17+
-    function make_better_input_17 () {
+                    // 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)
+            }
+        }
+    }
+
+    // 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) {
@@ -730,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.libs.react_class({
+        window[name] = users_widgets[name] = create_react_class({
             displayName: name,
             render: function () {
                 var args = []
@@ -765,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 () {
@@ -885,5 +967,53 @@
     //     }
     // }
 
-    load_scripts()
+
+    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
+            )
+    }
+
+    // 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)
 })()