Optimize the web platform's wasm file by reducing its zip size by 67k…

…b. (#1927)

* Optimize the web platform's wasm file by reducing its zip size by 67kb.

* Update the minimum requirements of building tools.

* Fix sync_deps.sh

.github/workflows/autotest.yml

@@ -27,15 +27,13 @@ jobs:
             /usr/local/bin/ninja
             /usr/local/Cellar/yasm
             /usr/local/bin/yasm
-            /usr/local/bin/depsync
-            /usr/local/lib/node_modules/depsync
             /usr/local/Cellar/gcovr
             /usr/local/bin/gcovr
             /usr/local/Cellar/python-lxml
             /usr/local/Cellar/python-markupsafe
             /usr/local/lib/python3.12/site-packages/lxml
             /usr/local/lib/python3.12/site-packages/markupsafe
-          key: libpag-environment-autotest-20231117
+          key: libpag-environment-autotest-202311129
           restore-keys: libpag-environment-autotest-
 
       - name: Get Third-Party Cache
@@ -86,15 +84,13 @@ jobs:
             /usr/local/bin/ninja
             /usr/local/Cellar/yasm
             /usr/local/bin/yasm
-            /usr/local/bin/depsync
-            /usr/local/lib/node_modules/depsync
             /usr/local/Cellar/gcovr
             /usr/local/bin/gcovr
             /usr/local/Cellar/python-lxml
             /usr/local/Cellar/python-markupsafe
             /usr/local/lib/python3.12/site-packages/lxml
             /usr/local/lib/python3.12/site-packages/markupsafe
-          key: libpag-environment-autotest-20231117
+          key: libpag-environment-autotest-202311129
 
       - name: Save Third-Party Cache
         if: ${{ (github.event_name == 'push') && (steps.third-party-cache.outputs.cache-hit != 'true') }}

.github/workflows/build.yml

@@ -25,9 +25,7 @@ jobs:
             /usr/local/bin/ninja
             /usr/local/Cellar/yasm
             /usr/local/bin/yasm
-            /usr/local/bin/depsync
-            /usr/local/lib/node_modules/depsync
-          key: libpag-environment-ios-20231117
+          key: libpag-environment-ios-20231129
           restore-keys: libpag-environment-ios-
 
       - name: Get Third-Party Cache
@@ -67,9 +65,7 @@ jobs:
             /usr/local/bin/ninja
             /usr/local/Cellar/yasm
             /usr/local/bin/yasm
-            /usr/local/bin/depsync
-            /usr/local/lib/node_modules/depsync
-          key: libpag-environment-ios-20231117
+          key: libpag-environment-ios-20231129
 
       - name: Save Third-Party Cache
         if: ${{ (github.event_name == 'push') && (steps.third-party-cache.outputs.cache-hit != 'true') }}
@@ -163,13 +159,7 @@ jobs:
             /usr/local/bin/ninja
             /usr/local/Cellar/yasm
             /usr/local/bin/yasm
-            /usr/local/bin/depsync
-            /usr/local/lib/node_modules/depsync
-            /usr/local/Cellar/gcovr
-            /usr/local/bin/gcovr
             /usr/local/Cellar/emsdk
-            /usr/local/Cellar/emsdk/upstream/emscripten
-            /usr/local/Cellar/emsdk/node/14.18.2_64bit/bin
             /usr/local/bin/em++
             /usr/local/bin/em-config
             /usr/local/bin/emar
@@ -190,7 +180,7 @@ jobs:
             /usr/local/bin/emcc.py
             /usr/local/bin/emcmake.py
             /usr/local/bin/emar.py
-          key: libpag-environment-web-20231117
+          key: libpag-environment-web-20231129
           restore-keys: libpag-environment-web-
 
       - name: Get Third-Party Cache
@@ -225,13 +215,7 @@ jobs:
             /usr/local/bin/ninja
             /usr/local/Cellar/yasm
             /usr/local/bin/yasm
-            /usr/local/bin/depsync
-            /usr/local/lib/node_modules/depsync
-            /usr/local/Cellar/gcovr
-            /usr/local/bin/gcovr
             /usr/local/Cellar/emsdk
-            /usr/local/Cellar/emsdk/upstream/emscripten
-            /usr/local/Cellar/emsdk/node/14.18.2_64bit/bin
             /usr/local/bin/em++
             /usr/local/bin/em-config
             /usr/local/bin/emar
@@ -252,7 +236,7 @@ jobs:
             /usr/local/bin/emcc.py
             /usr/local/bin/emcmake.py
             /usr/local/bin/emar.py
-          key: libpag-environment-web-20231117
+          key: libpag-environment-web-20231129
 
       - name: Save Third-Party Cache
         if: ${{ (github.event_name == 'push') && (steps.third-party-cache.outputs.cache-hit != 'true') }}

CMakeLists.txt

@@ -444,7 +444,19 @@ if (PAG_EXCLUDE_FILES)
     list(REMOVE_ITEM PAG_FILES ${PAG_EXCLUDE_FILES})
 endif ()
 
-if (PAG_BUILD_SHARED)
+if (WEB)
+    add_executable(pag ${PAG_VENDOR_TARGETS} ${PAG_FILES})
+    list(APPEND PAG_LINK_OPTIONS --no-entry -lembind -sEXPORT_NAME='Hello2D' -sWASM=1 -sASYNCIFY
+     -sUSE_WEBGL2=1 -sEXPORTED_RUNTIME_METHODS=['GL','Asyncify'] -sALLOW_MEMORY_GROWTH=1
+     -sMODULARIZE=1 -sENVIRONMENT='web,worker' -sEXPORT_ES6=1 -sUSE_ES6_IMPORT_META=0)
+    if (CMAKE_BUILD_TYPE STREQUAL "Debug")
+        list(APPEND PAG_COMPILE_OPTIONS -O0 -g3)
+        list(APPEND PAG_LINK_OPTIONS -O0 -g3 -sSAFE_HEAP=1 -Wno-limited-postlink-optimizations)
+    else ()
+        list(APPEND PAG_COMPILE_OPTIONS -Oz)
+        list(APPEND PAG_LINK_OPTIONS -Oz)
+    endif ()
+elseif (PAG_BUILD_SHARED)
     add_library(pag SHARED ${PAG_VENDOR_TARGETS} ${PAG_FILES})
 else ()
     add_library(pag STATIC ${PAG_VENDOR_TARGETS} ${PAG_FILES})
@@ -453,6 +465,7 @@ endif ()
 
 target_compile_definitions(pag PUBLIC ${PAG_DEFINES})
 target_compile_options(pag PUBLIC ${PAG_COMPILE_OPTIONS})
+target_link_options(pag PUBLIC ${PAG_LINK_OPTIONS})
 target_include_directories(pag PUBLIC include PRIVATE ${PAG_INCLUDES})
 target_link_libraries(pag ${PAG_STATIC_LIBS} ${PAG_SHARED_LIBS})
 set_target_properties(pag PROPERTIES PREFIX "")

DEPS

@@ -7,12 +7,12 @@
     "common": [
       {
         "url": "${PAG_GROUP}/vendor_tools.git",
-        "commit": "7eeef14461dbc39559e506b480bc1c430fe87756",
+        "commit": "41a96c0ce95f8d064c51257887f6229051173477",
         "dir": "third_party/vendor_tools"
       },
       {
         "url": "${PAG_GROUP}/tgfx.git",
-        "commit": "f99494a3faea6084e096a77230aca48cd827bb7f",
+        "commit": "1da3ea6b0092238eca19dad8a6b37e6df6e2c824",
         "dir": "third_party/tgfx"
       },
       {

README.md

@@ -186,11 +186,13 @@ versions, you can download the precompiled libraries from [here](https://github.
 
 - Xcode 11.0+
 - GCC 8.0+
-- Visual Studio 2019
+- Visual Studio 2019+
 - NodeJS 14.14.0+
 - Ninja 1.9.0+
-- CMake 3.13.0+ (**Recommended to always use the latest version to avoid building errors.**)
-- NDK 19.2.5345600 （**Please use this exact version of NDK, other versions may fail.**)
+- CMake 3.13.0+
+- QT 5.13.0+
+- NDK 19+ (**19.2.5345600 recommended**)
+- Emscripten 3.1.20+ (**3.1.20 recommended**)
 
 ### Dependency Management
 

README.zh_CN.md

@@ -176,11 +176,13 @@ Web 端更多接入方式请参考：[Web端接入指南](https://pag.art/docs/s
 
 - Xcode 11.0+
 - GCC 8.0+
-- Visual Studio 2019
+- Visual Studio 2019+
 - NodeJS 14.14.0+
 - Ninja 1.9.0+
-- CMake 3.10.2+ (**推荐总是使用最新的版本避免报错**)
-- NDK 19.2.5345600 (**请用这个指定的版本，其他版本可能会存在编译报错**)
+- CMake 3.13.0+
+- QT 5.13.0+
+- NDK 19+ (**推荐 19.2.5345600 版本**)
+- Emscripten 3.1.20+ (**推荐 3.1.20 版本**)
 
 ### 依赖管理
 

pag.hash

@@ -1,10 +1,5 @@
 include/
 src/
-android/libpag/src/main/java
-web/src
-web/lite
-web/script
-web/tsconfig.json
 CMakeLists.txt
 vendor.json
 DEPS

src/platform/web/NativePlatform.cpp

@@ -20,13 +20,17 @@
 #include <emscripten/val.h>
 #include "HardwareDecoder.h"
 #include "NativeTextShaper.h"
+#include "PAGWasmBindings.h"
 #ifdef PAG_USE_HARFBUZZ
 #include "base/utils/USE.h"
 #endif
 
 using namespace emscripten;
 
 namespace pag {
+// Force PAGBindInit to be linked.
+static bool initialized = PAGBindInit();
+
 class HardwareDecoderFactory : public VideoDecoderFactory {
  public:
   bool isHardwareBacked() const override {

src/platform/web/PAGWasmBindings.cpp

@@ -29,9 +29,9 @@
 #include "tgfx/opengl/GLDefines.h"
 
 using namespace emscripten;
-using namespace pag;
 
-EMSCRIPTEN_BINDINGS(pag) {
+namespace pag {
+bool PAGBindInit() {
   class_<PAGLayer>("_PAGLayer")
       .smart_ptr<std::shared_ptr<PAGLayer>>("_PAGLayer")
       .function("_uniqueID", optional_override([](PAGLayer& pagLayer) {
@@ -495,7 +495,7 @@ EMSCRIPTEN_BINDINGS(pag) {
   function("_SDKVersion", &PAG::SDKVersion);
 
   register_vector<std::shared_ptr<PAGLayer>>("VectorPAGLayer");
-  register_vector<std::string>("VectorString");
-  register_vector<int>("VectorInt");
   register_vector<Marker>("VectorMarker");
+  return true;
 }
+}  // namespace pag

src/platform/web/PAGWasmBindings.h

@@ -0,0 +1,23 @@
+/////////////////////////////////////////////////////////////////////////////////////////////////
+//
+//  Tencent is pleased to support the open source community by making libpag available.
+//
+//  Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
+//
+//  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file
+//  except in compliance with the License. You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  unless required by applicable law or agreed to in writing, software distributed under the
+//  license is distributed on an "as is" basis, without warranties or conditions of any kind,
+//  either express or implied. see the license for the specific language governing permissions
+//  and limitations under the license.
+//
+/////////////////////////////////////////////////////////////////////////////////////////////////
+
+#pragma once
+
+namespace pag {
+bool PAGBindInit();
+}  // namespace pag

sync_deps.sh

@@ -12,7 +12,7 @@ fi
 
 if [ ! $(which depsync) ]; then
   echo "depsync not found. Trying to install..."
-  npm install -g $TOOL > /dev/null
+  npm install -g depsync > /dev/null
 else
   npm update -g depsync --silent
 fi

web/README.md

@@ -143,17 +143,6 @@ Use Chrome to open `http://localhost:8081/web/demo/index.html` to see the demo.
 
 If you need to debug, you can install [C/C++ DevTools Support (DWARF)](https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb), and open Chrome DevTools > Settings > Experiments > Check the "WebAssembly Debugging: Enable DWARF support" option to enable SourceMap support. Now you can debug C++ files in Chrome DevTools.
 
-#### PS
-
-When using build.sh to compile libpag.wasm, undefined symbols error was suppressed due to compatibility issues between emscripten and the system's std library.
-
-```shell
-# build.sh
-emcc -s ERROR_ON_UNDEFINED_SYMBOLS=0
-```
-
-During the compilation process, it is necessary to pay attention to any warning messages unrelated to std library to avoid the undefined symbols errors during runtime.
-
 ### Build (Release)
 
 ```bash

web/README.zh_CN.md

@@ -204,17 +204,6 @@ Chrome 浏览器打开 `http://localhost:8081/demo/index.html` 即可看到效
 
 需要断点调试时，可以安装 [C/C++ DevTools Support (DWARF)](https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb)，并打开 Chrome DevTools > 设置 > 实验 > 勾选「WebAssembly Debugging: Enable DWARF support」选项启用 SourceMap 支持。现在就可以在 Chrome DevTools 中对 C++ 文件进行断点调试了。
 
-#### 注意点
-
-在使用  `build.sh` 编译 `libpag.wasm` 时，因为 `emscripten` 与系统的 std 库有兼容问题，所以屏蔽了 undefined symbols 报错。
-
-```shell
-# build.sh
-emcc -s ERROR_ON_UNDEFINED_SYMBOLS=0
-```
-
-编译过程中需要留意是否有std库兼容外的 warning 信息，避免 undefined symbols 的错误在运行时才暴露出来。
-
 ### 生产流程
 
 执行 `build.sh` 脚本

web/script/build.sh

@@ -4,10 +4,6 @@ SOURCE_DIR=../..
 
 echo "-----begin-----"
 
-if [ ! -d "../src/wasm" ]; then
-  mkdir ../src/wasm
-fi
-
 RELEASE_CONF="-Oz -s"
 PAG_BUILD_OPTION=""
 PAG_BUILD_TYPE="release"
@@ -19,36 +15,19 @@ if [[ $@ == *debug* ]]; then
 fi
 
 ../../build_pag -p web $PAG_BUILD_OPTION
-
-emcc $RELEASE_CONF -std=c++17 \
-  -I$SOURCE_DIR/include/ \
-  -I$SOURCE_DIR/src/ \
-  -I$SOURCE_DIR/third_party/tgfx/include/ \
-  -DPAG_BUILD_FOR_WEB \
-  -Wl,--whole-archive ../../out/$PAG_BUILD_TYPE/web/wasm/libpag.a \
-  --no-entry \
-  --bind \
-  -s WASM=1 \
-  -s ASYNCIFY \
-  -s USE_WEBGL2=1 \
-  -s "EXPORTED_RUNTIME_METHODS=['GL','Asyncify']" \
-  -s ALLOW_MEMORY_GROWTH=1 \
-  -s EXPORT_NAME="PAGInit" \
-  -s ERROR_ON_UNDEFINED_SYMBOLS=0 \
-  -s MODULARIZE=1 \
-  -s NO_EXIT_RUNTIME=1 \
-  -s ENVIRONMENT="web,worker" \
-  -s EXPORT_ES6=1 \
-  -s USE_ES6_IMPORT_META=0 \
-  -o ../src/wasm/libpag.js
-
 if test $? -eq 0; then
   echo "~~~~~~~~~~~~~~~~~~~wasm build success~~~~~~~~~~~~~~~~~~"
 else
   echo "~~~~~~~~~~~~~~~~~~~wasm build failed~~~~~~~~~~~~~~~~~~~"
   exit 1
 fi
 
+if [ ! -d "../src/wasm" ]; then
+  mkdir ../src/wasm
+fi
+cp -f ../../out/$PAG_BUILD_TYPE/web/wasm/libpag.wasm ../src/wasm
+cp -f ../../out/$PAG_BUILD_TYPE/web/wasm/libpag.js ../src/wasm
+
 if [ ! -d "../lib" ]; then
   mkdir ../lib
 fi

web/src/binding.ts

@@ -15,16 +15,15 @@ import { PAGTextLayer } from './pag-text-layer';
 import { PAGImageLayer } from './pag-image-layer';
 import { PAGSolidLayer } from './pag-solid-layer';
 import { Matrix } from './core/matrix';
-import { WebMask } from './core/web-mask';
 import { RenderCanvas } from './core/render-canvas';
 import { setMixin } from './utils/mixin';
-import * as tgfx from '@tgfx/tgfx'
-import { ScalerContext } from '@tgfx/core/scaler-context';
+import { TGFXBind } from '@tgfx/binding';
 
 /**
  * Binding pag js module on pag webassembly module.
  */
-export const binding = (module: PAG) => {
+export const PAGBind = (module: PAG) => {
+  TGFXBind(module);
   setPAGModule(module);
   module.module = module;
   module.PAGFile = PAGFile;
@@ -39,12 +38,9 @@ export const binding = (module: PAG) => {
   module.PAGImageLayer = PAGImageLayer;
   module.PAGSolidLayer = PAGSolidLayer;
   module.VideoReader = VideoReader;
-  module.ScalerContext = ScalerContext;
-  module.WebMask = WebMask;
   module.GlobalCanvas = GlobalCanvas;
   module.BackendContext = BackendContext;
   module.Matrix = Matrix;
   module.RenderCanvas = RenderCanvas;
   setMixin(module);
-  module.tgfx = { ...tgfx };
 };

web/src/core/matrix.ts

@@ -317,4 +317,4 @@ export class Matrix {
   public destroy() {
     this.wasmIns.delete();
   }
-}
+}