remove mix; add vite

Signed-off-by: envoyr <[email protected]>

.gitignore

@@ -22,8 +22,5 @@ fonts/
 templates/*
 !templates/index.html
 !templates/Froxlor/
-templates/Froxlor/assets/mix-manifest.json
-templates/Froxlor/assets/css/
-templates/Froxlor/assets/js/
-templates/Froxlor/assets/webfonts/
+templates/Froxlor/build/
 !templates/misc/

lib/Froxlor/UI/Panel/FroxlorTwig.php

@@ -92,6 +92,10 @@ public function getFunctions()
 			new TwigFunction('mix', [
 				$this,
 				'getMix'
+			]),
+			new TwigFunction('vite', [
+				$this,
+				'getVite'
 			])
 		];
 	}
@@ -167,4 +171,9 @@ public function getMix($mix = '')
 	{
 		return mix($mix);
 	}
+
+	public function getVite($basehref = '', $vite = [], $defaults = [])
+	{
+		return vite($basehref, $vite ?? $defaults);
+	}
 }

lib/functions.php

@@ -74,6 +74,7 @@ function old(string $identifier, string $default = null, string $session = null)
  * This file contains the hashed filenames of the assets.
  * It must be always placed in the theme assets folder.
  *
+ * @deprecated since 2.1.x no longer in use
  * @param $filename
  * @return mixed|string
  */
@@ -91,3 +92,45 @@ function mix($filename)
 	}
 	return $filename;
 }
+
+/**
+ * Loading the vite manifest file from given theme.
+ * This file contains the hashed filenames of the assets.
+ * It must be always placed in the theme assets folder.
+ *
+ * @param string|null $basehref
+ * @param array $filenames
+ * @return string
+ * @throws Exception
+ */
+function vite($basehref, array $filenames): string
+{
+	// Get the hashed filenames from the manifest file
+	$links = [];
+	foreach ($filenames as $filename) {
+		if (preg_match("/templates\/([^\/]+)(.*)/", $filename, $matches)) {
+			$assetDirectory = '/templates/' . $matches[1] . '/build/';
+			$viteManifest = dirname(__DIR__) . $assetDirectory . '/manifest.json';
+			$manifest = json_decode(file_get_contents($viteManifest), true);
+			$links[] = $basehref . ltrim($assetDirectory, '/') . $manifest[$filename]['file'];
+		} else {
+			$links = $filenames;
+		}
+	}
+
+	// Update the links to the correct html tags
+	foreach ($links as $key => $link) {
+		switch (pathinfo($link, PATHINFO_EXTENSION)) {
+			case 'css':
+				$links[$key] = '<link rel="stylesheet" href="'. $link . '">';
+				break;
+			case 'js':
+				$links[$key] = '<script src="' . $link . '" type="module"></script>';
+				break;
+			default:
+				throw new Exception('Unknown file extension for file '. $link .' from manifest.json');
+		}
+	}
+
+	return implode("\n", $links);
+}

lib/init.php

@@ -281,29 +281,21 @@
 }
 UI::twig()->addGlobal('nav_entries', $navigation);
 
-$js = "";
-$css = "";
-if (is_array($_themeoptions) && array_key_exists('js', $_themeoptions['variants'][$themevariant])) {
-	if (is_array($_themeoptions['variants'][$themevariant]['js'])) {
-		foreach ($_themeoptions['variants'][$themevariant]['js'] as $jsfile) {
-			if (file_exists('templates/' . $theme . '/assets/js/' . $jsfile)) {
-				$js .= '<script type="text/javascript" src="' . mix('templates/' . $theme . '/assets/js/' . $jsfile) . '"></script>' . "\n";
-			}
-		}
-	}
-	if (is_array($_themeoptions['variants'][$themevariant]['css'])) {
-		foreach ($_themeoptions['variants'][$themevariant]['css'] as $cssfile) {
-			if (file_exists('templates/' . $theme . '/assets/css/' . $cssfile)) {
-				$css .= '<link href="' . mix('templates/' . $theme . '/assets/css/' . $cssfile) . '" rel="stylesheet" type="text/css" />' . "\n";
+$theme_assets = [];
+foreach (['css', 'js'] as $asset) {
+	if (is_array($_themeoptions) && array_key_exists($asset, $_themeoptions['variants'][$themevariant])) {
+		if (is_array($_themeoptions['variants'][$themevariant][$asset])) {
+			foreach ($_themeoptions['variants'][$themevariant][$asset] as $assetfile) {
+				if (file_exists('templates/' . $theme . '/' . $assetfile)) {
+					$theme_assets[] .= 'templates/' . $theme . '/' . $assetfile;
+				}
 			}
 		}
 	}
 }
 
-UI::twig()->addGlobal('theme_js', $js);
-UI::twig()->addGlobal('theme_css', $css);
-unset($js);
-unset($css);
+UI::twig()->addGlobal('theme_assets', $theme_assets);
+unset($theme_assets);
 
 $action = Request::any('action');
 $page = Request::any('page', 'overview');

lng/ca.lng.php

@@ -2324,7 +2324,7 @@
 		]
 	],
 	'install' => [
-		'slogal' => 'Panell de gestió del servidor froxlor',
+		'slogan' => 'Panell de gestió del servidor froxlor',
 		'preflight' => 'Comprovació del sistema',
 		'critical_error' => 'Error crític',
 		'suggestions' => 'No requerit però recomanat',

lng/en.lng.php

@@ -2357,7 +2357,7 @@
 		],
 	],
 	'install' => [
-		'slogal' => 'froxlor Server Management Panel',
+		'slogan' => 'froxlor Server Management Panel',
 		'preflight' => 'System check',
 		'critical_error' => 'Critical error',
 		'suggestions' => 'Not required but recommended',

lng/es.lng.php

@@ -2304,7 +2304,7 @@
 		]
 	],
 	'install' => [
-		'slogal' => 'Panel de gestión del servidor froxlor',
+		'slogan' => 'Panel de gestión del servidor froxlor',
 		'preflight' => 'Comprobación del sistema',
 		'critical_error' => 'Error crítico',
 		'suggestions' => 'No requerido pero recomendado',