Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://rustwasm.github.io/docs/wasm-bindgen/contributing/design/importing-js.html below:

Importing a function from JS

1. Introduction
3. 1. Examples
4. 1. 1.1. Hello, World!
   2. 1.2. Using console.log
   3. 1.3. Small Wasm files
   4. 1.4. Without a Bundler
   5. 1.5. Synchronous Instantiation
   6. 1.6. Importing functions from JS
   7. 1.7. Working with char
   8. 1.8. js-sys: WebAssembly in WebAssembly
   9. 1.9. web-sys: DOM hello world
   10. 1.10. web-sys: Closures
   11. 1.11. web-sys: performance.now
   12. 1.12. web-sys: using fetch
   13. 1.13. web-sys: Weather report
   14. 1.14. web-sys: canvas hello world
   15. 1.15. web-sys: canvas Julia set
   16. 1.16. web-sys: WebAudio
   17. 1.17. web-sys: WebGL
   18. 1.18. web-sys: WebSockets
   19. 1.19. web-sys: WebRTC DataChannel
   20. 1.20. web-sys: requestAnimationFrame
   21. 1.21. web-sys: A Simple Paint Program
   22. 1.22. web-sys: Wasm in Web Worker
   23. 1.23. Parallel Raytracing
   24. 1.24. Wasm Audio Worklet
   25. 1.25. web-sys: A TODO MVC App
5. 2. Reference
6. 1. 2.1. Deployment
   2. 2.2. JS snippets
   3. 2.3. Static JS Objects
   4. 2.4. Passing Rust Closures to JS
   5. 2.5. Receiving JS Closures in Rust
   6. 2.6. Promises and Futures
   7. 2.7. Iterating over JS Values
   8. 2.8. Arbitrary Data with Serde
   9. 2.9. Accessing Properties of Untyped JS Values
   10. 2.10. Working with Duck-Typed Interfaces
   11. 2.11. Command Line Interface
   12. 2.12. Optimizing for Size
   13. 2.13. Supported Rust Targets
   14. 2.14. Supported Browsers
   15. 2.15. Support for Weak References
   16. 2.16. Support for Reference Types
   17. 2.17. Supported Types
   18. 1. 2.17.1. Imported JavaScript Types
       2. 2.17.2. Exported Rust Types
       3. 2.17.3. JsValue
       4. 2.17.4. Box<[T]> and Vec
       5. 2.17.5. *const T and *mut T
       6. 2.17.6. NonNull
       7. 2.17.7. Numbers
       8. 2.17.8. bool
       9. 2.17.9. char
       10. 2.17.10. str
       11. 2.17.11. String
       12. 2.17.12. Number Slices
       13. 2.17.13. Boxed Number Slices
       14. 2.17.14. Result<T, E>
   19. 2.18. #[wasm_bindgen] Attributes
   20. 1. 2.18.1. On JavaScript Imports
       2. 1. 2.18.1.1. catch
          2. 2.18.1.2. constructor
          3. 2.18.1.3. extends
          4. 2.18.1.4. getter and setter
          5. 2.18.1.5. final
          6. 2.18.1.6. indexing_getter, indexing_setter, and indexing_deleter
          7. 2.18.1.7. js_class = "Blah"
          8. 2.18.1.8. js_name
          9. 2.18.1.9. js_namespace
          10. 2.18.1.10. method
          11. 2.18.1.11. module = "blah"
          12. 2.18.1.12. raw_module = "blah"
          13. 2.18.1.13. no_deref
          14. 2.18.1.14. static_method_of = Blah
          15. 2.18.1.15. structural
          16. 2.18.1.16. typescript_type
          17. 2.18.1.17. variadic
          18. 2.18.1.18. vendor_prefix
       3. 2.18.2. On Rust Exports
       4. 1. 2.18.2.1. constructor
          2. 2.18.2.2. js_name = Blah
          3. 2.18.2.3. js_class = Blah
          4. 2.18.2.4. readonly
          5. 2.18.2.5. skip
          6. 2.18.2.6. skip_jsdoc
          7. 2.18.2.7. start
          8. 2.18.2.8. main
          9. 2.18.2.9. typescript_custom_section
          10. 2.18.2.10. getter and setter
          11. 2.18.2.11. inspectable
          12. 2.18.2.12. skip_typescript
          13. 2.18.2.13. getter_with_clone
          14. 2.18.2.14. unchecked_return_type and unchecked_param_type
          15. 2.18.2.15. return_description and param_description
