for ingvar

bad-promises.js

// consider the following code 

// a.js

class A extends Component {
  static B = undefined;
  state = { B : A.B };

  componentWillMount() {
    A.B || import('./b.js').then(B => {
      A.B = B;
      this.setState({ B });
    });
  }

  render(){
    return this.state.B ? <B/> : '...loading'
  }
}

// b.js
module.exports = () => 'b!'


// I want to be able to server render a page, and rehydrate on the front end. 
// - when server rendering, I want import(B) to be sync, so I can render children
// - when client rendering, with server side output, and if B is already included in the js bundle, render should be sync again. 
// - when client rendering a new page, and B perhaps isn't in the bundle, I want to load b.js async 

// This was achievable with require.ensure - sync on the server, sync when bundle is already loaded, and async when not. 
// simply because it took callbacks.
// import () makes all of these always async, so I have no way of achieving my goal in the same module.