odysseyscience / react-router-proxy-loader Goto Github PK
View Code? Open in Web Editor NEWDynamically load react-router components on-demand, based on react-proxy-loader
Dynamically load react-router components on-demand, based on react-proxy-loader
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"
React.createClass is deprecated.
Need to update to support react 15+
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.
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
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
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
How i can track loading status (e.g i want to show loader while loading component ) ?
Hey, any chance you could provide an example project that shows this loader being used in conjunction with jsx-loader and style-loader?
Say I'm navigating between two react-router routes, A --> B.
Order of execution is roughly as follows:
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?
Probably want something like this: https://github.com/webpack/react-proxy-loader/blob/master/unavailable.js
I think there are some conflicts between webpack
loader-utils
emojis-list
and react-router-proxy-loader
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!
Just a clarification question. if react-router@2 has support for async loading, is this loader still necessary?
If not, is it because webpack itself does not support es6? Or somehow we need to apply babel on webpack?
Just curious.
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?
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')
?
When using with react-breadcrumb I always see the breadcrumb as "ReactProxy", even though my route sets the displayName property.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.