trying out new panel in plain shell

Author: jaredly

frontend/invariant.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+'use strict';
+
+/**
+ * Use invariant() to assert state which your program assumes to be true.
+ *
+ * Provide sprintf-style format (only %s is supported) and arguments
+ * to provide information about what broke and what you were
+ * expecting.
+ *
+ * The invariant message will be stripped in production, but the invariant
+ * will remain to ensure logic does not differ in production.
+ */
+
+var invariant = function(condition, format, a, b, c, d, e, f) {
+  if (__DEV__) {
+    if (format === undefined) {
+      throw new Error('invariant requires an error message argument');
+    }
+  }
+
+  if (!condition) {
+    var error;
+    if (format === undefined) {
+      error = new Error(
+        'Minified exception occurred; use the non-minified dev environment ' +
+        'for the full error message and additional helpful warnings.'
+      );
+    } else {
+      var args = [a, b, c, d, e, f];
+      var argIndex = 0;
+      error = new Error(
+        'Invariant Violation: ' +
+        format.replace(/%s/g, function() { return args[argIndex++]; })
+      );
+    }
+
+    error.framesToPop = 1; // we don't care about invariant's own frame
+    throw error;
+  }
+};
+
+module.exports = invariant;

shells/chrome/src/magic.js frontend/magic.jsshells/chrome/src/magic.js renamed to frontend/magic.js

@@ -11,15 +11,17 @@
 'use strict';
 
 var React = require('react');
-var Bridge = require('../../../agent/Bridge');
-var Container = require('../../../frontend/Container');
-var NativeStyler = require('../../../plugins/ReactNativeStyle/ReactNativeStyle.js');
-var Store = require('../../../frontend/Store');
-var keyboardNav = require('../../../frontend/keyboardNav');
+var Container = require('./Container');
+var Store = require('./Store');
+var keyboardNav = require('./keyboardNav');
+var invariant = require('./invariant');
 
-var consts = require('../../../agent/consts');
+var Bridge = require('../agent/Bridge');
+var NativeStyler = require('../plugins/ReactNativeStyle/ReactNativeStyle.js');
 
-import type {DOMEvent} from '../../../frontend/types';
+var consts = require('../agent/consts');
+
+import type {DOMEvent} from './types';
 
 type Props = {
   alreadyFoundReact: boolean,
@@ -100,10 +102,12 @@ class Panel extends React.Component {
     if (!this._bridge || (!id && !this._store.selected)) {
       return;
     }
+    invariant(this.props.selectElement, 'cannot send selection if props.selectElement is not defined');
     this.props.selectElement(id || this._store.selected, this._bridge);
   }
 
   inspectComponent(vbl: string) {
+    invariant(this.props.showComponentSource, 'cannot inspect component if props.showComponentSource is not supplied');
     this.props.showComponentSource(vbl || '$r');
   }
 
@@ -113,6 +117,7 @@ class Panel extends React.Component {
     }
     this._bridge.send('putSelectedInstance', id);
     setTimeout(() => {
+      invariant(this.props.showComponentSource, 'cannot view source if props.showComponentSource is not supplied');
       this.props.showComponentSource('__REACT_DEVTOOLS_GLOBAL_HOOK__.$inst');
     }, 100);
   }
@@ -137,7 +142,6 @@ class Panel extends React.Component {
       this._teardownWall = teardown;
 
       this._bridge = new Bridge();
-      // $FlowFixMe flow thinks `this._bridge` might be null
       this._bridge.attach(wall);
 
       // xx FlowFixMe this._bridge is not null
@@ -193,17 +197,19 @@ class Panel extends React.Component {
     }
     return (
       <Container
-        reload={this.reload.bind(this)}
+        reload={this.props.reload && this.reload.bind(this)}
         menuItems={{
           attr: (id, node, val, path, name) => {
             if (!val || node.get('nodeType') !== 'Composite' || val[consts.type] !== 'function') {
               return;
             }
             return [this.props.showAttrSource && {
               title: 'Show Source',
+              // $FlowFixMe showAttrSource is provided
               action: () => this.props.showAttrSource(path),
             }, this.props.executeFn && {
               title: 'Execute function',
+              // $FlowFixMe executeFn is provided
               action: () => this.props.executeFn(path),
             }];
           },

shells/chrome/src/panel.js

@@ -52,7 +52,7 @@ var config = {
       chrome.devtools.network.onNavigated.removeListener(reload);
     };
   },
-  getNewSelectiong(bridge) {
+  getNewSelection(bridge) {
     chrome.devtools.inspectedWindow.eval('window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0');
     bridge.send('checkSelection');
   },
@@ -117,10 +117,9 @@ var config = {
   },
 };
 
-
 var globalHook = require('../../../backend/GlobalHook');
 globalHook(window);
-var Panel = require('./magic');
+var Panel = require('../../../frontend/magic');
 var React = require('react');
 
 var node = document.getElementById('container');
@@ -134,6 +133,3 @@ function reload() {
 }
 
 React.render(<Panel alreadyFoundReact={true} {...config} />, node);
-
-
-

shells/plain/container.js

@@ -13,16 +13,55 @@
 var Harness = require('./Harness');
 var Container = require('../../frontend/Container');
 var React = require('react');
+var globalHook = require('../../backend/GlobalHook');
 
 window.React = React;
 
-var node = document.createElement('div');
-document.body.appendChild(node);
-React.render(
-  <Harness backendSrc="./build/backend.js" targetSrc="../../test/example/build/target.js">
-    <Container/>
-  </Harness>,
-  node
-);
+var Panel = require('../../frontend/magic');
+
+var target = document.getElementById('target');
+function inject(src, done) {
+  var script = target.contentDocument.createElement('script');
+  script.src = src;
+  script.onload = done;
+  target.contentDocument.body.appendChild(script);
+  // script.parentNode.removeChild(script);
+}
+
+var win = target.contentWindow;
+globalHook(win);
+
+var config = {
+  alreadyFoundReact: true,
+  reload: null,
+  checkForReact: null,
+  reloadSubscribe: null,
+  getNewSelection: null,
+  selectElement: null,
+  showComponentSource: null,
+  showAttrSource: null,
+  executeFn: null,
+  inject(done) {
+    inject('./build/backend.js', () => {
+      var wall = {
+        listen(fn) {
+          win.parent.addEventListener('message', evt => fn(evt.data));
+        },
+        send(data) {
+          win.postMessage(data, '*');
+        },
+      };
+      done(wall, () => {});
+    });
+  },
+};
+
+inject('../../test/example/build/target.js', () => {
+  var node = document.getElementById('container');
+  React.render(
+    <Panel {...config} />,
+    node
+  );
+});
 
 

shells/plain/index.html

@@ -3,8 +3,30 @@
     <head>
         <meta charset="utf8">
         <title>Container Example</title>
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <style>
+            #target {
+                flex: 1;
+                border: none;
+            }
+            #container {
+                display: flex;
+                height: 500px;
+            }
+            body {
+                display: flex;
+                flex-direction: column;
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
     </head>
     <body>
+        <iframe id="target"></iframe>
+        <div id="container"></div>
         <script src="build/container.js"></script>
     </body>
 </html>