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
This commit is contained in:
parent
253f23f357
commit
a1d875ffbd
|
@ -18,7 +18,7 @@
|
||||||
(defn alert [title]
|
(defn alert [title]
|
||||||
(.alert (.-Alert js/React) title))
|
(.alert (.-Alert js/React) title))
|
||||||
|
|
||||||
(defn widget []
|
(defn app-root []
|
||||||
(let [greeting (subscribe [:get-greeting])]
|
(let [greeting (subscribe [:get-greeting])]
|
||||||
(fn []
|
(fn []
|
||||||
[view {:style {:flex-direction "column" :margin 40 :align-items "center"}}
|
[view {:style {:flex-direction "column" :margin 40 :align-items "center"}}
|
||||||
|
@ -29,9 +29,6 @@
|
||||||
:on-press #(alert "HELLO!")}
|
:on-press #(alert "HELLO!")}
|
||||||
[text {:style {:color "white" :text-align "center" :font-weight "bold"}} "press me"]]])))
|
[text {:style {:color "white" :text-align "center" :font-weight "bold"}} "press me"]]])))
|
||||||
|
|
||||||
(defn mount-root []
|
(defn init []
|
||||||
(r/render [widget] 1))
|
|
||||||
|
|
||||||
(defn ^:export init []
|
|
||||||
(dispatch-sync [:initialize-db])
|
(dispatch-sync [:initialize-db])
|
||||||
(.registerRunnable app-registry "$PROJECT_NAME$" #(mount-root)))
|
(.registerComponent app-registry "$PROJECT_NAME$" #(r/reactify-component app-root)))
|
||||||
|
|
|
@ -1,15 +1,17 @@
|
||||||
(ns ^:figwheel-no-load env.$PLATFORM$.main
|
(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]))
|
[figwheel.client :as figwheel :include-macros true]))
|
||||||
|
|
||||||
(enable-console-print!)
|
(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
|
(figwheel/watch-and-reload
|
||||||
:websocket-url "ws://$DEV_HOST$:3449/figwheel-ws"
|
:websocket-url "ws://$DEV_HOST$:3449/figwheel-ws"
|
||||||
:heads-up-display false
|
:heads-up-display true
|
||||||
:jsload-callback core/mount-root)
|
:jsload-callback #(swap! cnt inc))
|
||||||
|
|
||||||
(core/init)
|
|
||||||
(core/mount-root)
|
|
||||||
|
|
||||||
|
|
||||||
|
(core/init)
|
|
@ -6,29 +6,46 @@
|
||||||
|
|
||||||
var CLOSURE_UNCOMPILED_DEFINES = null;
|
var CLOSURE_UNCOMPILED_DEFINES = null;
|
||||||
|
|
||||||
var React = require('react-native');
|
|
||||||
|
|
||||||
var config = {
|
var config = {
|
||||||
basePath: "target/",
|
basePath: "target/",
|
||||||
googBasePath: 'goog/',
|
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var React = require('react-native');
|
||||||
var self;
|
var self;
|
||||||
var scriptQueue = [];
|
var scriptQueue = [];
|
||||||
var server = null; // will be set dynamically
|
var server = null; // will be set dynamically
|
||||||
var fileBasePath = 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 evaluate = eval; // This is needed, direct calls to eval does not work (RN packager???)
|
||||||
var externalModules = {};
|
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
|
// evaluates js code ensuring proper ordering
|
||||||
function customEval(url, javascript, success, error) {
|
function customEval(url, javascript, success, error) {
|
||||||
|
@ -38,9 +55,9 @@ function customEval(url, javascript, success, error) {
|
||||||
evaluate(javascript);
|
evaluate(javascript);
|
||||||
console.info('Evaluated: ' + url);
|
console.info('Evaluated: ' + url);
|
||||||
scriptQueue.shift();
|
scriptQueue.shift();
|
||||||
if (url.indexOf('jsloader') > -1) {
|
evalListeners.forEach(function (listener) {
|
||||||
shimJsLoader();
|
listener(url)
|
||||||
}
|
});
|
||||||
success();
|
success();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Evaluation error in: ' + url);
|
console.error('Evaluation error in: ' + url);
|
||||||
|
@ -93,7 +110,6 @@ function importJs(src, success, error) {
|
||||||
asyncImportScripts(filePath, success, error);
|
asyncImportScripts(filePath, success, error);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function interceptRequire() {
|
function interceptRequire() {
|
||||||
var oldRequire = window.require;
|
var oldRequire = window.require;
|
||||||
console.info("Shimming 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";
|
server = "http://" + devHost + ":8081";
|
||||||
fileBasePath = config.basePath + platform;
|
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") {
|
if (typeof goog === "undefined") {
|
||||||
console.log('Loading Closure base.');
|
console.log('Loading Closure base.');
|
||||||
interceptRequire();
|
interceptRequire();
|
||||||
|
@ -118,25 +153,20 @@ function loadApp(platform, devHost) {
|
||||||
fakeLocalStorageAndDocument();
|
fakeLocalStorageAndDocument();
|
||||||
importJs('cljs_deps.js');
|
importJs('cljs_deps.js');
|
||||||
importJs('goog/deps.js', function () {
|
importJs('goog/deps.js', function () {
|
||||||
|
debugToLog();
|
||||||
// This is needed because of RN packager
|
// This is needed because of RN packager
|
||||||
// seriously React packager? why.
|
// seriously React packager? why.
|
||||||
var googreq = goog.require;
|
var googreq = goog.require;
|
||||||
|
|
||||||
googreq('figwheel.connect');
|
googreq('figwheel.connect');
|
||||||
googreq('env.' + platform + '.main');
|
|
||||||
|
|
||||||
console.log('Done loading Clojure app');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function startApp(appName, platform, devHost) {
|
function startApp(appName, platform, devHost) {
|
||||||
React.AppRegistry.registerComponent(appName, () => config.splash);
|
React.AppRegistry.registerComponent(
|
||||||
if (typeof goog === "undefined") {
|
appName, () => figwheelApp(platform, devHost));
|
||||||
loadApp(platform, devHost);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function withModules(moduleById) {
|
function withModules(moduleById) {
|
||||||
|
@ -179,6 +209,13 @@ function fakeLocalStorageAndDocument() {
|
||||||
console.debug = console.warn;
|
console.debug = console.warn;
|
||||||
window.addEventListener = function () {
|
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
|
// Figwheel fixes
|
||||||
|
|
Loading…
Reference in New Issue