a53a045970
* Add `--open` to `boids` * Added running instructions to `contexts` * Amended `counter` instructions - Added `--open` flag - Removed unnecessary instructions on how to run with `release` profile * Amended `counter_functional` instructions - Added `--open` flag - Removed unnecessary instructions on how to run with `release` profile * Amended `dyn_create_destroy_apps` instructions - Added `--open` flag - Removed unnecessary instructions on how to run with `release` profile * Added running instructions to `file_upload` * Added running instructions to `function_memory_game`` * Amended `function_router` instructions - Amended `release` profile instructions - Added `--open` flag * Added running instructions to `function_todomvc` * Added running instructions to `futures` * Added running instructions to `game_of_life` * Added running instructions to `immutable` * Added running instructions to `inner_html` * Added running instructions to `js_callback` * Amended `keyed_list` instructions - Added `--open` flag - Amended `release` profile notice * Added running instructions to `mount_point` * Added running instructions to `nested_list` * Added running instructions to `node_refs` * Amended `password_strength` instructions - Added `--open` flag - Amended `release` profile notice * Added running instructions to `portals` * Amended `router` instructions - Added `--open` flag - Amended `release` profile notice * Amended `simple_ssr` instructions - Simplified wording - Removed unnecessary notes - Changed commands so that they should be executed from the `examples/simple_ssr` directory like every other example * Amended `ssr_router` instructions - Removed unnecessary notes - Changed commands so that they should be executed from the `examples/ssr_router` directory like every other example * Added running instructions to `suspense` * Added running instructions to `timer` * Added running instructions to `todo_mvc` * Added running instructions to `two_apps` * Added running instructions to `web_worker_fib` * Added running instructions to `webgl` * Amended various examples - Simplified running instructions - Moved running instructions to the bottom of each `README.md` * Amended `examples/README.md` instructions - Added `release` profile notice - Added `--open` flag - Removed `--release` flag * Apply grammar suggestions from code review Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com> * Update examples/function_router/README.md Grammar Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com> * Add Grammar Suggestions from Review * Apply Spelling Suggestion Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com> --------- Co-authored-by: Kaede Hoshikawa <futursolo@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