support running in browsers (with emscripten)

.github/__release_template.md

@@ -24,8 +24,4 @@ For debug builds, please download from [here](../../releases/last-debug-ci) inst
 
 OS release number is minimal required version to run the binary, binaries from the previous OS release(s) should work.
 
-#### About Web builds
-
-- `noderawfs`: using NodeJS's host filesystem API (requires NodeJS to run, see the *WebAssembly*->*Emscripten* section in [README.md](README.md#emscripten) for more details), build with this tag is intended for running on desktop OS that is not yet supported by magiskboot_build
-
 [Magisk]: https://github.com/topjohnwu/Magisk/releases

.github/workflows/ci.yaml

@@ -14,6 +14,7 @@ on:
       - main
     paths-ignore:
       - '.github/workflows/release.yaml'
+      - '.github/workflows/deploy.yaml'
       - '.github/ISSUE_TEMPLATE/**'
       - 'patches-contrib/**'
       - 'LICENSE'
@@ -23,6 +24,7 @@ on:
   pull_request:
     paths-ignore:
       - '.github/workflows/release.yaml'
+      - '.github/workflows/deploy.yaml'
       - '.github/__release_template.txt'
       - 'patches-contrib/**'
       - 'LICENSE'
@@ -780,12 +782,24 @@ jobs:
     permissions:
       actions: write
     needs: [vars]
+    strategy:
+      matrix:
+        include:
+          - upload_prefix: "node"
+            ldflags: "-sENVIRONMENT=node -sEXIT_RUNTIME=1 -sNODERAWFS"
+            check: YES
+
+          - upload_prefix: "web"
+            ldflags: "-sENVIRONMENT=web -sASYNCIFY"
+            keep_shell_file: YES
+            opt_size: YES
+
     env:
       vcpkg_triplet: "wasm32-emscripten"
-      emsdk_ver: 3.1.37
+      emsdk_ver: 3.1.34
       emsdk_cache_dir: "emsdk-cache"
       rust_target: "wasm32-unknown-emscripten"
-      upload_suffix: "emscripten-wasm32-noderawfs-static"
+      upload_suffix: "emscripten-wasm32-static"
 
     steps:
       - name: Prepare (Host)
@@ -802,7 +816,7 @@ jobs:
           key: emsdk-${{ env.emsdk_ver }}-${{ runner.os }}
 
       - name: Prepare (Emscripten)
-        uses: mymindstorm/setup-emsdk@v13
+        uses: mymindstorm/setup-emsdk@v14
         with:
           version: ${{ env.emsdk_ver }}
           actions-cache-folder: ${{ env.emsdk_cache_dir }}
@@ -848,7 +862,7 @@ jobs:
 
           echo -e "\n### configure ###\n"
           . "$HOME/.cargo/env"
-          emcmake cmake -G Ninja -B build -DCMAKE_EXE_LINKER_FLAGS=" ${{ needs.vars.outputs.lto_ldflags }} -sNODERAWFS" \
+          emcmake cmake -G Ninja -B build -DCMAKE_EXE_LINKER_FLAGS=" ${{ needs.vars.outputs.lto_ldflags }} ${{ matrix.ldflags }}" \
               -DRust_CARGO_TARGET=${{ env.rust_target }} -DFULL_RUST_LTO=${{ needs.vars.outputs.full_lto }} \
               -DCMAKE_BUILD_TYPE=${{ needs.vars.outputs.cmake_build_type }} -DPREFER_STATIC_LINKING=ON \
               -DCMAKE_TOOLCHAIN_FILE=$VCPKG_INSTALLATION_ROOT/scripts/buildsystems/vcpkg.cmake \
@@ -859,19 +873,29 @@ jobs:
           cmake --build build -j $(nproc) -v
           emstrip build/magiskboot*.wasm
 
+          if [[ "${{ matrix.keep_shell_file }}" != 'YES' ]]; then
+            rm -f build/magiskboot*.html
+          fi
+
           file build/magiskboot*
