Building a WASM program to run in a static site

This would not have been possible by me without extensive use of Bing Chat (Now Copilot).

I use VSCode to write and compile the code. There were a heap of little programs and package managers I had to install along the way. I wish I wrote them all down.

But it turns out it ended up using far less programs than I installed as I had little idea as to what I was doing.

The steps

These were the general ‘what if’ steps:

• Take text input, and determine each line type
• Clean text input (double spaces, empty lines etc)
• Determine question line
• Determine question type
  • If lines begin with sequentially increasing first character (e.g. 1,2,3 or a,b,c) it’s likely going to be a multiple choice question (MC). Start storing the options
  • If there’s only one line before a new question, assume a Short Answer question (SA)
    • If the one line is “True”, “False”, “T”, “F”, it update to be a true or false question (TF)
  • If there’s no new line before a new question, assume a Written Response question (WR)
• Realise it’s getting pretty complex and need to store each question as its components are built up
• Add in a final line of the question check that it can determine if it’s an answer line
  • Remove
• Add a remove prefix function for MC options
• Add a remove prefix function for words like ‘Correct Answer:, Answer:, Answer - ’ etc
• Print each question as comma separated text output
• Determine a way that the program knows there’s no more input to process and close
• Print each question into a csv file and save the file
• Timestamp the file name
• Build an .exe version of the program that can be executed
• Run into issues with requiring an IT admin request everytime I wanted to test a new version of the program
• Look for alternative solutions of deployment

‘Wasmifying’

• Download TinyGo
• Add syscall/js import to the program
• Remove the io import for the .exe file components
• Spend forever and a day trying to work out how to compile correctly
• Spin up a Hugo site based off a previous site I’ve made
• Create a page for the program to sit on/be called from (an index.md file)
• Page folder contains 4 files, index.md, index.js, main.wasm and wasm_exec_tiny.js
• Still haven’t worked out how to get the localhost1313 that the Hugo Server to properly call the WASM program - have to publish to Netlify.
• Publish to Netlify via Github (updating config.toml once the site has been made)

WASM & JS

• Finally realise there’s a wasm_exec.js file that is specifically for TinyGo - use this, solved a LOT of issues.
• Make a clickable button (simple html in the index.md page)
• Make a user text input box (simple html in the index.md page)
• Make it print the userinput when pressed in the console log (see dev tools)
• Make the button return a simple console log print from a simple WASM program
• Input user text into the wasm program and return
• Process the user data with the wasm
• Print that data back out to the browser console log
• Convert it to a csv
• Make the csv saveable
• Timestamp the csv