[build][cmake] Review web compilation system (raysan5#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%

Author: brccabral

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")
-    # Since WASM is used, ALLOW_MEMORY_GROWTH has no extra overheads
-    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")
-    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}")
+    set(example_sources) # clear example_sources
+    list(APPEND example_sources others/web_basic_window.c)
+    list(APPEND example_sources core/core_input_gestures_testbed.c)
 
 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})
-        # 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}")
+    if (${PLATFORM} MATCHES "Web")
+        target_compile_options(${example_name} PRIVATE -Os)
+        target_link_options(${example_name} PRIVATE
+            -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 ()
 

projects/CMake/core_basic_window.c renamed to 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

@@ -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}

projects/CMake/README.md

@@ -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%;