make compilation errors and other problems appear in simulator screen #8

- do not use AppRegistry.registerRunnable for mounting component to id 1, this prevents warning to be shown in yellow box. Instead use AppRegistry.registerComponent
- shim some document functions so that enabled figwheel heads-up-display works without errors and logs warnings to console (that will be shown on screen in yellow box)
- figwheel splash component now loads real app and renders root component. That has to be done to avoid using AppRegistry.registerRunnable to render real app

resources/cljs/core.cljs

@@ -18,7 +18,7 @@
 (defn alert [title]
       (.alert (.-Alert js/React) title))
 
-(defn widget []
+(defn app-root []
   (let [greeting (subscribe [:get-greeting])]
     (fn []
       [view {:style {:flex-direction "column" :margin 40 :align-items "center"}}
@@ -29,9 +29,6 @@
                              :on-press #(alert "HELLO!")}
         [text {:style {:color "white" :text-align "center" :font-weight "bold"}} "press me"]]])))
 
-(defn mount-root []
-      (r/render [widget] 1))
-
-(defn ^:export init []
+(defn init []
       (dispatch-sync [:initialize-db])
-      (.registerRunnable app-registry "$PROJECT_NAME$" #(mount-root)))
+      (.registerComponent app-registry "$PROJECT_NAME$" #(r/reactify-component app-root)))

resources/cljs/main_dev.cljs

@@ -1,15 +1,17 @@
  (ns ^:figwheel-no-load env.$PLATFORM$.main
-  (:require [$PROJECT_NAME_HYPHENATED$.$PLATFORM$.core :as core]
+  (:require [reagent.core :as r]
+            [$PROJECT_NAME_HYPHENATED$.$PLATFORM$.core :as core]
             [figwheel.client :as figwheel :include-macros true]))
 
  (enable-console-print!)
 
+(def cnt (r/atom 0))
+(defn reloader [] @cnt [core/app-root])
+(def root-el (r/as-element [reloader]))
+
 (figwheel/watch-and-reload
  :websocket-url "ws://$DEV_HOST$:3449/figwheel-ws"
- :heads-up-display false
- :jsload-callback core/mount-root)
-
- (core/init)
- (core/mount-root)
-
+ :heads-up-display true
+ :jsload-callback #(swap! cnt inc))
 
+(core/init)

resources/figwheel-bridge.js

@@ -6,29 +6,46 @@
 
 var CLOSURE_UNCOMPILED_DEFINES = null;
 
-var React = require('react-native');
-
 var config = {
     basePath: "target/",
-    googBasePath: 'goog/',
-    splash: React.createClass({
-        render: function () {
-            var plainStyle = {flex: 1, alignItems: 'center', justifyContent: 'center'};
-            return (
-                <React.View style={plainStyle}>
-                    <React.Text>Waiting for Figwheel to load files.</React.Text>
-                </React.View>
-            );
-        }
-    })
+    googBasePath: 'goog/'
 };
 
+var React = require('react-native');
 var self;
 var scriptQueue = [];
 var server = null; // will be set dynamically
 var fileBasePath = null; // will be set dynamically
 var evaluate = eval; // This is needed, direct calls to eval does not work (RN packager???)
 var externalModules = {};
+var evalListeners = []; // functions to be called when a script is evaluated
+
+var figwheelApp = function (platform, devHost) {
+    return React.createClass({
+        getInitialState: function () {
+            return {loaded: false}
+        },
+        render: function () {
+            if (!this.state.loaded) {
+                var plainStyle = {flex: 1, alignItems: 'center', justifyContent: 'center'};
+                return (
+                    <React.View style={plainStyle}>
+                        <React.Text>Waiting for Figwheel to load files.</React.Text>
+                    </React.View>
+                );
+            }
+            return this.state.root;
+        },
+        componentDidMount: function () {
+            var app = this;
+            if (typeof goog === "undefined") {
+                loadApp(platform, devHost, function(appRoot) {
+                    app.setState({root: appRoot, loaded: true})
+                });
+            }
+        }
+    })
+};
 
 // evaluates js code ensuring proper ordering
 function customEval(url, javascript, success, error) {
@@ -38,9 +55,9 @@ function customEval(url, javascript, success, error) {
                 evaluate(javascript);
                 console.info('Evaluated: ' + url);
                 scriptQueue.shift();
-                if (url.indexOf('jsloader') > -1) {
-                    shimJsLoader();
-                }
+                evalListeners.forEach(function (listener) {
+                    listener(url)
+                });
                 success();
             } catch (e) {
                 console.error('Evaluation error in: ' + url);
@@ -93,7 +110,6 @@ function importJs(src, success, error) {
     asyncImportScripts(filePath, success, error);
 }
 
-
 function interceptRequire() {
     var oldRequire = window.require;
     console.info("Shimming require");
@@ -106,10 +122,29 @@ function interceptRequire() {
     };
 }
 
-function loadApp(platform, devHost) {
+// do not show debug messages in yellow box
+function debugToLog() {
+    console.debug = console.log;
+}
+
+function loadApp(platform, devHost, onLoadCb) {
     server = "http://" + devHost + ":8081";
     fileBasePath = config.basePath + platform;
 
+    evalListeners.push(function (url) {
+        if (url.indexOf('jsloader') > -1) {
+            shimJsLoader();
+        }
+    });
+
+    // callback when app is ready to get the reloadable component
+    evalListeners.push(function (url) {
+        if (url.indexOf('main.js') > -1) {
+            onLoadCb(env[platform].main.root_el);
+            console.log('Done loading Clojure app');
+        }
+    });
+
     if (typeof goog === "undefined") {
         console.log('Loading Closure base.');
         interceptRequire();
@@ -118,25 +153,20 @@ function loadApp(platform, devHost) {
             fakeLocalStorageAndDocument();
             importJs('cljs_deps.js');
             importJs('goog/deps.js', function () {
-
+                debugToLog();
                 // This is needed because of RN packager
                 // seriously React packager? why.
                 var googreq = goog.require;
 
                 googreq('figwheel.connect');
-                googreq('env.' + platform + '.main');
-
-                console.log('Done loading Clojure app');
             });
         });
     }
 }
 
 function startApp(appName, platform, devHost) {
-    React.AppRegistry.registerComponent(appName, () => config.splash);
-    if (typeof goog === "undefined") {
-        loadApp(platform, devHost);
-    }
+    React.AppRegistry.registerComponent(
+        appName, () => figwheelApp(platform, devHost));
 }
 
 function withModules(moduleById) {
@@ -179,6 +209,13 @@ function fakeLocalStorageAndDocument() {
     console.debug = console.warn;
     window.addEventListener = function () {
     };
+    // make figwheel think that heads-up-display divs are there
+    window.document.querySelector = function (selector) {
+        return {};
+    };
+    window.document.getElementById = function (id) {
+        return {style:{}};
+    };
 }
 
 // Figwheel fixes