abstract/refactor JSEngine, add quickjs as a backend, update readme, clang-format all files, add basic js tests, update ci

Author: vgmoose

.github/workflows/pc-builds.yml

@@ -14,15 +14,16 @@ jobs:
       matrix:
         os: [ubuntu]
         library: [sdl2]
+        engine: [quickjs, mujs]
     runs-on: ${{ matrix.os }}-latest
     steps:
     - uses: actions/checkout@main
       with:
         submodules: recursive
-    - name: Build ${{ matrix.platform }}
+    - name: Build ${{ matrix.os }} w/ ${{ matrix.engine }}
       shell: bash
-      run: ./libs/chesto/helpers/build_pc.sh broccolini ${{ matrix.os }} ${{ matrix.library }}
+      run: JS_ENGINE=${{ matrix.engine }} ./libs/chesto/helpers/build_pc.sh broccolini ${{ matrix.os }} ${{ matrix.library }}
     - uses: actions/upload-artifact@v4
       with:
-        name: broccolini_${{ matrix.os }}_${{ matrix.library }}
-        path: ./broccolini_${{ matrix.os }}_${{ matrix.library }}.zip
+        name: broccolini_${{ matrix.os }}_${{ matrix.library }}_${{ matrix.engine }}
+        path: ./broccolini_${{ matrix.os }}_${{ matrix.library }}_${{ matrix.engine }}.zip

.gitmodules

@@ -10,3 +10,6 @@
 [submodule "libs/snabbdom"]
 	path = libs/snabbdom
 	url = https://github.com/snabbdom/snabbdom
+[submodule "libs/quickjs"]
+	path = libs/quickjs
+	url = git@github.com:quickjs-ng/quickjs.git

Makefile

@@ -2,14 +2,27 @@ BINARY		:=	broccolini
 
 APP_TITLE	:=	broccolini
 APP_AUTHOR	:=	vgmoose
-APP_VERSION	:=	0.1
+APP_VERSION	:=	0.2
 
-SOURCES		+=	. libs/litehtml/src libs/litehtml/src/gumbo src utils mujs_src
+# JavaScript engine selection (override with: make JS_ENGINE=mujs)
+JS_ENGINE	?=	quickjs
+
+# Base sources and Chesto-related flags
+SOURCES		+=	. libs/litehtml/src libs/litehtml/src/gumbo src utils
 CFLAGS		+=	-g -DUSE_KEYBOARD -DNETWORK
 
 CFLAGS		+=	-I$(TOPDIR)/libs/litehtml/include -I$(TOPDIR)/libs/litehtml/include/litehtml
 CFLAGS		+=	-I$(TOPDIR)/libs/litehtml/src/gumbo/include -I$(TOPDIR)/libs/litehtml/src/gumbo/include/gumbo
-CFLAGS		+=	-I$(TOPDIR)/libs/mujs
+
+# JavaScript engine specific configuration
+ifeq ($(JS_ENGINE),quickjs)
+    SOURCES += libs/quickjs
+    CFLAGS += -I$(TOPDIR)/libs/quickjs -DUSE_QUICKJS
+    LDFLAGS += -lm -ldl
+else
+    SOURCES += mujs_src
+    CFLAGS += -I$(TOPDIR)/libs/mujs -DUSE_MUJS
+endif
 
 LDFLAGS		+= -lcurl
 
@@ -18,4 +31,20 @@ SOURCES 	+= $(CHESTO_DIR)/libs/wiiu_kbd
 VPATH 		+= $(CHESTO_DIR)/libs/wiiu_kbd
 endif
 
-include libs/chesto/Makefile
+include libs/chesto/Makefile
+
+# Remove some interpreter-only QuickJS sources
+ifeq ($(JS_ENGINE),quickjs)
+EXCLUDE_QJS := qjs.c qjsc.c run-test262.c unicode_gen.c api-test.c fuzz.c ctest.c
+CFILES := $(filter-out $(EXCLUDE_QJS),$(CFILES))
+OFILES := $(filter-out $(EXCLUDE_QJS:.c=.o),$(OFILES))
+endif
+
+# Unless building JS engine tests, drop the standalone test suite (has its own main)
+ifeq ($(BUILD_JS_TESTS),1)
+  CPPFILES := $(filter-out main.cpp,$(CPPFILES))
+  OFILES := $(filter-out main.o,$(OFILES))
+else
+  CPPFILES := $(filter-out test_js_engines.cpp,$(CPPFILES))
+  OFILES := $(filter-out test_js_engines.o,$(OFILES))
+endif

README.md

