Refactor examples list in CMake (#170)

* Reduce example list duplication

* Add COEP and COOP headers in local HTTP server

* Revert Examples URL in readme

README.md

@@ -73,7 +73,7 @@ A simple C++ library for terminal based user interface.
 
 - [Starter example project](https://github.com/ArthurSonzogni/ftxui-starter)
 - [Documentation](https://arthursonzogni.github.io/FTXUI/)
-- [Examples (WebAssembly)](https://arthursonzogni.github.io/FTXUI/examples/)
+- [Examples (WebAssembly)](https://arthursonzogni.com/FTXUI/examples/)
 - [Build using CMake](https://arthursonzogni.com/FTXUI/doc/#build-using-cmake)
 - [Build using nxxm](https://arthursonzogni.com/FTXUI/doc/#build-using-cmake)
 

doc/CMakeLists.txt

@@ -3,10 +3,9 @@ if (DOXYGEN_FOUND)
   # Generate example list for documentation
   set(EXAMPLE_LIST "${CMAKE_CURRENT_BINARY_DIR}/example_list.md")
   file(WRITE ${EXAMPLE_LIST} "# Examples")
-  file(GLOB_RECURSE EXAMPLES RELATIVE ${PROJECT_SOURCE_DIR}
+  get_property(EXAMPLES GLOBAL PROPERTY FTXUI::EXAMPLES)
-    "${PROJECT_SOURCE_DIR}/examples/*.cpp")
   foreach(EXAMPLE IN LISTS EXAMPLES)
-    file(APPEND ${EXAMPLE_LIST} "\n@example ${EXAMPLE}")
+    file(APPEND ${EXAMPLE_LIST} "\n@example examples/${EXAMPLE}.cpp")
   endforeach(EXAMPLE IN LISTS EXAMPLES)
 
   configure_file(Doxyfile.in Doxyfile @ONLY)

examples/CMakeLists.txt

@@ -1,14 +1,19 @@
+set(EXAMPLES_DIR ${CMAKE_CURRENT_SOURCE_DIR})
+function(example name)
+  add_executable(${name} ${name}.cpp)
+  target_link_libraries(${name} PUBLIC ${DIRECTORY_LIB})
+  file(RELATIVE_PATH dir ${EXAMPLES_DIR} ${CMAKE_CURRENT_SOURCE_DIR})
+  set_property(GLOBAL APPEND PROPERTY FTXUI::EXAMPLES ${dir}/${name})
+endfunction(example)
+
 add_subdirectory(component)
 add_subdirectory(dom)
-add_subdirectory(util)
 
 if (EMSCRIPTEN)
+  get_property(EXAMPLES GLOBAL PROPERTY FTXUI::EXAMPLES)
   foreach(file
       "index.html"
-      "run_webassembly.sh")
+      "run_webassembly.py")
-    configure_file(
+    configure_file(${file} ${file})
-      ${CMAKE_CURRENT_SOURCE_DIR}/${file}
-      ${CMAKE_CURRENT_BINARY_DIR}/${file}
-    )
   endforeach(file)
 endif()

examples/component/CMakeLists.txt

@@ -1,7 +1,4 @@
-function(example name)
+set(DIRECTORY_LIB component)
-  add_executable(${name} ${name}.cpp)
-  target_link_libraries(${name} PUBLIC component)
-endfunction(example)
 
 example(button)
 example(checkbox)
@@ -23,3 +20,4 @@ example(tab_horizontal)
 example(tab_vertical)
 example(toggle)
 example(resizable_split)
+example(print_key_press)

examples/dom/CMakeLists.txt

@@ -1,7 +1,4 @@
-function(example name)
+set(DIRECTORY_LIB dom)
-  add_executable(${name} ${name}.cpp)
-  target_link_libraries(${name} PUBLIC dom)
-endfunction(example)
 
 example(border)
 example(color_gallery)

examples/index.html

@@ -23,52 +23,10 @@
     </div>
   </body>
   <script>
-    let example_list = [
+    const example_list = "@EXAMPLES@".split(";");
-      "./component/button.js",
-      "./component/checkbox.js",
-      "./component/checkbox_in_frame.js",
-      "./component/gallery.js",
-      "./component/homescreen.js",
-      "./component/input.js",
-      "./component/menu.js",
-      "./component/menu2.js",
-      "./component/menu_style.js",
-      "./component/modal_dialog.js",
-      "./component/radiobox.js",
-      "./component/radiobox_in_frame.js",
-      "./component/slider.js",
-      "./component/tab_horizontal.js",
-      "./component/tab_vertical.js",
-      "./component/toggle.js",
-      "./dom/border.js",
-      "./dom/color_gallery.js",
-      "./dom/color_info_palette256.js",
-      "./dom/color_truecolor_HSV.js",
-      "./dom/color_truecolor_RGB.js",
-      "./dom/dbox.js",
-      "./dom/gauge.js",
-      "./dom/graph.js",
-      "./dom/hflow.js",
-      "./dom/html_like.js",
-      "./dom/package_manager.js",
-      "./dom/paragraph.js",
-      "./dom/separator.js",
-      "./dom/size.js",
-      "./dom/spinner.js",
-      "./dom/style_blink.js",
-      "./dom/style_bold.js",
-      "./dom/style_color.js",
-      "./dom/style_dim.js",
-      "./dom/style_gallery.js",
-      "./dom/style_inverted.js",
-      "./dom/style_underlined.js",
-      "./dom/vbox_hbox.js",
-      "./dom/window.js",
-      "./util/print_key_press.js",
-    ];
 
     const url_search_params = new URLSearchParams(window.location.search);
-    const example = url_search_params.get("file") || "./dom/color_gallery.js"
+    const example = url_search_params.get("file") || "dom/color_gallery";
     const select = document.getElementById("selectExample"); 
 
     for(var i = 0; i < example_list.length; i++) {
@@ -113,7 +71,7 @@
       postRun: [],
       onRuntimeInitialized: () => {},
     };
-    document.querySelector("#example_script").src = example
+    document.querySelector("#example_script").src = example + '.js';
   </script>
 
   <style>

examples/run_webassembly.py

@@ -0,0 +1,20 @@
+#! /usr/bin/python3
+from http.server import HTTPServer, SimpleHTTPRequestHandler
+import sys
+import webbrowser
+
+PORT = 8888
+
+class CustomHTTPRequestHandler(SimpleHTTPRequestHandler):
+    def end_headers(self):
+        self.send_header("cross-origin-embedder-policy", "require-corp")
+        self.send_header("cross-origin-opener-policy", "same-origin")
+        SimpleHTTPRequestHandler.end_headers(self)
+
+with HTTPServer(("", PORT), CustomHTTPRequestHandler) as httpd:
+    try:
+        webbrowser.open("http://localhost:%s" % PORT)
+        print("serving at port", PORT)
+        httpd.serve_forever()
+    finally:
+        sys.exit(0)

examples/run_webassembly.sh

@@ -1,6 +0,0 @@
-#! /bin/bash
-python3 -m http.server 8888 &
-P1=$!
-trap 'kill 0' SIGINT; P1
-python3 -m webbrowser http://localhost:8888
-wait $P1

examples/util/CMakeLists.txt

@@ -1,6 +0,0 @@
-function(example name)
-  add_executable(${name} ${name}.cpp)
-  target_link_libraries(${name} PUBLIC component)
-endfunction(example)
-
-example(print_key_press)