Skip to content

Commit

Permalink
Improve JS formatting and HTML content (#41)
Browse files Browse the repository at this point in the history 
A few things were annoying me about my recently-added JS builtin
examples, which I've fixed in this PR:

- The HTML content was left as my default template content "My
template", which looked a bit unfinished/unprofessional. I've replaced
those with a short description of what each example is doing.
- The spacing in the JS was 4 spaces, and we tend to use 2 in MDN code.
- I've updated the comments in the JavaScript files to be consistent
with those used in the MDN page JavaScript snippets.
  • Loading branch information
@chrisdavidmills
chrisdavidmills authored Dec 19, 2024
1 parent 01fcd00 commit 63af019
Show file tree
Hide file tree
Showing 19 changed files with 60 additions and 64 deletions.
3 changes: 2 additions & 1 deletion js-builtin-examples/compile-streaming/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
</head>

<body>
<p>My template</p>
<p>Exported Wasm function concatenates two strings (via a JS String builtin) and logs the result to the JavaScript
console.</p>
</body>

</html>
16 changes: 7 additions & 9 deletions js-builtin-examples/compile-streaming/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
const importObject = { // Regular import
m: {
log: console.log
}
m: {
log: console.log,
}
};

const compileOptions = {
builtins: ["js-string"], // Opt-in to get magic imported functions
importedStringConstants: "#" // Opt-in to get magic imported globals
builtins: ["js-string"], // Enable JavaScript string builtins
importedStringConstants: "string_constants", // Enable imported global string constants
}

WebAssembly.compileStreaming(fetch("log-concat.wasm"), compileOptions)
.then(module => WebAssembly.instantiate(module, importObject))
.then(instance => instance.exports.main());


.then((module) => WebAssembly.instantiate(module, importObject))
.then((instance) => instance.exports.main());
Binary file modified js-builtin-examples/compile-streaming/log-concat.wasm
View file
Binary file not shown.
3 changes: 2 additions & 1 deletion js-builtin-examples/compile/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
</head>

<body>
<p>My template</p>
<p>Exported Wasm function concatenates two strings (via a JS String builtin) and logs the result to the JavaScript
console.</p>
</body>

</html>
20 changes: 9 additions & 11 deletions js-builtin-examples/compile/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
const importObject = { // Regular import
m: {
log: console.log
}
m: {
log: console.log,
}
};

const compileOptions = {
builtins: ["js-string"], // Opt-in to get magic imported functions
importedStringConstants: "#" // Opt-in to get magic imported globals
builtins: ["js-string"], // Enable JavaScript string builtins
importedStringConstants: "string_constants", // Enable imported global string constants
}

fetch("log-concat.wasm")
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.compile(bytes, compileOptions))
.then(module => WebAssembly.instantiate(module, importObject))
.then(instance => instance.exports.main());


.then((response) => response.arrayBuffer())
.then((bytes) => WebAssembly.compile(bytes, compileOptions))
.then((module) => WebAssembly.instantiate(module, importObject))
.then((instance) => instance.exports.main());
Binary file modified js-builtin-examples/compile/log-concat.wasm
View file
Binary file not shown.
3 changes: 2 additions & 1 deletion js-builtin-examples/instantiate-streaming/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
</head>

<body>
<p>My template</p>
<p>Exported Wasm function concatenates two strings (via a JS String builtin) and logs the result to the JavaScript
console.</p>
</body>

</html>
14 changes: 6 additions & 8 deletions js-builtin-examples/instantiate-streaming/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
const importObject = { // Regular import
m: {
log: console.log
}
m: {
log: console.log,
}
};

const compileOptions = {
builtins: ["js-string"], // Opt-in to get magic imported functions
importedStringConstants: "#" // Opt-in to get magic imported globals
builtins: ["js-string"], // Enable JavaScript string builtins
importedStringConstants: "string_constants", // Enable imported global string constants
}

WebAssembly.instantiateStreaming(fetch("log-concat.wasm"), importObject, compileOptions)
.then(result => result.instance.exports.main());