-          $EMSDK_NODE ./build/magiskboot*.js || true
+          du -h build/magiskboot*
+
+          if [[ "${{ matrix.check }}" == "YES" ]]; then
+            $EMSDK_NODE ./build/magiskboot*.js || true
+          fi
+
           rm -rf $GITHUB_WORKSPACE/${{ env.progname }}-out && mkdir -p $GITHUB_WORKSPACE/${{ env.progname }}-out
           cp -afv build/magiskboot* $GITHUB_WORKSPACE/${{ env.progname }}-out
 
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:
           if-no-files-found: error
-          name: ${{ env.progname }}-${{ needs.vars.outputs.short_sha }}-${{ needs.vars.outputs.build_type }}-${{ env.upload_suffix }}
+          name: ${{ env.progname }}-${{ needs.vars.outputs.short_sha }}-${{ needs.vars.outputs.build_type }}-${{ matrix.upload_prefix }}-${{ env.upload_suffix }}
           path: ${{ github.workspace }}/${{ env.progname }}-out/magiskboot*
 
       - name: Check
+        if: matrix.check == 'YES'
         run: |
           cd magiskboot_*-src/
           EMULATOR=$EMSDK_NODE ./scripts/magiskboot_test.sh $GITHUB_WORKSPACE/${{ env.progname }}-out/magiskboot*.js

.github/workflows/deploy.yaml

@@ -0,0 +1,41 @@
+name: Deploy
+on:
+  workflow_dispatch:
+    inputs:
+      ci_run_id:
+        description: "Run ID of the desired CI run to download artifacts from"
+        required: true
+
+env:
+  projname: "magiskboot-build-wasm"
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download artifacts
+        id: download-artifact
+        uses: dawidd6/action-download-artifact@v3
+        with:
+          workflow: ci.yaml
+          workflow_conclusion: success
+          run_id: ${{ github.event.inputs.ci_run_id }}
+          path: artifacts
+          skip_unpack: true
+
+      - name: Extract artifacts
+        run: |
+          unzip -j -d dists artifacts/magiskboot-*-*-web-emscripten-wasm32-static.zip 'magiskboot*.*'
+
+      - name: Rename files
+        run: |
+          cd dists
+          mv magiskboot*.html index.html
+
+      - name: Deploy to Cloudflare Pages
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: pages deploy dists --project-name=${{ env.projname }}

CMakeLists.compat.txt

@@ -45,6 +45,8 @@ elseif (WIN32)
 elseif (CYGWIN)
     add_compile_definitions(__USE_LINUX_IOCTL_DEFS)
 elseif (EMSCRIPTEN)
+    set(CMAKE_EXECUTABLE_SUFFIX ".html")
+
     # exists in musl but not in rust libc crate
     list(APPEND RUSTFLAGS --cfg mbb_stubs_SYS_dup3)
 else()

CMakeLists.stub.txt

@@ -104,6 +104,23 @@ if (WIN32)
 endif()
 
 if (EMSCRIPTEN)
