Skip to content

Latest commit

 

History

History
80 lines (56 loc) · 1.77 KB

hello-world.md

File metadata and controls

80 lines (56 loc) · 1.77 KB
Raw

Hello World!

Overview

This is a tutorial for initializing an instance of the WebAssembly module and calling the functions within it using zkc-sdk.

Setup

Prerequisite

  • zkc-sdk, which can be installed by executing:
npm install

Run

With the following command, you can compile and preview the project

npm run start

Implementation

  1. Import zkc-sdk and hello-world.wasm in index.js
import { ZKCWasmService } from 'zkc-sdk';

// Get the URL of the wasm file for initializing the WebAssembly instance.
const helloWorldURL = new URL('./wasmsrc/c/hello-world.wasm', import.meta.url);
  1. Load wasm module instance and call the add function export from wasm
const runWasmAdd = async () => {
  // load wasm module instance
  const { exports } = await ZKCWasmService.loadWasm(helloWorldURL);

  // Call the Add function export from wasm, save the result
  const addResult = exports.add(26, 26);

  // Set the result onto the body
  document.body.textContent = `Hello World! addResult: ${addResult}`;
};

runWasmAdd();
  1. Load index.js file in index.html:
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <link rel="preload" href="./index.js" as="script" />
  </head>

  <body>
    <script type="module" src="./index.js"></script>
  </body>
</html>

More Info