Skip to content

Commit

Permalink
Wasm landing page (#5781)
Browse files Browse the repository at this point in the history
  • Loading branch information
MaryaBelanger committed May 13, 2024
1 parent 2ab89b3 commit 09b928a
Show file tree
Hide file tree
Showing 8 changed files with 124 additions and 15 deletions.
2 changes: 2 additions & 0 deletions src/_data/side-nav.yml
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,8 @@
permalink: /web/deployment
- title: Libraries & packages
permalink: /web/libraries
- title: Wasm compilation
permalink: /web/wasm
- title: Environment declarations
permalink: /guides/environment-declarations

Expand Down
2 changes: 1 addition & 1 deletion src/content/interop/js-interop/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ check out the [Past JS interop][] page for a more in depth summary on past
iterations.

[recently]: https://medium.com/dartlang/dart-3-3-325bf2bf6c13
[Wasm]: {{site.flutter-docs}}/platform-integration/web/wasm
[Wasm]: /web/wasm
[`package:web`]: {{site.pub-pkg}}/web
[`dart:html`]: {{site.dart-api}}/dart-html/dart-html-library.html
[`dart:svg`]: {{site.dart-api}}/dart-svg/dart-svg-library.html
Expand Down
9 changes: 5 additions & 4 deletions src/content/interop/js-interop/js-types.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Usage information about the core types in JS interop.
---

Dart values and JS values belong to separate language domains. When compiling to
Wasm, they execute in separate *runtimes* as well. As such, you should treat JS
[Wasm][], they execute in separate *runtimes* as well. As such, you should treat JS
values as foreign types. To provide Dart types for JS values,
[`dart:js_interop`] exposes a set of types prefixed with `JS` called "JS types".
These types are used to distinguish between Dart values and JS values at
Expand Down Expand Up @@ -90,7 +90,7 @@ Generally, the conversion table looks like the following:
</div>

:::warning
Compiling to JavaScript vs Wasm can introduce inconsistencies in both
Compiling to JavaScript vs [Wasm][] can introduce inconsistencies in both
performance and semantics for conversions. Conversions may have different costs
depending on the compiler, so prefer to only convert values if you need to.

Expand Down Expand Up @@ -233,7 +233,7 @@ error if the value returned was JS `null` or `undefined` to ensure soundness.

:::warning
There is a subtle inconsistency with regards to `undefined` between compiling to
JS and Wasm. While compiling to JS *treats* `undefined` values as if they were
JS and [Wasm][]. While compiling to JS *treats* `undefined` values as if they were
Dart `null`, it doesn't actually *change* the value itself. If an interop member
returns `undefined` and you pass that value back into JS, JS will see
`undefined`, *not* `null`, when compiling to JS.
Expand Down Expand Up @@ -279,4 +279,5 @@ See [`toExternalReference`] and [`toDartObject`] to convert to and from an
[`JSBoxedDartObject`]: {{site.dart-api}}/{{site.sdkInfo.channel}}/dart-js_interop/JSBoxedDartObject-extension-type.html
[`ExternalDartReference`]: {{site.dart-api}}/{{site.sdkInfo.channel}}/dart-js_interop/ExternalDartReference-extension-type.html
[`toExternalReference`]: {{site.dart-api}}/{{site.sdkInfo.channel}}/dart-js_interop/ObjectToExternalDartReference/toExternalReference.html
[`toDartObject`]: {{site.dart-api}}/{{site.sdkInfo.channel}}/dart-js_interop/ExternalDartReferenceToObject/toDartObject.html
[`toDartObject`]: {{site.dart-api}}/{{site.sdkInfo.channel}}/dart-js_interop/ExternalDartReferenceToObject/toDartObject.html
[Wasm]: /web/wasm
2 changes: 1 addition & 1 deletion src/content/interop/js-interop/package-web.md
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ Do we have any other package migrations to show off here?
{% endcomment -%}

[`package:web`]: {{site.pub-pkg}}/web
[Wasm]: {{site.repo.dart.sdk}}/blob/main/pkg/dart2wasm/README.md
[Wasm]: /web/wasm
[html]: {{site.dart-api}}/{{site.sdkInfo.channel}}/dart-html/dart-html-library.html
[svg]: {{site.dart-api}}/{{site.sdkInfo.channel}}/dart-svg/dart-svg-library.html
[`dart:js_interop`]: {{site.dart-api}}/{{site.sdkInfo.channel}}/dart-js_interop/dart-js_interop-library.html
Expand Down
3 changes: 2 additions & 1 deletion src/content/interop/js-interop/past-js-interop.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Archive of past JS interop implementations.
---

:::warning
None of these legacy interop libraries are supported when compiling to Wasm.
None of these legacy interop libraries are supported when compiling to [Wasm][].
:::

This page addresses previous iterations of JS interop for Dart that are
Expand Down Expand Up @@ -121,3 +121,4 @@ TODO: Link to `package:web` section
[`dart:js_util`]: {{site.dart-api}}/{{site.sdkInfo.channel}}/dart-js_util
[`Function.toJS`]: {{site.dart-api}}/{{site.sdkInfo.channel}}/dart-js_interop/FunctionToJSExportedDartFunction/toJS.html
[`dart:js_interop_unsafe`]: {{site.dart-api}}/{{site.sdkInfo.channel}}/dart-js_interop_unsafe
[Wasm]: /web/wasm
21 changes: 13 additions & 8 deletions src/content/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -184,8 +184,8 @@ Dart's compiler technology lets you run code in different ways:
an ahead-of-time (AOT) compiler for producing machine code.

* **Web platform**: For apps targeting the web, Dart can compile for
development or production purposes. Its web compiler translates Dart
into JavaScript.
development or production purposes. Its web compilers translate Dart
into JavaScript or WebAssembly.

<img
src="/assets/img/Dart-platforms.svg"
Expand Down Expand Up @@ -221,26 +221,31 @@ More information:
* [Write command-line apps](/tutorials/server/cmdline)
* [Write HTTP servers](/tutorials/server/httpserver)

#### Dart Web (JavaScript dev & prod) {:#web-platform}
#### Dart Web (JavaScript dev & prod and WebAssembly) {:#web-platform}

Dart Web enables running Dart code on web platforms powered by
JavaScript. With Dart Web, you compile Dart code to JavaScript code, which in
turn runs in a browser—for example, [V8](https://v8.dev/) inside
[Chrome](https://www.google.com/chrome/).
Alternatively, Dart code can be compiled to WebAssembly.

Dart web contains two compilation modes:
Dart web contains three compilation modes:

* An incremental development compiler enabling a fast developer cycle
* An optimizing production compiler which compiles Dart code to fast,
compact, deployable JavaScript. These efficiencies come from
techniques such as dead-code elimination.
* An incremental JavaScript development compiler enabling a fast developer
cycle.
* An optimizing JavaScript production compiler which compiles Dart code to fast,
compact, deployable JavaScript. These efficiencies come from techniques such
as dead-code elimination.
* An optimizing WebAssembly (WasmGC) production compiler which compiles Dart
code to super-fast, deployable WebAssembly GC code.

More information:

* [Build a web app with Dart](/web/get-started)
* [`dart compile js`](/tools/dart-compile#js)
* [`webdev` tool](/tools/webdev)
* [Web deployment tips](/web/deployment)
* [WebAssembly compilation](/web/wasm)

#### The Dart runtime {:#runtime}

Expand Down
8 changes: 8 additions & 0 deletions src/content/tools/dart-compile.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,14 @@ The following table shows the subcommands of `dart compile`.
<br><em><a href="#js">Learn more.</a></em>
</td>
</tr>
<tr>
<td> <code>wasm</code> </td>
<td> WebAssembly </td>
<td> A portable, binary instruction format for a stack-based virtual machine.
Currently under development.
<br><em><a href="/web/wasm">Learn more.</a></em>
</td>
</tr>
</table>


Expand Down
92 changes: 92 additions & 0 deletions src/content/web/wasm.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
---
title: WebAssembly (Wasm) compilation
description: Learn how to compile your Dart web app to WebAssembly.
---

The Dart team is excited to add
[WebAssembly](https://webassembly.org/) as a compilation target when building
Dart and [Flutter][] applications for the web.

Development of WebAssembly support remains ongoing,
which will potentially result in frequent changes.
Revisit this page for the latest updates.

:::note
**Support for Wasm is now in stable!**

WebAssembly support for Dart web is available on the Dart
*stable* [channel](/get-dart#release-channels).
:::

## WebAssembly support

The current version of Dart compilation to WebAssembly has a number of
restrictions:

1. It targets WebAssembly with Garbage Collection ([WasmGC][]),
so not all browsers are currently supported.
The current list of browsers is available in the [Flutter documentation][Flutter].

1. The compiled Wasm output currently targets JavaScript environments
(such as browsers), and thus currently doesn't support execution in standard
Wasm run-times like wasmtime and wasmer. For details, see
[issue #53884]({{site.repo.dart.sdk}}/issues/53884)

1. Only Dart's
[next-gen JS interop mechanism](/interop/js-interop/)
is supported when compiling to Wasm.

## Compiling your web app to Wasm {:#compiling-to-wasm}

We've landed support in the `dart` CLI for invoking the
Wasm compiler in Dart and [Flutter][]:

```console
$ dart help compile wasm
Compile Dart to a WebAssembly/WasmGC module.

Usage: dart compile wasm [arguments] <dart entry point>
-h, --help Print this usage information.
-o, --output Write the output to <file name>.
This can be an absolute or relative path.
-v, --verbose Print debug output during compilation
--enable-asserts Enable assert statements.
-D, --define=<key=value> Define an environment declaration. To specify multiple declarations, use multiple
options or use commas to separate key-value pairs.
For example: dart compile wasm -Da=1,b=2 main.dart
```

Wasm compilation is available in stable, but still in preview.
While we continue optimizing tooling to improve developer experience,
you can try compiling Dart to Wasm today
by following the temporary steps outlined here:

1. Start with a web app: `dart create -t web mywebapp`

The template creates a small web app using [`package:web`][],
which is necessary to run Wasm.
Make sure your web apps are [migrated][] from `dart:html` to `package:web`.

1. Compile with Wasm: `mywebapp$ dart compile wasm web/main.dart`

1. Create a new directory for the built web app: `mkdir site`

1. Copy over Dart code: `cp web/main.* site/`

1. Copy over the web files: `cp web/index.html web/styles.css site/`

1. Create a JS bootstrap file to load the Wasm code:

Add a new file `site/main.dart.js` and fill it with the contents of
this [`main.dart.js` sample](https://gist.github.com/mit-mit/0fcb1247a9444b0cadf611aa5fc6f32e).

1. Serve the output: `dart pub global run dhttpd` ([docs][dhttpd])

You can also try out this small example [here](https://github.com/mit-mit/sandbox).

[WasmGC]: https://developer.chrome.com/blog/wasmgc/
[Flutter]: {{site.flutter}}/wasm
[`package:web`]: {{site.pub-pkg}}/web
[`dart:js_interop`]: {{site.dart.api}}/{{site.dart.sdk.channel}}/dart-js_interop
[migrated]: /interop/js-interop/package-web/
[dhttpd]: {{site.pub-pkg}}/dhttpd

0 comments on commit 09b928a

Please sign in to comment.