メソッドチェーンスタイルを使う

Package.resolved

@@ -1,5 +1,5 @@
 {
-  "originHash" : "a89e9c01dd09e0d6bbfd7ad12e500d78134fefd95f97d895f42a0c4036045611",
+  "originHash" : "ae914efbdb2da9e41916baa10a832113ff33cee5cc5798890be618c2cf8fac04",
   "pins" : [
     {
       "identity" : "javascriptkit",
@@ -33,8 +33,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/omochi/swift-react",
       "state" : {
-        "revision" : "702865890bf4fb17d04b7fee72e29229e1260e21",
-        "version" : "0.1.0"
+        "revision" : "19644da253ff9269b848699ff7a2b81f9e6a40cf",
+        "version" : "0.2.0"
       }
     }
   ],

Package.swift

@@ -9,7 +9,8 @@ let package = Package(
         .executable(name: "StringCounter", targets: ["StringCounter"])
     ],
     dependencies: [
-        .package(url: "https://github.com/omochi/swift-react", from: "0.1.0")
+        .package(url: "https://github.com/omochi/swift-react", from: "0.2.0")
+//        .package(path: "../swift-react")
     ],
     targets: [
         .executableTarget(

Sources/StringCounter/Views/AboutView.swift

@@ -0,0 +1,27 @@
+import React
+
+struct AboutView: Component {
+    func render() -> Node {
+        return div(
+            style: .init()
+                .margin("0px 16px 16px")
+        ) {
+            p {
+                "このページでは Swift による文字の数え上げ結果を調べることができます。"
+                "実際に Swift によって実装され、 Wasm にコンパイルすることであなたのブラウザ上で実行しています。"
+            }
+            p {
+                "HTML のレンダリングには "
+
+                a(
+                    attributes: .init()
+                        .href("https://github.com/omochi/swift-react")
+                ) {
+                    "Swift React"
+                }
+
+                " を利用しています。"
+            }
+        }
+    }
+}

Sources/StringCounter/Views/CardHeaderView.swift

@@ -2,47 +2,43 @@ import React
 
 struct CardHeaderView: Component {
     func render() -> Node {
-        func cellStyle(height: String = "18px") -> String {
-            return """
-            display: flex;
-            align-items: center;
-            height: \(height);
-            """
+        func cellStyle(height: String = "18px") -> Style {
+            return .init()
+                .display("flex")
+                .alignItems("center")
+                .height(height)
         }
 
         return div(
-            attributes: [
-                "style": """
-                    display: flex;
-                    flex-direction: column;
-                    align-items: flex-start;
-                    gap: 8px;
-                    border: 1px solid var(--gray-300);
-                    border-radius: 8px;
-                    padding: 8px;
-                """
-            ]
+            style: .init()
+                .display("flex")
+                .flexDirection("column")
+                .alignItems("flex-start")
+                .gap("8px")
+                .border("1px solid var(--gray-300)")
+                .borderRadius("8px")
+                .padding("8px")
         ) {
             div(
-                attributes: ["style": cellStyle()]
+                style: cellStyle()
             ) {
                 "byte offset"
             }
 
             div(
-                attributes: ["style": cellStyle()]
+                style: cellStyle()
             ) {
                 "utf-8 byte"
             }
 
             div(
-                attributes: ["style": cellStyle(height: "40px")]
+                style: cellStyle(height: "40px")
             ) {
                 "unicode scalar"
             }
 
             div(
-                attributes: ["style": cellStyle()]
+                style: cellStyle()
             ) {
                 "character"
             }

Sources/StringCounter/Views/CardListView.swift

@@ -5,14 +5,12 @@ struct CardListView: Component {
 
     func render() -> Node {
         return div(
-            attributes: [
-                "style": """
-                    margin: 0px 16px;
-                    display: flex;
-                    gap: 16px 8px;
-                    flex-wrap: wrap;
-                """
-            ]
+            style: .init()
+                .margin("0px 16px")
+                .display("flex")
+                .gap("16px 8px")
+                .flexWrap("wrap")
+
         ) {
             CardHeaderView()
 

Sources/StringCounter/Views/CardView.swift

@@ -9,64 +9,57 @@ struct CardView: Component {
     }
 
     func render() -> Node {
-        func cellStyle(font: String? = nil) -> String {
-            var s = """
-            display: flex;
-            align-items: center;
-            height: 18px;
-            """
+        func cellStyle(font: String? = nil) -> Style {
+            var s = Style()
+                .display("flex")
+                .alignItems("center")
+                .height("18px")
             if let font {
-                s += "font-family: \(font);"
+                s = s.fontFamily(font)
             }
             return s
         }
 
         return div(
-            attributes: [
-                "style": """
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                gap: 8px;
-                border: 1px solid var(--gray-300);
-                border-radius: 8px;
-                padding: 8px;
-                """
-            ]
+            style: .init()
+                .display("flex")
+                .flexDirection("column")
+                .alignItems("center")
+                .gap("8px")
+                .border("1px solid var(--gray-300)")
+                .borderRadius("8px")
+                .padding("8px")
         ) {
             div(
-                attributes: ["style": cellStyle(font: "monospace")]
+                style: cellStyle(font: "monospace")
             ) {
                 "\(card.byteOffset)"
             }
 
             div(
-                attributes: ["style": cellStyle(font: "monospace")]
+                style: cellStyle(font: "monospace")
             ) {
                 String(format: "0x%02X", card.byte)
             }
 
             div(
-                attributes: [
-                    "style": """
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    gap: 4px;
-                    """
-                ]
+                style: .init()
+                    .display("flex")
+                    .flexDirection("column")
+                    .alignItems("center")
+                    .gap("4px")
             ) {
 
                 div(
-                    attributes: ["style": cellStyle(font: "monospace")]
+                    style: cellStyle(font: "monospace")
                 ) {
                     if let scalar = card.scalar {
                         String(format: "U+%04X", scalar.value)
                     }
                 }
 
                 div(
-                    attributes: ["style": cellStyle()]
+                    style: cellStyle()
                 ) {
                     if let scalar = card.scalar {
                         scalar.description
@@ -75,7 +68,7 @@ struct CardView: Component {
             }
 
             div(
-                attributes: ["style": cellStyle()]
+                style: cellStyle()
             ) {
                 if let char = card.char {
                     char.description

Sources/StringCounter/Views/RootView.swift

@@ -12,36 +12,27 @@ struct RootView: Component {
         let cards = Card.make(from: text)
 
         return div(
-            attributes: [
-                "style": """
-                    display: flex;
-                    flex-direction: column;
-                """
-            ]
+            style: .init()
+                .display("flex")
+                .flexDirection("column")
         ) {
             TitleBarView()
 
             div(
-                attributes: [
-                    "style": """
-                        display: flex;
-                        flex-direction: column;
-                        gap: 16px;
-                    """
-                ]
+                style: .init()
+                    .display("flex")
+                    .flexDirection("column")
+                    .gap("16px")
             ) {
 
                 textarea(
-                    attributes: [
-                        "rows": "4",
-                        "placeholder": "input your string here",
-                        "style": """
-                            margin: 0px 16px;
-                        """
-                    ],
-                    listeners: [
-                        "input": onTextChange
-                    ]
+                    attributes: .init()
+                        .rows("4")
+                        .placeholder("input your string here"),
+                    style: .init()
+                        .margin("0px 16px"),
+                    listeners: .init()
+                        .input(onTextChange)
                 )
 
                 CardListView(cards: cards)