Allow panel plugins to load index.dev.mjs instead of index.js (needed by kirbyup)

src/Cache/FileCache.php

@@ -79,19 +79,19 @@ protected function file(string $key): string
 				case '/':
 					break;
 
-				// backslashes get their own marker in the path
-				// to differentiate the cache key from one with forward slashes
+					// backslashes get their own marker in the path
+					// to differentiate the cache key from one with forward slashes
 				case '\\':
 					$keyParts[] = '_backslash';
 					break;
 
-				// empty part means two slashes in a row;
-				// special marker like for backslashes
+					// empty part means two slashes in a row;
+					// special marker like for backslashes
 				case '':
 					$keyParts[] = '_empty';
 					break;
 
-				// an actual path segment
+					// an actual path segment
 				default:
 					// check if the segment only contains safe characters;
 					// underscores are *not* safe to guarantee uniqueness

src/Cms/Email.php

@@ -123,7 +123,7 @@ protected function template(): void
 					$this->props['body']['text'] = $text->render($data);
 				}
 
-				// fallback to single email text template
+			// fallback to single email text template
 			} elseif ($text->exists()) {
 				$this->props['body'] = $text->render($data);
 			} else {

src/Database/Sql.php

@@ -708,11 +708,11 @@ public function splitIdentifier($table, $identifier): array
 			case 1:
 				return [$table, $this->unquoteIdentifier($parts[0])];
 
-			// qualified identifier
+				// qualified identifier
 			case 2:
 				return [$this->unquoteIdentifier($parts[0]), $this->unquoteIdentifier($parts[1])];
 
-			// every other number is an error
+				// every other number is an error
 			default:
 				throw new InvalidArgumentException('Invalid identifier ' . $identifier);
 		}

src/Filesystem/Mime.php

@@ -61,6 +61,7 @@ class Mime
 		'mid'   => 'audio/midi',
 		'midi'  => 'audio/midi',
 		'mif'   => 'application/vnd.mif',
+		'mjs'   => 'text/javascript',
 		'mov'   => 'video/quicktime',
 		'movie' => 'video/x-sgi-movie',
 		'mp2'   => 'audio/mpeg',
@@ -133,11 +134,15 @@ public static function fix(string $file, string $mime = null, string $extension
 			'text/plain' => [
 				'css'  => 'text/css',
 				'json' => 'application/json',
+				'mjs' => 'text/javascript',
 				'svg'  => ['Kirby\Filesystem\Mime', 'fromSvg'],
 			],
 			'text/x-asm' => [
 				'css' => 'text/css'
 			],
+			'text/x-java' => [
+				'mjs' => 'text/javascript',
+			],
 			'image/svg' => [
 				'svg' => 'image/svg+xml'
 			]

src/Panel/Document.php

@@ -72,6 +72,7 @@ public static function assets(): array
 				'custom'  => static::customAsset('panel.css'),
 			],
 			'icons' => static::favicon($url),
+			'imports' => $plugins->read('mjs'),
 			'js' => [
 				'vendor'       => [
 					'nonce' => $nonce,

src/Panel/Plugins.php

@@ -3,7 +3,9 @@
 namespace Kirby\Panel;
 
 use Kirby\Cms\App;
+use Kirby\Data\Json;
 use Kirby\Filesystem\F;
+use Kirby\Toolkit\A;
 use Kirby\Toolkit\Str;
 
 /**
@@ -42,6 +44,8 @@ public function files(): array
 		foreach (App::instance()->plugins() as $plugin) {
 			$this->files[] = $plugin->root() . '/index.css';
 			$this->files[] = $plugin->root() . '/index.js';
+			// used by kirbyup during plugin development
+			$this->files[] = $plugin->root() . '/index.dev.mjs';
 		}
 
 		return $this->files;
@@ -75,9 +79,25 @@ public function read(string $type): string
 	{
 		$dist = [];
 
-		foreach ($this->files() as $file) {
+		$files = $this->files();
+
+		// filter out index.js files that have an index.dev.mjs counterpart (which takes precedence)
+		if ($type === 'js') {
+			$files = A::filter(
+				$files,
+				fn ($f) => !(
+					Str::endsWith($f, 'index.js') && F::exists(preg_replace('/\.js$/', '.dev.mjs', $f))
+				)
+			);
+		}
+
+		foreach ($files as $file) {
 			if (F::extension($file) === $type) {
 				if ($content = F::read($file)) {
+					if ($type === 'mjs') {
+						$content = F::uri($file);
+					}
+
 					if ($type === 'js') {
 						$content = trim($content);
 
@@ -92,6 +112,16 @@ public function read(string $type): string
 			}
 		}
 
+		if ($type === 'mjs') {
+			if (empty($dist)) {
+				return '';
+			}
+
+			$modules = Json::encode($dist);
+			$modulePromise = "Promise.all($modules.map(url => import(url)))";
+			return "try { await $modulePromise } catch (e) { console.error(e) }" . PHP_EOL;
+		}
+
 		return implode(PHP_EOL . PHP_EOL, $dist);
 	}
 

src/Toolkit/Html.php

@@ -594,7 +594,7 @@ public static function youtube(string $url, array $options = [], array $attr = [
 
 				break;
 
-			// regular video URLs
+				// regular video URLs
 			case 'watch':
 				if ($isYoutubeId($query->v) === true) {
 					$src = $host . '/' . $query->v;

views/panel.php

@@ -38,6 +38,12 @@
   <link nonce="<?= $nonce ?>" rel="<?= $rel ?>" href="<?= Url::to($icon['url']) ?>" type="<?= $icon['type'] ?>">
   <?php endforeach ?>
 
+  <?php foreach ($assets['js'] as $js): ?>
+    <?php if (($js['type'] ?? null) === 'module'): ?>
+    <link rel="modulepreload" href="<?= $js['src'] ?>">
+    <?php endif ?>
+  <?php endforeach ?>
+
   <base href="<?= $panelUrl ?>">
 </head>
 <body>
@@ -59,8 +65,12 @@
     window.fiber = json;
   </script>
 
-  <?php foreach ($assets['js'] as $js): ?>
-  <?= Html::tag('script', '', $js) . PHP_EOL ?>
+  <?php foreach ($assets['js'] as $key => $js): ?>
+    <?php if ($key === 'index'): ?>
+    <?= Html::tag('script', [$assets['imports'], "import('{$js['src']}')"], A::without($js, 'src')) . PHP_EOL ?>
+    <?php else: ?>
+    <?= Html::tag('script', '', $js) . PHP_EOL ?>
+    <?php endif ?>
   <?php endforeach ?>
 
 </body>