Compatibility shim for combining macroquad with wasm-bindgen.

wasm-bindgen-macroquad.sh

#!/usr/bin/env bash

set -e

HELP_STRING=$(cat <<- END
	usage: build_wasm.sh PROJECT_NAME [--release]

	Build script for combining a Macroquad project with wasm-bindgen,
	allowing integration with the greater wasm-ecosystem.

	example: build_wasm.sh flappy-bird

	This'll go through the following steps:

	    1. Build as target 'wasm32-unknown-unknown'
	    2. Create the directory 'wbindgen' if it doesn't already exist
	    3. Run wasm-bindgen with output into the wbindgen directory
	    4. Apply patches to the output js file (detailed here: https://github.com/not-fl3/macroquad/issues/212#issuecomment-835276147)

	Required arguments:

	    PROJECT_NAME            The name of the artifact/target/project

	Arguments:

	    --release               Build in release mode


	Author: Tom Solberg <me@sbg.dev>
	Version: 0.1
END
)


die () {
    echo >&2 "usage: build_wasm.sh PROJECT_NAME [--release]"
    echo >&2 "Error: $@"
    echo >&2
    exit 1
}


# Storage
RELEASE=no
POSITIONAL=()

# Parse primary commands
while [[ $# -gt 0 ]]
do
    key="$1"
    case $key in
        --release)
            RELEASE=yes
            shift
            ;;

        -h|--help)
            echo "$HELP_STRING"
            exit 0
            ;;

        *)
            POSITIONAL+=("$1")
            shift
            ;;
    esac
done


# Restore positionals
set -- "${POSITIONAL[@]}"
[ $# -ne 1 ] && die "too many arguments provided"

PROJECT_NAME=$1

EXTRA_ARGS=""
if [ "$RELEASE" == "yes" ]; then
    EXTRA_ARGS=" --release"
fi

# Build
cargo build --target wasm32-unknown-unknown $EXTRA_ARGS

# Generate bindgen outputs
mkdir -p wbindgen
wasm-bindgen --target web --out-dir wbindgen/ target/wasm32-unknown-unknown/release/$PROJECT_NAME.wasm

# Shim to tie the thing together
sed -i "s/import \* as __wbg_star0 from 'env';//" wbindgen/$PROJECT_NAME.js
sed -i "s/let wasm;/let wasm; export const set_wasm = (w) => wasm = w;/" wbindgen/$PROJECT_NAME.js
sed -i "s/imports\['env'\] = __wbg_star0;/return imports.wbg\;/" wbindgen/$PROJECT_NAME.js

Hi! I update the script, so it also generates the HTML, I don't know how to make a pull request so if you are interested in checking it you can see it here RAW.

Here is one that makes it select the correct target dir when not building release, as well as adding an HTML (the latter copied from @NicolasSabba):

https://gist.github.com/olefasting/15ae263da4cf1ba308ce55c15c9b221b

This script seems not to work anymore, I think it's because of wasm-bindgen updates. Can anyone help me figure out how to fix it?

@mkhan45 you need to add sed -i "s/const imports = getImports();/return getImports();/" dist/$PROJECT_NAME.js
I use a modified version of this script at https://gist.github.com/nobbele/0d932a993786ed081632254fb6b01e25 if you want to take a look

Thanks! That worked

It seems like the script might be outdated again. I run accross the following error:

Uncaught (in promise) TypeError: import object field 'env' is not an Object
    impl_run http://localhost:4000/dist/index.html:33
    AsyncFunctionThrow self-hosted:856
    (Asynchrone : async)
    run http://localhost:4000/dist/index.html:38
    onclick http://localhost:4000/dist/index.html:1

Would anyone have an idea of how to fix it ?

It seems like the script might be outdated again. I run accross the following error:

Uncaught (in promise) TypeError: import object field 'env' is not an Object
    impl_run http://localhost:4000/dist/index.html:33
    AsyncFunctionThrow self-hosted:856
    (Asynchrone : async)
    run http://localhost:4000/dist/index.html:38
    onclick http://localhost:4000/dist/index.html:1

Would anyone have an idea of how to fix it ?

I figured out a solution for latest wasm-bindgen here: https://gist.github.com/profan/f38c9a2f3d8c410ad76b493f76977afe
One function that was being replaced with sed (getImports) had changed name in the wasm-bindgen output

That worked thanks!

I update the script again with the changes in the thread

https://gist.github.com/nicolas-sabbatini/8af10dddc96be76d2bf24fc671131add