Kürzere Kirby Snippets

Note for English subscribers: This feed now includes blog posts in English and German. If you want to subscribe to my English posts only, you can use my new English blog feed.

Meine Webseite läuft seit gestern mit Kirby. 🥳 Weil ich vom JavaScript-Ökosystem weniger Syntax für Komponenten gewohnt bin als Kirby nativ anbietet, hab ich mir bei der Neuimplementierung meiner Webseite Funktionen geschrieben, um etwas weniger Zeichen tippen und lesen zu müssen.

Vergleich von Komponenten in Kirby und JSX

Hier ist eine typische Komponente mit JSX, wie ich ich sie vorher in Astro oder Svelte geschrieben hab:

<Icon icon="link-simple-bold" size={16} />

Und hier die gleiche Komponente in Kirby („Snippets“ genannt):

<?php snippet('icon', ['icon' => 'link-simple-bold', 'size' => 16]) ?>

Wenn die Komponente die Möglichkeit haben soll Elemente oder HTML entgegen zu nehmen, wird Kirby’s Syntax noch komplexer:

<?php snippet('container', ['class' => 'link-simple-bold'], slots: true) ?>
  <p>Ich bin ein Element</p>
<?php endsnippet() ?>

Durch den direkten Umstieg von Astro auf Kirby, waren die vielen Zeichen nur um Eigenschaften an Komponenten zu übergeben, eher störend. Sie lenken auch visuell zu sehr von den Werten ab.

Kürzere Kirby Snippets

Mit meinen Snippet-Funktionen, die einfach die Argumente an Kirby’s snippet() Funktion weitergeben, sieht das Resultat so aus:

// vorher
<?php snippet('icon', ['icon' => 'link-simple-bold', 'size' => 16]) ?>

// nachher
<?= s('icon', icon: 'link-simple-bold', size: 16) ?>

Oder für Komponenten mit Slots:

// vorher
<?php snippet('container', ['class' => 'full-width'], slots: true) ?>
  <p>Ich bin ein Element</p>
<?php endsnippet() ?>

// nachher
<?php open('container', class: 'full-width']) ?>
  <p>Ich bin ein Element</p>
<?php close() ?>

Natürlich hätte man auch hier einen kurzen Buchstaben verwenden können, aber ich fand open und close passender für eine Komponente, die geöffnet und geschlossen werden muss. Ich hab vorher in der PHP-Dokumentation nachgeschaut und es scheint diese Funktionen global auch nicht zu geben.

Wird Kirby die Syntax ändern?

In Kirby’s Discord hatte ich eine alte Nachricht gelesen, dass man die API von Snippets wohl nicht ändern wird, um kompatibel mit bestehender Software zu bleiben.

Ich kann den Grund verstehen, allerdings ist PHP 8 im November 2020 erschienen. Fünf Jahre später wäre es aus meiner Sicht okay, mit einem neuen Major-Release, die Möglichkeiten der Sprache auch zu nutzen. Das wäre auch ohne Breaking Changes möglich, wenn man z.B. neue Snippet-Funktionen hinzufügt ohne alte zu entfernen. Das würde eine langsame Migration über die Zeit ermöglichen. Zusätzlich könnte man (wie z.B. viele JavaScript-Tools) ein CLI-Script anbieten, das die Migration automatisiert im Code durchführt.

So oder so ist Kirby wieder sehr flexibel und es hat wie immer nur wenige Minuten gedauert, bis ich eine Lösung für mich gefunden hatte. Bis eine kürzere Version von Snippets in Kirby landet, werde ich meine kurzen Funktionen nutzen, um das Lesen und Schreiben von Komponenten noch leichter zu machen.

Quellcode der kürzeren Kirby Snippets

Ich hatte erst selbst eine Funktion geschrieben, bin dann auf eine ähnliche Implementierung von Adam Kiss gestoßen und habe danach eine Kombination aus beiden erstellt. Wenn du auch die kürzere Version von Snippets in deinen Kirby-Projekten möchtest, kannst du dir diesen Code kopieren:

if (! function_exists('s')) {
  /**
   * @param string $snippetName
   * @param mixed ...$data
   */
  function s($snippetName, ...$data): string {
    return snippet($snippetName, data: $data, return: true, slots: false);
  }
}

if (! function_exists('open')) {
  /**
   * @param string $snippetName
   * @param mixed ...$data
   */
  function open($snippetName, ...$data): Kirby\Template\Snippet {
    return snippet($snippetName, data: $data, return: true, slots: true);
  }
}

if (! function_exists('close')) {
  function close() {
    return endsnippet();
  }
}