odysseyscience/react-router-proxy-loader

Dynamically load react-router components on-demand, based on react-proxy-loader

react-router-proxy-loader's Issues

Can use `class AComponent extends React.Component` in index.js instead of `React.createClass` ??

If not, is it because webpack itself does not support es6? Or somehow we need to apply babel on webpack?

Just curious.

React.createClass is deprecated

React.createClass is deprecated.

Need to update to support react 15+

displayName not proxied

When using with react-breadcrumb I always see the breadcrumb as "ReactProxy", even though my route sets the displayName property.

react-router-proxy-loader and react-router@2

Just a clarification question. if react-router@2 has support for async loading, is this loader still necessary?

Documentation question

I just had a couple questions about the documentation... is it required to run the babel loader twice?

loaders: [
    {
        test: /\.js$/,
        exclude: /src\/Pages/,
        loader: 'babel',
    },
    {
        test: /\.js$/,
        include: /src\/Pages/,
        loaders: ['react-router-proxy?name=routes/[name]', 'babel'],
    }
],

also can you expand on this:
0.4.2
Added support for ES6 modules

does this mean we can import those pages like this:

//routes.js

import App from './app.jsx'
import Users from './users.jsx'
import { Route } from 'react-router'

const routes = <Route component={App} path='/'>
  <Route component={Users} path='users' />
</Route>

or will that just lazy load all the pages at once when the routes.js page is loaded?

thanks for any help with this

Track loading status

How i can track loading status (e.g i want to show loader while loading component ) ?

Providing an example project

Hey, any chance you could provide an example project that shows this loader being used in conjunction with jsx-loader and style-loader?

0.13.x

Can this work with react.js 0.13 and up? NPM installation complaining...

npm ERR! peerinvalid The package react-router does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-router@^0.12.0

Entry point not running

I set up a hapi server to serve my main bundle from /public. Now I want to split the app's code to accelerate startup time, but when I use this loader my entry point doesn't get loaded. Note that if I remove the module loaders setting it works fine and as intended (just in one bundle).

I have the following setup:

app/js/index.js (before transpiling)

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link, browserHistory} from 'react-router';

import Test from './test';

class App extends React.Component {

  render () {
    return (
      <div>
        <h1>Hello world</h1>
        <Link to='/test'><button>test</button></Link>
      </div>
    );
  }

}

let routes = (
  <Router history={browserHistory}>
    <Route path='/' component={App}/>
    <Route path='/test' component={Test}/>
  </Router>
);

ReactDOM.render(routes, document.getElementById('app'));

app/js/test.js (before transpiling)

import React from 'react';
import {Link} from 'react-router';

export default class Test extends React.Component {
  render() {
    return (
      <div>
        <h1>Test route</h1>
        <Link to='/'><button>home</button></Link>
      </div>
    );
  }
}

app/js/server.js (before transpiling)

import Hapi from 'hapi';
import inert from 'inert';
import path from 'path';

const server = new Hapi.Server({
  connections: {
    routes: {
      files: {
        relativeTo: path.join(__dirname, '..', '..', 'public')
      }
    }
  }
});

server.connection({ port: 5000 });

server.register(inert, () => {});

server.route({
  method: 'GET',
  path: '/public/{path*}',
  handler: {
    directory: {
      path: '.',
      redirectToSlash: true,
      index: true
    }
  }
});

server.route({
  method: 'GET',
  path: '/{path*}',
  handler: {
    file: req => 'index.html'
  }
});

server.start(() => {
  console.log('Server running at: ' + server.info.uri);
});

webpack.config.js

const webpack = require('webpack');

module.exports = {

  entry: './app/js/index.js',

  output: {
    path: './public/',
    filename: 'bundle.min.js'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'react-router-proxy'
      }
    ]
  }
}

public/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="app"></div>
    </script><script src="/public/bundle.min.js"></script>
  </body>
</html>

dependencies:

"react-router": "^2.0.0-rc5",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router-proxy-loader": "^0.4.3",
"hapi": "^12.1.0",
"inert": "^3.2.0",
"webpack": "^1.12.12"

