Skip to content

Latest commit

 

History

History
239 lines (165 loc) · 7.28 KB

wasm.md

File metadata and controls

239 lines (165 loc) · 7.28 KB

Wasm

Copyright 2019-2022 Moddable Tech, Inc.
Revised: January 27, 2022

This document provides instructions to build and run Moddable SDK apps for the Wasm platform.

Table of Contents

macOS

  1. If you do not already have the Emscripten repository, clone the repository into your ~/Projects directory.

    cd ~/Projects
    git clone https://github.com/emscripten-core/emsdk.git
    

    If you already have the Emscripten repository, upgrade to the latest version using the following commands:

    cd ~/Projects/emsdk
    git pull
    
  2. Make sure you have all of the Emscripten prerequisites listed for your host platform in the Platform-specific notes section of the Emscripten Download and install webpage.

  3. Install and activate the latest version of Emscripten.

    cd ~/Projects/emsdk
    ./emsdk install latest
    ./emsdk activate latest
    

    We last tested using version 3.1.1 (commit 0f0ea34526515d0b2caa262ab5915bc1a7e5dd71).

  4. If you do not already have the Binaryen repository, clone the repository into your ~/Projects directory.

    cd ~/Projects
    git clone --recursive https://github.com/WebAssembly/binaryen.git
    

    If you already have the Binaryen repository, upgrade to the latest version using the following commands:

    cd ~/Projects/binaryen
    git pull origin main --recurse-submodules
    

    If you experience any problems updating the Binaryen repository, you can simply delete the binaryen directory and re-clone it instead:

    cd ~/Projects
    rm -rf binaryen
    git clone --recursive https://github.com/WebAssembly/binaryen.git
    
  5. Build the Binaryen tools.

    cd ~/Projects/binaryen
    cmake . && make
    

    We last tested using wasm-opt version 105 (commit 060442225165d0423d06ea33ab865e850b54f61b)

  6. Setup the PATH and other environment variables by pasting the following commands into your ~/.profile. The first command sources a shell script that sets environment variables for Emscripten. The second updates your PATH to include BinaryEn.

    source ~/Projects/emsdk/emsdk_env.sh
    export PATH=~/Projects/binaryen/bin:$PATH
    

    Note: These instructions assume that your shell sources from ~/.profile when a new terminal is opened. That may not be the case depending on what shell you use and how you have it configured. Starting with macOS Catalina, the default shell is zsh which uses ~/.zshrc instead.

    Note: You must open a new shell instance or manually run the export statements in your shell before proceeding. Adding the export statements to your ~/.profile does not update the environment variables in active shell instances.

  7. Build the Moddable Wasm tools from the command line:

    cd ${MODDABLE}/build/makefiles/wasm
    make
    
  8. To test, build the balls example for the wasm target.

    cd $MODDABLE/examples/piu/balls
    mcconfig -d -m -p wasm
    

    You can run the app that's built in the browser by hosting it on a local HTTP server. Python provides a simple tool for doing this.

    If you are using Python 2:

    cd $MODDABLE/build/bin/wasm/debug/balls
    python -m SimpleHTTPServer
    

    If you are using Python 3:

    cd $MODDABLE/build/bin/wasm/debug/balls
    python3 -m http.server
    

    Go to localhost:8000 in a browser. You should see a web page with a simulator running balls.

Linux

  1. If you do not already have the Emscripten repository into your ~/Projects directory and activate the latest version.

    cd ~/Projects
    git clone https://github.com/emscripten-core/emsdk.git
    cd emsdk
    

    If you already have the Emscripten repository, upgrade to the latest version using the following commands:

    cd ~/Projects/emsdk
    git pull
    
  2. Make sure you have all of the Emscripten prerequisites listed for your host platform in the Platform-specific notes section of the Emscripten Download and install webpage.

  3. Install and activate the latest version of Emscripten.

    cd ~/Projects/emsdk
    ./emsdk install latest
    ./emsdk activate latest
    

    We last tested using version 3.1.2 (commit 476a14d60d0d25ff5a1bfee18af73a4b9bfbd385).

  4. If you do not already have the Binaryen repository, clone the repository into your ~/Projects directory.

    cd ~/Projects
    git clone --recursive https://github.com/WebAssembly/binaryen.git
    

    If you already have the Binaryen repository, upgrade to the latest version using the following commands:

    cd ~/Projects/binaryen
    git pull origin main --recurse-submodules
    

    If you experience any problems updating the Binaryen repository, you can simply delete the binaryen directory and re-clone it instead:

    cd ~/Projects
    rm -rf binaryen
    git clone --recursive https://github.com/WebAssembly/binaryen.git
    
  5. Build the Binaryen tools.

    cd ~/Projects/binaryen
    cmake . && make
    

    We last tested using wasm-opt version 105 (commit 707be2b55075dccaaf0a70e23352c972fce5aa76)

  6. Setup the PATH and other environment variables by pasting the following commands into your ~/.bashrc. The first command sources a shell script that sets environment variables for Emscripten. The second updates your PATH to include BinaryEn.

    source ~/Projects/emsdk/emsdk_env.sh
    export PATH=~/Projects/binaryen/bin:$PATH
    

    Note: You must open a new shell instance or manually run the export statements in your shell before proceeding. Adding the export statements to your ~/.profile does not update the environment variables in active shell instances.

  7. Build the Moddable Wasm tools from the command line:

    cd ${MODDABLE}/build/makefiles/wasm
    make
    
  8. To test, build the balls example for the wasm target.

    cd $MODDABLE/examples/piu/balls
    mcconfig -d -m -p wasm
    

    You can run the app that's built in the browser by hosting it on a local HTTP server. Python provides a simple tool for doing this.

    If you are using Python 2:

    cd $MODDABLE/build/bin/wasm/debug/balls
    python -m SimpleHTTPServer
    

    If you are using Python 3:

    cd $MODDABLE/build/bin/wasm/debug/balls
    python3 -m http.server
    

    Go to localhost:8000 in a browser. You should see a web page with a simulator running balls.

Limitations

Not all features of the Moddable SDK are supported in the Wasm simulator.

The following features are currently supported:

  • All JavaScript features supported by XS
  • Piu user interface framework
  • Commodetto graphics library

The following features are not supported:

  • Files
  • Socket
  • BLE
  • Pins/IO