| // getComponent is a function that returns a promise for a component | |
| // It will not be called until the first mount | |
| function asyncComponent(getComponent) { | |
| return class AsyncComponent extends React.Component { | |
| static Component = null; | |
| state = { Component: AsyncComponent.Component }; | |
| componentWillMount() { | |
| if (!this.state.Component) { | |
| getComponent().then(Component => { |
| defmodule App.Query do | |
| import App.Database, only: [run: 1] | |
| alias RethinkDB.Query | |
| def get(table, id) when is_bitstring(id) do | |
| Query.table(table) | |
| |> Query.get(id) | |
| |> run | |
| |> catch_errors | |
| |> handle_get_response |
| // give it a name so it reuses the same window | |
| var win = window.open(null, "redux-devtools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no"); | |
| // reload in case it's reusing the same window with the old content | |
| win.location.reload(); | |
| // wait a little bit for it to reload, then render | |
| setTimeout(function() { | |
| React.render( | |
| <DebugPanel top right bottom left > |
| // Extracted from a live application. Known to work with latest Chrome/Firefox | |
| // and Animate.css. (IE untested) | |
| export let AnimationMixin= { | |
| playAnimation( animation='pulse', speed=1000) { | |
| if(! this.isMounted()) { | |
| log.warn( "Trying to call .playAnimation() on an unmounted component!") | |
| return | |
| } |
While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.
Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>WebWorker image preloading</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> | |
| </head> | |
| <body> | |
| <div id="output"></div> | |
| <script id="imgloader" type="javascript/worker"> | |
| // Not race proof or robust. Proof of concept. |
| IronRouter.prototype.mapResource = function(resource){ | |
| var router = this; | |
| var _routes = [ | |
| { name: resource, path: '/' + resource, action: 'index' }, | |
| { name: 'show' + resource, path: '/' + resource + '/:id', action: 'show' } | |
| ]; | |
| _.each(_routes, function(route, index){ | |
| router.map(function(){ | |
| this.route(route.name, { |
| mongorestore --port 3002 --drop --db meteor ./dump/verso/ |
| var tests = Object.keys(window.__karma__.files).filter(function (file) { | |
| return /\.spec\.js$/.test(file); | |
| }).map(function(file){ | |
| return file.replace(/^\/base\/src\/js\/|\.js$/g,''); | |
| }); | |
| require.config({ | |
| baseUrl: '/base/src/js', | |
| paths: { | |
| "lib":"../../target/js/lib" |
| IAB = { | |
| closed: true, //for meteor to detect closed state | |
| open: function(url, cb, goalURL) { | |
| var that = this; | |
| cordova.exec(function(params) { | |
| switch (params.type) { | |
| case 'loadstart': | |
| console.log('IAB: loadstart url, ' + params.url); |
