Merge pull request #5 from marcreichel/magic-function

✨ Add magic function

Author: marcreichel

README.md

@@ -55,6 +55,8 @@ window.Alpine.start();
 
 ## 🪄 Usage
 
+### Directive
+
 To convert a Date to the human-readable distance from now, add the `x-data` and `x-timeago` directives to an element and
 pass the date (as a `Date` or a string in ISO format) to the `x-timeago` directive. The directive will update the output
 every 30 seconds.
@@ -66,22 +68,52 @@ every 30 seconds.
 Under the hood the directive is using [`formatDistanceToNow`](https://date-fns.org/v2.28.0/docs/formatDistanceToNow)
 from `date-fns`.
 
-### No suffix
+#### No suffix
 
 If you do not want the "[diff] ago" suffix or "in [diff]" prefix, you can use the `x-timeago.pure` modifier.
 
 ```html
 <span x-data="{ date: new Date() }" x-timeago.pure="date"></span>
 ```
 
-### Include seconds
+#### Include seconds
 
 Distances less than a minute are more detailed.
 
 ```html
 <span x-data="{ date: new Date() }" x-timeago.seconds="date"></span>
 ```
 
+### Magic function
+
+As of version 1.3.0 of this package a `$timeago` magic function is included which will return the human-readable
+distance from now.
+
+```html
+<span x-data="{ date: new Date() }" x-text="$timeago(date)"></span>
+```
+
+> **Note**: Using the magic function the distance does not get updated automatically. You have to update it yourself if
+> you want to.
+
+#### No suffix
+
+If you do not want the "[diff] ago" suffix or "in [diff]" prefix, you can provide `true` as the second parameter to the
+function.
+
+```html
+<span x-data="{ date: new Date() }" x-text="$timeago(date, true)"></span>
+```
+
+#### Include seconds
+
+If you want distances less than a minute to be more detailed, you can provide `true` as the third parameter to the
+function.
+
+```html
+<span x-data="{ date: new Date() }" x-text="$timeago(date, null, true)"></span>
+```
+
 ### Other locales
 
 If you are using the `npm` installation method for this package or the ESM distribution, you can use the

dist/alpine-timeago.js

@@ -15,5 +15,9 @@
 <div x-data="{ date: new Date() }" x-timeago.pure="date"></div>
 <div x-data="{ date: new Date() }" x-timeago.seconds="date"></div>
 <div x-data="{ date: new Date() }" x-timeago.pure.seconds="date"></div>
+<div x-data="{ date: new Date() }" x-text="$timeago(date)"></div>
+<div x-data="{ date: new Date() }" x-text="$timeago(date, true)"></div>
+<div x-data="{ date: new Date() }" x-text="$timeago(date, null, true)"></div>
+<div x-data="{ date: new Date() }" x-text="$timeago(date, true, true)"></div>
 </body>
 </html>

dist/alpine-timeago.js.map

@@ -1,4 +1,4 @@
-import { differenceInSeconds, formatDistanceToNow, parseISO } from 'date-fns';
+import { formatDistanceToNow, parseISO } from 'date-fns';
 
 let locale = null;
 
@@ -45,6 +45,20 @@ function TimeAgo(Alpine) {
 
         cleanup(() => clearInterval(interval));
     });
+
+    Alpine.magic('timeago', el => (expression, pure, seconds) => {
+        if (pure == null) {
+            pure = false;
+        }
+        if (seconds == null) {
+            seconds = false;
+        }
+        return formatDistanceToNow(expression, {
+            addSuffix: !pure,
+            includeSeconds: seconds,
+            locale,
+        })
+    });
 }
 
 TimeAgo.configure = (config) => {