.then((result) => result.instance.exports.main());
Binary file modified js-builtin-examples/instantiate-streaming/log-concat.wasm
View file
Binary file not shown.
3 changes: 2 additions & 1 deletion js-builtin-examples/instantiate/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
</head>

<body>
<p>My template</p>
<p>Exported Wasm function concatenates two strings (via a JS String builtin) and logs the result to the JavaScript
console.</p>
</body>

</html>
18 changes: 8 additions & 10 deletions js-builtin-examples/instantiate/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
const importObject = { // Regular import
m: {
log: console.log
}
m: {
log: console.log,
}
};

const compileOptions = {
builtins: ["js-string"], // Opt-in to get magic imported functions
importedStringConstants: "#" // Opt-in to get magic imported globals
builtins: ["js-string"], // Enable JavaScript string builtins
importedStringConstants: "string_constants", // Enable imported global string constants
}

fetch("log-concat.wasm")
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes, importObject, compileOptions))
.then(result => result.instance.exports.main());


.then((response) => response.arrayBuffer())
.then((bytes) => WebAssembly.instantiate(bytes, importObject, compileOptions))
.then((result) => result.instance.exports.main());
Binary file modified js-builtin-examples/instantiate/log-concat.wasm
View file
Binary file not shown.
4 changes: 2 additions & 2 deletions js-builtin-examples/log-concat.wat
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
(module
(global $h (import "#" "hello ") externref)
(global $w (import "#" "world!") externref)
(global $h (import "string_constants" "hello ") externref)
(global $w (import "string_constants" "world!") externref)
(func $concat (import "wasm:js-string" "concat")
(param externref externref) (result (ref extern)))
(func $log (import "m" "log") (param externref))
Expand Down
3 changes: 2 additions & 1 deletion js-builtin-examples/module-constructor/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
</head>

<body>
<p>My template</p>
<p>Exported Wasm function concatenates two strings (via a JS String builtin) and logs the result to the JavaScript
console.</p>
</body>

</html>
22 changes: 11 additions & 11 deletions js-builtin-examples/module-constructor/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
const importObject = { // Regular import
m: {
log: console.log
}
m: {
log: console.log,
}
};

const compileOptions = {
builtins: ["js-string"], // Opt-in to get magic imported functions
importedStringConstants: "#" // Opt-in to get magic imported globals
builtins: ["js-string"], // Enable JavaScript string builtins
importedStringConstants: "string_constants", // Enable imported global string constants
}

fetch("log-concat.wasm")
.then(response => response.arrayBuffer())
.then(bytes => {
const module = new WebAssembly.Module(bytes, compileOptions);
WebAssembly.instantiate(module, importObject)
.then(instance => instance.exports.main());
})
.then((response) => response.arrayBuffer())
.then((bytes) => {
const module = new WebAssembly.Module(bytes, compileOptions);
WebAssembly.instantiate(module, importObject)
.then((instance) => instance.exports.main());
})
Binary file modified js-builtin-examples/module-constructor/log-concat.wasm
View file
Binary file not shown.
3 changes: 2 additions & 1 deletion js-builtin-examples/validate/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
</head>

<body>
<p>My template</p>
<p><code>validate()</code> function used to validate the fetched Wasm module (with builtins and imported string
constants included). The result is logged to the console.</p>
</body>

</html>
12 changes: 5 additions & 7 deletions js-builtin-examples/validate/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
const compileOptions = {
builtins: ["js-string"], // Opt-in to get magic imported functions
importedStringConstants: "#" // Opt-in to get magic imported globals
builtins: ["js-string"], // Enable JavaScript string builtins
importedStringConstants: "string_constants", // Enable imported global string constants
}

fetch("log-concat.wasm")
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.validate(bytes, compileOptions))
.then(result => console.log(`wasm module valid: ${result}`));


.then((response) => response.arrayBuffer())
.then((bytes) => WebAssembly.validate(bytes, compileOptions))
.then((result) => console.log(`wasm module valid: ${result}`));
Binary file modified js-builtin-examples/validate/log-concat.wasm
View file
Binary file not shown.

0 comments on commit 63af019

Please sign in to comment.