Add interactive examples

.editorconfig

@@ -7,5 +7,5 @@ indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.{json,html,yml}]
+[*.{md,json,html,yml}]
 indent_size = 2

.github/workflows/test.yml

@@ -3,13 +3,19 @@ name: Build & Test
 on:
   pull_request:
     branches: [main]
+    types: [opened, synchronize, reopened, ready_for_review]
+    paths:
+      - "**.js"
+      - "**.ts"
+      - "**.json"
 
 jobs:
   main:
+    if: ${{ !github.event.pull_request.draft }}
     name: "Build & Test"
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.55.0-noble
+      image: mcr.microsoft.com/playwright:v1.55.1-noble
       options: --user 1001:1001 # Run as non-root user for security
 
     steps:

README.md

@@ -7,34 +7,32 @@
 
 ## Included Plugins
 
-**[@ramstack/alpinegear-bound](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/bound)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/bound))<br>
+**[@ramstack/alpinegear-bound](https://www.npmjs.com/package/@ramstack/alpinegear-bound)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/bound))<br>
 Provides the `x-bound` directive, which allows for two-way binding of input elements and their associated data properties. It works similarly to the binding provided by [Svelte](https://svelte.dev/docs/element-directives#bind-property) and also supports synchronizing values between two `Alpine.js` data properties.
 
 ```html
 <div x-data="{ width: 0, height: 0, files: [] }">
-    <input &files="files" type="file" accept="image/jpeg" />
+  <input &files="files" type="file" accept="image/jpeg" />
 
-    <img &naturalwidth="width" &naturalheight="height" src="..." />
-
-    ...
-
-    For other examples, see README
+  <img &naturalwidth="width" &naturalheight="height" src="..." />
 
+  ...
+  For other examples, see README
 </div>
 ```
 
 
-**[@ramstack/alpinegear-format](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/format)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/format))<br>
+**[@ramstack/alpinegear-format](https://www.npmjs.com/package/@ramstack/alpinegear-format)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/format))<br>
 Provides `x-format` directive, which allows you to easily interpolate text using a template syntax similar to what's available in `Vue.js`.
 
 ```html
 <div x-data="{ message: 'Hello, World!'}" x-format>
-    <span>Message: {{ message }}</span>
+  <span>Message: {{ message }}</span>
 </div>
 ```
 
 
-**[@ramstack/alpinegear-template](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/template)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/template))<br>
+**[@ramstack/alpinegear-template](https://www.npmjs.com/package/@ramstack/alpinegear-template)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/template))<br>
 Provides `x-template` directive, allowing to define a template once anywhere in the DOM and reference it by its ID.
 
 This helps avoid duplicating templates, simplifying markup and making it easier to manage.
@@ -44,79 +42,79 @@ something that would otherwise be quite complex to implement.
 
 ```html
 <template id="treeitem">
-    <span x-format>{{ model.name }}</span>
-
-    <template x-if="model.list">
-        <ul>
-            <template x-for="item in model.list">
-                <li x-template="treeitem" x-data="{ model: item }"></li>
-            </template>
-        </ul>
-    </template>
+  <span x-format>{{ model.name }}</span>
+
+  <template x-if="model.list">
+    <ul>
+      <template x-for="item in model.list">
+        <li x-template="treeitem" x-data="{ model: item }"></li>
+      </template>
+    </ul>
+  </template>
 </template>
 
 <ul x-data="json">
-    <li x-template="treeitem"></li>
+  <li x-template="treeitem"></li>
 </ul>
 ```
 
 
-**[@ramstack/alpinegear-fragment](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/fragment)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/fragment))<br>
+**[@ramstack/alpinegear-fragment](https://www.npmjs.com/package/@ramstack/alpinegear-fragment)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/fragment))<br>
 Provides the `x-fragment` directive, allowing for fragment-like behavior similar to what's available in frameworks like `Vue.js` or `React`, where multiple root elements can be grouped together.
 
 It is particularly useful when you want to avoid wrapping elements in unnecessary container tags.
 
 ```html
 <dl>
-    <template x-for="item in items" :key="item.id">
-        <template x-fragment>
-            <dt x-text="item.term"></dt>
-            <dd x-text="item.description"></dd>
-        </template>
+  <template x-for="item in items" :key="item.term">
+    <template x-fragment>
+      <dt x-text="item.term"></dt>
+      <dd x-text="item.description"></dd>
     </template>
+  </template>
 </dl>
 ```
 
 
-**[@ramstack/alpinegear-match](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/match)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/match))<br>
+**[@ramstack/alpinegear-match](https://www.npmjs.com/package/@ramstack/alpinegear-match)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/match))<br>
 Provides the `x-match` directive, which functions similarly to the `switch` statement in many programming languages, allowing to conditionally render elements based on matching cases.
 
 ```html
 <template x-for="n in numbers">
-    <template x-match>
-        <div x-case="n % 3 == 0 && n % 5 == 0">Fizz Buzz</div>
-        <div x-case="n % 3 == 0">Fizz</div>
-        <div x-case="n % 5 == 0">Buzz</div>
-        <div x-default x-text="n"></div>
-    </template>
+  <template x-match>
+    <div x-case="n % 3 == 0 && n % 5 == 0">Fizz Buzz</div>
+    <div x-case="n % 3 == 0">Fizz</div>
+    <div x-case="n % 5 == 0">Buzz</div>
+    <div x-default x-text="n"></div>
+  </template>
 </template>
 ```
 
 
-**[@ramstack/alpinegear-when](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/when)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/when))<br>
+**[@ramstack/alpinegear-when](https://www.npmjs.com/package/@ramstack/alpinegear-when)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/when))<br>
 Provides the `x-when` directive, which allows for conditional rendering of elements similar to `x-if`, but supports multiple root elements.
 
 ```html
-<template x-for="item in items" :key="item.id">
-    <template x-when="item.visible">
-        <dt x-text="item.term"></dt>
-        <dd x-text="item.description"></dd>
-    </template>
+<template x-for="item in items" :key="item.term">
+  <template x-when="item.visible">
+    <dt x-text="item.term"></dt>
+    <dd x-text="item.description"></dd>
+  </template>
 </template>
 ```
 
 
-**[@ramstack/alpinegear-hotkey](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/hotkey)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/hotkey))<br>
+**[@ramstack/alpinegear-hotkey](https://www.npmjs.com/package/@ramstack/alpinegear-hotkey)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/hotkey))<br>
 Provides the `x-hotkey` directive, allowing easily handle keyboard shortcuts.
 
 ```html
 <div x-hotkey.shift+f.window="console.log($event.hotkey)">
-    Hello, World!
+  Hello, World!
 </div>
 ```
 
 
-**[@ramstack/alpinegear-router](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/router)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/router))<br>
+**[@ramstack/alpinegear-router](https://www.npmjs.com/package/@ramstack/alpinegear-router)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/router))<br>
 Provides routing-related directives, enabling client-side navigation and routing functionality.
 
 ```html
@@ -147,19 +145,19 @@ Provides routing-related directives, enabling client-side navigation and routing
 ```
 
 
-**[@ramstack/alpinegear-destroy](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/destroy)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/destroy))<br>
+**[@ramstack/alpinegear-destroy](https://www.npmjs.com/package/@ramstack/alpinegear-destroy)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/destroy))<br>
 Provides `x-destroy` provides directive, which is the opposite of `x-init` and allows you to execute code when an element is removed from the DOM.
 
 ```html
+
 <template x-if="show">
-    <div x-destroy="destroyed = true">
-        <p>Hello, World!</p>
-    </div>
+  <div x-destroy="destroyed = true">
+    <p>Hello, World!</p>
+  </div>
 </template>
 ```
 
-
-**[@ramstack/alpinegear-main](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/main)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/main))<br>
+**[@ramstack/alpinegear-main](https://www.npmjs.com/package/@ramstack/alpinegear-main)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/main))<br>
 Is a combined plugin that includes several directives, providing a convenient all-in-one package.