Merge pull request #218 from github/version-4

Version 4
github · Nov 29, 2022 · 0db8776 · 0db8776
2 parents ba0405c + 89ac984
commit 0db8776
Show file tree

Hide file tree

Showing 20 changed files with 49 additions and 1,069 deletions.
diff --git a/README.md b/README.md
@@ -5,17 +5,17 @@ Formats a timestamp as a localized string or as relative text that auto-updates
 This allows the server to cache HTML fragments containing dates and lets the browser choose how to localize the displayed time according to the user's preferences. For example, the server may have cached the following generated markup:
 
 ```html
-<local-time datetime="2014-04-01T16:30:00-08:00">
+<relative-time datetime="2014-04-01T16:30:00-08:00">
   April 1, 2014 4:30pm
-</local-time>
+</relative-time>
 ```
 
-Every visitor is served the same markup from the server's cache. When it reaches the browser, the custom `local-time` JavaScript localizes the element's text into the local timezone and formatting.
+Every visitor is served the same markup from the server's cache. When it reaches the browser, the custom `relative-time` JavaScript localizes the element's text into the local timezone and formatting.
 
 ```html
-<local-time datetime="2014-04-01T16:30:00-08:00">
+<relative-time datetime="2014-04-01T16:30:00-08:00">
   1 Apr 2014 21:30
-</local-time>
+</relative-time>
 ```
 
 Dates are displayed before months, and a 24-hour clock is used, according to the user's browser settings.
@@ -30,15 +30,11 @@ Available on [npm](https://www.npmjs.com/) as [**@github/time-elements**](https:
 $ npm install @github/time-elements
 ```
 
-## Usage
-
-This component provides three custom subtypes of the standard HTML `<time>` element. All custom time elements MUST have a `datetime` attribute set to an ISO 8601 formatted timestamp.
+This element uses the `Intl.DateTimeFormat` & `Intl.RelativeTimeFormat` APIs, which are supported by all modern JS engines. If you need to support an older browser, you may need to introduce a polyfill for `Intl.DateTimeFormat` & `Intl.RelativeTimeFormat`.
 
-### relative-time
-
-A relative time-ago-in-words description can be generated by using the `relative-time` element extension.
+## Usage
 
-Add a `<relative-time>` element to your markup. Provide a default formatted date as the element's text content (e.g. April 1, 2014).
+Add a `<relative-time>` element to your markup. Provide a default formatted date as the element's text content (e.g. April 1, 2014). It also MUST have a `datetime` attribute set to an ISO 8601 formatted timestamp.
 
 ```html
 <relative-time datetime="2014-04-01T16:30:00-08:00">
@@ -208,94 +204,21 @@ For dates outside of the specified `threshold`, the formatting of the date can b
 
 Lang is a [built-in global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). Relative Time will use this to provide an applicable language to the `Intl` APIs. If the individual element does not have a `lang` attribute then it will traverse upwards in the tree to find the closest element that does, or default the lang to `en`.
 
-## Additional Elements
-
-In addition to `<relative-time>` this package provides convenience elements, which are configurations over `<relative-time>`. These additional elements will be removed in a future major version release.
-
-### time-until
-
-This element is the same as `<relative-time tense="future">`. `.tense` will always return `future`, regardless of the value set in the attribute.
-
-You can use `time-until` to always display a relative date that's in the future. It operates much like `<relative-time>`, except in the reverse, with past events shown as `just now` and future events always showing as relative:
-
-- in 10 years
-- in 20 days
-- in 6 hours
-- in 20 minutes
-- in 30 seconds
-- just now
-
-Add a `<time-until>` element to your markup. Provide a default formatted date as the element's text content (e.g. April 1, 2024).
-
-``` html
-<time-until datetime="2024-04-01T16:30:00-08:00">
-  April 1, 2024
-</time-until>
-```
-#### Micro format
-
-The optional `format="micro"` attribute shortens the descriptions to 1m, 1h, 1d, 1y.
-
-``` html
-<time-until datetime="2012-04-01T16:30:00-08:00" format="micro">
-  April 1, 2014
-</time-until>
-```
-
-### time-ago
-
-This element is the same as `<relative-time tense="past">`. `.tense` will always return `past`, regardless of the value set in the attribute.
-
-An *always* relative time-ago-in-words description can be generated by using the `time-ago` element extension. This is similar to the `relative-time` extension. However, this will never switch to displaying the date. It strictly shows relative date phrases, even after a month has passed.
-
-``` html
-<time-ago datetime="2012-04-01T16:30:00-08:00">
-  April 1, 2014
-</time-ago>
-```
-
-For example, if this markup is viewed two years in the future, the element's text will read `2 years ago`.
-
-#### Micro format
-
-The optional `format="micro"` attribute shortens the descriptions to 1m, 1h, 1d, 1y.
-
-``` html
-<time-ago datetime="2012-04-01T16:30:00-08:00" format="micro">
-  April 1, 2014
-</time-ago>
-```
-
-### local-time
-
-This is a variation of `<relative-time>` with some subtly different formatting. 
-
-This custom time extension is useful for formatting a date and time in the user's preferred locale format.
-
-``` html
-<local-time datetime="2014-04-01T16:30:00-08:00"
-    month="short"
-    day="numeric"
-    year="numeric"
-    hour="numeric"
-    minute="numeric">
-  April 1, 2014 4:30PM PDT
-</local-time>
-```
-
-When this markup is viewed in a CDT timezone, it will show `Apr 1, 2014 6:30PM`. If it's viewed in a browser with European date preferences, it will read `1 Apr 2014 18:30`.
-
 ## Browser Support
 
-Browsers without native [custom element support][support] require a [polyfill][].
+Browsers without native [custom element support][support] require a [polyfill][ce-polyfill].
+
+Browsers without native support for [`Intl.RelativeTimeFormat`][relativetimeformat] or [`Intl.DateTimeFormat`][datetimeformat] (such as Safari 13 or Edge 18) will also need polyfills.
 
 - Chrome
 - Firefox
-- Safari
-- Microsoft Edge
+- Safari (version 14 and above)
+- Microsoft Edge (version 79 and above)
 
 [support]: https://caniuse.com/custom-elementsv1
-[polyfill]: https://github.com/webcomponents/custom-elements
+[relativetimeformat]: https://caniuse.com/mdn-javascript_builtins_intl_relativetimeformat_format
+[datetimeformat]: https://caniuse.com/mdn-javascript_builtins_intl_datetimeformat_format
+[ce-polyfill]: https://github.com/webcomponents/custom-elements
 
 ## See Also
 

diff --git a/src/datetimeformat-ponyfill.ts b/src/datetimeformat-ponyfill.ts
diff --git a/src/index.ts b/src/index.ts
@@ -1,8 +1,5 @@
-import LocalTimeElement from './local-time-element-define.js'
 import RelativeTimeElement from './relative-time-element-define.js'
-import TimeAgoElement from './time-ago-element-define.js'
-import TimeUntilElement from './time-until-element-define.js'
 
-export {LocalTimeElement, RelativeTimeElement, TimeAgoElement, TimeUntilElement}
+export {RelativeTimeElement}
 export default RelativeTimeElement
 export * from './relative-time-element-define.js'
diff --git a/src/local-time-element-define.ts b/src/local-time-element-define.ts
diff --git a/src/local-time-element.ts b/src/local-time-element.ts