Merge pull request #138 from jaredly/symbol-props-support

fix #127; add support for Symbols in props

Author: jaredly

agent/dehydrate.js

@@ -44,6 +44,16 @@ function dehydrate(data: Object, cleaned: Array<Array<string>>, path?: Array<str
     if (typeof data === 'string' && data.length > 500) {
       return data.slice(0, 500) + '...';
     }
+    // We have to do this assignment b/c Flow doesn't think "symbol" is
+    // something typeof would return. Error 'unexpected predicate "symbol"'
+    var type = typeof data;
+    if (type === 'symbol') {
+      cleaned.push(path);
+      return {
+        type: 'symbol',
+        name: data.toString(),
+      };
+    }
     return data;
   }
   if (data._reactFragment) {

frontend/DataView/previewComplex.js

@@ -41,6 +41,12 @@ function previewComplex(data: Object) {
         {data[consts.name] + '{}'}
       </span>
     );
+  } else if (type === 'symbol') {
+    return (
+      <span style={valueStyles.symbol}>
+        {data[consts.name]}
+      </span>
+    );
   }
 }
 

frontend/PropVal.js

@@ -76,6 +76,10 @@ function previewProp(val: any, nested: boolean) {
     if (type === 'array') {
       return <span>Array[{val[consts.meta].length}]</span>;
     }
+    if (type === 'symbol') {
+      // the name is "Symbol(something)"
+      return <span style={valueStyles.symbol}>{val[consts.name]}</span>;
+    }
   }
   if (nested) {
     return <span>{'{…}'}</span>;

frontend/value-styles.js

@@ -26,6 +26,10 @@ module.exports = {
     color: 'rgb(0, 154, 190)',
   },
 
+  symbol: {
+    color: 'rgb(232, 98, 0)',
+  },
+
   number: {
     color: 'rgb(255, 0, 252)',
   },

test/example/build/sink.js

@@ -54,6 +54,17 @@ class Nester extends React.Component {
   }
 }
 
+class SymbolProp {
+  render() {
+    return (
+      <div sym={Symbol("name")}>
+        This tests that dehydration + inspection works with symbols
+        {Symbol("child")}
+      </div>
+    );
+  }
+}
+
 class BadUnmount {
   render() {
     return (
@@ -125,6 +136,7 @@ class LotsOfMounts {
 class Sink {
   render() {
     var examples = {
+      SymbolProp,
       LongRender,
       DeepTree,
       BadUnmount,