@ramstack/alpinegear-router 1.2.3 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +40 -1
  2. package/package.json +6 -2
package/README.md CHANGED
@@ -15,7 +15,7 @@ To include the CDN version of this plugin, add the following `<script>` tag befo
15
15
  <script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-router@1/alpinegear-router.min.js" defer></script>
16
16
 
17
17
  <!-- alpine.js -->
18
- <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
18
+ <script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
19
19
  ```
20
20
 
21
21
  ### Using NPM
@@ -63,6 +63,8 @@ Alpine.start();
63
63
  <main x-router:outlet></main>
64
64
  </div>
65
65
  ```
66
+ 🚀 [Live demo | Alpine.js x-router: Basic example](https://jsfiddle.net/rameel/h9mygjcd/)<br />
67
+ 🚀 [Live demo | Alpine.js x-router: Nested router](https://jsfiddle.net/rameel/cjoza3ng/)
66
68
 
67
69
  ## History modes
68
70
  The router can be configured to use different history modes. There are two available modes:
@@ -334,6 +336,43 @@ You can find the source code for this plugin on GitHub:
334
336
 
335
337
  https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/router
336
338
 
339
+ ## Related projects
340
+
341
+ **[@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>
342
+ Provides a combined plugin that includes several useful directives.
343
+ This package aggregates multiple individual plugins, offering a convenient all-in-one bundle.
344
+ Included directives: `x-bound`, `x-format`, `x-fragment`, `x-match`, `x-template`, and `x-when`.
345
+
346
+ **[@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>
347
+ Provides the `x-bound` directive, which allows for two-way binding of input elements and their associated data properties.
348
+ It works similarly to the binding provided by [Svelte](https://svelte.dev/docs/element-directives#bind-property)
349
+ and also supports synchronizing values between two `Alpine.js` data properties.
350
+
351
+ **[@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>
352
+ Provides the `x-format` directive, which allows you to easily interpolate text using a template syntax similar to what's available in `Vue.js`.
353
+
354
+ **[@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>
355
+ Provides the `x-template` directive, which allows you to define a template once anywhere in the DOM and reference it by its ID.
356
+
357
+ **[@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>
358
+ Provides the `x-fragment` directive, which allows for fragment-like behavior similar to what's available in frameworks
359
+ like `Vue.js` or `React`, where multiple root elements can be grouped together.
360
+
361
+ **[@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>
362
+ Provides the `x-match` directive, which functions similarly to the `switch` statement in many programming languages,
363
+ allowing you to conditionally render elements based on matching cases.
364
+
365
+ **[@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>
366
+ Provides the `x-when` directive, which allows for conditional rendering of elements similar to `x-if`, but supports multiple root elements.
367
+
368
+ **[@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>
369
+ Provides the `x-destroy` directive, which is the opposite of `x-init` and allows you to hook into the cleanup phase
370
+ of any element, running a callback when the element is removed from the DOM.
371
+
372
+ **[@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>
373
+ Provides the `x-hotkey` directive, which allows you to easily handle keyboard shortcuts within your Alpine.js components or application.
374
+
375
+
337
376
  ## Contributions
338
377
  Bug reports and contributions are welcome.
339
378
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ramstack/alpinegear-router",
3
- "version": "1.2.3",
3
+ "version": "1.2.4",
4
4
  "description": "@ramstack/alpinegear-router provides routing-related directives for Alpine.js, enabling client-side navigation and routing functionality.",
5
5
  "author": "Rameel Burhan",
6
6
  "license": "MIT",
@@ -11,7 +11,11 @@
11
11
  },
12
12
  "keywords": [
13
13
  "alpine.js",
14
- "alpinejs"
14
+ "alpinejs",
15
+ "alpinejs-router",
16
+ "alpinejs-routing",
17
+ "alpinejs-directive",
18
+ "alpinejs-plugin"
15
19
  ],
16
20
  "main": "alpinegear-router.js",
17
21
  "module": "alpinegear-router.esm.js"