fix: Panel browser requirements

Author: distantnative

.gitattributes

@@ -13,12 +13,13 @@ psalm.xml.dist export-ignore
 tests/ export-ignore
 
 # panel
+# .browserslistrc is intentionally not ignored, it is read at runtime
 panel/.env.example export-ignore
+panel/.gitignore export-ignore
 panel/.prettierignore export-ignore
 panel/.prettierrc.json export-ignore
 panel/dist/ui export-ignore
-panel/eslint.config.mjs export-ignore
-panel/jsconfig.json export-ignore
+panel/eslint.config.js export-ignore
 panel/lab export-ignore
 panel/package-lock.json export-ignore
 panel/package.json export-ignore
@@ -27,8 +28,8 @@ panel/README.md export-ignore
 panel/scripts export-ignore
 panel/src export-ignore
 panel/tests export-ignore
-panel/vite.config.mjs export-ignore
-panel/vitest.setup.js export-ignore
+panel/tsconfig.json export-ignore
+panel/vite.config.ts export-ignore
 
 # other
 .tx export-ignore

panel/.browserslistrc

@@ -0,0 +1,16 @@
+# The single source of truth for Panel browser support.
+# Read by vite.config.ts (build target) and views/browser.php.
+#
+# Policy: Baseline "widely available" (roughly 30 months after a feature
+# has landed in all core browsers) when the major version is released.
+# Recompute for the next major and paste the result below:
+# npx baseline-browser-mapping --widely-available-on-date YYYY-MM-DD --include-downstream-browsers
+#
+Chrome >= 124
+ChromeAndroid >= 124
+Edge >= 124
+Firefox >= 125
+Opera >= 110
+Safari >= 17.5
+iOS >= 17.5
+Android >= 124

panel/README.md

@@ -69,3 +69,9 @@ To upate the dist files
 ```
 npm run build
 ```
+
+## Browser support
+
+`.browserslistrc` is the single source of truth. It feeds the Vite build target (`createTarget()` in `vite.config.ts`) and the "browser too old" page ( `views/browser.php`). Don't repeat the versions anywhere else.
+
+To move the floor for the next major, see the instructions in `.browserslistrc`.

panel/package.json

@@ -54,16 +54,6 @@
 		"vue-docgen-api": "^4.79.2",
 		"vue-tsc": "^3.3.7"
 	},
-	"browserslist": [
-		"Chrome >= 123",
-		"ChromeAndroid >= 126",
-		"Edge >= 123",
-		"Firefox >= 120",
-		"Opera >= 109",
-		"Safari >= 17.5",
-		"iOS >= 17.5",
-		"Android >= 126"
-	],
 	"allowScripts": {
 		"fsevents@2.3.3": true
 	}

panel/vite.config.ts

@@ -1,4 +1,5 @@
 /* eslint-env node */
+import fs from "fs";
 import path from "path";
 
 import {
@@ -102,6 +103,41 @@ function createPlugins(mode: string): Plugin[] {
 	return plugins;
 }
 
+/**
+ * Returns the build target, based on `.browserslistrc`
+ */
+function createTarget(): string[] {
+	const engines: Record<string, string> = {
+		Chrome: "chrome",
+		Edge: "edge",
+		Firefox: "firefox",
+		iOS: "ios",
+		Opera: "opera",
+		Safari: "safari"
+	};
+
+	const file = fs.readFileSync(
+		path.resolve(__dirname, ".browserslistrc"),
+		"utf-8"
+	);
+
+	const target: string[] = [];
+
+	for (const line of file.split("\n")) {
+		const match = line.trim().match(/^(\w+)\s*>=\s*([\d.]+)$/);
+
+		if (match !== null && engines[match[1]] !== undefined) {
+			target.push(engines[match[1]] + match[2]);
+		}
+	}
+
+	if (target.length === 0) {
+		throw new Error("No build target could be read from .browserslistrc");
+	}
+
+	return target;
+}
+
 /**
  * Returns vitest configuration
  */
@@ -149,7 +185,7 @@ export default defineConfig(({ mode }) => {
 		plugins,
 		base: "./",
 		build: {
-			target: ["chrome123", "edge123", "firefox120", "safari17.5", "ios17.5"],
+			target: createTarget(),
 			cssCodeSplit: false,
 			rolldownOptions: {
 				checks: { pluginTimings: false },

src/Panel/Panel.php

@@ -58,6 +58,31 @@ public function assets(): Assets
 		return $this->assets ??= new Assets();
 	}
 
+	/**
+	 * Minimum supported browser versions, read from
+	 * the browserslist config the Panel is built against
+	 * @since 6.0.0
+	 */
+	public function browsers(): array
+	{
+		$file = $this->kirby->root('panel') . '/.browserslistrc';
+
+		if (is_file($file) === false) {
+			return [];
+		}
+
+		$browsers = [];
+		$lines    = file($file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+
+		foreach ($lines as $line) {
+			if (preg_match('!^(\w+)\s*>=\s*([\d.]+)$!', trim($line), $match) === 1) {
+				$browsers[$match[1]] = $match[2];
+			}
+		}
+
+		return $browsers;
+	}
+
 	/**
 	 * Redirect to a Panel url
 	 *

src/Panel/Router.php

@@ -164,7 +164,10 @@ public function routes(Areas|null $areas = null): array
 				'pattern' => 'browser',
 				'auth'    => false,
 				'action'  => fn () => new Response(
-					Tpl::load($kirby->root('kirby') . '/views/browser.php')
+					Tpl::load(
+						$kirby->root('kirby') . '/views/browser.php',
+						['browsers' => $panel->browsers()]
+					)
 				),
 			]
 		];

views/browser.php

@@ -1,3 +1,18 @@
+<?php
+
+use Kirby\Toolkit\Html;
+
+/**
+ * @var array<string, string> $browsers
+ */
+
+$list = [];
+
+foreach ($browsers as $browser => $version) {
+	$list[] = Html::encode($browser . ' ' . $version);
+}
+
+?>
 <?php include __DIR__ . '/snippets/header.php' ?>
 
   <p class="notice">
@@ -7,14 +22,11 @@
 
   <div class="admin-advice">
     <p>
-        <strong>Fetch</strong><br>
-        We use Javascript's new Fetch API. You can find a list of supported browsers for this feature on
-        <strong><a href="https://caniuse.com/#feat=fetch">caniuse.com</a></strong>
+      The Panel needs one of these browsers or higher:<br>
+      <strong><?= implode(', ', $list) ?></strong>
     </p>
     <p>
-        <strong>CSS Grid</strong><br>
-        We use CSS Grids for all our layouts. You can find a list of supported browsers for this feature on
-        <strong><a href="https://caniuse.com/#feat=css-grid">caniuse.com</a></strong>
+      Please update your browser or switch to a different one.
     </p>
   </div>
 

views/panel.php

@@ -27,11 +27,13 @@
 
 	<script nonce="<?= $nonce ?>">
 	if (
-			!window.CSS ||
-			window.CSS.supports("display", "grid") === false ||
-			!window.fetch
+		!window.CSS ||
+		window.CSS.supports("color", "light-dark(#fff, #000)") === false ||
+		!window.HTMLScriptElement.supports ||
+		window.HTMLScriptElement.supports("importmap") === false ||
+		!window.Promise.withResolvers
 	) {
-		window.location.href = "<?= $panelUrl ?>browser";
+		window.location.replace("<?= $panelUrl ?>browser");
 	}
 	</script>