From a1d875ffbd2b1e0600c99c9828f71ccda63ba0f2 Mon Sep 17 00:00:00 2001 From: Artur Girenko Date: Sat, 9 Jan 2016 23:35:40 +0100 Subject: [PATCH] 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 | 9 ++-- resources/cljs/main_dev.cljs | 16 ++++--- resources/figwheel-bridge.js | 89 +++++++++++++++++++++++++----------- 3 files changed, 75 insertions(+), 39 deletions(-) diff --git a/resources/cljs/core.cljs b/resources/cljs/core.cljs index b4362ad..ce446f4 100644 --- a/resources/cljs/core.cljs +++ b/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))) diff --git a/resources/cljs/main_dev.cljs b/resources/cljs/main_dev.cljs index 0c3c939..4ee24b4 100644 --- a/resources/cljs/main_dev.cljs +++ b/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) \ No newline at end of file diff --git a/resources/figwheel-bridge.js b/resources/figwheel-bridge.js index 0eaae8e..9ed2fc3 100644 --- a/resources/figwheel-bridge.js +++ b/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 ( - - Waiting for Figwheel to load files. - - ); - } - }) + 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 ( + + Waiting for Figwheel to load files. + + ); + } + 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