[build][cmake] Review web compilation system (#5181)

* [cmake] export automatically raylib definitions and compile/link options

* [cmake] pass emscripten options to consumer project

* [web] compile for web

* [web] canvas width 100%

examples/CMakeLists.txt

@@ -97,17 +97,9 @@ if (${PLATFORM} MATCHES "Android")
     list(REMOVE_ITEM example_sources ${CMAKE_CURRENT_SOURCE_DIR}/shaders/shaders_basic_lighting.c)
 
 elseif (${PLATFORM} MATCHES "Web")
-    set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -Os")
+    set(example_sources) # clear example_sources
-    # Since WASM is used, ALLOW_MEMORY_GROWTH has no extra overheads
+    list(APPEND example_sources others/web_basic_window.c)
-    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -s WASM=1 -s ASYNCIFY -s ALLOW_MEMORY_GROWTH=1 --shell-file ${CMAKE_SOURCE_DIR}/src/shell.html")
+    list(APPEND example_sources core/core_input_gestures_testbed.c)
-    set(CMAKE_EXECUTABLE_SUFFIX ".html")
-
-    list(REMOVE_ITEM example_sources ${CMAKE_CURRENT_SOURCE_DIR}/others/raylib_opengl_interop.c)
-
-    # Remove the -rdynamic flag because otherwise emscripten
-    # does not generate HTML+JS+WASM files, only a non-working
-    # and fat HTML
-    string(REPLACE "-rdynamic" "" CMAKE_SHARED_LIBRARY_LINK_C_FLAGS "${CMAKE_SHARED_LIBRARY_LINK_C_FLAGS}")
 
 elseif ("${PLATFORM}" STREQUAL "DRM")
     list(REMOVE_ITEM example_sources ${CMAKE_CURRENT_SOURCE_DIR}/others/rlgl_standalone.c)
@@ -165,10 +157,34 @@ foreach (example_source ${example_sources})
     string(REGEX MATCH ".*/.*/" resources_dir ${example_source})
     string(APPEND resources_dir "resources")
 
-    if (${PLATFORM} MATCHES "Web" AND EXISTS ${resources_dir})
+    if (${PLATFORM} MATCHES "Web")
-        # The local resources path needs to be mapped to /resources virtual path
+        target_compile_options(${example_name} PRIVATE -Os)
-        string(APPEND resources_dir "@resources")
+        target_link_options(${example_name} PRIVATE
-        set_target_properties(${example_name} PROPERTIES LINK_FLAGS "--preload-file ${resources_dir}")
+            -sALLOW_MEMORY_GROWTH=1
+            -sEXPORTED_RUNTIME_METHODS=[requestFullscreen]
+            -sUSE_GLFW=3
+            --shell-file "${CMAKE_SOURCE_DIR}/src/shell.html"
+        )
+        set_target_properties(${example_name} PROPERTIES SUFFIX ".html")
+
+        if (EXISTS ${resources_dir})
+            # The local resources path needs to be mapped to /resources virtual path
+            string(APPEND resources_dir "@resources")
+            set_target_properties(${example_name} PROPERTIES LINK_FLAGS "--preload-file ${resources_dir}")
+        endif ()
+
+        if(${GRAPHICS} MATCHES "GRAPHICS_API_OPENGL_ES3")
+            target_link_options(${example_name} PUBLIC "-sMIN_WEBGL_VERSION=2")
+            target_link_options(${example_name} PUBLIC "-sMAX_WEBGL_VERSION=2")
+        endif()
+
+        # Checks if OSX and links appropriate frameworks (Only required on MacOS)
+        if (APPLE)
+            target_link_libraries(${example_name} "-framework IOKit")
+            target_link_libraries(${example_name} "-framework Cocoa")
+            target_link_libraries(${example_name} "-framework OpenGL")
+        endif()
+
     endif ()
 endforeach ()
 

examples/others/web_basic_window.c

@@ -1,6 +1,6 @@
 /*******************************************************************************************
 *
-*   raylib [core] example - Basic window (adapted for HTML5 platform)
+*   raylib [others] example - Basic window (adapted for HTML5 platform)
 *
 *   This example is prepared to compile for PLATFORM_WEB and PLATFORM_DESKTOP
 *   As you will notice, code structure is slightly different to the other examples...
@@ -37,7 +37,7 @@ int main()
 {
     // Initialization
     //--------------------------------------------------------------------------------------
-    InitWindow(screenWidth, screenHeight, "raylib [core] example - basic window");
+    InitWindow(screenWidth, screenHeight, "raylib [others] example - web basic window");
 
 #if defined(PLATFORM_WEB)
     emscripten_set_main_loop(UpdateDrawFrame, 0, 1);

projects/CMake/CMakeLists.txt

@@ -1,41 +0,0 @@
-cmake_minimum_required(VERSION 3.11) # FetchContent is available in 3.11+
-project(example)
-
-# Generate compile_commands.json
-set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
-
-# Dependencies
-set(RAYLIB_VERSION 5.5)
-find_package(raylib ${RAYLIB_VERSION} QUIET) # QUIET or REQUIRED
-if (NOT raylib_FOUND) # If there's none, fetch and build raylib
-  include(FetchContent)
-  FetchContent_Declare(
-    raylib
-    DOWNLOAD_EXTRACT_TIMESTAMP OFF
-    URL https://github.com/raysan5/raylib/archive/refs/tags/${RAYLIB_VERSION}.tar.gz
-  )
-  FetchContent_GetProperties(raylib)
-  if (NOT raylib_POPULATED) # Have we downloaded raylib yet?
-    set(FETCHCONTENT_QUIET NO)
-    FetchContent_MakeAvailable(raylib)
-  endif()
-endif()
-
-# Our Project
-
-add_executable(${PROJECT_NAME} core_basic_window.c)
-#set(raylib_VERBOSE 1)
-target_link_libraries(${PROJECT_NAME} raylib)
-
-# Web Configurations
-if (${PLATFORM} STREQUAL "Web")
-    set_target_properties(${PROJECT_NAME} PROPERTIES SUFFIX ".html") # Tell Emscripten to build an example.html file.
-    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -s USE_GLFW=3 -s ASSERTIONS=1 -s WASM=1 -s ASYNCIFY -s GL_ENABLE_GET_PROC_ADDRESS=1")
-endif()
-
-# Checks if OSX and links appropriate frameworks (Only required on MacOS)
-if (APPLE)
-    target_link_libraries(${PROJECT_NAME} "-framework IOKit")
-    target_link_libraries(${PROJECT_NAME} "-framework Cocoa")
-    target_link_libraries(${PROJECT_NAME} "-framework OpenGL")
-endif()

projects/CMake/README.md

@@ -1,27 +0,0 @@
-# raylib CMake Project
-
-This provides a base project template which builds with [CMake](https://cmake.org).
-
-## Usage
-
-To compile the example, use one of the following dependending on your build target...
-
-### Desktop
-
-Use the following to build for desktop:
-
-``` bash
-cmake -B build
-cmake --build build
-```
-
-### Web
-
-Compiling for the web requires the [Emscripten SDK](https://emscripten.org/docs/getting_started/downloads.html):
-
-``` bash
-mkdir build
-cd build
-emcmake cmake .. -DPLATFORM=Web -DCMAKE_BUILD_TYPE=Release -DCMAKE_EXECUTABLE_SUFFIX=".html"
-emmake make
-```

src/CMakeLists.txt

@@ -68,14 +68,6 @@ else()
                                )
 endif()
 
-if (${PLATFORM} MATCHES "Web")
-    target_link_options(raylib PUBLIC "-sUSE_GLFW=3" -sEXPORTED_RUNTIME_METHODS=ccall -sASYNCIFY)
-    if(${GRAPHICS} MATCHES "GRAPHICS_API_OPENGL_ES3")
-        target_link_options(raylib PUBLIC "-sMIN_WEBGL_VERSION=2")
-        target_link_options(raylib PUBLIC "-sMAX_WEBGL_VERSION=2")
-    endif()
-endif()
-
 set_target_properties(raylib PROPERTIES
                       PUBLIC_HEADER "${raylib_public_headers}"
                       VERSION ${PROJECT_VERSION}

src/shell.html

@@ -34,7 +34,7 @@
     <link rel="shortcut icon" href="https://www.raylib.com/favicon.ico">
 
     <style>
-      body { font-family: arial; margin: 0; padding: none; }
+      body { font-family: arial; margin: 0; padding: unset; }
 
       #header {
         width: 100%;