@@ -1,19 +1,21 @@
 ## broccolini
 A lightweight web browser for video game consoles and other low-dependency devices. Written in SDL2 using [Chesto](https://github.com/fortheusers/chesto), it supports viewing simple websites.
 
-Broccolini uses [litehtml](https://github.com/litehtml/litehtml) as its rendering engine. litehtml is not intended to be used in a "full-fledged" browser, but it is usable!
+Broccolini uses [litehtml](https://github.com/litehtml/litehtml) as its rendering engine. litehtml is not intended to be used in a "full-fledged" browser, but it is usable! "Better than nothing" is the guiding philosophy of this project. It also have very limited JS support through either [quickjs](https://github.com/quickjs-ng/quickjs) or [mujs](https://github.com/ccxvii/mujs) backends (see build instructions for details).
 
 |       URL Webview        |      Tab Switcher        |
 :-------------------------:|:-------------------------:
 ![Wikipedia demo](https://github.com/user-attachments/assets/060d91ab-3f61-4bd0-9279-10c28ba5f0a5) | ![Tab overview](https://github.com/user-attachments/assets/101fd92f-f5bc-43dc-9a55-069e9e68ec53)
 
+Video demo on YT: https://www.youtube.com/watch?v=I9lm6_RgElE
 
 ### What Works
 - renders HTML and CSS!
 - inertia scrolling and touch-based navigation
 - async image downloading
 - history and bookmarks
 - tabs and tab image previews
+- very basic javascript support (via mujs or quickjs)
 - private browsing mode
 - restore previous tabs on re-launch
 - full qwerty on-screen keyboard
@@ -25,29 +27,29 @@ Broccolini uses [litehtml](https://github.com/litehtml/litehtml) as its renderin
 - add cursor to be controlled with the joystick
 - fix images drawing on top of everything
 - detailed history and managing bookmarks
-- store and use cookies, local storage, etc
+- store and use cookies, local storage, etc (has initial support, but not done)
 - handle POSTs and other non-GET requests
     - handle different error codes
 - video and audio embed support
-- simple javascript within pages
+- better javascript compatibility with more popular sites
 - improve HTML/CSS compatibility
     - no flexbox support
-    - form input elements
+    - form input elements (only button currently supported)
     - iframes and frames
-- probably many more things
+- probably many many more things
 
 ### Download
 There are no stable releases available yet, however there are in-development builds for each platform under [GH Actions](https://github.com/vgmoose/broccolini/actions).
 
 Nightly links: [Console builds](https://nightly.link/vgmoose/broccolini/workflows/main/main) - [PC builds](https://nightly.link/vgmoose/broccolini/workflows/pc-builds/main)
 
 ### Building for PC
-**As of this time, building must be done on a case-sensitive filesystem.** Requires SDL2 development libraries for your operating system, and a C++ toolchain.
+**As of this time, building must be done on a case-sensitive filesystem.** Requires SDL2 development libraries for your operating system, and a C++ toolchain. (replace `JS_ENGINE` with either `quickjs` or `mujs`)
 
 ```
 git clone --recursive git@github.com:vgmoose/broccolini.git
 cd broccolini
-make pc
+make pc JS_ENGINE=quickjs
 ```
 
 After building, `broccolini.bin` will be present in the current directory.

libs/quickjs

@@ -3,14 +3,14 @@
 
 Base64Image::Base64Image(std::string base64)
 {
-    // decode data
-    std::string decoded = base64_decode(base64);
-    CST_Surface *surface = IMG_Load_RW(SDL_RWFromMem((void*)decoded.c_str(), decoded.size()), 1);
-    loadFromSurfaceSaveToCache(base64, surface);
+	// decode data
+	std::string decoded = base64_decode(base64);
+	CST_Surface* surface = IMG_Load_RW(SDL_RWFromMem((void*)decoded.c_str(), decoded.size()), 1);
+	loadFromSurfaceSaveToCache(base64, surface);
 
-    // update size!
-    this->width = surface->w;
-    this->height = surface->h;
+	// update size!
+	this->width = surface->w;
+	this->height = surface->h;
 
-    CST_FreeSurface(surface);
+	CST_FreeSurface(surface);
 }

src/Base64Image.cpp

@@ -1,92 +1,86 @@
-#include <sstream>
-#include <iomanip>
 #include "ClockElement.hpp"
 #include "../utils/Utils.hpp"
+#include <iomanip>
+#include <sstream>
 
 ClockElement::ClockElement(bool useLightText, bool is12Hour)
 {
-    this->width = 50;
-    this->height = 50;
-
-    clockFont = CST_CreateFont();
-    CST_LoadFont(
-        clockFont,
-        RootDisplay::renderer,
-        RAMFS "res/fonts/OpenSans-Regular.ttf",
-        28,
-        useLightText ? CST_MakeColor(255, 255, 255, 255) : CST_MakeColor(0,0,0,255),
-        TTF_STYLE_NORMAL
-    );
-
-    this->touchable = true;
-    this->is12Hour = is12Hour;
-
-    this->action = [this]() {
-        this->is12Hour = !this->is12Hour;
-    };
+	this->width = 50;
+	this->height = 50;
+
+	clockFont = CST_CreateFont();
+	CST_LoadFont(clockFont, RootDisplay::renderer,
+		RAMFS "res/fonts/OpenSans-Regular.ttf", 28,
+		useLightText ? CST_MakeColor(255, 255, 255, 255)
+					 : CST_MakeColor(0, 0, 0, 255),
+		TTF_STYLE_NORMAL);
+
+	this->touchable = true;
+	this->is12Hour = is12Hour;
+
+	this->action = [this]()
+	{ this->is12Hour = !this->is12Hour; };
 }
 
-bool ClockElement::process(InputEvents* event) {
-    // get the current time
-    time_t now = time(0);
-    tm* ltm = localtime(&now);
-
-    // get the hour and minute
-    int hour = ltm->tm_hour;
-    int minute = ltm->tm_min;
-
-    // convert to 12 hour time but only in USA, Austrailia, and English-speaking parts of canada
-    // std::string locale = std::string(setlocale(LC_ALL, NULL));
-    // if (locale == "en_US.UTF-8" || locale == "en_AU.UTF-8" || locale == "en_CA.UTF-8") {
-    //     if (hour > 12) {
-    //         hour -= 12;
-    //     }
-    // }
-    // printf("Locale: %s\n", locale.c_str());
-    // TODO: this detection is not working
-
-    // convert to 12 hour time if the user has it enabled
-    if (is12Hour && hour > 12) {
-        hour -= 12;
-    }
-
-    // if the time has changed, update the values
-    if (hour != topVal || minute != botVal) {
-        topVal = hour;
-        botVal = minute;
-        return true;
-    }
-    
-    // no update
-    return Element::process(event);
+bool ClockElement::process(InputEvents* event)
+{
+	// get the current time
+	time_t now = time(0);
+	tm* ltm = localtime(&now);
+
+	// get the hour and minute
+	int hour = ltm->tm_hour;
+	int minute = ltm->tm_min;
+
+	// convert to 12 hour time but only in USA, Austrailia, and English-speaking
+	// parts of canada std::string locale = std::string(setlocale(LC_ALL, NULL));
+	// if (locale == "en_US.UTF-8" || locale == "en_AU.UTF-8" || locale ==
+	// "en_CA.UTF-8") {
+	//     if (hour > 12) {
+	//         hour -= 12;
+	//     }
+	// }
+	// printf("Locale: %s\n", locale.c_str());
+	// TODO: this detection is not working
+
+	// convert to 12 hour time if the user has it enabled
+	if (is12Hour && hour > 12)
+	{
+		hour -= 12;
+	}
+
+	// if the time has changed, update the values
+	if (hour != topVal || minute != botVal)
+	{
+		topVal = hour;
+		botVal = minute;
+		return true;
+	}
+
+	// no update
+	return Element::process(event);
 }
 
-void ClockElement::render(Element* parent) {
-    if (hidden) return;
+void ClockElement::render(Element* parent)
+{
+	if (hidden)
+		return;
 
-    auto renderer = RootDisplay::renderer;
+	auto renderer = RootDisplay::renderer;
 
-    std::ostringstream str1;
-    str1 << std::setw(2) << std::setfill('0') << topVal;
-    std::string topText = str1.str();
+	std::ostringstream str1;
+	str1 << std::setw(2) << std::setfill('0') << topVal;
+	std::string topText = str1.str();
 
-    std::ostringstream str2;
-    str2 << std::setw(2) << std::setfill('0') << botVal;
-    std::string bottomText = str2.str();
+	std::ostringstream str2;
+	str2 << std::setw(2) << std::setfill('0') << botVal;
+	std::string bottomText = str2.str();
 
-    CST_DrawFont(
-        clockFont, renderer,
-        this->x + width/2 - 15,
-        this->y + height/2 - 32,
-        topText.c_str()
-    );
+	CST_DrawFont(clockFont, renderer, this->x + width / 2 - 15,
+		this->y + height / 2 - 32, topText.c_str());
 
-    CST_DrawFont(
-        clockFont, renderer,
-        this->x + width/2 - 15,
-        this->y + height/2 - 6,
-        bottomText.c_str()
-    );
+	CST_DrawFont(clockFont, renderer, this->x + width / 2 - 15,
+		this->y + height / 2 - 6, bottomText.c_str());
 
-    Element::render(parent);
+	Element::render(parent);
 }

src/ClockElement.cpp

@@ -10,7 +10,7 @@ class ClockElement : public Element
 
 	CST_Font* clockFont = NULL;
 	int topVal = 12;
-	int botVal =  0;
+	int botVal = 0;
 
 	bool is12Hour = true;