Creating files with hashed names

I'm using this [email protected] with [email protected].

in my route file I have:

<IndexRoute 
            component={ require('react-router-proxy?name=[Home]!./../components/Home/Home.react.js') } 
            onEnter={ endTransition } />

and in my webpack.config.js I have:

{ 
      test: /\.js$/,
      include: /app\/js\/components\/Home\/Home.react.*/,
      loaders: ['react-router-proxy?[name]', 'babel']
}

So in output I have many splitted js files that are charged at the specific route! This is great!
The problem is that I having files named 0.0.js 1.1.js etc.
I would like to obtain some old fashioned lfqdkjfqljfqlkj.js files..

I thought that using [name] should give me the Home in the files but I'm missing something.

Any help would be really appreciated!
thanks

[Discussion] renderUnavailable is unreachable code

Say I'm navigating between two react-router routes, A --> B.

Order of execution is roughly as follows:

1. A's willTransitionFrom
2. B's willTransitionTo (async load, go to step 3 via callback when complete)
3. A's componentWillUnmount
4. B's componentWillMount, render, ...etc

The proxy render logic calls renderUnavailable if the component has not yet loaded. In react-proxy-loader, this works because render can happen before the component is downloaded. However, with the new requirement of waiting for willTransitionTo, the component will always be loaded by the time render is called.

On slower connections, this results in a period of time where the page appears to hang while the new component is downloaded (no visual feedback to confirm user interaction).

Any thoughts on the best way to communicate this loading process?

Infer name from filename

This loader is very nice but it's a bit cumbersome to have to specify the name of the chunk every time to not have a bunch of numbered chunks. Would it be possible to make the loader use the file name by default as name? Like if I do require('react-router-proxy!../Routes/Rooms') it would be equivalent to require('react-router-proxy?name=rooms!../Routes/Rooms')?

type.toUpperCase is not a function

Uncaught TypeError: type.toUpperCase is not a function

Is showing up when I'm trying to load a route like this ->
routerManager.add(require('react-router-proxy!/web/app/operations/src/app.js'), 'operations');

Expanded it looks like its coming from here:

function autoGenerateWrapperClass(type) { return ReactClass.createClass({ tagName: type.toUpperCase(), render: function render() { return new ReactElement(type, null, null, null, null, this.props); } }); }

RouterManager is just a wrapper I have on top of ReactRouter which passes the path and the handler.

I'm using:

React v0.13.3
React-router v0.13.3
React-router-proxy-loader v0.3.0

Anyone seen something like this?

willTransitionFrom is never triggered

I used this package to replace react-proxy-loader. While willTransitionTo is working great, willTransitionFrom never triggers.

The "component" being sent to willTransitionFrom appears to be the proxy component, and thus always fails the component.willTransitionFrom check:

https://github.com/odysseyscience/react-router-proxy-loader/blob/master/index.js#L34

'        willTransitionFrom: function(transition, component, callback) {',
'            if (component && component.willTransitionFrom) {',
'                component.willTransitionFrom(transition, component, callback);',

I added component = component.state.component; to the first line of the function above, and it does trigger willTransitionFrom on the dynamically loaded component. However, since component.state.component is the React class definition, and not the instance, I don't have access to the component state as documented by react-router below:

willTransitionFrom(transition, component, callback)

Called when an active route is being transitioned out giving you an opportunity to abort the transition. The component is the current component, you'll probably need it to check its state to decide if you want to allow the transition (like form fields).

Is there a way to make willTransitionFrom trigger with the proper component instance?

Any guidance would be appreciated. Thanks!

Uncaught TypeError: __webpack_require__(...).filter is not a function

webpack/loader-utils#36

I think there are some conflicts between webpack loader-utils emojis-list and react-router-proxy-loader

Update peerDependency of react-router

I tried the loader with the version 1.0.0-rc1 of react-router and it works fine. But npm gives trouble with the peerDependencies. It would be really nice to update this.

Support server-side rendering

Probably want something like this: https://github.com/webpack/react-proxy-loader/blob/master/unavailable.js