Add <time> element

Sources/Plot/API/HTML.swift

@@ -138,6 +138,8 @@ public extension HTML {
     enum TableContext: HTMLStylableContext {}
     /// The context within an HTML `<tr>` element.
     enum TableRowContext: HTMLStylableContext {}
+    /// The context within an HTML `<time>` element.
+    final class TimeContext: BodyContext, HTMLDateTimeContext {}
     /// The context within an HTML `<video>` element.
     enum VideoContext: HTMLMediaContext {
         public typealias SourceContext = VideoSourceContext
@@ -148,6 +150,9 @@ public extension HTML {
 
 /// Context shared among all HTML elements.
 public protocol HTMLContext {}
+/// Context shared among all HTML elements that support the `datetime`
+/// attribute, such as `<time>`.
+public protocol HTMLDateTimeContext: HTMLContext {}
 /// Context shared among all HTML elements that can have their dimensions
 /// (width and height) specified through attributes, such as `<video>`.
 public protocol HTMLDimensionContext: HTMLContext {}

Sources/Plot/API/HTMLAttributes.swift

@@ -1,3 +1,4 @@
+import Foundation
 /**
 *  Plot
 *  Copyright (c) John Sundell 2019
@@ -191,6 +192,13 @@ public extension Node where Context == HTML.AnchorContext {
     }
 }
 
+// MARK: - DateTime
+public extension Node where Context == HTML.TimeContext {
+    static func datetime(_ datetime: Date) -> Node {
+        .attribute(named: "datetime", value: DateFormatter.ISOstring(from: datetime))
+    }
+}
+
 // MARK: - Interactive elements
 
 public extension Node where Context == HTML.DetailsContext {

Sources/Plot/API/HTMLComponents.swift

@@ -4,6 +4,8 @@
 *  MIT license, see LICENSE file for details
 */
 
+import Foundation
+
 // MARK: - Nodes
 
 public extension Node where Context == HTML.HeadContext {
@@ -850,3 +852,24 @@ public struct TextArea: InputComponent {
         )
     }
 }
+
+/// Component that represents a datetime instance
+public struct Time: Component {
+    /// A closure that provides the contained content.
+    @ComponentBuilder public var content: ContentProvider
+    /// The datetime that the element represents
+    public var datetime: Date?
+
+    public init(datetime: Date? = nil,
+                @ComponentBuilder content: @escaping ContentProvider) {
+        self.datetime = datetime
+        self.content = content
+    }
+
+    public var body: Component {
+        Node.time(
+            .unwrap(datetime, Node.datetime),
+            .component(content())
+        )
+    }
+}

Sources/Plot/API/HTMLElements.swift

@@ -1,3 +1,4 @@
+import Foundation
 /**
 *  Plot
 *  Copyright (c) John Sundell 2019
@@ -382,6 +383,13 @@ public extension Node where Context: HTML.BodyContext {
     static func textarea(_ nodes: Node<HTML.TextAreaContext>...) -> Node {
         .element(named: "textarea", nodes: nodes)
     }
+
+    /// Add a `<time>` HTML element within the current context.
+    /// - parameter datetime: The datetime that the element represents
+    /// - parameter nodes: The element's attributes and nodes.
+    static func time(_ nodes: Node<HTML.TimeContext>...) -> Node {
+        .element(named: "time", nodes: nodes)
+    }
 
     /// Add a `<u>` HTML element within the current context.
     /// - parameter nodes: The element's attributes and child elements.

Sources/Plot/Internal/DateFormatter+string.swift

@@ -0,0 +1,26 @@
+//
+//  DateFormatter+string.swift
+//  
+//
+//  Created by Harry Day on 24/08/2022
+//  
+//
+//  Twitter: https://twitter.com/harrydayexe
+//  Github: https://github.com/harrydayexe
+//
+
+
+import Foundation
+
+internal extension DateFormatter {
+    /// Convert a date object into a RF361 compliant datetime string.
+    /// - parameter date: The date object to convert to a string.
+    static func ISOstring(from date: Date) -> String {
+        let df = DateFormatter()
+        df.locale = Locale(identifier: "en_US_POSIX")
+        df.dateFormat = "yyyy-MM-dd'T'HH:mm:ssZZZZZ"
+        df.timeZone = TimeZone(secondsFromGMT: 0)
+
+        return df.string(from: date)
+    }
+}

Tests/PlotTests/HTMLComponentTests.swift

@@ -426,6 +426,14 @@ final class HTMLComponentTests: XCTestCase {
 
         XCTAssertEqual(html, "<ol><li>One</li><li>Two</li></ol>")
     }
+
+    func testTime() {
+        let html = Time(datetime: Date(timeIntervalSince1970: 1321628079)) {
+            Paragraph("Hello World")
+        }.render()
+
+        XCTAssertEqual(html, #"<time datetime="2011-11-18T14:54:39Z"><p>Hello World</p></time>"#)
+    }
 
     func testOrderedListWithExplicitItems() {
         struct SeventhComponent: Component {

Tests/PlotTests/HTMLTests.swift

@@ -820,6 +820,19 @@ final class HTMLTests: XCTestCase {
         </picture></body>
         """)
     }
+
+    func testTime() {
+        let html = HTML(.body(.time(
+            .text("Hello World!"),
+            .datetime(Date(timeIntervalSince1970: 1321628079))
+        )))
+
+        assertEqualHTMLContent(html, """
+        <body><time datetime="2011-11-18T14:54:39Z">\
+        Hello World!\
+        </time></body>
+        """)
+    }
 
     func testOnClick() {
         let html = HTML(