e46ae55cab
* Bring changes to this branch. * Add feature hydration. * Hydrate text. * Hydrate tag. * Hydrate node. * Hydrate List. * Hydrate Suspense. * Hydrate component. * Renderer::hydrate. * Add example and tests. * Fix comp_id. * Move some code away from generics. * Fix everything. * trybuild? * Collectable! * Phantom component. * Migrate docs as well. * Update example. * Fix docs and improve debug message. * Minor fixing. * Add hydration to feature soundness check. * Fix name in debug. * Remove Shift. * Remove comment. * Adjust readme. * Update website/docs/advanced-topics/server-side-rendering.md Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com> * Update packages/yew/src/dom_bundle/bnode.rs Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com> * Update packages/yew/src/dom_bundle/bnode.rs Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com> * Once via structopt, now direct clap. * Fix docs and empty fragment. * Remove struct component warning. * Move function router into a separate binary. * Optimise Code Logic. * Fix condition. * Fix rendering behaviour. * Fix comment. Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com>
Function Router Example
This is identical to the router example, but written in function components.
A blog all about yew. The best way to figure out what this example is about is to just open it up. It's mobile friendly too!
Running
While not strictly necessary, this example should be built in release mode:
trunk serve --release
Content generation can take up quite a bit of time in debug builds.
Concepts
This example involves many different parts, here are just the Yew specific things:
- Uses
yew-routerto render and switch between multiple pages.
The example automatically adapts to the --public-url value passed to Trunk.
This allows it to be hosted on any path, not just at the root.
For example, our demo is hosted at /router.
This is achieved by adding <base data-trunk-public-url /> to the index.html file.
Trunk rewrites this tag to contain the value passed to --public-url which can then be retrieved at runtime.
Take a look at Route for the implementation.
Improvements
- Use a special image component which shows a progress bar until the image is loaded.
- Scroll back to the top after switching route
- Run content generation in a dedicated web worker
- Use longer Markov chains to achieve more coherent results
- Make images deterministic (the same seed should produce the same images)
- Show posts by the author on their page (this is currently impossible because we need to find post seeds which in turn generate the author's seed)
- Show other posts at the end of a post ("continue reading")
- Home (
/) should include links to the post list and the author introduction - Detect sub-path from
--public-urlvalue passed to Trunk. See: thedodd/trunk#51