How to load wasm module?

[linonetwo]

I get this error

Error executing boot module $:/plugins/linonetwo/scp-foundation-site-director/game_bg.wasm: SyntaxError: Invalid or unexpected token

$:/plugins/linonetwo/scp-foundation-site-director/game_bg.wasm:1
(function(module,exports,console,setInterval,clearInterval,setTimeout,clearTimeout,Buffer,$tw,require,process) {  (function(){


SyntaxError: Invalid or unexpected token
    at new Script (node:vm:94:7)
    at createScript (node:vm:250:10)
    at Object.runInContext (node:vm:281:10)
    at $tw.utils.evalGlobal ($:/boot/boot.js:610:12)
    at $tw.utils.evalSandboxed ($:/boot/boot.js:623:19)
    at $tw.modules.execute ($:/boot/boot.js:904:15)
    at require ($:/boot/boot.js:851:24)
    at $:/plugins/linonetwo/scp-foundation-site-director/game-widget.js:24:30
    at $:/plugins/linonetwo/scp-foundation-site-director/game-widget.js:2809:4
    at $tw.utils.evalGlobal ($:/boot/boot.js:616:12)

when trying to load wasm generated by bevy, following its example

• https://github.com/bevyengine/bevy/tree/latest/examples#wasm
• https://github.com/bevyengine/bevy/blob/22e39c4abf6e2fdf99ba0820b3c35db73be71347/examples/wasm/index.html#L23-L26

And wasm is bundled into tw using this technique

tiddlywiki.files

{
	"tiddlers": [
		{
			"file": "wasm/game_bg.wasm",
			"fields": {
				"type": "application/wasm",
				"title": "$:/plugins/linonetwo/scp-foundation-site-director/game_bg.wasm",
				"module-type": "library",
				"hide-body": "yes"
			}
		}
	]
}

[linonetwo]

Add "encoding": "base64", and remove "module-type": "library",

{
	"tiddlers": [
		{
			"file": "wasm/game_bg.wasm",
			"encoding": "base64",
			"fields": {
				"type": "application/wasm",
				"title": "$:/plugins/linonetwo/scp-foundation-site-director/game_bg.wasm",
				"hide-body": "yes"
			}
		}
	]
}

30MB wasm file will become 70MB.+ before #7948 (comment) fix.

And after this fix, now 30MB wasm file is only 40MB when become tiddler.

[linonetwo]

Working example

import { widget as Widget } from '$:/core/modules/widgets/widget.js';
import { IChangedTiddlers } from 'tiddlywiki';

import { initSync } from './game/wasm/game';
import './index.css';

class ScpFoundationSiteDirectorGameWidget extends Widget {
  refresh(_changedTiddlers: IChangedTiddlers) {
    return false;
  }

  render(parent: Element, nextSibling: Element) {
    this.parentDomNode = parent;
    this.execute();
    const containerElement = $tw.utils.domMaker('div', {
      text: 'Loading game...',
    });
    nextSibling === null ? parent.append(containerElement) : nextSibling.before(containerElement);
    this.domNodes.push(containerElement);

    const gameWasm = $tw.wiki.getTiddlerText('$:/plugins/linonetwo/scp-foundation-site-director/game_bg.wasm');
    // wasm is bundled into tw using `game/tiddlywiki.files` as base64

    if (gameWasm !== undefined) {
      const wasmBuffer = loadWasmModuleFromBase64(gameWasm);
      console.time('gameLoad'); // 384 ms
      try {
        initSync(wasmBuffer);
      } catch (error) {
        console.error('Game load with error', error);
      }
      console.timeEnd('gameLoad');
    }
  }
}

function loadWasmModuleFromBase64(encodedWasm: string) {
  // Decode the base64 string to binary data
  console.time('wasmDecode'); // 157 ms
  const binaryString = window.atob(encodedWasm);
  const binaryLength = binaryString.length;
  const bytes = new Uint8Array(binaryLength);
  // Convert the binary string to a byte array
  for (let index = 0; index < binaryLength; index++) {
    bytes[index] = binaryString.codePointAt(index)!;
  }
  console.timeEnd('wasmDecode');
  return bytes;
}

declare let exports: {
  ScpFoundationSiteDirectorGameWidget: typeof ScpFoundationSiteDirectorGameWidget;
};
exports.ScpFoundationSiteDirectorGameWidget = ScpFoundationSiteDirectorGameWidget;

Online demo (only shows a few shapes in the canvas currently) https://tiddly-gittly.github.io/tw-gamification/

[Jermolene]

Hi @linonetwo glad you've got it sorted out.

import { widget as Widget } from '$:/core/modules/widgets/widget.js';

I was curious how you have set things up so that it is possible to import tiddler modules by title instead of by filename?

[linonetwo]

import { widget as Widget } from '$:/core/modules/widgets/widget.js';
import tiddler modules by title instead of by filename

@Jermolene When using https://github.com/tiddly-gittly/Modern.TiddlyDev , it put files through https://modernjs.dev/ (esbuild under the hood), so import become require.

And you can certainly do

const { widget: Widget } = require('$:/core/modules/widgets/widget.js');

And I just found out people might already know this 8 years ago...

[linonetwo]

TS type is defined in https://github.com/tiddly-gittly/TW5-Typed/blob/54f024c1a420a5a5f8f7ec4c87b09b395078ffef/src/modules/widgets/index.d.ts#L486-L489 so we get type hints.