Wrap words for better readability

Example/Diagnostics-Example/Supporting Files/AppDelegate.swift

@@ -35,6 +35,7 @@ final class AppDelegate: UIResponder, UIApplicationDelegate {
         DiagnosticsLogger.log(message: "Log <a href=\"https://www.wetransfer.com\">HTML</a>")
         DiagnosticsLogger.log(error: ExampleError.missingData)
         DiagnosticsLogger.log(error: ExampleLocalizedError.missingLocalizedData)
+        DiagnosticsLogger.log(message: "A very long string: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque condimentum facilisis arcu, at fermentum diam fermentum in. Nullam lectus libero, tincidunt et risus vel, feugiat vulputate nunc. Nunc malesuada congue risus fringilla lacinia. Aliquam suscipit nulla nec faucibus mattis. Suspendisse quam nunc, interdum vel dapibus in, vulputate ac enim. Morbi placerat commodo leo, nec condimentum eros dictum sit amet. Vivamus maximus neque in dui rutrum, vel consectetur metus mollis. Nulla ultricies sodales viverra. Etiam ut velit consectetur, consectetur turpis eu, volutpat purus. Maecenas vitae consectetur tortor, at eleifend lacus. Nullam sed augue vel purus mollis sagittis at sed dui. Quisque faucibus fermentum lectus eget porttitor. Phasellus efficitur aliquet lobortis. Suspendisse at lectus imperdiet, sollicitudin arcu non, interdum diam. Sed ornare ante dolor. In pretium auctor sem, id vestibulum sem molestie in.")
         // Override point for customization after application launch.
         return true
     }

Sources/Logging/Loggable.swift

@@ -2,6 +2,13 @@ import Foundation
 import MetricKit
 
 protocol Loggable {
+
+    /// The date of the log event. If set, it will be prepended to the log message in the right format.
+    var date: Date? { get }
+
+    /// Any prefix to add before the actual message.
+    var prefix: String? { get }
+
     /// The message to log.
     var message: String { get }
 
@@ -10,15 +17,30 @@ protocol Loggable {
 }
 
 extension Loggable {
+    var date: Date? { nil }
+    var prefix: String? { nil }
     var cssClass: String? { nil }
 
     var logData: Data? {
         if let cssClass = cssClass {
-            return "<p class=\"\(cssClass)\">\(message)</p>".data(using: .utf8)
+            return "<p class=\"\(cssClass)\">\(logMessage)</p>".data(using: .utf8)
         } else {
             return message.data(using: .utf8)
         }
     }
+
+    private var logMessage: String {
+        var messages: [String] = []
+        if let date = date {
+            let date = DateFormatter.current.string(from: date)
+            messages.append("<span class=\"log-date\">\(date)</span>")
+        }
+        if let prefix = prefix {
+            messages.append("<span class=\"log-prefix\">\(prefix)</span>")
+        }
+        messages.append("<span class=\"log-message\">\(self.message)</span>")
+        return messages.joined(separator: "<span class=\"log-separator\"> | </span>")
+    }
 }
 
 struct NewSession: Loggable {
@@ -71,24 +93,26 @@ struct LogItem: Loggable {
         }
     }
 
+    let date: Date? = Date()
+    let prefix: String?
     let message: String
     let cssClass: String?
 
     init(_ type: LogType, file: StaticString, function: StaticString, line: UInt) {
-        let date = DateFormatter.current.string(from: Date())
         let file = String(describing: file).split(separator: "/").last.map(String.init) ?? String(describing: file)
-        self.message = String(format: "%@ | %@:L%@ | %@", date, file, String(line), type.message)
+        prefix = "\(file):L\(line)"
+        self.message = type.message
         self.cssClass = type.cssClass
     }
 }
 
 struct SystemLog: Loggable {
+    let date: Date? = Date()
     let message: String
     let cssClass: String? = "system"
 
     init(line: String) {
-        let date = DateFormatter.current.string(from: Date())
-        message = "\(date) | SYSTEM: \(line)"
+        message = "SYSTEM: \(line)"
     }
 }
 

Sources/style.css

@@ -134,7 +134,6 @@ details {
     border-radius: 4px;
     padding: .5em .5em 0;
     font-family: monospace;
-    white-space: pre;
     font-size: 14px;
     overflow: scroll;
 }