feat: add support for relative time formatting #272
Conversation
WalkthroughThe update adds support for relative time formatting to the Nuxt Time component using the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NuxtTimeComponent
participant IntlRelativeTimeFormat
participant IntlDateTimeFormat
User->>NuxtTimeComponent: Load component with date and relative=true
NuxtTimeComponent->>IntlRelativeTimeFormat: Format date relative to now
IntlRelativeTimeFormat-->>NuxtTimeComponent: Return relative time string
NuxtTimeComponent-->>User: Display relative time (e.g., "5 minutes ago")
User->>NuxtTimeComponent: Load component with date and relative=false
NuxtTimeComponent->>IntlDateTimeFormat: Format date as absolute
IntlDateTimeFormat-->>NuxtTimeComponent: Return formatted date string
NuxtTimeComponent-->>User: Display absolute time (e.g., "2024-07-18 12:00")
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range, codebase verification and nitpick comments (1)
test/unit.spec.ts (1)
26-38: LGTM! Consider adding edge cases and different locales.The test case covers the relative time formatting feature. Consider adding edge cases (e.g., seconds, hours, days) and different locales to ensure comprehensive test coverage.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- README.md (1 hunks)
- src/runtime/components/NuxtTime.vue (2 hunks)
- src/script.mjs (1 hunks)
- test/e2e.spec.ts (1 hunks)
- test/unit.spec.ts (2 hunks)
Additional context used
GitHub Check: test
test/e2e.spec.ts
[failure] 77-77: test/e2e.spec.ts > nuxt-time > displays relative time correctly
Error: Snapshotnuxt-time > displays relative time correctly 1mismatched
- Expected
- Received
- "5 minutes ago"
- ""
❯ test/e2e.spec.ts:77:33
Additional comments not posted (4)
test/e2e.spec.ts (1)
59-77: Test failure due to snapshot mismatch.The test case fails due to a mismatch in the snapshot. Verify the implementation and test setup to ensure the relative time formatting works as expected.
Tools
GitHub Check: test
[failure] 77-77: test/e2e.spec.ts > nuxt-time > displays relative time correctly
Error: Snapshotnuxt-time > displays relative time correctly 1mismatched
- Expected
- Received
- "5 minutes ago"
- ""
❯ test/e2e.spec.ts:77:33
README.md (1)
51-62: LGTM!The documentation provides a clear explanation and example for the relative time formatting feature.
src/runtime/components/NuxtTime.vue (2)
29-29: Addition ofrelativeprop looks good.The
relativeprop is correctly added to thepropsobject.
48-51: Changes toformattercomputed property look good.The
formattercomputed property correctly usesIntl.RelativeTimeFormatwhen therelativeprop is true.
| const formattedDate = computed(() => { | ||
| if (props.relative) { | ||
| const now = new Date() | ||
| const diffInSeconds = (date.value.getTime() - now.getTime()) / 1000 | ||
| const diffInMinutes = diffInSeconds / 60 | ||
| const diffInHours = diffInMinutes / 60 | ||
| const diffInDays = diffInHours / 24 | ||
| if (Math.abs(diffInSeconds) < 60) { | ||
| return formatter.value.format(Math.round(diffInSeconds), 'second') | ||
| } | ||
| else if (Math.abs(diffInMinutes) < 60) { | ||
| return formatter.value.format(Math.round(diffInMinutes), 'minute') | ||
| } | ||
| else if (Math.abs(diffInHours) < 24) { | ||
| return formatter.value.format(Math.round(diffInHours), 'hour') | ||
| } | ||
| else { | ||
| return formatter.value.format(Math.round(diffInDays), 'day') | ||
| } | ||
| } | ||
| return formatter.value.format(date.value) | ||
| }) |
There was a problem hiding this comment.
Changes to formattedDate computed property look good.
The formattedDate computed property correctly handles relative time formatting based on the relative prop.
Optimization suggestion:
The calculation of the time difference can be simplified by using a single switch statement instead of multiple if-else blocks.
- if (props.relative) {
- const now = new Date()
- const diffInSeconds = (date.value.getTime() - now.getTime()) / 1000
- const diffInMinutes = diffInSeconds / 60
- const diffInHours = diffInMinutes / 60
- const diffInDays = diffInHours / 24
- if (Math.abs(diffInSeconds) < 60) {
- return formatter.value.format(Math.round(diffInSeconds), 'second')
- }
- else if (Math.abs(diffInMinutes) < 60) {
- return formatter.value.format(Math.round(diffInMinutes), 'minute')
- }
- else if (Math.abs(diffInHours) < 24) {
- return formatter.value.format(Math.round(diffInHours), 'hour')
- }
- else {
- return formatter.value.format(Math.round(diffInDays), 'day')
- }
- }
+ if (props.relative) {
+ const now = new Date()
+ const diffInSeconds = (date.value.getTime() - now.getTime()) / 1000
+ const absDiffInSeconds = Math.abs(diffInSeconds)
+ switch (true) {
+ case absDiffInSeconds < 60:
+ return formatter.value.format(Math.round(diffInSeconds), 'second')
+ case absDiffInSeconds < 3600:
+ return formatter.value.format(Math.round(diffInSeconds / 60), 'minute')
+ case absDiffInSeconds < 86400:
+ return formatter.value.format(Math.round(diffInSeconds / 3600), 'hour')
+ default:
+ return formatter.value.format(Math.round(diffInSeconds / 86400), 'day')
+ }
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const formattedDate = computed(() => { | |
| if (props.relative) { | |
| const now = new Date() | |
| const diffInSeconds = (date.value.getTime() - now.getTime()) / 1000 | |
| const diffInMinutes = diffInSeconds / 60 | |
| const diffInHours = diffInMinutes / 60 | |
| const diffInDays = diffInHours / 24 | |
| if (Math.abs(diffInSeconds) < 60) { | |
| return formatter.value.format(Math.round(diffInSeconds), 'second') | |
| } | |
| else if (Math.abs(diffInMinutes) < 60) { | |
| return formatter.value.format(Math.round(diffInMinutes), 'minute') | |
| } | |
| else if (Math.abs(diffInHours) < 24) { | |
| return formatter.value.format(Math.round(diffInHours), 'hour') | |
| } | |
| else { | |
| return formatter.value.format(Math.round(diffInDays), 'day') | |
| } | |
| } | |
| return formatter.value.format(date.value) | |
| }) | |
| const formattedDate = computed(() => { | |
| if (props.relative) { | |
| const now = new Date() | |
| const diffInSeconds = (date.value.getTime() - now.getTime()) / 1000 | |
| const absDiffInSeconds = Math.abs(diffInSeconds) | |
| switch (true) { | |
| case absDiffInSeconds < 60: | |
| return formatter.value.format(Math.round(diffInSeconds), 'second') | |
| case absDiffInSeconds < 3600: | |
| return formatter.value.format(Math.round(diffInSeconds / 60), 'minute') | |
| case absDiffInSeconds < 86400: | |
| return formatter.value.format(Math.round(diffInSeconds / 3600), 'hour') | |
| default: | |
| return formatter.value.format(Math.round(diffInSeconds / 86400), 'day') | |
| } | |
| } | |
| return formatter.value.format(date.value) | |
| }) |
| if (options.relative) { | ||
| const now = new Date() | ||
| const diffInSeconds = (date.getTime() - now.getTime()) / 1000 | ||
| const diffInMinutes = diffInSeconds / 60 | ||
| const diffInHours = diffInMinutes / 60 | ||
| const diffInDays = diffInHours / 24 | ||
| const formatter = new Intl.RelativeTimeFormat(options.locale, options) | ||
| if (Math.abs(diffInSeconds) < 60) { | ||
| el.textContent = formatter.format(Math.round(diffInSeconds), 'second') | ||
| } | ||
| else if (Math.abs(diffInMinutes) < 60) { | ||
| el.textContent = formatter.format(Math.round(diffInMinutes), 'minute') | ||
| } | ||
| else if (Math.abs(diffInHours) < 24) { | ||
| el.textContent = formatter.format(Math.round(diffInHours), 'hour') | ||
| } | ||
| else { | ||
| el.textContent = formatter.format(Math.round(diffInDays), 'day') | ||
| } | ||
| } | ||
| else { | ||
| const formatter = new Intl.DateTimeFormat(options.locale, options) | ||
| el.textContent = formatter.format(date) | ||
| } |
There was a problem hiding this comment.
LGTM! Consider handling months and years and refactoring to reduce repetition.
The code covers the relative time formatting feature. Consider handling months and years to cover more use cases. Additionally, refactor the code to reduce repetition.
- const diffInSeconds = (date.getTime() - now.getTime()) / 1000
- const diffInMinutes = diffInSeconds / 60
- const diffInHours = diffInMinutes / 60
- const diffInDays = diffInHours / 24
+ const diffInSeconds = (now.getTime() - date.getTime()) / 1000
+ const units = [
+ { unit: 'second', value: diffInSeconds },
+ { unit: 'minute', value: diffInSeconds / 60 },
+ { unit: 'hour', value: diffInSeconds / 3600 },
+ { unit: 'day', value: diffInSeconds / 86400 },
+ { unit: 'month', value: diffInSeconds / 2592000 },
+ { unit: 'year', value: diffInSeconds / 31536000 },
+ ]
+ const formatter = new Intl.RelativeTimeFormat(options.locale, options)
+ const { unit, value } = units.find(({ value }) => Math.abs(value) < 60) || units[units.length - 1]
+ el.textContent = formatter.format(Math.round(value), unit)Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (options.relative) { | |
| const now = new Date() | |
| const diffInSeconds = (date.getTime() - now.getTime()) / 1000 | |
| const diffInMinutes = diffInSeconds / 60 | |
| const diffInHours = diffInMinutes / 60 | |
| const diffInDays = diffInHours / 24 | |
| const formatter = new Intl.RelativeTimeFormat(options.locale, options) | |
| if (Math.abs(diffInSeconds) < 60) { | |
| el.textContent = formatter.format(Math.round(diffInSeconds), 'second') | |
| } | |
| else if (Math.abs(diffInMinutes) < 60) { | |
| el.textContent = formatter.format(Math.round(diffInMinutes), 'minute') | |
| } | |
| else if (Math.abs(diffInHours) < 24) { | |
| el.textContent = formatter.format(Math.round(diffInHours), 'hour') | |
| } | |
| else { | |
| el.textContent = formatter.format(Math.round(diffInDays), 'day') | |
| } | |
| } | |
| else { | |
| const formatter = new Intl.DateTimeFormat(options.locale, options) | |
| el.textContent = formatter.format(date) | |
| } | |
| if (options.relative) { | |
| const now = new Date() | |
| const diffInSeconds = (now.getTime() - date.getTime()) / 1000 | |
| const units = [ | |
| { unit: 'second', value: diffInSeconds }, | |
| { unit: 'minute', value: diffInSeconds / 60 }, | |
| { unit: 'hour', value: diffInSeconds / 3600 }, | |
| { unit: 'day', value: diffInSeconds / 86400 }, | |
| { unit: 'month', value: diffInSeconds / 2592000 }, | |
| { unit: 'year', value: diffInSeconds / 31536000 }, | |
| ] | |
| const formatter = new Intl.RelativeTimeFormat(options.locale, options) | |
| const { unit, value } = units.find(({ value }) => Math.abs(value) < 60) || units[units.length - 1] | |
| el.textContent = formatter.format(Math.round(value), unit) | |
| } | |
| else { | |
| const formatter = new Intl.DateTimeFormat(options.locale, options) | |
| el.textContent = formatter.format(date) | |
| } |
Implement relative time formatting using
Intl.RelativeTimeFormat.relativeprop to enable relative time formatting.formattercomputed property to useIntl.RelativeTimeFormatwhenrelativeis true.formattedDatecomputed property to useformatter.value.formatfor relative time.Intl.RelativeTimeFormatfor relative time formatting.relativeattribute to determine if relative time formatting should be used.Intl.RelativeTimeFormat.relativeprop in<NuxtTime>component.relativeprop.relativeprop.For more details, open the Copilot Workspace session.
Summary by CodeRabbit
New Features
Intl.RelativeTimeFormatAPI. Set therelativeprop totrueto display time relative to the current time, such as "5 minutes ago."Tests