Comments (3)
Hey @oliviertassinari! Thanks!
Yeah, totally a great idea and I think @bradennapier has some alternative ideas around this problem.
It would be great to come up with a simple and flexible solution for this. I'll review your solution when I get a chance and keep this in the back of my mind. Happy to collaborate with you to get something awesome together.
from react-async-component.
Olivier, I may be misunderstanding your intent - but the fact the async loading is done using import which already returns promises, we shouldn't need to use setTimeout to accomplish nested asynchronous loading.
This method also allows using the defer method to handle pushing to the client for rendering which @ctrlplusb has given us. From my testing it appears to do a good job so far, but I haven't done extensive tests on it as its working for our dev thus far.
I have setup a method of handling routes asynchronously as well as their dependencies.
export default [
{
id: 'Home',
exactly: true,
props: {
title: 'Home'
},
pattern: '/',
component: () => import('./screens/Home')
},
{
id: 'Welcome',
props: {
title: 'Welcome'
},
pattern: '/login/1',
component: () => import('./screens/Welcome')
},
{
id: 'SecurityCenter',
props: {
title: 'Security Center'
},
pattern: '/security-center',
secure: true,
component: () => import('./screens/SecurityCenter')
},
{
id: 'UserProjects',
props: {
title: 'Project Select'
},
pattern: '/project',
component: () => import('./screens/UserProjects')
},
{
id: 'LoginPage',
props: {
title: 'Login'
},
pattern: '/login',
component: () => import('./screens/Login')
}
]
Then when we move deeper into the routes we simply pass new routes that will be also imported asynchronously
import React from 'react'
import Resolver from 'app/resolver'
const routes = [
{
id: 'ProjectSelect',
pattern: '/',
exactly: true,
component: () => import('./screens/ProjectSelect')
},
{
id: 'ProjectDashboard',
pattern: '/dashboard/:projectSlug',
component: () => import('./screens/ProjectDashboard')
}
]
export default props => (<Resolver {...props} routes={routes} />)
Then we have this as a Resolver ( I added a redux push as well for redirecting when accessing secure pages using a layer:
const RoutedResolver = ({ routes, ...props }) => (
<div>
{
routes.map( route => {
if ( ! route.id ) { throw new Error('Route Does not have an ID: ', route) }
const matchProps = {
...route,
key: route.id,
exactly: route.exactly == true,
pattern: route.pattern === '/'
? props.pathname
: props.pathname + route.pattern
}
return <Match {...matchProps} render={ renderProps => {
const appProps = {
...matchProps,
...renderProps,
}
return <Resolver {...props} {...appProps} />
}}
/>
})
}
</div>
)
const Loading = () => (<div>LOADING</div>)
const Resolver = ({
component, routes,
isAuthenticated = false,
defer = false,
secure = false,
...props
}, { store }) => {
if ( secure && ! isAuthenticated ) {
const { location, ...rest } = props
store.dispatch({
type: 'ROUTER_SECURE_REQUESTED',
location: props.location,
props: rest
})
return null
}
const Component = routes
? RoutedResolver
: component
? BuildAsyncComponent(component, secure || defer)
: Loading
if ( routes ) { props.routes = routes }
//console.log('Resolver: ', props.id, props)
return <Component {...props} />
}
Resolver.contextTypes = {
store: PropTypes.object.isRequired
}
export const BuildAsyncComponent = (component, defer) =>
createAsyncComponent({
resolve: component,
defer
})
export default Resolver
from react-async-component.
Related: ctrlplusb/react-universally#406
from react-async-component.
Related Issues (20)
- if more the one same async components are rendered in same page, only one will be rendered
- Chunk rendered in the server is requested in the client again HOT 1
- Need Help : How can I solve "System is not defined" HOT 5
- Error walking your react tree HOT 1
- No-match routes rendered during async loading HOT 1
- Combining with <link rel="prefetch" /> results in loading async components twice
- Upgrade to support react-async-bootstrapper 2
- App component rendered twice because of AsyncComponentProvider wrapper in RU
- Solved : Flashing LoadingComponent and render twice
- getErrors missing after migration to 2.0.0
- When used with react-hot-loader, async component gets stuck on the loader HOT 3
- Async component not rendering on directly open page
- Client error: Failed to resolve asyncComponent on Safari 11.1
- React.Children.only seems to fail on IE11 HOT 1
- Is it possible to load the async'd components from a custom URL? HOT 1
- Two same simultaneously async components HOT 5
- Informing about React.lazy() HOT 2
- Cannot read property 'helmetInstances' of undefined HOT 3
- migrate to New Context API
- Error async-component, state not reloaded after error
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-async-component.