2576372e26
* Separate hydration and render queue. * Revert "Fix issue with node refs and hydration (#2597)" This reverts commit 469cc341c340bd0093d9233847f523b66a18fd90. * Priority Render. * Add some tests. * Add more tests. * Add test result after click. * Fix test comment. * Fix test timing. * Restore test. * Once AtomicBool, now a Cell. * Prefer use_future. * Revealing of Suspense always happen after the component has re-rendered itself. * Shifting should register correct next_sibling. * Revert to HashMap. * cargo +nightly fmt. * Fix comment. * Optimise Code size? * Add comment if assertion fails. * Revert "Merge branch 'hydration-4' into fc-prepared-state" This reverts commit 427b087d4db6b2e497ad618273655bd18ba9bd01, reversing changes made to 109fcfaa127aefc5fa3c697e254fe2c049292be2. * Revert "Revert "Merge branch 'hydration-4' into fc-prepared-state"" This reverts commit f1e408958d94cb13813ce75aa6f0aad06c9fa3e8. * Redo #2957.
Js Callback Example
Concepts
The example uses wasm-bindgen to import functionality from Javascript.
To learn more about the subject, refer to "The wasm-binden Guide".
This example also demonstrates how to delay the loading of the snippet using Suspense.
Serving JS files
JS files can be served when they're present in dist directory. There are two ways to copy these files:
- Use JS Snippets.
- Use trunk to copy the file and import it manually
Using JS Snippets
This example uses this approach. wasm-bindgen handles copying the files with this approach.
All you have to do is define the extern block. The files are copied to dist/snippets/<bin-name>-<hash>/ directory.
If the file is to be loaded with the initial load, you can simply use the JS imports, as shown we imp.js.
If you would like to lazy-load the JS module, you need to use the trunk's post_build hook
from trunk_post_build.rs access the snippets' directory path at runtime and use in
import() for dynamic imports
Copying file with trunk
This approach is only needed if the JS module is to be lazy-loaded. It allows us to skip the step where we
provide the snippets' directory path to the app. Instead, the file is copied at a known location that can
easily be referenced im import() statement.
Improvements
This example is a purely technical demonstration and lacks an actual purpose. The best way to improve this example would be to incorporate this concept into a small application.
- Do something more complex in the Javascript code to demonstrate more of
wasm-bindgen's capabilities. - Improve the presentation of the example with CSS.