Last active
December 5, 2017 16:35
-
-
Save developit/9f547d32b96f879b259be399a5dc0f01 to your computer and use it in GitHub Desktop.
A couple of variants for preact split points
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { h, Component } from 'preact'; | |
/** | |
* <SplitPoint load={require('bundle?lazy!./foo')} fallbackContent={( | |
* <div class="loading" /> | |
* )} /> | |
*/ | |
class SplitPoint extends Component { | |
componentWillMount() { | |
let cb = this.linkState('child'), | |
r = this.props.load(cb); | |
if (r.then) r.then(cb); | |
} | |
render({ load, fallbackContent, ...props }, { child }) { | |
return child ? h(child, props) : fallbackContent || null; | |
} | |
} | |
class SplitPoint extends Component { | |
componentWillMount() { | |
let cb = this.linkState('child'), | |
r = this.props.load(); | |
r.then ? r.then(cb) : cb(r); | |
} | |
render(props, { child }) { | |
return child ? h(child, props) : null; | |
} | |
} | |
class Split extends Component { | |
render({ load, ...props }, { child }) { | |
if (!child && !this.child) { | |
let c = this.child = load(); | |
c.then ? c.then(this.linkState('child')) : (child = c); | |
} | |
return child ? h(child, props) : null; | |
} | |
} |
Now it looks like it's working:
export default class SplitCode extends Component {
componentWillMount() {
this.props.load((file) => {
this.setState({ child: file.default });
});
}
render({ load, fallbackContent, ...props }, { child }) {
return child ? h(child, props) : fallbackContent || null;
}
}
Works, using setState but just with page reload not with router link. with linkState demo doesn't work.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am trying the first example.
Are you using bundle-loader?
Because I have this error message: "Cannot read property 'then' of undefined"
if I console
this.props.load
it return:and
this.props.load(cb)
return:undefined