+    target_sources(magiskboot_exe PRIVATE
+        src/web-shims/conio_hack.cc)
+    set_source_files_properties(src/Magisk/native/src/boot/main.cpp PROPERTIES
+                                COMPILE_FLAGS -Dmain=__mbb_main)
+    target_link_libraries(magiskboot_exe embind)
+    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -Wl,--wrap=printf -Wl,--wrap=iprintf -Wl,--wrap=write")
+    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -Wl,--wrap=fprintf -Wl,--wrap=fiprintf -Wl,--wrap=exit")
+
+    message(STATUS "Using custom HTML wrapper")
+
+    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -sFORCE_FILESYSTEM -sEXPORTED_RUNTIME_METHODS=ENV,FS,TTY,callMain,abort,mbb_get_wasm_name,mbb_set_this_prog")
+    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} --pre-js=${CMAKE_CURRENT_SOURCE_DIR}/src/web-shims/impl.pre.js")
+    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} --js-library=${CMAKE_CURRENT_SOURCE_DIR}/src/web-shims/utils.lib.js")
+    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} --shell-file=${CMAKE_CURRENT_SOURCE_DIR}/src/web-shims/shfile.in.html")
+    set_target_properties(magiskboot_exe PROPERTIES LINK_DEPENDS
+                         "${CMAKE_CURRENT_SOURCE_DIR}/src/web-shims/impl.pre.js;${CMAKE_CURRENT_SOURCE_DIR}/src/web-shims/utils.lib.js;${CMAKE_CURRENT_SOURCE_DIR}/src/web-shims/shfile.in.html")
+
     message(STATUS "Using Emscripten mmap stubs")
 
     target_sources(platform_stubs PRIVATE

README.md

@@ -178,33 +178,27 @@ On arch-cygwin, set `CYGWIN_CC` and `CYGWIN_CXX` to `x86_64-pc-cygwin-clang` and
 
 </details>
 
-<details><summary>WebAssembly</summary>
+<details><summary>Web</summary>
 
 #### Emscripten
 
-> **Note**
->
-> Currently this port only support running with NodeJS.
->
-> A web frontend wrapper must be written to handle the argument passing and file system management in browsers.
->
-> This should be implemented soon in the future ([#19](../../issues/19)), but unfortunately I am not a web developer, any help on this will be welcome QwQ
-
 Please read the [Cross compiling](#cross-compiling) instructions first.
 
-Install the [Emscripten][Emscripten] SDK and also a Rust compiler with Emscripten target (probably via [rustup][rustup]).
+Install the [Emscripten SDK][emsdk] and also a Rust compiler with Emscripten target (probably via [rustup][rustup]).
 
 > **Warning**
 >
-> emsdk version 3.1.37 is recommended, you might run into weird problems with other versions.
+> An emsdk with version between 3.1.31 and 3.1.34 is required, this project is known to not build or work correctly with other SDK versions.
 
 Use [vcpkg][vcpkg] to install the [depended libraries](#requirements), the triplet is called `wasm32-emscripten`.
 
-When configuring, use `emcmake cmake` instead of `cmake` (but don't use it for `cmake --build` and other CMake commands) , and use `/path/to/your/emsdk/emscripten/cmake/Modules/Platform/Emscripten.cmake` as the toolchain file for vcpkg.
+When configuring, use `emcmake cmake` instead of `cmake` (but don't use it for `cmake --build` and other CMake commands) , and use `/path/to/your/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake` as the toolchain file for vcpkg.
+
+To target web browsers, set `-sENVIRONMENT=web` in `CMAKE_EXE_LINKER_FLAGS` (recommended step, for reducing JS size). If you want real-time console output, set `-sASYNCIFY` as well (Note this will increase the binary size significantly).
 
-For NodeJS, make sure to set `CMAKE_EXE_LINKER_FLAGS` to `-sNODERAWFS` to allow using the host filesystem.
+For NodeJS, set `-sENVIRONMENT=node` instead. **Make sure** to also set `-sEXIT_RUNTIME=1` and  `-sNODERAWFS`. And then you will be able to run the end result with [NodeJS][NodeJS] like this: `node magiskboot.js`
 
-finally, you can run the result with [NodeJS][NodeJS] using: `node magiskboot.js`
+You can find more details about these linker flags in [Emscripten documentation](https://emscripten.org/docs/tools_reference/settings_reference.html).
 
 </details>
 
@@ -409,6 +403,6 @@ For more details about these licenses, please see [LICENSE](LICENSE) and [LICENS
 [fedora-cygwin]: https://copr.fedorainfracloud.org/coprs/yselkowitz/cygwin/
 [cmake-toolchains]: https://cmake.org/cmake/help/latest/manual/cmake-toolchains.7.html
 [vcpkg]: https://vcpkg.io/
-[Emscripten]: https://github.com/emscripten-core/emsdk
+[emsdk]: https://github.com/emscripten-core/emsdk
 [NodeJS]: https://nodejs.org/
 [ONDK]: https://github.com/topjohnwu/ondk