7. 3. web-sys
8. 1. 3.1. Using web-sys
   2. 3.2. Cargo Features
   3. 3.3. Function Overloads
   4. 3.4. Type Translations
   5. 3.5. Inheritance
   6. 3.6. Unstable APIs
9. 4. Testing with wasm-bindgen-test
10. 1. 4.1. Usage
    2. 4.2. Writing Asynchronous Tests
    3. 4.3. Testing in Headless Browsers
    4. 4.4. Continuous Integration
    5. 4.5. Coverage (Experimental)
11. 5. Contributing to wasm-bindgen
12. 1. 5.1. Testing
    2. 5.2. Internal Design
    3. 1. 5.2.1. JS Objects in Rust
       2. 5.2.2. Exporting a function to JS
       3. 5.2.3. Exporting a struct to JS
       4. 5.2.4. Importing a function from JS
       5. 5.2.5. Importing a class from JS
       6. 5.2.6. Rust Type conversions
       7. 5.2.7. Types in wasm-bindgen
    4. 5.3. js-sys
    5. 1. 5.3.1. Testing
       2. 5.3.2. Adding More APIs
    6. 5.4. web-sys
    7. 1. 5.4.1. Overview
       2. 5.4.2. Testing
       3. 5.4.3. Logging
       4. 5.4.4. Supporting More Web APIs
    8. 5.5. Publishing
    9. 5.6. Team

Now that we've exported some rich functionality to JS it's also time to import some! The goal here is to basically implement JS import statements in Rust, with fancy types and all.

First up, let's say we invert the function above and instead want to generate greetings in JS but call it from Rust. We might have, for example:

# #![allow(unused_variables)]
#fn main() {
#[wasm_bindgen(module = "./greet")]
extern "C" {
    fn greet(a: &str) -> String;
}

fn other_code() {
    let greeting = greet("foo");
    // ...
}
#}

The basic idea of imports is the same as exports in that we'll have shims in both JS and Rust doing the necessary translation. Let's first see the JS shim in action:

import * as wasm from './foo_bg';

import { greet } from './greet';

// ...

export function __wbg_f_greet(ptr0, len0, wasmretptr) {
  const [retptr, retlen] = passStringToWasm(greet(getStringFromWasm(ptr0, len0)));
  (new Uint32Array(wasm.memory.buffer))[wasmretptr / 4] = retlen;
  return retptr;
}

The getStringFromWasm and passStringToWasm are the same as we saw before, and like with __wbindgen_object_drop_ref far above we've got this weird export from our module now! The __wbg_f_greet function is what's generated by wasm-bindgen to actually get imported in the foo.wasm module.

The generated foo.js we see imports from the ./greet module with the greet name (was the function import in Rust said) and then the __wbg_f_greet function is shimming that import.

There's some tricky ABI business going on here so let's take a look at the generated Rust as well. Like before this is simplified from what's actually generated.

# #![allow(unused_variables)]
#fn main() {
extern "C" fn greet(a: &str) -> String {
    extern "C" {
        fn __wbg_f_greet(a_ptr: *const u8, a_len: usize, ret_len: *mut usize) -> *mut u8;
    }
    unsafe {
        let a_ptr = a.as_ptr();
        let a_len = a.len();
        let mut __ret_strlen = 0;
        let mut __ret_strlen_ptr = &mut __ret_strlen as *mut usize;
        let _ret = __wbg_f_greet(a_ptr, a_len, __ret_strlen_ptr);
        String::from_utf8_unchecked(
            Vec::from_raw_parts(_ret, __ret_strlen, __ret_strlen)
        )
    }
}
#}

Here we can see that the greet function was generated but it's largely just a shim around the __wbg_f_greet function that we're calling. The ptr/len pair for the argument is passed as two arguments and for the return value we're receiving one value (the length) indirectly while directly receiving the returned pointer.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4