Merge pull request #60 from rmarren1/no-id-error

Check that id exists before triggering callback.

Author: rmarren1

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.13.1] - 2018-07-18
+### Fixed
+- If a callback references an `id` which does not exist in the DOM tree at the time it is executed, throw an informative front-end exception (previously an uninformative front-end exception was thrown). https://github.com/plotly/dash-renderer/issues/57
+
 ## [0.13.0] - 2018-06-01
 ### Fixed
 - Previously, if a component called `updateProps` with multiple properties, Dash would fire the callback multiple times (once for each property). Now, the callback is only fired once. https://github.com/plotly/dash-renderer/pull/54

dash_renderer/version.py

@@ -1 +1 @@
-__version__ = '0.13.0'
+__version__ = '0.13.1'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "render dash components in react",
   "main": "src/index.js",
   "scripts": {

src/actions/index.js

@@ -417,8 +417,21 @@ function updateOutput(
             dependency.output.property === outputProp
         )
     );
+    const validKeys = keys(paths);
     if (inputs.length > 0) {
         payload.inputs = inputs.map(inputObject => {
+            // Make sure the component id exists in the layout
+            if (!contains(inputObject.id, validKeys)) {
+              throw ReferenceError(
+                "An invalid input object was used in an " +
+                "`Input` of a Dash callback. " +
+                "The id of this object is `" +
+                inputObject.id + "` and the property is `" +
+                inputObject.property +
+                "`. The list of ids in the current layout is " +
+                "`[" + validKeys.join(", ") + "]`"
+              )
+            }
             const propLens = lensPath(
                 concat(paths[inputObject.id],
                 ['props', inputObject.property]
@@ -432,6 +445,18 @@ function updateOutput(
     }
     if (state.length > 0) {
         payload.state = state.map(stateObject => {
+            // Make sure the component id exists in the layout
+            if (!contains(stateObject.id, validKeys)) {
+              throw ReferenceError(
+                "An invalid input object was used in a " +
+                "`State` object of a Dash callback. " +
+                "The id of this object is `" +
+                stateObject.id + "` and the property is `" +
+                stateObject.property +
+                "`. The list of ids in the current layout is " +
+                "`[" + validKeys.join(", ") + "]`"
+              )
+            }
             const propLens = lensPath(
                 concat(paths[stateObject.id],
                 ['props', stateObject.property]