Merge pull request #4 from marcreichel/include-seconds

✨ Add include seconds option
marcreichel · Jun 22, 2022 · a724845 · a724845
2 parents bd904bc + 2703c19
commit a724845
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
     <img src="https://img.shields.io/github/v/tag/marcreichel/alpine-timeago?label=version" alt="version">
   </a>
   <a href="https://www.npmjs.com/package/@marcreichel/alpine-timeago">
-    <img src="https://img.badgesize.io/marcreichel/alpine-timeago/main/dist/alpine-timeago.js.svg?compression=gzip&color=green" alt="Build size">
+    <img src="https://img.badgesize.io/marcreichel/alpine-timeago/main/dist/alpine-timeago.min.js.svg?compression=gzip&color=green" alt="Build size">
   </a>
   <a href="https://www.npmjs.com/package/@marcreichel/alpine-timeago">
     <img src="https://img.shields.io/npm/dt/@marcreichel/alpine-timeago" alt="downloads">
@@ -74,6 +74,14 @@ If you do not want the "[diff] ago" suffix or "in [diff]" prefix, you can use th
 <span x-data="{ date: new Date() }" x-timeago.pure="date"></span>
 ```
 
+### Include seconds
+
+Distances less than a minute are more detailed.
+
+```html
+<span x-data="{ date: new Date() }" x-timeago.seconds="date"></span>
+```
+
 ### Other locales
 
 If you are using the `npm` installation method for this package or the ESM distribution, you can use the

diff --git a/dist/alpine-timeago.js b/dist/alpine-timeago.js
diff --git a/dist/alpine-timeago.js.map b/dist/alpine-timeago.js.map
diff --git a/dist/alpine-timeago.min.js b/dist/alpine-timeago.min.js
diff --git a/dist/alpine-timeago.min.js.map b/dist/alpine-timeago.min.js.map
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Alpine Timeago Examples</title>
+
+    <script defer src="../dist/alpine-timeago.min.js"></script>
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+</head>
+<body>
+<div x-data="{ date: new Date() }" x-timeago="date"></div>
+<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>
+</body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import { formatDistanceToNow, parseISO } from 'date-fns';
+import { differenceInSeconds, formatDistanceToNow, parseISO } from 'date-fns';
 
 let locale = null;
 
@@ -8,11 +8,9 @@ function TimeAgo(Alpine) {
 
         const render = (date) => {
             try {
-                if (typeof date === 'string') {
-                    date = parseISO(date);
-                }
                 el.textContent = formatDistanceToNow(date, {
                     addSuffix: !modifiers.includes('pure'),
+                    includeSeconds: modifiers.includes('seconds'),
                     locale,
                 });
             } catch (e) {
@@ -28,11 +26,20 @@ function TimeAgo(Alpine) {
                     clearInterval(interval);
                 }
 
+                if (typeof date === 'string') {
+                    date = parseISO(date);
+                }
+
                 render(date);
 
+                let intervalDuration = 30000;
+                if (modifiers.includes('seconds') && differenceInSeconds(new Date(), date) < 90) {
+                    intervalDuration = 5000;
+                }
+
                 interval = setInterval(() => {
                     render(date);
-                }, 30000);
+                }, intervalDuration);
             });
         });