RC Day 2

Note: This post isn’t going to be as informative, more stream of thought/work-like.

I wasn’t as productive today. I didn’t sleep well last night, and pretty much didn’t move on my Rust/Wasm project. I also tired myself out talking&pairing a lot (but I want to get practice!)

There are chatbots that match you for pair programming and for coffee chats, and I signed up for both of them.

There was a Pairing Workshop, where I paired with Malte on a Conway Game of Life implementation in Rust.

We started by storing the board in a Vec<Vec<bool>>, so each bool takes up 1 byte (you need to use a BitVector if you want them to be 1 bit per cell). Malte came up with a neat trick to use an equivalent-sized Vec<Vec<u8>> instead and store the new state of each cell in the 2nd bit of the u8. Then, at the end, bit shift every cell by 1. This reuses the upper bit to “in-place” modify the board :) !

Then I paired with Leli. We didn’t have much to pair about, so we ended with her helping me decipher the code of PBNify.js, which was really nice.

After that I went for a chat which took an hour, so it wasn’t until 4 that I got back to setting up Rust Paint By Numbers.

Sadly I was still stuck in the same spot, but now I know what my issue is. I’m in the same spot as yesterday, except with an ounce more knowledge.

How to start with wasm-pack? 2 tutorials, 2 answers?

I was really confused. The wasm-pack README doesn’t match what happens when you download wasm-pack, and it came with a different index.js .

Specifically, while it was showing how to export a function and use it in JS, the template instead was having Rust be the main function for javascript?

It was doing

// js/index.js
import("../pkg/index.js").catch(console.error);

// src/lib.rs

//This is like the `main` function, except for JavaScript.
#[wasm_bindgen(start)]
pub fn main_js() -> Result<(), JsValue> {
    ...
}

Whereas I just wanted to do

// js/index.js
import { greet} from "pkg/index";
greet("World")

// src/lib.rs

#[wasm_bindgen]
pub fn greet(name) {
    ...
}

But the above was giving me a weird compilation error. It said

WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:

Elsewhere I found

// A dependency graph that contains any wasm must all be imported
// asynchronously. This `bootstrap.js` file does the single async import, so
// that no one else needs to worry about it again.
import("./index.js")
  .catch(e => console.error("Error importing `index.js`:", e));

And eventually I got it work with

import("../pkg/index.js").then(module => {
    module.greet("World");
}).catch(console.error);

But I’d rather not have it be async, and just have regular JS code. This confuses me more, there are two wasm tutorials, and each is a different way.

Specifically, there is the Rust and Webassembly Book, but also the wasm-pack tutorial.

And each tutorial gives a different starting template!

These are the 3 templates

wasm-pack-template : “This template is designed for compiling Rust libraries into WebAssembly and publishing the resulting package to NPM.”
create-wasm-app: Makes a JS app that can use wasm-pack-template packages
Want to make a monorepo-style Website without publishing to NPM? Check out rust-webpack-template

From what I can tell, you should probably start with rust-webpack-template.

BUT, the Book uses wasm-pack+create-wasm-app. ATM I’m deciphering the difference between the two.

rust-webpack has a full bundling config, and I think wasm-pack is a little more bare bones (which might be a good thing, webpack can be really complicated).

The AR Sudoku solver used the wasm-pack template.

I had a small thought that a lot of the app ideas I have are Rust/wasm + Canvas/JS and it might be nice to library-ize that once I make a couple.

Also, once I get to connecting the laptop to a projector and camera, the laptop screen can act as a secondary display for controls.

I also found that someone last week did the project I wanted to do next week: Sudoku AR using Rust and Wasm. They use create-wasm-app + wasm-pack-template, so I don’t know which one to use.

Note: While I was editing this the day after to post it, I think I realized why the two imports are different! One of the two makes a package that is bundled into JS, and the other makes a WASM bundle that your JS imports. So the latter needs to import it async, because it’s directly running the webassembly, while the former is importing an npm package.