Skip to content

Commit

Permalink
🏗 amp-timeago:1.0 - Use timeago.js library (#32844)
Browse files Browse the repository at this point in the history
* Update amp-timeago:1.0 to use timeago.js package

* Remove third_party/timeagojs

* Simplify replacement logic

* Update docs to use hyphen formats (prior formats still valid)

* Use navigator.language also
  • Loading branch information
caroqliu committed Feb 24, 2021
1 parent a398986 commit 040e20a
Show file tree
Hide file tree
Showing 11 changed files with 141 additions and 1,213 deletions.
2 changes: 0 additions & 2 deletions build-system/test-configs/dep-check-config.js
Expand Up @@ -87,11 +87,9 @@ exports.rules = [
'extensions/amp-subscriptions-google/**/*.js->third_party/subscriptions-project/swg.js',
'extensions/amp-subscriptions/**/*.js->third_party/subscriptions-project/aes_gcm.js',
'extensions/amp-subscriptions/**/*.js->third_party/subscriptions-project/config.js',
'extensions/amp-timeago/1.0/component.js->third_party/timeagojs/timeago.js',
'src/css.js->third_party/css-escape/css-escape.js',
'src/sanitizer.js->third_party/caja/html-sanitizer.js',
'src/shadow-embed.js->third_party/webcomponentsjs/ShadowCSS.js',
'third_party/timeagojs/timeago.js->third_party/timeagojs/timeago-locales.js',
],
},
// Rules for 3p
Expand Down
18 changes: 9 additions & 9 deletions extensions/amp-timeago/0.1/amp-timeago.md
Expand Up @@ -67,35 +67,35 @@ The local default is `en`. Add the `locale` attribute and specify one of the fol
- `ar` (Arabic)
- `be` (Belarusian)
- `bg` (Bulgarian)
- `bn-IN` (Bangla)
- `ca` (Catalan)
- `cs` (Czech)
- `da` (Danish)
- `de` (German)
- `el` (Greek)
- `en` (English)
- `enShort` (English - short)
- `en-short` (English - short)
- `es` (Spanish)
- `eu` (Basque)
- `fa` (Persian - Farsi)
- `fi` (Finnish)
- `fr` (French)
- `gl` (Galician)
- `he` (Hebrew)
- `hi-IN` (Hindi)
- `hu` (Hungarian)
- `inBG` (Bangla)
- `inHI` (Hindi)
- `inID` (Malay)
- `id-ID` (Malay)
- `it` (Italian)
- `ja` (Japanese)
- `ka` (Georgian)
- `ko` (Korean)
- `ml` (Malayalam)
- `my` (Burmese - Myanmar)
- `nbNO` (Norwegian BokmĂĄl)
- `nb-NO` (Norwegian BokmĂĄl)
- `nl` (Dutch)
- `nnNO` (Norwegian Nynorsk)
- `nn-NO` (Norwegian Nynorsk)
- `pl` (Polish)
- `ptBR` (Portuguese)
- `pt-BR` (Portuguese)
- `ro` (Romanian)
- `ru` (Russian)
- `sq` (Albanian)
Expand All @@ -106,8 +106,8 @@ The local default is `en`. Add the `locale` attribute and specify one of the fol
- `tr` (Turkish)
- `uk` (Ukrainian)
- `vi` (Vietnamese)
- `zhCN` (Chinese)
- `zhTW` (Taiwanese)
- `zh-CN` (Chinese)
- `zh-TW` (Taiwanese)

### `cutoff`

