6f4cdf2802
* Add use_effect_with * Fix doc * Add NeverEq * Save as deps-and-runner * remove with_deps * fix other use_effect_with_deps * add migration guide * fix website * fix doc test * return use_effect_base * fix docs * fmt * fix doc tests * noeq * use_callback * finsihing touches * fmt * nighly fmt * fix mistake --------- Co-authored-by: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com>
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.
Running
Run this application with the trunk development server:
trunk serve --open