github / relative-time-element

Web component extensions to the standard <time> element.
https://github.github.io/relative-time-element/examples/
MIT License
3.57k stars 170 forks source link

Cannot get format=relative to display seconds #269

Open bear24rw opened 12 months ago

bear24rw commented 12 months ago

I cannot get relative format to display second level precision. The docs suggest that the default precision is seconds and this table suggests that with format relative i should see seconds. But I only see now until 1 minute has passed. format=elapsed works as i expect.

image
<html>
  <body>
    <p>Loaded this page <relative-time datetime="" format="relative" id="dynamic1"></relative-time></p>
    <p>You've been on this page for <relative-time datetime="" format="duration" id="dynamic2"></relative-time></p>
    <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
    <script>
    document.getElementById('dynamic1').date = new Date()
    document.getElementById('dynamic2').date = new Date()
    </script>
  </body>
</html>
keithamus commented 12 months ago

Sounds like this is a bug. Following the code I can't see where there's a problem. If you would kindly submit a PR with some failing tests we can investigate further.

rhcarvalho commented 8 months ago

Of the non-deprecated formats, only format="duration" is showing and updating with seconds precision. The default (no format attribute) and format="relative" doesn't update until after 1 min has passed.

duration is not a replacement for relative because it doesn't have the prefix/suffix: "X seconds" vs "X seconds ago".

Tested with v4.3.1.


I think I found the issue debugging with devtools:

https://github.com/github/relative-time-element/blob/7e40806f21684e46573e202527b9505e723d13e8/src/relative-time-element.ts#L424

https://github.com/github/relative-time-element/blob/7e40806f21684e46573e202527b9505e723d13e8/src/relative-time-element.ts#L444-L445

https://github.com/github/relative-time-element/blob/7e40806f21684e46573e202527b9505e723d13e8/src/relative-time-element.ts#L173

https://github.com/github/relative-time-element/blob/7e40806f21684e46573e202527b9505e723d13e8/src/relative-time-element.ts#L182-L184

Times in the past (like -X seconds) would always enter the if branch and format the value 0 ("now") instead of the number of seconds.

Maybe what was meant is:

    if (unit === 'second' && Math.abs(int) < 10) {
        return relativeFormat.format(0, 'second');
    }

Such that we don't show "now", 1, 2, 3..., 9, but instead go "now", 10, 11, ...

I'm not sure though, I think that's unspecified behavior.

I traced it back to https://github.com/github/relative-time-element/commit/6118a1683290438f429c39c0b780d8525a5a1863.

thiagomajesk commented 3 months ago

Of the non-deprecated formats, only format="duration" is showing and updating with seconds precision. The default (no format attribute) and format="relative" doesn't update until after 1 min has passed.

@keithamus I can confirm that second precision only work with format="duration". Also, thanks @rhcarvalho for diving into the code. Are you using another in the meantime?

rhcarvalho commented 3 months ago

@thiagomajesk I think I chose some format that worked well enough and moved on.