mirror of
https://github.com/rustwasm/wasm-bindgen.git
synced 2024-12-25 11:02:11 +03:00
Merge pull request #54 from sendilkumarn/fix-file-name
feat: rename generated file to have bg instead of wasm
This commit is contained in:
commit
e46a613ad7
18
DESIGN.md
18
DESIGN.md
@ -23,9 +23,9 @@ strings, etc. Keep in mind, though, that everything is based on ES Modules! This
|
||||
means that the compiler is actually producing a "broken" wasm file of sorts. The
|
||||
wasm file emitted by rustc, for example, does not have the interface we would
|
||||
like to have. Instead it requires the `wasm-bindgen` tool to postprocess the
|
||||
file, generating a `foo.js` and `foo_wasm.wasm` file. The `foo.js` file is the
|
||||
file, generating a `foo.js` and `foo_bg.wasm` file. The `foo.js` file is the
|
||||
desired interface expressed in JS (classes, types, strings, etc) and the
|
||||
`foo_wasm.wasm` module is simply used as an implementation detail (it was
|
||||
`foo_bg.wasm` module is simply used as an implementation detail (it was
|
||||
lightly modified from the original `foo.wasm` file).
|
||||
|
||||
## Foundation #2: Unintrusive in Rust
|
||||
@ -111,7 +111,7 @@ and what we actually generate looks something like:
|
||||
|
||||
```js
|
||||
// foo.js
|
||||
import * as wasm from './foo_wasm';
|
||||
import * as wasm from './foo_bg';
|
||||
|
||||
let stack = [];
|
||||
|
||||
@ -132,7 +132,7 @@ export function foo(arg0) {
|
||||
|
||||
Here we can see a few notable points of action:
|
||||
|
||||
* The wasm file was renamed to `foo_wasm.wasm`, and we can see how the JS module
|
||||
* The wasm file was renamed to `foo_bg.wasm`, and we can see how the JS module
|
||||
generated here is importing from the wasm file.
|
||||
* Next we can see our `stack` module variable which is used to push/pop items
|
||||
from the stack.
|
||||
@ -199,7 +199,7 @@ module interface is the same as before, but the ownership mechanics are slightly
|
||||
different. Let's see the generated JS's slab in action:
|
||||
|
||||
```js
|
||||
import * as wasm from './foo_wasm'; // imports from wasm file
|
||||
import * as wasm from './foo_bg'; // imports from wasm file
|
||||
|
||||
let slab = [];
|
||||
let slab_next = 0;
|
||||
@ -334,7 +334,7 @@ export function greet(a: string): string;
|
||||
To see what's going on, let's take a look at the generated shim
|
||||
|
||||
```js
|
||||
import * as wasm from './foo_wasm';
|
||||
import * as wasm from './foo_bg';
|
||||
|
||||
function passStringToWasm(arg) {
|
||||
const buf = new TextEncoder('utf-8').encode(arg);
|
||||
@ -449,7 +449,7 @@ both JS and Rust doing the necessary translation. Let's first see the JS shim in
|
||||
action:
|
||||
|
||||
```js
|
||||
import * as wasm from './foo_wasm';
|
||||
import * as wasm from './foo_bg';
|
||||
|
||||
import { greet } from './greet';
|
||||
|
||||
@ -539,7 +539,7 @@ available to JS through generated shims. If we take a look at the generated JS
|
||||
code for this we'll see:
|
||||
|
||||
```js
|
||||
import * as wasm from './foo_wasm';
|
||||
import * as wasm from './foo_bg';
|
||||
|
||||
export class Foo {
|
||||
constructor(ptr) {
|
||||
@ -710,7 +710,7 @@ let's go through one-by-one:
|
||||
With all that in mind, let's take a look at the JS generated.
|
||||
|
||||
```js
|
||||
import * as wasm from './foo_wasm';
|
||||
import * as wasm from './foo_bg';
|
||||
|
||||
import { Bar } from './bar';
|
||||
|
||||
|
@ -138,8 +138,8 @@ intended interface of the wasm file, notably with rich types like strings,
|
||||
classes, etc.
|
||||
|
||||
The `wasm-bindgen` tool also emits a few other files needed to implement this
|
||||
module. For example `js_hello_world_wasm.wasm` is the original wasm file but
|
||||
postprocessed a bit. It's intended that the `js_hello_world_wasm.wasm` file,
|
||||
module. For example `js_hello_world_bg.wasm` is the original wasm file but
|
||||
postprocessed a bit. It's intended that the `js_hello_world_bg.wasm` file,
|
||||
like before, acts like an ES6 module. The `js_hello_world.wasm` file, for
|
||||
example, uses `import` to import functionality from the other `*_shims` file
|
||||
generated (an internal implementation detail here).
|
||||
|
@ -177,13 +177,13 @@ impl Project {
|
||||
.expect("failed to run bindgen");
|
||||
|
||||
let mut wasm = Vec::new();
|
||||
File::open(root.join("out_wasm.wasm")).unwrap()
|
||||
File::open(root.join("out_bg.wasm")).unwrap()
|
||||
.read_to_end(&mut wasm).unwrap();
|
||||
let obj = cli::wasm2es6js::Config::new()
|
||||
.base64(true)
|
||||
.generate(&wasm)
|
||||
.expect("failed to convert wasm to js");
|
||||
File::create(root.join("out_wasm.d.ts")).unwrap()
|
||||
File::create(root.join("out_bg.d.ts")).unwrap()
|
||||
.write_all(obj.typescript().as_bytes()).unwrap();
|
||||
|
||||
|
||||
|
@ -214,7 +214,7 @@ impl<'a> Context<'a> {
|
||||
|
||||
let js = format!("
|
||||
/* tslint:disable */
|
||||
import * as wasm from './{module_name}_wasm'; // imports from wasm file
|
||||
import * as wasm from './{module_name}_bg'; // imports from wasm file
|
||||
{imports}
|
||||
|
||||
{globals}
|
||||
|
@ -105,7 +105,7 @@ impl Bindgen {
|
||||
.write_all(ts.as_bytes()).unwrap();
|
||||
}
|
||||
|
||||
let wasm_path = out_dir.join(format!("{}_wasm", stem)).with_extension("wasm");
|
||||
let wasm_path = out_dir.join(format!("{}_bg", stem)).with_extension("wasm");
|
||||
let wasm_bytes = parity_wasm::serialize(module).map_err(|e| {
|
||||
format_err!("{:?}", e)
|
||||
})?;
|
||||
|
4
examples/hello_world/.gitignore
vendored
4
examples/hello_world/.gitignore
vendored
@ -1,4 +1,4 @@
|
||||
package-lock.json
|
||||
hello_world.js
|
||||
hello_world_wasm.js
|
||||
hello_world_wasm.wasm
|
||||
hello_world_bg.js
|
||||
hello_world_bg.wasm
|
||||
|
@ -9,13 +9,13 @@ cargo +nightly run -p wasm-bindgen-cli --bin wasm-bindgen -- \
|
||||
|
||||
# To avoid a bug occurring when webpack, wasm, and Chrome are used together, we
|
||||
# convert the .wasm module to a .js module that embeds the wasm bytecode. To
|
||||
# enable this, delete hello_world_wasm.wasm after building or change
|
||||
# hello_world.js to import from hello_world_wasm.js explicitly and uncomment
|
||||
# enable this, delete hello_world_bg.wasm after building or change
|
||||
# hello_world.js to import from hello_world_bg.js explicitly and uncomment
|
||||
# the relevant line in index.js.
|
||||
cargo +nightly run -p wasm-bindgen-cli --bin wasm2es6js -- \
|
||||
--base64 -o hello_world_wasm.js hello_world_wasm.wasm
|
||||
# wasm2es6js --base64 -o hello_world_wasm.js hello_world_wasm.wasm
|
||||
rm hello_world_wasm.wasm
|
||||
--base64 -o hello_world_bg.js hello_world_bg.wasm
|
||||
# wasm2es6js --base64 -o hello_world_bg.js hello_world_bg.wasm
|
||||
rm hello_world_bg.wasm
|
||||
|
||||
# And like the directory above this, from here it's the same.
|
||||
npm install
|
||||
|
@ -6,6 +6,6 @@
|
||||
// wasm (generated by wasm2es6js) which has a `booted` promise to let us know
|
||||
// when it's ready to go.
|
||||
import { greet } from './hello_world';
|
||||
import { booted } from './hello_world_wasm';
|
||||
import { booted } from './hello_world_bg';
|
||||
|
||||
booted.then(() => greet("World!"));
|
||||
|
@ -11,7 +11,7 @@ Promise.all([
|
||||
// hack around this and need to defer our call until the converted wasm
|
||||
// module is asynchronously loaded. Uncomment this line to enable.
|
||||
// This hack is not necessary in Firefox.
|
||||
// import("./hello_world_wasm.js").then(wasm => wasm.booted),
|
||||
// import("./hello_world_bg.js").then(wasm => wasm.booted),
|
||||
]).then(([js]) => {
|
||||
js.greet("World!");
|
||||
});
|
||||
|
2
examples/smorgasboard/.gitignore
vendored
2
examples/smorgasboard/.gitignore
vendored
@ -1,3 +1,3 @@
|
||||
package-lock.json
|
||||
smorgasboard.js
|
||||
smorgasboard_wasm.wasm
|
||||
smorgasboard_bg.wasm
|
||||
|
@ -204,7 +204,7 @@ fn other_exports() {
|
||||
}
|
||||
"#)
|
||||
.file("test.ts", r#"
|
||||
import * as wasm from "./out_wasm";
|
||||
import * as wasm from "./out_bg";
|
||||
|
||||
export function test() {
|
||||
wasm.foo(2);
|
||||
|
Loading…
Reference in New Issue
Block a user