Implement cbTypes

and take the dev-flow-oriented (and easer-to-write for spindle.js :P) version of propCalling supporting only a single payload.

deal with it.

A hopefully tiny number of React components can't be transparently swapped for spindle ones with this, but whatever. Their parents can adapt to take single-payload prop callbacks.

README.md

@@ -75,7 +75,7 @@ and architecture, but leverages React to do the bookkeeping. This makes it
 incredibly easy to nest components and add features without friction.
 
 React `propTypes` can be specified on Spindle components. In fact, Spindle takes
-this concept a step further and lets you specify `modelType`, `emitType`, and
+this concept a step further and lets you specify `modelType`, `cbTypes`, and
 even `TypedAction`s!
 
 To see how to solve lots of different UI challenges with Spindle, check out the

examples/constrained-counters/Counter.js

@@ -19,6 +19,11 @@ const modelType = recordOf({
 });
 
 
+const cbTypes = {
+  onChange: PropTypes.number.isRequired,
+};
+
+
 const Action = Union({
   Increment: null,
   Decrement: null,
@@ -40,7 +45,7 @@ const propsUpdate = ({ min = -Infinity, max = Infinity }, model) => {
   const updated = constrain(model.merge({ min, max }));
   return Update({
     model: updated,
-    cb: { onChange: [model.value] },
+    cb: { onChange: model.value },
   });
 };
 
@@ -50,15 +55,15 @@ const update = (action, model) => Action.match(action, {
     const newModel = constrain(model.update('value', v => v + 1));
     return Update({
       model: newModel,
-      cb: { onChange: [newModel.value] },
+      cb: { onChange: newModel.value },
     });
   },
 
   Decrement: () => {
     const newModel = constrain(model.update('value', v => v - 1));
     return Update({
       model: newModel,
-      cb: { onChange: [newModel.value] },
+      cb: { onChange: newModel.value },
     });
   },
 });
@@ -82,4 +87,4 @@ const view = (model, dispatch) => (
 
 
 export default Spindle('Counter',
-  { Action, init, propsUpdate, update, modelType, view });
+  { Action, init, propsUpdate, update, modelType, view, cbTypes });

examples/sum-counters/Counter.js

@@ -11,7 +11,7 @@ const Model = Record({
 
 const init = () => {
   const model = Model();
-  return Update({ model, cb: { onChange: [model.value] } });
+  return Update({ model, cb: { onChange: model.value } });
 };
 
 
@@ -26,15 +26,15 @@ const update = (action, model) => Action.match(action, {
     const newModel = model.update('value', v => v + 1);
     return Update({
       model: newModel,
-      cb: { onChange: [newModel.get('value')] },
+      cb: { onChange: newModel.get('value') },
     });
   },
 
   Decrement: () => {
     const newModel = model.update('value', v => v - 1);
     return Update({
       model: newModel,
-      cb: { onChange: [newModel.get('value')] },
+      cb: { onChange: newModel.get('value') },
     });
   },
 });

examples/todomvc/Header.js

@@ -21,7 +21,7 @@ const update = (action, model) => Action.match(action, {
   KeyDown: e => {
     const task = e.target.value.trim();
     if (e.keyCode === 13 && task !== '') {
-      return Update({ cb: { onAdd: [task] }, model: '' });
+      return Update({ cb: { onAdd: task }, model: '' });
     } else {
       return Update();
     }

examples/todomvc/Item.js

@@ -32,13 +32,13 @@ const propsUpdate = ({ task }, model) =>
 
 const update = (action, model) => Action.match(action, {
   Destroy: () =>
-    Update({ cb: { onDestroy: [model.task.id] } }),
+    Update({ cb: { onDestroy: model.task.id } }),
 
   FinishEditing: () => {
     const task = model.task.set('title', model.editingValue);
     return Update({
       model: model.merge({ task, editing: false }),
-      cb: { onSave: [task] },
+      cb: { onSave: task },
     });
   },
 
@@ -47,7 +47,7 @@ const update = (action, model) => Action.match(action, {
       const task = model.task.set('title', model.editingValue);
       return Update({
         model: model.merge({ task, editing: false }),
-        cb: { onSave: [task] },
+        cb: { onSave: task },
       });
     } else {
       return Update();
@@ -67,7 +67,7 @@ const update = (action, model) => Action.match(action, {
     const task = model.task.update('completed', c => !c);
     return Update({
       model: model.set('task', task),
-      cb: { onSave: [task] },
+      cb: { onSave: task },
     });
   },
 });

spindle.js

@@ -142,6 +142,7 @@ export default function Spindle(name, {
   view = () => null,
   subscriptions = () => [],
   modelType = PropTypes.any,
+  cbTypes = {},
   propTypes: componentPropTypes = {},
 }) {
   class Component extends React.Component {
@@ -218,8 +219,12 @@ export default function Spindle(name, {
         Object.keys(cb)
           .filter(prop =>
             this.props[prop])
-          .forEach(prop =>
-            this.props[prop].apply(null, cb[prop]));
+          .forEach(prop => {
+            if (cbTypes.hasOwnProperty(prop)) {
+              assertType(`cb: { ${prop} }`, cbTypes[prop], cb[prop], name, source);
+            }
+            this.props[prop](cb[prop]);
+          });
       }
 
       if (source === 'init') {