statebus 7.0.9 → 7.0.11

package/client-library.js

@@ -2,7 +2,6 @@
     var websocket_prefix = (clientjs_option('websocket_path')
                             || '_connect_to_statebus_')
 
-    var react_render = ReactDOM.render
     // make_client_statebus_maker()
     window.bus = window.statebus()
     bus.label = 'bus'
@@ -183,7 +182,7 @@
                         headers: {accept: 'application/json'},
                         signal: aborter.signal
                     }
-                ).andThen( function (x) {
+                ).andThen( function (new_version) {
                     // New update received!
                     if (subscriptions[key].status === 'connecting') {
                         console.log('%c[*] opened ' + key,
@@ -196,7 +195,7 @@
                     // Return the update
                     t.return({
                         key: key,
-                        val: add_prefixes(JSON.parse(x.body))
+                        val: add_prefixes(JSON.parse(new_version.body))
                     })
                 }).catch( function (e) {
                     if (subscriptions[key].status === 'aborted') {
@@ -784,7 +783,9 @@
     // This one is for react v17+.
     function make_fixed_textbox (tagname) {
         // `tagname` can be either "input" or "textarea"
-        return createReactClass({
+
+        // Create a special component
+        var component = createReactClass({
             getInitialState: function() {
                 return {value: this.props.value}
             },
@@ -796,25 +797,43 @@
                 if (this.props.value)
                     this.setState({value: e.target.value})
             },
+            onInput: function(e) {
+                this.props.onInput && this.props.onInput(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.hasOwnProperty('value'))
-                    new_props.value = this.state.value
-                new_props.onChange = this.onChange
+                var new_props = {
+                    ...this.props,
+                    ref: this.props.forwarded_ref   // We had to rename ref
+                }
+                delete new_props.forwarded_ref      // Delete the old name
+
+                // Now replace any onChange or onInput with our wrapper handlers
+                if (new_props.hasOwnProperty('onChange'))
+                    new_props.onChange = this.onChange
+                if (new_props.hasOwnProperty('onInput'))
+                    new_props.onInput = this.onInput
+
                 return React.createElement(tagname, new_props)
             }
         })
+
+        // But react components don't pass through the `ref` prop by default,
+        // so we have to do that with this special function and rename it to
+        // forwarded_ref temporarily:
+        return React.forwardRef((props, ref) => {
+            return React.createElement(component, {...props, forwarded_ref: ref})
+        })
     }
 
     // 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.
-    bus.libs.react17.input = make_fixed_textbox('input')
-    bus.libs.react17.textarea = make_fixed_textbox('textarea')
-
+    if (window.React && !React.createClass && window.createReactClass) {
+        bus.libs.react17.input = make_fixed_textbox('input')
+        bus.libs.react17.textarea = make_fixed_textbox('textarea')
+    }
     function autodetect_args (func) {
         if (func.args) return
 
@@ -962,6 +981,7 @@
         return widge(props, children)
     }
 
+    // var react_render = ReactDOM.render
     // window.users_widgets = users_widgets
     // function load_widgets () {
     //     for (var w in users_widgets) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "statebus",
-  "version": "7.0.9",
+  "version": "7.0.11",
   "description": "Synchronize state.",
   "main": "statebus.js",
   "scripts": {

package/statebus.js

@@ -1034,6 +1034,9 @@
         //    funk.react().
         //
         // ...which will make it re-run with the original arg1 and arg2 .
+        //
+        // Each subsequent time you call f(arg1, arg2), it will change the
+        // remembered args and re-run the funk.
         function funk () {
             console.assert(executing_funk === global_funk
                            || executing_funk !== funk, 'Recursive funk', funk.func)