2.4 KiB
Go + WASM Render Plugin Example
This example shows how to build a frontend render plugin whose heavy lifting runs inside a WebAssembly module compiled from Go. The plugin loads the WASM binary in the browser, asks Go to post-process the fetched file content, and then renders the result inside the file viewer.
Files
manifest.json— plugin metadata consumed by the Gitea backendrender.js— the ES module entry point that initializes the Go runtime and renders files handled by the pluginwasm/— contains the Go source that compiles toplugin.wasmwasm_exec.js— the Go runtime shim required by all Go-generated WASM binaries (copied verbatim from the Go distribution)build.sh— helper script that buildsplugin.wasmand produces a zip archive ready for upload
As with other plugins, declare any Gitea endpoints or external hosts the WASM
module needs to call inside the permissions array in manifest.json. Without
an explicit entry, the plugin may only download the file that is currently being
rendered.
Build & Install
-
Build the WASM binary and zip archive:
cd contrib/render-plugins/example-wasm ./build.shThe script requires Go 1.21+ on your PATH. It stores the compiled WASM and an installable
example-go-wasm.zipunderdist/. -
In the Gitea web UI, visit
Site Administration → Render Plugins, uploaddist/example-go-wasm.zip, and enable the plugin. -
Open any file whose name ends with
.wasmnote; the viewer will show the processed output from the Go code running inside WebAssembly.
How It Works
wasm/main.goexposes a singlewasmProcessFilefunction to JavaScript. It uppercases each line, prefixes it with the line number, and runs entirely inside WebAssembly compiled from Go.render.jsinjects the Go runtime (wasm_exec.js), instantiates the compiled module, and caches the exportedwasmProcessFilefunction.- During initialization the frontend passes the sniffed MIME type and the first
1 KiB of file data to the plugin (
options.mimeType/options.headChunk), allowing renderers to make decisions without issuing extra network requests. - During rendering the plugin downloads the target file, passes the contents to Go, and displays the transformed text with minimal styling.
Feel free to modify the Go source or the JS wrapper to experiment with richer interfaces between JavaScript and WebAssembly.