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 <[email protected]>
	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

@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