Skip to content

Commit 0265d9e

Browse files
vasilevvasilev
committed
Added browser and Node / Deno / Bun examples for fetch() via dart:js_interop and extension type.
1 parent 1d3d0a7 commit 0265d9e

File tree

7 files changed

+196
-3
lines changed

7 files changed

+196
-3
lines changed

‎README.md‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,12 +135,31 @@ using `package:requests`
135135
</td>
136136
<td>
137137

138-
using raw `fetch()` imported via `js_interop`
138+
using raw `fetch()` invoked via `js_interop_unsafe`
139139

140140
</td>
141141
<td>
142142

143-
[Demo](https://wasm-outbound-http-examples.github.io/dart/js-interop-fetch/)
143+
[Demo](https://wasm-outbound-http-examples.github.io/dart/js-interop-unsafe-fetch/)
144+
145+
</td>
146+
<td> + </td>
147+
</tr>
148+
<tr>
149+
<td>8</td>
150+
<td>
151+
152+
[`fetch()` via `js_interop` and extension type](browser-and-node-js_interop-extension_type-fetch/README.md)
153+
154+
</td>
155+
<td>
156+
157+
using raw `fetch()` imported via `js_interop` and extension type
158+
159+
</td>
160+
<td>
161+
162+
[Demo](https://wasm-outbound-http-examples.github.io/dart/js-interop-extension-type-fetch/)
144163

145164
</td>
146165
<td> + </td>

‎browser-and-node-js_interop-extension_type-fetch/README.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# Use dart:js_interop, extension types, and fetch() to send HTTP(s) requests from inside WASM
2+
3+
## Instructions for this devcontainer
4+
5+
Tested with Dart SDK [v3.5.2](https://github.com/dart-lang/sdk/releases/tag/3.5.2),
6+
Bun 1.2.4, Deno 2.2.3, Node.js 23.9.0, Chrome browser v133.0, and Firefox browser v135.0 .
7+
8+
### Preparation
9+
10+
1. Open this repo in devcontainer, e.g. using Github Codespaces.
11+
Type or copy/paste following commands to devcontainer's terminal.
12+
13+
### Installation
14+
15+
1. `cd` into the folder of this example:
16+
17+
```sh
18+
cd browser-and-node-js_interop-extension_type-fetch
19+
```
20+
21+
2. Ensure all dependencies are installed:
22+
23+
```sh
24+
dart pub get
25+
```
26+
27+
### Building
28+
29+
1. `cd` into the `web` subfolder, where sources are located:
30+
31+
```sh
32+
cd web
33+
```
34+
35+
2. Compile the example:
36+
37+
```sh
38+
dart compile wasm main.dart
39+
```
40+
41+
### Test with browser
42+
43+
1. Run simple HTTP server to temporarily publish project to Web:
44+
45+
```sh
46+
python3 -m http.server
47+
```
48+
49+
Codespace will show you "Open in Browser" button. Just click that button or
50+
obtain web address from "Forwarded Ports" tab.
51+
52+
2. As `index.html` and a 60k-sized wasm file are loaded into browser, refer to browser developer console
53+
to see the results.
54+
55+
### Test with Node.js
56+
57+
1. Run with Node.js:
58+
59+
```sh
60+
node node-and-deno.mjs
61+
```
62+
63+
### Test with Bun
64+
65+
1. Install Bun:
66+
67+
```sh
68+
curl -fsSL https://bun.sh/install | bash
69+
```
70+
71+
2. Run with Bun:
72+
73+
```sh
74+
~/.bun/bin/bun node-and-deno.mjs
75+
```
76+
77+
### Test with Deno
78+
79+
1. Install Deno:
80+
81+
```sh
82+
curl -fsSL https://deno.land/install.sh | bash -s -- --yes
83+
```
84+
85+
2. Run with Deno:
86+
87+
```sh
88+
~/.deno/bin/deno run --allow-read --allow-net node-and-deno.mjs
89+
```
90+
91+
### Finish
92+
93+
Perform your own experiments if desired.

‎browser-and-node-js_interop-extension_type-fetch/pubspec.yaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
name: browser_and_node_js_interop_extension_type_fetch
2+
description: Make HTTP requests from inside WASM in Dart using raw "fetch()" and extension type.
3+
version: 1.0.0
4+
repository: https://github.com/wasm-outbound-http-examples/dart
5+
6+
environment:
7+
sdk: ^3.5.2
8+
9+
dependencies:
10+
web: ^0.5.1
11+
12+
dev_dependencies:
13+
build_runner: ^2.4.8
14+
build_web_compilers: ^4.0.9
15+
lints: ^4.0.0

‎browser-and-node-js_interop-extension_type-fetch/web/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>HTTP request from WASM in Dart using dart.library.js_interop, extension type, and fetch()</title>
7+
<script type="module">
8+
import { instantiate, invoke } from "./main.mjs";
9+
10+
const module = await WebAssembly.compileStreaming(fetch('main.wasm'));
11+
const instance = await instantiate(module);
12+
invoke(instance);
13+
</script>
14+
</head>
15+
16+
<body>
17+
<h2>HTTP Request from inside WASM in Dart using raw <code>fetch()</code> imported via <code>js_interop</code> using extension types</h2>
18+
19+
<p>This example uses imported via <code>dart:js_interop</code> raw <code>fetch()</code> function, and gets content via extension type.</p>
20+
21+
<p>See the output in browser developer console.</p>
22+
23+
<p>Actual code:</p>
24+
<pre>
25+
26+
import 'dart:js_interop';
27+
28+
@JS()
29+
external JSPromise<Response> fetch(JSString resource);
30+
31+
extension type Response(JSObject _) implements JSObject {
32+
@JS()
33+
external JSPromise<JSString> text();
34+
}
35+
36+
final Response resp = await fetch('https://httpbin.org/anything'.toJS).toDart;
37+
final txt = await resp.text().toDart;
38+
print('body: ${txt}');
39+
40+
</pre>
41+
<footer><small>Created for (wannabe-awesome) <a href="https://github.com/vasilev/HTTP-request-from-inside-WASM">list</a></small></footer>
42+
</body>
43+
</html>

‎browser-and-node-js_interop-extension_type-fetch/web/main.dart‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import 'dart:js_interop';
2+
3+
@JS()
4+
external JSPromise<Response> fetch(JSString resource);
5+
6+
extension type Response(JSObject _) implements JSObject {
7+
@JS()
8+
external JSPromise<JSString> text();
9+
}
10+
11+
void main() async {
12+
final Response resp = await fetch('https://httpbin.org/anything'.toJS).toDart;
13+
final txt = await resp.text().toDart;
14+
print('body: ${txt}');
15+
}

‎browser-and-node-js_interop-extension_type-fetch/web/node-and-deno.mjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import fs from 'node:fs/promises';
2+
import { instantiate, invoke } from './main.mjs';
3+
4+
const buffer = await fs.readFile('./main.wasm');
5+
const module = await WebAssembly.compile(buffer);
6+
const instance = await instantiate(module);
7+
8+
invoke(instance);

‎browser-package-requests/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
## Instructions for this devcontainer
44

55
Tested with Dart SDK [v3.5.2](https://github.com/dart-lang/sdk/releases/tag/3.5.2),
6-
`packages:requests` [v5.0.0](https://github.com/jossef/requests/releases/tag/5.0.0),
6+
`package:requests` [v5.0.0](https://github.com/jossef/requests/releases/tag/5.0.0),
77
Chrome browser v133.0, and Firefox browser v135.0.
88

99
### Preparation

0 commit comments

Comments
 (0)