feat!: use prefix $ instead of @ for props

Many js-frameworks (alpine, petite-vue) use `@` for events. The `$`
won't clash with it and indicate that the prop will be available as a
php variable in the snippet/layout.

examples/cli/site/snippets/menu.kirby

@@ -2,7 +2,7 @@
   <ul>
     <?php foreach($pages as $page): ?>
       <li>
-        <snippet:link @href="<?= $page->url() ?>">
+        <snippet:link $href="<?= $page->url() ?>">
           <?= $page->title() ?>
         </snippet:link>
       </li>

examples/cli/site/templates/default.kirby

@@ -10,7 +10,7 @@
   <h1><?= $site->title() ?></h1>
   <?php if (true): ?>
     <snippet:menu
-      @pages="<? $site->children() ?>"
+      $pages="<? $site->children() ?>"
     ></snippet:menu>
   <?php endif; ?>
 </body>

examples/vite/src/snippets/menu.kirby

@@ -2,7 +2,7 @@
   <ul>
     <?php foreach($pages as $page): ?>
       <li>
-        <snippet:link @href="<?= $page->url() ?>">
+        <snippet:link $href="<?= $page->url() ?>">
           <?= $page->title() ?>
         </snippet:link>
       </li>

examples/vite/src/templates/default.kirby

@@ -12,7 +12,7 @@
   <h1><?= $site->title() ?></h1>
   <?php if (true): ?>
     <snippet:menu
-      @pages="<? $site->children() ?>"
+      $pages="<? $site->children() ?>"
     ></snippet:menu>
   <?php endif; ?>
 </body>

packages/kirby-plugin/index.php

@@ -7,8 +7,7 @@ function __snippetData(array $attributes) {
   $attr = [];
 
   foreach($attributes as $key => $value) {
-    if (strpos($key, '@') === 0) {
-      // Remove the leading '@'
+    if (str_starts_with($key, '$')) {
       $name = substr($key, 1); 
       $data[$name] = $value;
     } else {

packages/kirby-plugin/tests/snippetDataTest.php

@@ -4,8 +4,8 @@
 
 it('handles snippet props and groups attributes', function() {
   $input = [
-    '@myProp' => 123,
-    '@myOtherProp' => 'test',
+    '$myProp' => 123,
+    '$myOtherProp' => 'test',
     'class' => 'red',
     'aria-label' => 'text'
   ];
@@ -23,7 +23,7 @@
 });
 
 it('provides an empty attr array', function() {
-  $input = ['@prop' => true];
+  $input = ['$prop' => true];
   $output = ['prop' => true, 'attr' => []];
 
   expect(__snippetData($input))->toEqual($output);

packages/npm-package/README.md

@@ -43,5 +43,5 @@ watchFiles('**/*.kirby', options)
 transformFiles('**/*.kirby', options)
 
 // or compile a string
-const result = transform(`<snippet:test @prop="<? true ?>" />`)
+const result = transform(`<snippet:test $prop="<? true ?>" />`)
 ```