Expand Down
48 changes: 19 additions & 29 deletions extensions/amp-timeago/0.1/locales.js
Expand Up @@ -52,34 +52,24 @@ register('oc', oc);
* @return {string}
*/
export function getLocale(locale) {
switch (locale) {
case 'en':
return 'en_US';
case 'enShort':
return 'en_short';
case 'inBG':
return 'bn_IN';
case 'inID':
return 'id_ID';
case 'inHI':
return 'hi_IN';
case 'nbNO':
return 'nb_NO';
case 'nnNO':
return 'nn_NO';
case 'ptBR':
return 'pt_BR';
case 'zhCN':
return 'zh_CN';
case 'zhTW':
return 'zh_TW';
default:
// Note: This line both supports en_Short -> en_short, and consequently
// invalidates default formatting provided by timeago.js. i.e. "zh_CN"
// locale value will not work as it becomes "zh_cn", and the
// registration is case sensitive. If we want to expand the set of
// supported formats to those that are already supported by the
// timeago.js library, we should remove `toLocaleLowerCase`.
return locale.toLocaleLowerCase();
locale = locale.toLowerCase();
if (nonStandardReplacements[locale]) {
return nonStandardReplacements[locale];
}
if (
locale.length === 4 /* without '-|_' */ ||
locale.length === 5 /* with '-|_' */
) {
return `${locale.slice(0, 2)}_${locale.slice(-2).toUpperCase()}`;
}
return locale;
}

const nonStandardReplacements = {
'en': 'en_US',
'enshort': 'en_short',
'en-short': 'en_short',
'inbg': 'bn_IN',
'inid': 'id_ID',
'inhi': 'hi_IN',
};
17 changes: 11 additions & 6 deletions extensions/amp-timeago/1.0/component.js
Expand Up @@ -16,14 +16,14 @@

import * as Preact from '../../../src/preact';
import {Wrapper} from '../../../src/preact/component';
import {format, getLocale} from './locales';
import {getDate} from '../../../src/utils/date';
import {timeago} from '../../../third_party/timeagojs/timeago';
import {toWin} from '../../../src/types';
import {useEffect, useRef, useState} from '../../../src/preact';
import {useResourcesNotify} from '../../../src/preact/utils';

/** @const {string} */
const DEFAULT_LOCALE = 'en';
const DEFAULT_LOCALE = 'en_US';

/** @const {!Object<string, *>} */
const DEFAULT_DATETIME_OPTIONS = {
Expand All @@ -43,7 +43,7 @@ const DEFAULT_TIME_OPTIONS = {'hour': 'numeric', 'minute': 'numeric'};
*/
export function Timeago({
datetime,
locale = DEFAULT_LOCALE,
locale: localeProp,
cutoff,
placeholder,
...rest
Expand All @@ -60,6 +60,11 @@ export function Timeago({
return undefined;
}
const observer = new win.IntersectionObserver((entries) => {
let {lang} = node.ownerDocument.documentElement;
if (lang === 'unknown') {
lang = win.navigator?.language || DEFAULT_LOCALE;
}
const locale = getLocale(localeProp || lang);
const last = entries[entries.length - 1];
if (last.isIntersecting) {
setTimestamp(
Expand All @@ -69,7 +74,7 @@ export function Timeago({
});
observer.observe(node);
return () => observer.disconnect();
}, [date, locale, cutoff, placeholder]);
}, [date, localeProp, cutoff, placeholder]);

useResourcesNotify();

Expand All @@ -94,14 +99,14 @@ export function Timeago({
*/
function getFuzzyTimestampValue(date, locale, cutoff, placeholder) {
if (!cutoff) {
return timeago(date, locale);
return format(date, locale);
}
const secondsAgo = Math.floor((Date.now() - date.getTime()) / 1000);

if (secondsAgo > cutoff) {
return placeholder ? placeholder : getDefaultPlaceholder(date, locale);
}
return timeago(date, locale);
return format(date, locale);
}

/**
Expand Down
75 changes: 75 additions & 0 deletions extensions/amp-timeago/1.0/locales.js
@@ -0,0 +1,75 @@
/**
* Copyright 2021 The AMP HTML Authors. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS-IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/**
* This file registers all necessary locales supported by amp-timeago.
*/

import * as timeago from 'timeago.js/dist/timeago.full.min.js';
import cs from 'timeago.js/esm/lang/cs.js';
import da from 'timeago.js/esm/lang/da.js';
import ka from 'timeago.js/esm/lang/ka.js';
import oc from 'timeago.js/esm/lang/oc.js';

const {format, register} = timeago.default || timeago;
export {format};

/**
* timeago.full.min.js only contains the following 41 locales:
* ar, be, bg, bn_IN, ca, de, el, en_short, en_US, es, eu, fa, fi, fr, gl, he,
* hi_IN, hu, id_ID, it, ja, ko, ml, my, nb_NO, nl, nn_NO, pl, pt_BR, ro, ru,
* sq, sr, sv, ta, th, tr, uk, vi, zh_CN, zh_TW
*
* Register the rest to create full support for the 46 languages
* provided by the timeago.js library.
*
* TODO(wg-components): These can be removed once all the languages are
* exported in timeago.js. See https://github.com/hustcc/timeago.js/issues/238.
*/
register('cs', cs);
register('da', da);
register('ka', ka);
register('oc', oc);

/**
* timeago.full.min.js registers some locales in a different format than what
* is currently supported by amp-timeago. For backwards compatibility, the
* following additional locale formats are converted to their registered type.
* @param {string} locale
* @return {string}
*/
export function getLocale(locale) {
locale = locale.toLowerCase();
if (nonStandardReplacements[locale]) {
return nonStandardReplacements[locale];
}
if (
locale.length === 4 /* without '-|_' */ ||
locale.length === 5 /* with '-|_' */
) {
return `${locale.slice(0, 2)}_${locale.slice(-2).toUpperCase()}`;
}
return locale;
}

const nonStandardReplacements = {
'en': 'en_US',
'enshort': 'en_short',
'en-short': 'en_short',
'inbg': 'bn_IN',
'inid': 'id_ID',
'inhi': 'hi_IN',
};
12 changes: 11 additions & 1 deletion extensions/amp-timeago/1.0/storybook/Basic.js
Expand Up @@ -25,7 +25,17 @@ export default {
decorators: [withA11y, withKnobs],
};

const LOCALES = ['en-US', 'en-GB', 'fr', 'ru', 'ar', 'he', 'ja'];
const LOCALES = [
'en-US',
'en-GB',
'fr',
'ru',
'ar',
'he',
'ja',
'ZhTw',
'zH-Tw',
];

export const _default = () => {
const dateTime = date('Date/time', new Date());
Expand Down
25 changes: 16 additions & 9 deletions extensions/amp-timeago/amp-timeago.md
Expand Up @@ -133,40 +133,47 @@ The local default is `en`. Add the `locale` attribute and specify one of the fol
- `ar` (Arabic)
- `be` (Belarusian)
- `bg` (Bulgarian)
- `bn-IN` (Bangla)
- `ca` (Catalan)
- `cs` (Czech)
- `da` (Danish)
- `de` (German)
- `el` (Greek)
- `en` (English)
- `enShort` (English - short)
- `en-short` (English - short)
- `es` (Spanish)
- `eu` (Basque)
- `fa` (Persian - Farsi)
- `fi` (Finnish)
- `fr` (French)
- `gl` (Galician)
- `he` (Hebrew)
- `hi-IN` (Hindi)
- `hu` (Hungarian)
- `inBG` (Bangla)
- `inHI` (Hindi)
- `inID` (Malay)
- `id-ID` (Malay)
- `it` (Italian)
- `ja` (Japanese)
- `ka` (Georgian)
- `ko` (Korean)
- `ml` (Malayalam)
- `nbNO` (Norwegian BokmĂĄl)
- `my` (Burmese - Myanmar)
- `nb-NO` (Norwegian BokmĂĄl)
- `nl` (Dutch)
- `nnNO` (Norwegian Nynorsk)
- `nn-NO` (Norwegian Nynorsk)
- `pl` (Polish)
- `ptBR` (Portuguese)
- `pt-BR` (Portuguese)
- `ro` (Romanian)
- `ru` (Russian)
- `sq` (Albanian)
- `sr` (Serbian)
- `sv` (Swedish)
- `ta` (Tamil)
- `th` (Thai)
- `tr` (Turkish)
- `uk` (Ukrainian)
- `vi` (Vietnamese)
- `zhCN` (Chinese)
- `zhTW` (Taiwanese)
- `zh-CN` (Chinese)
- `zh-TW` (Taiwanese)

### `cutoff`

Expand Down
21 changes: 0 additions & 21 deletions third_party/timeagojs/LICENSE

This file was deleted.

13 changes: 0 additions & 13 deletions third_party/timeagojs/README.amp

This file was deleted.

0 comments on commit 040e20a

Please sign in to comment.