Manage JS frontend libraries with yarn

Either Composer managed those before,
or those were checked into git.

Now we track those with `yarn`:
- Coloris
- JQuery debounce
- Monaco editor
- Bootstrap-toggle
- File-saver
- d3
- nvd3
- Select2

D3 has a newer release but we can't upgrade because of the nvd3 which needs
this specific Major version.

Author: vmcj

.github/jobs/baseinstall.sh

@@ -28,6 +28,13 @@ composer install --no-scripts |tee "$ARTIFACTS"/composer_out.txt
 cd ..
 section_end
 
+section_start "Install JS frontend dependencies"
+cd webapp
+apt-get update; apt-get install -y yarnpkg
+yarnpkg install
+cd ..
+section_end
+
 section_start "Set simple admin password"
 echo "password" > ./etc/initial_admin_password.secret
 echo "default login admin password password" > ~/.netrc

.github/workflows/codeql-analysis.yml

@@ -42,6 +42,12 @@ jobs:
         cd webapp
         composer install --no-scripts
 
+    - name: Install frontend dependencies
+      if: ${{ contains(env.COMPILED, matrix.language) }}
+      run: |
+        cd webapp
+        yarnpkg install
+
     - name: Configure Makefile
       if: ${{ contains(env.COMPILED, matrix.language) }}
       run: |

Makefile

@@ -6,7 +6,7 @@ export TOPDIR = $(shell pwd)
 
 REC_TARGETS=build domserver install-domserver judgehost install-judgehost \
             docs install-docs inplace-install inplace-uninstall maintainer-conf \
-            maintainer-install composer-dependencies composer-dependencies-dev
+            maintainer-install dependencies dependencies-dev
 
 # Global Makefile definitions
 include $(TOPDIR)/Makefile.global
@@ -54,7 +54,7 @@ docs: paths.mk config
 install-domserver: domserver domserver-create-dirs
 install-judgehost: judgehost judgehost-create-dirs
 install-docs: docs-create-dirs
-dist: configure composer-dependencies
+dist: configure dependencies
 
 domserver-configure:
 ifneq "$(DOMSERVER_BUILD_ENABLED)" "yes"
@@ -98,8 +98,8 @@ dist:                       SUBDIRS=        lib sql       misc-tools
 clean:                      SUBDIRS=etc doc lib sql judge misc-tools webapp
 distclean:                  SUBDIRS=etc doc lib sql judge misc-tools webapp
 maintainer-clean:           SUBDIRS=etc doc lib sql judge misc-tools webapp
-composer-dependencies:      SUBDIRS=                                 webapp
-composer-dependencies-dev:  SUBDIRS=                                 webapp
+dependencies:               SUBDIRS=                                 webapp
+dependencies-dev:           SUBDIRS=                                 webapp
 
 domserver-create-dirs:
 	$(INSTALL_DIR) $(addprefix $(DESTDIR),$(domserver_dirs))
@@ -191,8 +191,8 @@ paths.mk:
 	@exit 1
 
 # Configure for running in source tree, not meant for normal use:
-maintainer-conf: inplace-conf-common composer-dependencies-dev
-inplace-conf: inplace-conf-common composer-dependencies
+maintainer-conf: inplace-conf-common dependencies-dev
+inplace-conf: inplace-conf-common dependencies
 inplace-conf-common: dist
 	./configure $(subst 1,-q,$(QUIET)) --prefix=$(CURDIR) \
 	            --with-domserver_root=$(CURDIR) \
@@ -385,5 +385,4 @@ clean-autoconf:
 .PHONY: $(addsuffix -create-dirs,domserver judgehost docs) check-root \
         $(addprefix inplace-,conf conf-common install uninstall) \
         $(addprefix maintainer-,conf install) clean-autoconf config distdocs \
-        composer-dependencies composer-dependencies-dev \
-        coverity-conf coverity-build
+        dependencies dependencies-dev coverity-conf coverity-build

doc/manual/develop.rst

@@ -41,12 +41,12 @@ already listed under
 
   sudo apt install autoconf automake bats \
     python3-sphinx python3-sphinx-rtd-theme fontconfig python3-yaml \
-    latexmk texlive-latex-recommended texlive-latex-extra tex-gyre
+    latexmk yarnpkg texlive-latex-recommended texlive-latex-extra tex-gyre
 
 For Fedora use::
 
   sudo dnf install git autoconf automake bats \
-    sphinx-build python3-sphinx_rtd_theme latexmk texlive-cmap \
+    sphinx-build python3-sphinx_rtd_theme latexmk yarnpkg texlive-cmap \
     texlive-metafont texlive-tex-gyre texlive-fncychap texlive-wrapfig \
     texlive-capt-of texlive-framed texlive-upquote texlive-needspace \
     texlive-tabulary texlive-parskip texlive-oberdiek texlive-makeindex \

etc/domserver-static.php.in

@@ -8,14 +8,15 @@
 define('DOMJUDGE_VERSION', '@DOMJUDGE_VERSION@');
 define('DOMJUDGE_INSTALL_METHOD', '@INSTALL_METHOD@');
 
