Fix polyfill of TextEncoder and TextDecoder

This commit does a few things, including:

* Fixing the generated JS of `wasm-bindgen` to allow polyfills to work.
  (a minor tweak of the generated JS)

* All examples are updated to include a Webpack-specific polyfill for
  these two types to get examples working in Edge.

* A new page has been added to the guide about supported browsers. This
  mentions known caveats like IE 11 requiring `wasm2js` as well as
  documenting some `TextEncoder` and `TextDecoder` workarounds for Edge.

Closes #895
This commit is contained in:
Alex Crichton
2018-09-28 20:01:46 -07:00
parent 0ac84c231a
commit 717cfa303d
52 changed files with 255 additions and 54 deletions

View File

@ -0,0 +1,61 @@
# Supported Browsers
The output of `wasm-bindgn` includes a JS file, and as a result it's good to
know what browsers that file is expected to be used in! By default the output
uses ES modules which isn't implemented in all browsers today, but when using a
bundler (like Webpack) you should be able to produce output suitable for all
browsers.
Firefox, Chrome, Safari, and Edge browsers are all supported by
`wasm-bindgen`. If you find a problem in one of these browsers please [report
it] as we'd like to fix the bug! If you find a bug in another browser we would
also like to be aware of it!
## Caveats
* **IE 11** - `wasm-bindgen` by default requires support for
`WebAssembly`, but no version of IE currently supports `WebAssembly`. You can
support IE by [compiling wasm files to JS using `wasm2js`][w2js] (you can [see
an example of doing this too](../examples/wasm2js.html)). Note
that at this time no bundler will do this by default, but we'd love to
document plugins which do this if you are aware of one!
* **Edge** - the `TextEncoder` and `TextDecoder` APIs are not currently
available in Edge which `wasm-bindgen` uses to encode/decode strings between
JS and Rust. You can polyfill this with at least one of two strategies:
1. If using a bundler, you can likely configure the bundler to polyfill these
types by default. For example if you're using Webpack you can use the
[`ProvidePlugin` interface][wpp] like so after also adding
[`text-encoding`] to your `package.json`
```js
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
TextDecoder: ['text-encoding', 'TextDecoder'],
TextEncoder: ['text-encoding', 'TextEncoder']
})
]
// ... other configuration options
};
```
2. If you're not using a bundler you can also include support manually by
adding a `<script>` tag which defines the `TextEncoder` and `TextDecoder`
globals. [This StackOverflow question][soq] has some example usage and MDN
has a [`TextEncoder` polyfill implementation][mdntepi] to get you started
as well.
If you find other incompatibilities please report them to us! We'd love to
either keep this list up-to-date or fix the underlying bugs :)
[report it]: https://github.com/rustwasm/wasm-bindgen/issues/new
[w2js]: https://github.com/WebAssembly/binaryen
[wpp]: https://webpack.js.org/plugins/provide-plugin/
[`text-encoding`]: https://www.npmjs.com/package/text-encoding
[soq]: https://stackoverflow.com/questions/40662142/polyfill-for-textdecoder/46549188#46549188
[mdntepi]: https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder#Polyfill