diff --git a/README.md b/README.md index f8a3a0b..d380266 100644 --- a/README.md +++ b/README.md @@ -274,9 +274,19 @@ const MyUniversalComponent = universal(import('./MyComponent')) // call this only after you're sure it has loaded MyUniversalComponent.doSomething() + +// If you are not sure if the component has loaded or rendered, call preloadWeak(). +// This will attempt to hoist and return the inner component, +// but only if it can be loaded synchronously, otherwise null will be returned. +const InnerComponent = MyUniversalComponent.preloadWeak() +if (InnerComponent) { + InnerComponent.doSomething() +} ``` > NOTE: for imports using dynamic expressions, conflicting methods will be overwritten by the current component +> NOTE: preloadWeak() will not cause network requests, which means that if the component has not loaded, it will return null. Use it only when you need to retrieve and hoist the wrapped component before rendering. Calling preloadWeak() on your server will ensure that all statics are hoisted properly. + ## Props API - `isLoading: boolean` diff --git a/src/index.js b/src/index.js index 555f9fa..20a11e0 100644 --- a/src/index.js +++ b/src/index.js @@ -76,11 +76,29 @@ export default function universal( return requireAsync(props, context) }) .then(Component => { - hoist(UniversalComponent, Component, { preload: true }) + hoist(UniversalComponent, Component, { + preload: true, + preloadWeak: true + }) return Component }) } + static preloadWeak(props: Props, context: Object = {}) { + props = props || {} + const { requireSync } = req(component, options, props) + + const Component = requireSync(props, context) + if (Component) { + hoist(UniversalComponent, Component, { + preload: true, + preloadWeak: true + }) + } + + return Component + } + static contextTypes = { store: PropTypes.object, report: PropTypes.func @@ -228,7 +246,10 @@ export default function universal( const { Component, error } = state if (Component && !error) { - hoist(UniversalComponent, Component, { preload: true }) + hoist(UniversalComponent, Component, { + preload: true, + preloadWeak: true + }) if (this.props.onAfter) { const { onAfter } = this.props