-define('BINDIR',    '@domserver_bindir@');
-define('ETCDIR',    '@domserver_etcdir@');
-define('WEBAPPDIR', '@domserver_webappdir@');
-define('LIBDIR',    '@domserver_libdir@');
-define('SQLDIR',    '@domserver_sqldir@');
-define('VENDORDIR', '@domserver_webappdir@/vendor');
-define('LOGDIR',    '@domserver_logdir@');
-define('RUNDIR',    '@domserver_rundir@');
-define('TMPDIR',    '@domserver_tmpdir@');
+define('BINDIR',         '@domserver_bindir@');
+define('ETCDIR',         '@domserver_etcdir@');
+define('WEBAPPDIR',      '@domserver_webappdir@');
+define('LIBDIR',         '@domserver_libdir@');
+define('SQLDIR',         '@domserver_sqldir@');
+define('VENDORDIR',      '@domserver_webappdir@/vendor');
+define('NODEMODULESDIR', '@domserver_webappdir@/node_modules');
+define('LOGDIR',         '@domserver_logdir@');
+define('RUNDIR',         '@domserver_rundir@');
+define('TMPDIR',         '@domserver_tmpdir@');
 
-define('BASEURL',   '@BASEURL@');
+define('BASEURL',        '@BASEURL@');

webapp/.gitignore

@@ -8,6 +8,7 @@
 /var/log/*
 !var/log/.gitkeep
 /vendor/
+/node_modules/
 
 ###> phpunit/phpunit ###
 /phpunit.xml

webapp/Makefile

@@ -11,6 +11,8 @@ SUBDIRS = config
 
 domserver: composer-dump-autoload
 
+dependencies: composer-dependencies node-dependencies
+
 # Install PHP dependencies
 composer-dependencies:
 ifeq (, $(shell command -v composer 2> /dev/null))
@@ -20,6 +22,8 @@ endif
 # not generated yet, which is needed to run the post-install scripts.
 	composer $(subst 1,-q,$(QUIET)) install --prefer-dist -o -a --no-scripts --no-plugins
 
+dependencies-dev: composer-dependencies-dev node-dependencies
+
 composer-dependencies-dev:
 	composer $(subst 1,-q,$(QUIET)) install --prefer-dist --no-scripts --no-plugins
 
@@ -36,6 +40,13 @@ vendor/autoload_runtime.php:
 composer-dump-autoload-dev:
 	composer $(subst 1,-q,$(QUIET)) dump-autoload
 
+node-dependencies:
+ifeq (, $(shell command -v yarn || command -v yarnpkg 2> /dev/null))
+	$(error "neither 'yarnpkg' nor 'yarn' command found in $(PATH), install it via your package manager or https://yarnpkg.com/cli/node")
+endif
+	@YARN_CMD=$(shell command -v yarn || command -v yarnpkg); \
+  $$YARN_CMD install
+
 # Run Symfony in dev mode (for maintainer-mode):
 .env.local:
 	@echo "Creating file '$@'..."
@@ -58,7 +69,7 @@ install-domserver:
 # This must be done first to install with the rest.
 	$(MAKE) copy-bundle-assets
 	$(INSTALL_DIR) $(DESTDIR)$(domserver_webappdir);
-	for d in bin config migrations public resources src templates tests vendor; do \
+	for d in bin config migrations public resources src templates tests vendor node_modules; do \
 		$(call install_tree,$(DESTDIR)$(domserver_webappdir),$$d) ; \
 	done
 # Add Symlink to Symfony console that is in the standard path
@@ -78,5 +89,5 @@ maintainer-clean-l:
 		done ; \
 	done
 
-.PHONY: composer-dump-autoload composer-dump-autoload-dev \
-        copy-bundle-assets
+.PHONY: composer-dump-autoload composer-dump-autoload-dev copy-bundle-assets \
+        composer-dependencies composer-dependencies-dev node-dependencies

webapp/composer.json

@@ -63,24 +63,20 @@
 		"doctrine/doctrine-fixtures-bundle": "^4.0",
 		"doctrine/doctrine-migrations-bundle": "^3.2",
 		"doctrine/orm": "^2.14",
-		"eligrey/filesaver": "2.*",
 		"enshrined/svg-sanitize": "^0.22.0",
 		"fortawesome/font-awesome": "6.*",
 		"friendsofsymfony/rest-bundle": "^3.5",
 		"ircmaxell/password-compat": "*",
 		"jms/serializer-bundle": "^5.2",
 		"knplabs/knp-paginator-bundle": "^6.6",
 		"league/commonmark": "^2.3",
-		"mbostock/d3": "^3.5",
 		"nelmio/api-doc-bundle": "^5.0",
 		"nelmio/cors-bundle": "^2.4",
-		"novus/nvd3": "^1.8",
 		"phpdocumentor/reflection-docblock": "^5.3",
 		"phpstan/phpdoc-parser": "^2.0",
 		"promphp/prometheus_client_php": "^2.6",
 		"ramsey/uuid": "^4.2",
 		"riverline/multipart-parser": "^2.1",
-		"select2/select2": "4.*",
 		"sentry/sentry-symfony": "^5.0",
 		"symfony/asset": "6.4.*",
 		"symfony/browser-kit": "6.4.*",

webapp/composer.lock

@@ -9,6 +9,7 @@ parameters:
     domjudge.libdir: @domserver_libdir@
     domjudge.sqldir: @domserver_sqldir@
     domjudge.vendordir: @domserver_webappdir@/vendor
+    domjudge.nodemodulesdir: @domserver_webappdir@/node_modules
     domjudge.logdir: @domserver_logdir@
     domjudge.rundir: @domserver_rundir@
     domjudge.tmpdir: @domserver_tmpdir@