) {
6 | return a[d >= 0 ? 0 : a.length === 2 || n < 5 ? 1 : 2]
7 | }
8 |
9 | const strings: L10nsStrings = {
10 | prefixAgo: 'před',
11 | prefixFromNow: 'za',
12 | suffixAgo: null,
13 | suffixFromNow: null,
14 | seconds: function (n: number, d: number) {
15 | return f(n, d, ['méně než minutou', 'méně než minutu'])
16 | },
17 | minute: function (n: number, d: number) {
18 | return f(n, d, ['minutou', 'minutu'])
19 | },
20 | minutes: function (n: number, d: number) {
21 | return f(n, d, ['%d minutami', '%d minuty', '%d minut'])
22 | },
23 | hour: function (n: number, d: number) {
24 | return f(n, d, ['hodinou', 'hodinu'])
25 | },
26 | hours: function (n: number, d: number) {
27 | return f(n, d, ['%d hodinami', '%d hodiny', '%d hodin'])
28 | },
29 | day: function (n: number, d: number) {
30 | return f(n, d, ['%d dnem', '%d den'])
31 | },
32 | days: function (n: number, d: number) {
33 | return f(n, d, ['%d dny', '%d dny', '%d dní'])
34 | },
35 | month: function (n: number, d: number) {
36 | return f(n, d, ['%d měsícem', '%d měsíc'])
37 | },
38 | months: function (n: number, d: number) {
39 | return f(n, d, ['%d měsíci', '%d měsíce', '%d měsíců'])
40 | },
41 | year: function (n: number, d: number) {
42 | return f(n, d, ['%d rokem', '%d rok'])
43 | },
44 | years: function (n: number, d: number) {
45 | return f(n, d, ['%d lety', '%d roky', '%d let'])
46 | },
47 | }
48 |
49 | export default strings
50 |
--------------------------------------------------------------------------------
/examples/simple/index.js:
--------------------------------------------------------------------------------
1 | /* @flow strict */
2 | import * as React from 'react'
3 | import { useMemo } from 'react'
4 | import ReactDom from 'react-dom/client'
5 | import TimeAgo from '../../src/index'
6 | import { makeIntlFormatter } from '../../src/defaultFormatter'
7 |
8 | const appElement = document.getElementById('app')
9 |
10 | function Bare({ date }: { date: number }) {
11 | return (
12 | <>
13 | You opened this page
14 |
15 | )
16 | }
17 |
18 | const intlFormatter = makeIntlFormatter({
19 | locale: 'en',
20 | style: 'long',
21 | numeric: 'auto',
22 | })
23 |
24 | function Intl({ date }: { date: number }) {
25 | const [locale, setLocale] = React.useState('en')
26 | const [style, setStyle] = React.useState('long')
27 | const [numeric, setNumeric] = React.useState('auto')
28 |
29 | const intlFormatter = useMemo(
30 | () =>
31 | makeIntlFormatter({
32 | locale,
33 | style,
34 | numeric,
35 | }),
36 | [locale, style, numeric],
37 | )
38 | return (
39 |
40 |
50 |
55 |
59 |
60 |
61 | )
62 | }
63 |
64 | function App() {
65 | const [date, setDate] = React.useState(Date.now())
66 |
67 | return (
68 | <>
69 | Bare
70 |
71 | Intl
72 | You opened this page
73 |
74 |
75 |
76 | )
77 | }
78 |
79 | appElement && ReactDom.createRoot(appElement).render()
80 |
--------------------------------------------------------------------------------
/.github/workflows/build-and-deploy.yml:
--------------------------------------------------------------------------------
1 | name: Build and Deploy
2 |
3 | on:
4 | push:
5 | branches: [ master ]
6 | tags: [ 'v[0-9]+.[0-9]+.[0-9]+' ]
7 | pull_request:
8 | branches: [ master ]
9 |
10 | jobs:
11 | pr-test:
12 | # Only run on pull requests
13 | if: github.event_name == 'pull_request'
14 | runs-on: ubuntu-latest
15 |
16 | steps:
17 | - uses: actions/checkout@v3
18 |
19 | - name: Setup Node.js
20 | uses: actions/setup-node@v3
21 | with:
22 | node-version: 22
23 |
24 | - name: Install pnpm
25 | uses: pnpm/action-setup@v2
26 | with:
27 | version: latest
28 |
29 | - name: Install dependencies
30 | run: pnpm install
31 |
32 | - name: Run tests
33 | run: pnpm test
34 |
35 | build:
36 | # Only run on pushes to master or tags
37 | if: github.event_name == 'push'
38 | runs-on: ubuntu-latest
39 |
40 | steps:
41 | - uses: actions/checkout@v3
42 |
43 | - name: Setup Node.js
44 | uses: actions/setup-node@v3
45 | with:
46 | node-version: 22
47 |
48 | - name: Install pnpm
49 | uses: pnpm/action-setup@v2
50 | with:
51 | version: latest
52 |
53 | - name: Install dependencies
54 | run: pnpm install
55 |
56 | - name: Run tests
57 | run: pnpm test
58 |
59 | deploy:
60 | needs: build
61 | # Only run on master branch and not on pull requests
62 | if: github.ref == 'refs/heads/master' && github.event_name == 'push'
63 | runs-on: ubuntu-latest
64 |
65 | steps:
66 | - uses: actions/checkout@v3
67 |
68 | - name: Setup Node.js
69 | uses: actions/setup-node@v3
70 | with:
71 | node-version: 22
72 | registry-url: 'https://registry.npmjs.org'
73 |
74 | - name: Install pnpm
75 | uses: pnpm/action-setup@v2
76 | with:
77 | version: latest
78 |
79 | - name: Install dependencies
80 | run: pnpm install
81 |
82 | - name: Run tests
83 | run: pnpm test
84 |
85 | - name: Build
86 | run: pnpm run build
87 |
88 | - name: Check if version exists
89 | id: version-check
90 | run: |
91 | PKG_VERSION=$(node -p "require('./package.json').version")
92 | PKG_NAME=$(node -p "require('./package.json').name")
93 | if npm view "$PKG_NAME@$PKG_VERSION" version &> /dev/null; then
94 | echo "Version $PKG_VERSION already exists. Skipping publish."
95 | echo "exists=true" >> $GITHUB_OUTPUT
96 | else
97 | echo "Version $PKG_VERSION does not exist. Proceeding with publish."
98 | echo "exists=false" >> $GITHUB_OUTPUT
99 | fi
100 |
101 | - name: Publish to npm
102 | if: steps.version-check.outputs.exists == 'false'
103 | run: pnpm publish
104 | env:
105 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
--------------------------------------------------------------------------------
/src/language-strings/ar.js:
--------------------------------------------------------------------------------
1 | // @flow strict
2 | import type { L10nsStrings } from '../formatters/buildFormatter'
3 |
4 | function numpf(n: number, a: Array): string {
5 | return a[
6 | n === 0
7 | ? 0
8 | : n === 1
9 | ? 1
10 | : n === 2
11 | ? 2
12 | : n % 100 >= 3 && n % 100 <= 10
13 | ? 3
14 | : n % 100 >= 11
15 | ? 4
16 | : 5
17 | ]
18 | }
19 |
20 | const strings: L10nsStrings = {
21 | prefixAgo: 'منذ',
22 | prefixFromNow: 'بعد',
23 | suffixAgo: null,
24 | suffixFromNow: null, // null OR "من الآن"
25 | second: function (value) {
26 | return numpf(value, [
27 | 'أقل من ثانية',
28 | 'ثانية واحدة',
29 | 'ثانيتين',
30 | '%d ثوانٍ',
31 | '%d ثانية',
32 | '%d ثانية',
33 | ])
34 | },
35 | seconds: function (value) {
36 | return numpf(value, [
37 | 'أقل من ثانية',
38 | 'ثانية واحدة',
39 | 'ثانيتين',
40 | '%d ثوانٍ',
41 | '%d ثانية',
42 | '%d ثانية',
43 | ])
44 | },
45 | minute: function (value) {
46 | return numpf(value, [
47 | 'أقل من دقيقة',
48 | 'دقيقة واحدة',
49 | 'دقيقتين',
50 | '%d دقائق',
51 | '%d دقيقة',
52 | 'دقيقة',
53 | ])
54 | },
55 | minutes: function (value) {
56 | return numpf(value, [
57 | 'أقل من دقيقة',
58 | 'دقيقة واحدة',
59 | 'دقيقتين',
60 | '%d دقائق',
61 | '%d دقيقة',
62 | 'دقيقة',
63 | ])
64 | },
65 | hour: function (value) {
66 | return numpf(value, [
67 | 'أقل من ساعة',
68 | 'ساعة واحدة',
69 | 'ساعتين',
70 | '%d ساعات',
71 | '%d ساعة',
72 | '%d ساعة',
73 | ])
74 | },
75 | hours: function (value) {
76 | return numpf(value, [
77 | 'أقل من ساعة',
78 | 'ساعة واحدة',
79 | 'ساعتين',
80 | '%d ساعات',
81 | '%d ساعة',
82 | '%d ساعة',
83 | ])
84 | },
85 | day: function (value) {
86 | return numpf(value, [
87 | 'أقل من يوم',
88 | 'يوم واحد',
89 | 'يومين',
90 | '%d أيام',
91 | '%d يومًا',
92 | '%d يوم',
93 | ])
94 | },
95 | days: function (value) {
96 | return numpf(value, [
97 | 'أقل من يوم',
98 | 'يوم واحد',
99 | 'يومين',
100 | '%d أيام',
101 | '%d يومًا',
102 | '%d يوم',
103 | ])
104 | },
105 | month: function (value) {
106 | return numpf(value, [
107 | 'أقل من شهر',
108 | 'شهر واحد',
109 | 'شهرين',
110 | '%d أشهر',
111 | '%d شهرًا',
112 | '%d شهر',
113 | ])
114 | },
115 | months: function (value) {
116 | return numpf(value, [
117 | 'أقل من شهر',
118 | 'شهر واحد',
119 | 'شهرين',
120 | '%d أشهر',
121 | '%d شهرًا',
122 | '%d شهر',
123 | ])
124 | },
125 | year: function (value) {
126 | return numpf(value, [
127 | 'أقل من عام',
128 | 'عام واحد',
129 | '%d عامين',
130 | '%d أعوام',
131 | '%d عامًا',
132 | ])
133 | },
134 | years: function (value) {
135 | return numpf(value, [
136 | 'أقل من عام',
137 | 'عام واحد',
138 | 'عامين',
139 | '%d أعوام',
140 | '%d عامًا',
141 | '%d عام',
142 | ])
143 | },
144 | }
145 |
146 | export default strings
147 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | #### v8.3.0
4 | - Exported Formatter, Unit, and Suffix types which were present in v7
5 |
6 | #### v8.1.0
7 | - Fixed bug where `nextFormatter` no longer worked without passing arguments
8 | - Calling `nextFormatter()` without arguments should work once again.
9 |
10 | #### v8.0.0
11 | - Code overhaul
12 | - Moved from `npm` to `pnpm`
13 | - Support React 19.x
14 | - Minor fixes
15 |
16 | #### v7.1.0
17 | - Use Intl to render persian number for farsi languages
18 | - Looking for help testing the results and then doing the same for Arabic
19 |
20 | #### v7.0.0
21 | - Added support for React 18
22 | - Added hi.js language strings
23 | - Added so.js language strings
24 | - Added oc.js language strings
25 | - Update ru.js language strings
26 | - Fix memory leak
27 | - Update dependencies
28 |
29 | #### v6.1.0
30 | - Added `eslint-plugin-react-hooks` and fixed the dependencies for hooks used in the library.
31 | Should result in a more consistent behaviour when changing props at runtime.
32 | - Updated dependencies
33 |
34 | #### v6.0.0
35 | - Added `module` field to the package.json file so you can now import ES6 modules with only
36 | a minimal amount of pre-processing applied. Relevant when targeting newer browsers only.
37 | - A bunch of internal changes:
38 | - Using `rollup` instead of `browserify` to compile the example
39 | - Updating a bunch of dependencies
40 | - Added support for React 17
41 |
42 | #### v5.2.1
43 |
44 | - Minor documentation fixes
45 |
46 | #### v4.4.0
47 | - Bug Fix: clearTimeout when setting a new timeout. Prevents unnecessary renders.
48 |
49 | #### v4.2.0
50 | - Pass in the `now` function as the last argument to the formatters.
51 | - Fix a bug in `buildFormatter` that would ignore the user-specified `now` function and just used `Date.now`
52 |
53 | #### v4.2.0
54 | - Fixed the type of `Formatter`.
55 | - It's last argument is now correctly typed to be `() => React.Node`
56 | - This last argument is now a documented feature and is going to be set to the value of of the default formatter.
57 | - Please Note, that you should not use this argument and instead import defaultFormatter from the package directly and use it as a fallback.
58 |
59 | #### v4.0.0 - v4.1.9:
60 | - Requires React ^16.
61 | - Flow types updated to the latest version (0.69)
62 | - Various bug-fixes.
63 |
64 | #### v3.x.x:
65 |
66 | - `minPeriod` and `maxPeriod` now accept seconds not milliseconds. This matches the documentation.
67 | - react-timeago now uses ES6 modules. So if you don't use ES6, your code will go from :
68 |
69 | ```js
70 | var TimeAgo = require('react-timeago')
71 | ```
72 | to:
73 | ```js
74 | var TimeAgo = require('react-timeago').default
75 | ```
76 | ES6 imports will continue to work the same way.
77 | ```js
78 | import TimeAgo from 'react-timeago'
79 | ```
80 |
81 | #### v2.2.1
82 | * Fixed the many typos introduced by me in 2.2.0. Thanks to insin for the quick PR.
83 |
84 | #### v2.2.0
85 | * FEATURE: New Props: `minPeriod` and `maxPeriod` to customize how often the Component updates.
86 |
87 | #### v2.1.1
88 |
89 | * BUG-FIX: Fixed an issue, where changing the date wouldn't correctly update the update timer.
90 |
91 | #### v2.1.0
92 |
93 | * FEATURE: Added PropType validation. It will now print a warning if you fail to pass in a date, instead of failing silently.
94 | * BUG-FIX: Pending Timeouts are cleared when the Component is unmounted
95 | * BUG-FIX: When new Props are passed in, the component will update itself correctly. Now you can flip the live switch on and off.
96 | * FEATURE: The formatter function gets the original date as the fourth argument, for more custom date formats.
97 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-timeago",
3 | "version": "8.3.0",
4 | "description": "A simple Time-Ago component for ReactJs",
5 | "main": "lib/index.js",
6 | "types": "es6/index.d.ts",
7 | "exports": {
8 | ".": {
9 | "import": "./es6/index.js",
10 | "require": "./lib/index.js"
11 | },
12 | "./dateParser": {
13 | "import": "./es6/dateParser.js",
14 | "require": "./lib/dateParser.js"
15 | },
16 | "./defaultFormatter": {
17 | "import": "./es6/defaultFormatter.js",
18 | "require": "./lib/defaultFormatter.js"
19 | },
20 | "./language-strings/*": {
21 | "import": "./es6/language-strings/*.js",
22 | "require": "./lib/language-strings/*.js"
23 | },
24 | "./formatters/buildFormatter": {
25 | "import": "./es6/formatters/buildFormatter.js",
26 | "require": "./lib/formatters/buildFormatter.js"
27 | },
28 | "./lib/language-strings/*": {
29 | "import": "./es6/language-strings/*.js",
30 | "require": "./lib/language-strings/*.js"
31 | },
32 | "./lib/formatters/buildFormatter": {
33 | "import": "./es6/formatters/buildFormatter.js",
34 | "require": "./lib/formatters/buildFormatter.js"
35 | }
36 | },
37 | "module": "es6/index.js",
38 | "scripts": {
39 | "babel-es6": "ES6=true babel src/ --out-dir es6/",
40 | "postbabel-es6": "node ./scripts/gen-types.js -i src -o es6/",
41 | "babel": "babel src/ --out-dir lib/",
42 | "postbabel": "node ./scripts/gen-types.js -i src -o lib/",
43 | "build": "npm run babel && npm run babel-es6 && npm run example",
44 | "example": "rollup -c ./rollup.config.mjs",
45 | "prepublish": "npm run build",
46 | "test": "jest --coverage"
47 | },
48 | "jest": {
49 | "testEnvironment": "jsdom"
50 | },
51 | "repository": {
52 | "type": "git",
53 | "url": "https://github.com/naman34/react-timeago.git"
54 | },
55 | "keywords": [
56 | "React",
57 | "ReactJS",
58 | "Time",
59 | "Ago",
60 | "TimeAgo",
61 | "ender"
62 | ],
63 | "author": "Naman Goel",
64 | "license": "MIT",
65 | "bugs": {
66 | "url": "https://github.com/nmn/react-timeago/issues"
67 | },
68 | "homepage": "https://github.com/nmn/react-timeago",
69 | "peerDependencies": {
70 | "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
71 | },
72 | "devDependencies": {
73 | "@babel/cli": "^7.27.0",
74 | "@babel/preset-env": "^7.18.2",
75 | "@babel/preset-flow": "^7.17.12",
76 | "@babel/preset-react": "^7.17.12",
77 | "@babel/preset-stage-1": "^7.8.3",
78 | "@rollup/plugin-babel": "^6.0.4",
79 | "@rollup/plugin-commonjs": "^28.0.2",
80 | "@rollup/plugin-node-resolve": "^16.0.1",
81 | "@rollup/plugin-replace": "^6.0.2",
82 | "@testing-library/jest-dom": "^6.6.3",
83 | "@testing-library/react": "^16.3.0",
84 | "babel-jest": "^29.7.0",
85 | "babel-plugin-syntax-hermes-parser": "^0.28.0",
86 | "eslint-config-prettier": "^10.1.2",
87 | "eslint-plugin-flowtype": "^8.0.3",
88 | "eslint-plugin-ft-flow": "^3.0.0",
89 | "eslint-plugin-import": "^2.26.0",
90 | "eslint-plugin-prettier": "^4.0.0",
91 | "eslint-plugin-react-hooks": "^5.1.0",
92 | "eslint": "^8.1.0",
93 | "flow-api-translator": "^0.28.0",
94 | "flow-bin": "^0.267.0",
95 | "hermes-eslint": "^0.28.0",
96 | "jest-environment-jsdom": "^29.7.0",
97 | "jest": "^29.7.0",
98 | "prettier-plugin-hermes-parser": "^0.28.0",
99 | "prettier": "^2.8.8",
100 | "react-dom": "^19.1.0",
101 | "react": "^19.1.0",
102 | "rollup": "^4.39.0",
103 | "yargs": "^17.7.2"
104 | },
105 | "prettier": {
106 | "plugins": [
107 | "prettier-plugin-hermes-parser"
108 | ],
109 | "printWidth": 80,
110 | "semi": false,
111 | "trailingComma": "all",
112 | "singleQuote": true
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/__tests__/index.js:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom'
2 | import { render, fireEvent, screen } from '@testing-library/react'
3 |
4 | import React from 'react'
5 |
6 | import TimeAgo from '../src'
7 | import buildFormatter from '../src/formatters/buildFormatter'
8 | import TWStrings from '../src/language-strings/zh-TW'
9 |
10 | describe('TimeAgo', () => {
11 | test('just now', () => {
12 | render()
13 | expect(screen.getByText('0 seconds ago')).toBeInTheDocument()
14 | })
15 |
16 | test('1 second ago', () => {
17 | render()
18 | expect(screen.getByText('1 second ago')).toBeInTheDocument()
19 | })
20 |
21 | test('2 seconds ago', () => {
22 | render()
23 | expect(screen.getByText('2 seconds ago')).toBeInTheDocument()
24 | })
25 |
26 | test('1 minute ago', () => {
27 | render()
28 | expect(screen.getByText('1 minute ago')).toBeInTheDocument()
29 | })
30 |
31 | test('2 minutes ago', () => {
32 | render()
33 | expect(screen.getByText('2 minutes ago')).toBeInTheDocument()
34 | })
35 |
36 | test('1 hour ago', () => {
37 | render()
38 | expect(screen.getByText('1 hour ago')).toBeInTheDocument()
39 | })
40 |
41 | test('2 hours ago', () => {
42 | render()
43 | expect(screen.getByText('2 hours ago')).toBeInTheDocument()
44 | })
45 |
46 | test('1 day ago', () => {
47 | render()
48 | expect(screen.getByText('1 day ago')).toBeInTheDocument()
49 | })
50 |
51 | test('1 week ago', () => {
52 | render()
53 | expect(screen.getByText('1 week ago')).toBeInTheDocument()
54 | })
55 |
56 | test('21 days ago', () => {
57 | const timeAgoFormatConfig = {
58 | prefixAgo: null,
59 | prefixFromNow: null,
60 | suffixAgo: 'ago',
61 | suffixFromNow: 'from now',
62 | seconds: '%d sec',
63 | minutes: '%d min',
64 | hour: '%d hr',
65 | hours: '%d hrs',
66 | day: '%d day',
67 | days: '%d days',
68 | wordSeparator: ' ',
69 | }
70 |
71 | const timeAgoFormatter = buildFormatter(timeAgoFormatConfig)
72 |
73 | render(
74 | new Date('Tue Apr 24 2018 15:12:51 GMT-0400 (EDT)').getTime()}
78 | />,
79 | )
80 | expect(screen.getByText('21 days ago')).toBeInTheDocument()
81 | })
82 |
83 | /* zh-TW */
84 | const formatter = buildFormatter(TWStrings)
85 |
86 | /* 1 week ago in zh-TW */
87 | it('1 week ago in zh-TW', () => {
88 | render(
89 | ,
93 | )
94 | expect(screen.getByText('7天之前')).toBeInTheDocument()
95 | })
96 |
97 | test('allow custom wordSeparator', () => {
98 | const strings = Object.assign({}, TWStrings, { wordSeparator: 'x' })
99 | const formatter = buildFormatter(strings)
100 | render(
101 | ,
105 | )
106 | expect(screen.getByText('7天x之前')).toBeInTheDocument()
107 | })
108 |
109 | test('on date change, now() should be updated', () => {
110 | const start = 1000000000000
111 | const second = 1_000
112 | const now = jest.fn(() => start + 10 * second) // T+10
113 |
114 | const Component = ({ date }) => <>
115 |
116 |
117 |
118 | const { rerender } = render()
119 | expect(screen.getByText('10 seconds ago')).toBeInTheDocument()
120 |
121 | // advance time by another 10s - T+20
122 | now.mockImplementation(() => start + second * 20)
123 |
124 | // add 1s to previous value
125 | rerender()
126 |
127 | // 20 - 1 = 19, because new now() value should be applied
128 | expect(screen.getByText('19 seconds ago')).toBeInTheDocument()
129 | })
130 | })
--------------------------------------------------------------------------------
/src/formatters/buildFormatter.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import type { Node as ReactNode } from 'react'
4 | import type { Formatter, Unit, Suffix } from '../types'
5 |
6 | type StringOrFn = string | ((value: number, millisDelta: number) => string)
7 | type NumberArray = [
8 | string,
9 | string,
10 | string,
11 | string,
12 | string,
13 | string,
14 | string,
15 | string,
16 | string,
17 | string,
18 | ]
19 |
20 | export type L10nsStrings = {
21 | prefixAgo?: ?StringOrFn,
22 | prefixFromNow?: ?StringOrFn,
23 | suffixAgo?: ?StringOrFn,
24 | suffixFromNow?: ?StringOrFn,
25 | second?: ?StringOrFn,
26 | seconds?: ?StringOrFn,
27 | minute?: ?StringOrFn,
28 | minutes?: ?StringOrFn,
29 | hour?: ?StringOrFn,
30 | hours?: ?StringOrFn,
31 | day?: ?StringOrFn,
32 | days?: ?StringOrFn,
33 | week?: ?StringOrFn,
34 | weeks?: ?StringOrFn,
35 | month?: ?StringOrFn,
36 | months?: ?StringOrFn,
37 | year?: ?StringOrFn,
38 | years?: ?StringOrFn,
39 | wordSeparator?: ?string,
40 | numbers?: ?NumberArray,
41 | }
42 |
43 | // If the numbers array is present, format numbers with it,
44 | // otherwise just cast the number to a string and return it
45 | const normalizeNumber = (numbers: ?NumberArray, value: number) =>
46 | numbers && numbers.length === 10
47 | ? String(value)
48 | .split('')
49 | .map((digit: string) =>
50 | digit.match(/^[0-9]$/)
51 | ? ((numbers: any): NumberArray)[parseInt(digit)]
52 | : digit,
53 | )
54 | .join('')
55 | : String(value)
56 |
57 | // Take a string or a function that takes number of days and returns a string
58 | // and provide a uniform API to create string parts
59 | const normalizeFn =
60 | (value: number, distanceMillis: number, numbers?: NumberArray) =>
61 | (stringOrFn: StringOrFn) =>
62 | typeof stringOrFn === 'function'
63 | ? stringOrFn(value, distanceMillis).replace(
64 | /%d/g,
65 | normalizeNumber(numbers, value),
66 | )
67 | : stringOrFn.replace(/%d/g, normalizeNumber(numbers, value))
68 |
69 | const pluralize = (unit: Unit) => {
70 | switch (unit) {
71 | case 'second':
72 | return 'seconds'
73 | case 'minute':
74 | return 'minutes'
75 | case 'hour':
76 | return 'hours'
77 | case 'day':
78 | return 'days'
79 | case 'week':
80 | return 'weeks'
81 | case 'month':
82 | return 'months'
83 | case 'year':
84 | return 'years'
85 | default:
86 | return unit
87 | }
88 | }
89 |
90 | export default function buildFormatter(strings: L10nsStrings): Formatter {
91 | return function formatter(
92 | _value: number,
93 | _unit: Unit,
94 | suffix: Suffix,
95 | epochMilliseconds: number,
96 | _nextFormmater: Formatter,
97 | now: () => number,
98 | ) {
99 | const current = now()
100 | let value = _value
101 | let unit = _unit
102 | // convert weeks to days if strings don't handle weeks
103 | if (unit === 'week' && !strings.week && !strings.weeks) {
104 | const days = Math.round(
105 | Math.abs(epochMilliseconds - current) / (1000 * 60 * 60 * 24),
106 | )
107 | value = days
108 | unit = 'day'
109 | }
110 |
111 | // create a normalize function for given value
112 | const normalize = normalizeFn(
113 | value,
114 | current - epochMilliseconds,
115 | strings.numbers != null ? strings.numbers : undefined,
116 | )
117 |
118 | // The eventual return value stored in an array so that the wordSeparator can be used
119 | const dateString: Array = []
120 |
121 | // handle prefixes
122 | if (suffix === 'ago' && strings.prefixAgo) {
123 | dateString.push(normalize(strings.prefixAgo))
124 | }
125 | if (suffix === 'from now' && strings.prefixFromNow) {
126 | dateString.push(normalize(strings.prefixFromNow))
127 | }
128 |
129 | // Handle Main number and unit
130 | const isPlural = value > 1
131 | if (isPlural) {
132 | const stringFn: StringOrFn =
133 | strings[pluralize(unit)] || strings[unit] || '%d ' + unit
134 | dateString.push(normalize(stringFn))
135 | } else {
136 | const stringFn: StringOrFn =
137 | strings[unit] || strings[pluralize(unit)] || '%d ' + unit
138 | dateString.push(normalize(stringFn))
139 | }
140 |
141 | // Handle Suffixes
142 | if (suffix === 'ago' && strings.suffixAgo) {
143 | dateString.push(normalize(strings.suffixAgo))
144 | }
145 | if (suffix === 'from now' && strings.suffixFromNow) {
146 | dateString.push(normalize(strings.suffixFromNow))
147 | }
148 |
149 | // join the array into a string and return it
150 | const wordSeparator =
151 | typeof strings.wordSeparator === 'string' ? strings.wordSeparator : ' '
152 | return dateString.join(wordSeparator)
153 | }
154 | }
155 |
--------------------------------------------------------------------------------
/scripts/gen-types.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | const fsPromises = require('fs/promises')
4 | const monorepoPackage = require('../package.json')
5 | const path = require('path')
6 | const translate = require('flow-api-translator')
7 | const yargs = require('yargs/yargs')
8 |
9 | const prettierConfig = {
10 | ...monorepoPackage.prettier,
11 | // semi: true,
12 | }
13 |
14 | async function generateTypes(inputDir, outputDir, rootDir) {
15 | const rootPath = rootDir ?? path.resolve(inputDir, '../')
16 |
17 | await fsPromises.mkdir(outputDir, { recursive: true })
18 | let dirents = await fsPromises.readdir(inputDir, { withFileTypes: true })
19 |
20 | const jsFlowFiles = dirents
21 | .filter((dirent) => dirent.name.endsWith('.js.flow'))
22 | .map((dirent) => dirent.name.replace(/\.js\.flow$/, '.js'))
23 |
24 | const dTsFiles = dirents
25 | .filter((dirent) => dirent.name.endsWith('.d.ts'))
26 | .map((dirent) => dirent.name)
27 |
28 | dirents = dirents.filter((dirents) => !jsFlowFiles.includes(dirents.name))
29 |
30 | for (const dirent of dirents) {
31 | try {
32 | const inputFullPath = path.join(inputDir, dirent.name)
33 | const outputFullPath = path
34 | .join(outputDir, dirent.name)
35 | .replace(/\.js\.flow$/, '.js')
36 | if (dirent.isDirectory()) {
37 | if (dirent.name !== '__tests__') {
38 | await generateTypes(inputFullPath, outputFullPath, rootPath)
39 | }
40 | } else {
41 | // // dirent is a file
42 | if (dirent.name.endsWith('.d.ts')) {
43 | const fileContents = await fsPromises.readFile(inputFullPath, 'utf8')
44 | await fsPromises.writeFile(
45 | path.join(outputDir, dirent.name),
46 | fileContents,
47 | )
48 | }
49 |
50 | if (dirent.name.endsWith('.js') || dirent.name.endsWith('.js.flow')) {
51 | try {
52 | let fileContents = await fsPromises.readFile(inputFullPath, 'utf8')
53 | fileContents = preprocessFileContents(fileContents)
54 | const outputFlowContents = await translate.translateFlowToFlowDef(
55 | fileContents,
56 | prettierConfig,
57 | )
58 |
59 | await fsPromises.writeFile(
60 | `${outputFullPath}.flow`,
61 | outputFlowContents,
62 | )
63 | const tsOutputName = dirent.name
64 | .replace(/\.js$/, '.d.ts')
65 | .replace(/\.js\.flow$/, '.d.ts')
66 | if (dTsFiles.includes(tsOutputName)) {
67 | continue
68 | }
69 | const outputTSContents = await translate.translateFlowToTSDef(
70 | fileContents,
71 | prettierConfig,
72 | )
73 | await fsPromises.writeFile(
74 | outputFullPath.replace(/\.js$/, '.d.ts'),
75 | // Typescript Prefers `NodePath` unlike `NodePath<>` in Flow
76 | // `flow-api-translator` doesn't handle this case yet.
77 | postProcessTSOutput(outputTSContents),
78 | )
79 | } catch (err) {
80 | console.log(`Failed to process file: ${inputFullPath}`)
81 | throw err
82 | }
83 | }
84 | }
85 | } catch (err) {
86 | console.error(`Failed to process file: ${dirent.name}`)
87 | console.error(err)
88 | }
89 | }
90 | }
91 |
92 | // Changes to files before they are processed by `flow-api-translator`
93 | // to patch the bugs in the translator
94 | function preprocessFileContents(inputCode) {
95 | // `flow-api-translator` doesn't handle Flow comments correctly
96 | while (inputCode.includes('/*::')) {
97 | const startIndex = inputCode.indexOf('/*::')
98 | const endIndex = inputCode.indexOf('*/', startIndex)
99 |
100 | const comment = inputCode.substring(startIndex, endIndex + 2)
101 | const replacement = comment.substring(4, comment.length - 2)
102 |
103 | inputCode = inputCode.replace(comment, replacement)
104 | }
105 | return inputCode
106 | }
107 |
108 | function postProcessTSOutput(outputCode) {
109 | const result = outputCode
110 | .replace(/<>/g, '')
111 | .replace(/\$ReadOnlyMap/g, 'ReadonlyMap')
112 | .replace(/\$ReadOnlySet/g, 'ReadonlySet')
113 |
114 | return result
115 | }
116 |
117 | const args = yargs(process.argv)
118 | .option('inputDir', {
119 | alias: 'i',
120 | type: 'string',
121 | })
122 | .option('outputDir', {
123 | alias: 'o',
124 | type: 'string',
125 | }).argv
126 |
127 | const inputDir = path.join(process.cwd(), args.inputDir)
128 | const outputDir = path.join(process.cwd(), args.outputDir)
129 | generateTypes(inputDir, outputDir)
130 | .then(() => {
131 | console.log('Done generating type definition files')
132 | })
133 | .catch((err) => {
134 | console.error(err)
135 | process.exit(1)
136 | })
137 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from 'react'
4 | import { useEffect, useState } from 'react'
5 | import dateParser from './dateParser'
6 | import defaultFormatter from './defaultFormatter'
7 | export type { Formatter, Suffix, Unit } from './types'
8 |
9 | export type Props = $ReadOnly<{
10 | /** If the component should update itself over time */
11 | live?: boolean,
12 | /** minimum amount of time in seconds between re-renders */
13 | minPeriod?: number,
14 | /** Maximum time between re-renders in seconds. The component should update at least once every `x` seconds */
15 | maxPeriod?: number,
16 | /** The container to render the string into. You could use a string like `span` or a custom component */
17 | component?: string | React.ComponentType<{ ... }>,
18 | /**
19 | * A title used for setting the title attribute if a