Yesterday I released new versions of https://thi.ng/wasm-api (and its add-on packages), a modular and extensible bridge API & toolchain for hybrid JS/TS/Zig/WebAssembly apps, now updated to be compatible with the latest Zig version 0.15.1...
The update addresses some of Zig's breaking syntax & build system changes only, nothing on the JS/TS side has changed. As a result https://thi.ng/wasm-api-dom has a slightly revised internal structure (also a breaking change, but nothing major & unavoidable). All bundled Zig examples[1] in the repo have been updated too, take a look for reference (if needed).
FYI More details about the Zig language changes here:
https://ziglang.org/download/0.15.1/release-notes.html#Language-Changes
Specifically, the removal of usingnamespace has had a major impact on the existing handling of generated types in these wasm-api support packages (or your own) and now forces an additional level of hierarchy in terms of namespacing. This is because usingnamespace enabled a form of namespace merging, which allowed the generated WASM⭤TS interop types (written to their own sourcefile) to be merged/hoisted into the main library module.
For example, previously after importing const dom = @import("wasm-api-dom"); we could refer to a type via dom.WindowInfo. Now with namespace merging removed, we have to use dom.types.WindowInfo. As I said, it's not a major departure, but a breaking change nonetheless[2]...
The build.zig file bundled with https://thi.ng/wasm-api is now also only compatible with Zig 0.15.1 (for now). Build files for older Zig versions are still included too (in the same directory)[3].
Lastly, once more for the record: The wasm-api bridge itself is NOT tied to Zig (or a particular version), however it's the main use case/language for my own WebAssembly use cases...
[1] https://github.com/thi-ng/umbrella/tree/develop/examples (all examples starting with zig-*)
[2] The existing design of these modules helped to keep these breaking changes to a minimum in userland code and these updates are all following the same uniform pattern (i.e. exposing interop types via modulename.types.TypeName...)
[3] https://github.com/thi-ng/umbrella/tree/develop/packages/wasm-api#using-the-zig-build-system
#ThingUmbrella#Zig#Ziglang#WebAssembly#WASM#TypeScript#JavaScript#Interop
![Syntax colored TypeScript source code:
import { parseHtml } from "@thi.ng/hiccup-html-parse";
import { serialize } from "@thi.ng/hiccup-markdown";
import { arrayZipper, type Location } from "@thi.ng/zipper";
// load a Mastodon status via API
const res = await (
await fetch("https://mastodon.thi.ng/api/v1/statuses/115464108396925195")
).json();
// parse HTML content into thing/hiccup format (nested JS arrays)
const parsed = parseHtml(res.content, {
whitespace: true,
ignoreAttribs: ["class"],
}).result!;
// structure of parsed example:
// [["p", {}, "text"], ["p", {}, ...], ...]
// recursively traverse result document/array using thi.ng/zipper
// and replace all <span> elements with their raw text body
let loc: Location<any> | undefined = arrayZipper(parsed);
while (loc) {
loc = loc.next;
if (Array.isArray(loc?.node) && loc?.node[0] == "span")
loc = loc.replace(loc.node[2]);
if (loc?.next == null) break;
}
// serialize hiccup to markdown
console. log(serialize(loc?.root, null));
/*
Result (in markdown format), omitted here due to alt text limits
*/](https://mastothing.files.fedi.monster/media_attachments/files/115/496/399/951/184/551/original/084463976214c3e5.png)
