From 80d5f427c9d3d664692abe1f16af1e4e90cb70ad Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Thu, 2 Jul 2020 18:06:58 +0100
Subject: [PATCH 01/11] Empty Picker implementation

---
 Sources/TokamakCore/Views/Picker.swift   | 56 ++++++++++++++++++++++++
 Sources/TokamakDOM/Views/Picker.swift    | 27 ++++++++++++
 Sources/TokamakDOM/Views/TextField.swift |  4 +-
 docs/progress.md                         | 30 ++++++-------
 4 files changed, 100 insertions(+), 17 deletions(-)
 create mode 100644 Sources/TokamakCore/Views/Picker.swift
 create mode 100644 Sources/TokamakDOM/Views/Picker.swift

diff --git a/Sources/TokamakCore/Views/Picker.swift b/Sources/TokamakCore/Views/Picker.swift
new file mode 100644
index 000000000..9ded50036
--- /dev/null
+++ b/Sources/TokamakCore/Views/Picker.swift
@@ -0,0 +1,56 @@
+// Copyright 2020 Tokamak contributors
+//
+// 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.
+
+public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View {
+  let selection: Binding<SelectionValue>
+  let label: Label
+  let content: Content
+
+  public init(
+    selection: Binding<SelectionValue>,
+    label: Label,
+    @ViewBuilder content: () -> Content
+  ) {
+    self.selection = selection
+    self.label = label
+    self.content = content()
+  }
+
+  public var body: Never {
+    neverBody("Picker")
+  }
+}
+
+extension Picker where Label == Text {
+  @_disfavoredOverload public init<S: StringProtocol>(
+    _ title: S,
+    selection: Binding<SelectionValue>,
+    @ViewBuilder content: () -> Content
+  ) {
+    self.init(selection: selection, label: Text(title)) {
+      content()
+    }
+  }
+}
+
+/// This is a helper class that works around absence of "package private" access control in Swift
+public struct _PickerProxy<Label: View, SelectionValue: Hashable, Content: View> {
+  public let subject: Picker<Label, SelectionValue, Content>
+
+  public init(_ subject: Picker<Label, SelectionValue, Content>) { self.subject = subject }
+
+  public var selection: Binding<SelectionValue> { subject.selection }
+  public var label: Label { subject.label }
+  public var content: Content { subject.content }
+}
diff --git a/Sources/TokamakDOM/Views/Picker.swift b/Sources/TokamakDOM/Views/Picker.swift
new file mode 100644
index 000000000..a473ff488
--- /dev/null
+++ b/Sources/TokamakDOM/Views/Picker.swift
@@ -0,0 +1,27 @@
+// Copyright 2020 Tokamak contributors
+//
+// 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.
+
+import TokamakCore
+
+public typealias Picker = TokamakCore.Picker
+
+extension Picker: ViewDeferredToRenderer where Label == Text {
+  public var deferredBody: AnyView {
+    let proxy = _PickerProxy(self)
+
+    return AnyView(HTML("select") {
+      proxy.content
+    })
+  }
+}
diff --git a/Sources/TokamakDOM/Views/TextField.swift b/Sources/TokamakDOM/Views/TextField.swift
index f1df76314..84e35cd93 100644
--- a/Sources/TokamakDOM/Views/TextField.swift
+++ b/Sources/TokamakDOM/Views/TextField.swift
@@ -22,8 +22,8 @@ public typealias TextField = TokamakCore.TextField
 func css(for style: TextFieldStyle) -> String {
   if style is PlainTextFieldStyle {
     return """
-      background: transparent;
-      border: none;
+    background: transparent;
+    border: none;
     """
   } else {
     return ""
diff --git a/docs/progress.md b/docs/progress.md
index f9f29177d..d30c7e94a 100644
--- a/docs/progress.md
+++ b/docs/progress.md
@@ -44,7 +44,7 @@ Table columns:
 |     |                                                                              |     |
 | --- | ---------------------------------------------------------------------------- | :-: |
 |     | [Toggle](https://developer.apple.com/documentation/swiftui/toggle)           |     |
-|     | [Picker](https://developer.apple.com/documentation/swiftui/picker)           |     |
+| 🚧  | [Picker](https://developer.apple.com/documentation/swiftui/picker)           |     |
 |     | [DatePicker](https://developer.apple.com/documentation/swiftui/datepicker)   |     |
 |     | [Slider](https://developer.apple.com/documentation/swiftui/slider)           |     |
 |     | [Stepper](https://developer.apple.com/documentation/swiftui/stepper)         |     |
@@ -110,7 +110,7 @@ Table columns:
 
 |     |                                                                      |     |
 | --- | -------------------------------------------------------------------- | :-: |
-| ✅ | [Spacer](https://developer.apple.com/documentation/swiftui/spacer)   |     |
+| ✅  | [Spacer](https://developer.apple.com/documentation/swiftui/spacer)   |     |
 |     | [Divider](https://developer.apple.com/documentation/swiftui/divider) |     |
 
 ### Architectural Views
@@ -140,22 +140,22 @@ Table columns:
 
 ### Shapes
 
-|     |                                                                                            |     |
-| --- | ------------------------------------------------------------------------------------------ | :-: |
-| 🚧  | [Rectangle](https://developer.apple.com/documentation/swiftui/rectangle)                    |     |
-| 🚧  | [RoundedRectangle](https://developer.apple.com/documentation/swiftui/roundedrectangle)     |     |
-| 🚧  | [Ellipse](https://developer.apple.com/documentation/swiftui/ellipse)                       |     |
-| 🚧  | [Circle](https://developer.apple.com/documentation/swiftui/circle)                         |     |
-| 🚧  | [Capsule](https://developer.apple.com/documentation/swiftui/capsule)                       |     |
+|     |                                                                                        |     |
+| --- | -------------------------------------------------------------------------------------- | :-: |
+| 🚧  | [Rectangle](https://developer.apple.com/documentation/swiftui/rectangle)               |     |
+| 🚧  | [RoundedRectangle](https://developer.apple.com/documentation/swiftui/roundedrectangle) |     |
+| 🚧  | [Ellipse](https://developer.apple.com/documentation/swiftui/ellipse)                   |     |
+| 🚧  | [Circle](https://developer.apple.com/documentation/swiftui/circle)                     |     |
+| 🚧  | [Capsule](https://developer.apple.com/documentation/swiftui/capsule)                   |     |
 
 ### Paths
 
-|     |                                                                                            |     |
-| --- | ------------------------------------------------------------------------------------------ | :-: |
-| 🚧  | [Path](https://developer.apple.com/documentation/swiftui/path)                             |     |
+|     |                                                                |     |
+| --- | -------------------------------------------------------------- | :-: |
+| 🚧  | [Path](https://developer.apple.com/documentation/swiftui/path) |     |
 
 ### Styles
 
-|     |                                                                                            |     |
-| --- | ------------------------------------------------------------------------------------------ | :-: |
-| 🚧  | [Color](https://developer.apple.com/documentation/swiftui/color)                           |     |
+|     |                                                                  |     |
+| --- | ---------------------------------------------------------------- | :-: |
+| 🚧  | [Color](https://developer.apple.com/documentation/swiftui/color) |     |

From c0e3e1f0dc486fcae0e1ee6804e85460abed6b29 Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Thu, 2 Jul 2020 21:08:47 +0100
Subject: [PATCH 02/11] Add PickerStyle with sub-styles

---
 Sources/TokamakCore/Styles/PickerStyle.swift | 42 ++++++++++++++++
 Sources/TokamakCore/Views/Picker.swift       | 53 ++++++++++++++++----
 Sources/TokamakCore/Views/TextField.swift    |  3 +-
 Sources/TokamakDOM/Views/Picker.swift        | 14 ++++--
 4 files changed, 95 insertions(+), 17 deletions(-)
 create mode 100644 Sources/TokamakCore/Styles/PickerStyle.swift

diff --git a/Sources/TokamakCore/Styles/PickerStyle.swift b/Sources/TokamakCore/Styles/PickerStyle.swift
new file mode 100644
index 000000000..38ca5c9d1
--- /dev/null
+++ b/Sources/TokamakCore/Styles/PickerStyle.swift
@@ -0,0 +1,42 @@
+// Copyright 2020 Tokamak contributors
+//
+// 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.
+
+public protocol PickerStyle {}
+
+public struct PopUpButtonPickerStyle: PickerStyle {}
+
+public struct RadioGroupPickerStyle: PickerStyle {}
+
+public struct DefaultPickerStyle: PickerStyle {}
+
+enum PickerStyleKey: EnvironmentKey {
+  static var defaultValue: PickerStyle = DefaultPickerStyle()
+}
+
+extension EnvironmentValues {
+  var pickerStyle: PickerStyle {
+    get {
+      self[PickerStyleKey.self]
+    }
+    set {
+      self[PickerStyleKey.self] = newValue
+    }
+  }
+}
+
+extension View {
+  public func pickerStyle(_ style: PickerStyle) -> some View {
+    environment(\.pickerStyle, style)
+  }
+}
diff --git a/Sources/TokamakCore/Views/Picker.swift b/Sources/TokamakCore/Views/Picker.swift
index 9ded50036..4ed84a5e6 100644
--- a/Sources/TokamakCore/Views/Picker.swift
+++ b/Sources/TokamakCore/Views/Picker.swift
@@ -12,10 +12,39 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+public struct _RadioGroupPicker<Label: View, SelectionValue: Hashable, Content: View>: View {
+  public let content: Content
+
+  public var body: Never {
+    neverBody("RadioGroupPicker")
+  }
+}
+
+public struct _PopUpButtonPicker<Label: View, SelectionValue: Hashable, Content: View>: View {
+  public let content: Content
+
+  public init(content: Content) {
+    self.content = content
+  }
+
+  public var body: Never {
+    neverBody("PopUpButtonPicker")
+  }
+}
+
+public struct _DefaultPicker<Label: View, SelectionValue: Hashable, Content: View>: View {
+  public let content: Content
+
+  public var body: Never {
+    neverBody("DefaultPicker")
+  }
+}
+
 public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View {
   let selection: Binding<SelectionValue>
   let label: Label
   let content: Content
+  @Environment(\.pickerStyle) var style: PickerStyle
 
   public init(
     selection: Binding<SelectionValue>,
@@ -27,8 +56,15 @@ public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View
     self.content = content()
   }
 
-  public var body: Never {
-    neverBody("Picker")
+  public var body: some View {
+    switch style {
+    case is PopUpButtonPickerStyle:
+      return AnyView(_PopUpButtonPicker<Label, SelectionValue, Content>(content: content))
+    case is RadioGroupPickerStyle:
+      return AnyView(_RadioGroupPicker<Label, SelectionValue, Content>(content: content))
+    default:
+      return AnyView(_DefaultPicker<Label, SelectionValue, Content>(content: content))
+    }
   }
 }
 
@@ -44,13 +80,8 @@ extension Picker where Label == Text {
   }
 }
 
-/// This is a helper class that works around absence of "package private" access control in Swift
-public struct _PickerProxy<Label: View, SelectionValue: Hashable, Content: View> {
-  public let subject: Picker<Label, SelectionValue, Content>
-
-  public init(_ subject: Picker<Label, SelectionValue, Content>) { self.subject = subject }
-
-  public var selection: Binding<SelectionValue> { subject.selection }
-  public var label: Label { subject.label }
-  public var content: Content { subject.content }
+extension Picker: ParentView {
+  public var children: [AnyView] {
+    (content as? GroupView)?.children ?? [AnyView(content)]
+  }
 }
diff --git a/Sources/TokamakCore/Views/TextField.swift b/Sources/TokamakCore/Views/TextField.swift
index ce9c9a381..9aa065ef8 100644
--- a/Sources/TokamakCore/Views/TextField.swift
+++ b/Sources/TokamakCore/Views/TextField.swift
@@ -48,7 +48,8 @@ public struct TextField<Label>: View where Label: View {
 
 extension TextField where Label == Text {
   public init<S>(
-    _ title: S, text: Binding<String>,
+    _ title: S,
+    text: Binding<String>,
     onEditingChanged: @escaping (Bool) -> () = { _ in },
     onCommit: @escaping () -> () = {}
   ) where S: StringProtocol {
diff --git a/Sources/TokamakDOM/Views/Picker.swift b/Sources/TokamakDOM/Views/Picker.swift
index a473ff488..6c54d1cdb 100644
--- a/Sources/TokamakDOM/Views/Picker.swift
+++ b/Sources/TokamakDOM/Views/Picker.swift
@@ -16,12 +16,16 @@ import TokamakCore
 
 public typealias Picker = TokamakCore.Picker
 
-extension Picker: ViewDeferredToRenderer where Label == Text {
+extension _PopUpButtonPicker: ViewDeferredToRenderer where Label == Text {
   public var deferredBody: AnyView {
-    let proxy = _PickerProxy(self)
-
-    return AnyView(HTML("select") {
-      proxy.content
+    AnyView(HTML("select") {
+      content
     })
   }
 }
+
+extension _DefaultPicker: ViewDeferredToRenderer {
+  public var deferredBody: AnyView {
+    AnyView(_PopUpButtonPicker<Label, SelectionValue, Content>(content: content))
+  }
+}

From 01656557729a8e2354b39cb5a10c3f2c6420c353 Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Thu, 2 Jul 2020 21:53:29 +0100
Subject: [PATCH 03/11] Add missing styles to TokamakCore, fix re-export

---
 Sources/TokamakCore/Styles/PickerStyle.swift |  4 +++
 Sources/TokamakCore/Views/Picker.swift       | 30 ++++++++++++++++++--
 Sources/TokamakDOM/Views/Picker.swift        |  5 ++++
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/Sources/TokamakCore/Styles/PickerStyle.swift b/Sources/TokamakCore/Styles/PickerStyle.swift
index 38ca5c9d1..48cb3fdcb 100644
--- a/Sources/TokamakCore/Styles/PickerStyle.swift
+++ b/Sources/TokamakCore/Styles/PickerStyle.swift
@@ -18,6 +18,10 @@ public struct PopUpButtonPickerStyle: PickerStyle {}
 
 public struct RadioGroupPickerStyle: PickerStyle {}
 
+public struct SegmentedPickerStyle: PickerStyle {}
+
+public struct WheelPickerStyle: PickerStyle {}
+
 public struct DefaultPickerStyle: PickerStyle {}
 
 enum PickerStyleKey: EnvironmentKey {
diff --git a/Sources/TokamakCore/Views/Picker.swift b/Sources/TokamakCore/Views/Picker.swift
index 4ed84a5e6..b97296abe 100644
--- a/Sources/TokamakCore/Views/Picker.swift
+++ b/Sources/TokamakCore/Views/Picker.swift
@@ -16,7 +16,7 @@ public struct _RadioGroupPicker<Label: View, SelectionValue: Hashable, Content:
   public let content: Content
 
   public var body: Never {
-    neverBody("RadioGroupPicker")
+    neverBody("_RadioGroupPicker")
   }
 }
 
@@ -28,7 +28,31 @@ public struct _PopUpButtonPicker<Label: View, SelectionValue: Hashable, Content:
   }
 
   public var body: Never {
-    neverBody("PopUpButtonPicker")
+    neverBody("_PopUpButtonPicker")
+  }
+}
+
+public struct _SegmentedPicker<Label: View, SelectionValue: Hashable, Content: View>: View {
+  public let content: Content
+
+  public init(content: Content) {
+    self.content = content
+  }
+
+  public var body: Never {
+    neverBody("_SegmentedPicker")
+  }
+}
+
+public struct _WheelPicker<Label: View, SelectionValue: Hashable, Content: View>: View {
+  public let content: Content
+
+  public init(content: Content) {
+    self.content = content
+  }
+
+  public var body: Never {
+    neverBody("_WheelPicker")
   }
 }
 
@@ -36,7 +60,7 @@ public struct _DefaultPicker<Label: View, SelectionValue: Hashable, Content: Vie
   public let content: Content
 
   public var body: Never {
-    neverBody("DefaultPicker")
+    neverBody("_DefaultPicker")
   }
 }
 
diff --git a/Sources/TokamakDOM/Views/Picker.swift b/Sources/TokamakDOM/Views/Picker.swift
index 6c54d1cdb..eab16bac4 100644
--- a/Sources/TokamakDOM/Views/Picker.swift
+++ b/Sources/TokamakDOM/Views/Picker.swift
@@ -15,6 +15,11 @@
 import TokamakCore
 
 public typealias Picker = TokamakCore.Picker
+public typealias PopUpButtonPickerStyle = TokamakCore.PopUpButtonPickerStyle
+public typealias RadioGroupPickerStyle = TokamakCore.RadioGroupPickerStyle
+public typealias SegmentedPickerStyle = TokamakCore.SegmentedPickerStyle
+public typealias WheelPickerStyle = TokamakCore.WheelPickerStyle
+public typealias DefaultPickerStyle = TokamakCore.DefaultPickerStyle
 
 extension _PopUpButtonPicker: ViewDeferredToRenderer where Label == Text {
   public var deferredBody: AnyView {

From fcc59234f8da829ae934e1d2c97cfc18afa9b88f Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Thu, 2 Jul 2020 22:38:17 +0100
Subject: [PATCH 04/11] Add implementation comment to Picker

---
 Sources/TokamakCore/Views/Picker.swift | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/Sources/TokamakCore/Views/Picker.swift b/Sources/TokamakCore/Views/Picker.swift
index b97296abe..bf0e1007b 100644
--- a/Sources/TokamakCore/Views/Picker.swift
+++ b/Sources/TokamakCore/Views/Picker.swift
@@ -81,6 +81,9 @@ public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View
   }
 
   public var body: some View {
+    // Need to implement a special behavior here. If one of the children is `ForEach`
+    // and its `Data.Element` type is the same as `SelectionValue` type, then we can
+    // update the binding.
     switch style {
     case is PopUpButtonPickerStyle:
       return AnyView(_PopUpButtonPicker<Label, SelectionValue, Content>(content: content))

From a865e4251c7d4fd10aa6b0f37ca0f544d28fce1a Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Thu, 2 Jul 2020 23:34:57 +0100
Subject: [PATCH 05/11] ForEach introspection work in progress

---
 Sources/TokamakCore/Views/ForEach.swift |  9 ++++
 Sources/TokamakCore/Views/Picker.swift  | 61 +++++--------------------
 2 files changed, 21 insertions(+), 49 deletions(-)

diff --git a/Sources/TokamakCore/Views/ForEach.swift b/Sources/TokamakCore/Views/ForEach.swift
index 71665a32e..a95750d65 100644
--- a/Sources/TokamakCore/Views/ForEach.swift
+++ b/Sources/TokamakCore/Views/ForEach.swift
@@ -12,6 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/// A protocol that allows matching against type-erased `ForEach` at run time.
+protocol ForEachProtocol {
+  var elementType: Any.Type { get }
+}
+
 /// A structure that computes `View`s from a collection of identified data.
 ///
 /// Available when `Data` conforms to `RandomAccessCollection`,
@@ -46,6 +51,10 @@ public struct ForEach<Data, ID, Content>: View
   }
 }
 
+extension ForEach: ForEachProtocol {
+  var elementType: Any.Type { Data.Element.self }
+}
+
 public extension ForEach where Data.Element: Identifiable, ID == Data.Element.ID {
   init(
     _ data: Data,
diff --git a/Sources/TokamakCore/Views/Picker.swift b/Sources/TokamakCore/Views/Picker.swift
index bf0e1007b..e1f947eba 100644
--- a/Sources/TokamakCore/Views/Picker.swift
+++ b/Sources/TokamakCore/Views/Picker.swift
@@ -12,55 +12,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-public struct _RadioGroupPicker<Label: View, SelectionValue: Hashable, Content: View>: View {
-  public let content: Content
-
-  public var body: Never {
-    neverBody("_RadioGroupPicker")
-  }
-}
-
-public struct _PopUpButtonPicker<Label: View, SelectionValue: Hashable, Content: View>: View {
-  public let content: Content
-
-  public init(content: Content) {
-    self.content = content
-  }
-
-  public var body: Never {
-    neverBody("_PopUpButtonPicker")
-  }
-}
-
-public struct _SegmentedPicker<Label: View, SelectionValue: Hashable, Content: View>: View {
-  public let content: Content
-
-  public init(content: Content) {
-    self.content = content
-  }
-
-  public var body: Never {
-    neverBody("_SegmentedPicker")
-  }
-}
-
-public struct _WheelPicker<Label: View, SelectionValue: Hashable, Content: View>: View {
-  public let content: Content
-
-  public init(content: Content) {
-    self.content = content
-  }
+public struct _PickerLabel<Label: View>: View {
+  let label: Label
 
   public var body: Never {
-    neverBody("_WheelPicker")
+    neverBody("_PickerLabel")
   }
 }
 
-public struct _DefaultPicker<Label: View, SelectionValue: Hashable, Content: View>: View {
-  public let content: Content
+public struct _PickerElement: View {
+  let content: AnyView
 
   public var body: Never {
-    neverBody("_DefaultPicker")
+    neverBody("_PickerElement")
   }
 }
 
@@ -81,16 +45,15 @@ public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View
   }
 
   public var body: some View {
+    let children = self.children
     // Need to implement a special behavior here. If one of the children is `ForEach`
     // and its `Data.Element` type is the same as `SelectionValue` type, then we can
     // update the binding.
-    switch style {
-    case is PopUpButtonPickerStyle:
-      return AnyView(_PopUpButtonPicker<Label, SelectionValue, Content>(content: content))
-    case is RadioGroupPickerStyle:
-      return AnyView(_RadioGroupPicker<Label, SelectionValue, Content>(content: content))
-    default:
-      return AnyView(_DefaultPicker<Label, SelectionValue, Content>(content: content))
+    Group {
+      _PickerLabel(label: label)
+      ForEach(0..<children.count) {
+        _PickerElement(content: children[$0])
+      }
     }
   }
 }

From f183c83c27ae7d5272e95820c6ae7b1877e0ee12 Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Fri, 3 Jul 2020 00:15:57 +0100
Subject: [PATCH 06/11] Refactor Picker body, first stab at PopUpButton

---
 Sources/TokamakCore/Views/ForEach.swift |  6 ++--
 Sources/TokamakCore/Views/Group.swift   |  5 ++-
 Sources/TokamakCore/Views/Picker.swift  | 45 +++++++++++++++++++------
 Sources/TokamakDOM/Views/Picker.swift   | 24 ++++++++++---
 4 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/Sources/TokamakCore/Views/ForEach.swift b/Sources/TokamakCore/Views/ForEach.swift
index 87ee304f0..4a587c44f 100644
--- a/Sources/TokamakCore/Views/ForEach.swift
+++ b/Sources/TokamakCore/Views/ForEach.swift
@@ -13,8 +13,9 @@
 // limitations under the License.
 
 /// A protocol that allows matching against type-erased `ForEach` at run time.
-protocol ForEachProtocol {
+protocol ForEachProtocol: GroupView {
   var elementType: Any.Type { get }
+  func element(at: Int) -> Any
 }
 
 /// A structure that computes `View`s from a collection of identified data.
@@ -51,8 +52,9 @@ public struct ForEach<Data, ID, Content>: View
   }
 }
 
-extension ForEach: ForEachProtocol {
+extension ForEach: ForEachProtocol where Data.Index == Int {
   var elementType: Any.Type { Data.Element.self }
+  func element(at index: Int) -> Any { data[index] }
 }
 
 public extension ForEach where Data.Element: Identifiable, ID == Data.Element.ID {
diff --git a/Sources/TokamakCore/Views/Group.swift b/Sources/TokamakCore/Views/Group.swift
index 89bbcd561..59fd18358 100644
--- a/Sources/TokamakCore/Views/Group.swift
+++ b/Sources/TokamakCore/Views/Group.swift
@@ -14,13 +14,12 @@
 
 public struct Group<Content> {
   let content: Content
-}
-
-extension Group: View where Content: View {
   public init(@ViewBuilder content: () -> Content) {
     self.content = content()
   }
+}
 
+extension Group: View where Content: View {
   public var body: Never {
     neverBody("Group")
   }
diff --git a/Sources/TokamakCore/Views/Picker.swift b/Sources/TokamakCore/Views/Picker.swift
index e1f947eba..5f61398e6 100644
--- a/Sources/TokamakCore/Views/Picker.swift
+++ b/Sources/TokamakCore/Views/Picker.swift
@@ -12,16 +12,31 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-public struct _PickerLabel<Label: View>: View {
-  let label: Label
+public struct _PickerContainer<Label: View, SelectionValue: Hashable, Content: View>: View {
+  public let selection: Binding<SelectionValue>
+  public let label: Label
+  public let content: Content
+  @Environment(\.pickerStyle) public var style: PickerStyle
+
+  public init(
+    selection: Binding<SelectionValue>,
+    label: Label,
+    @ViewBuilder content: () -> Content
+  ) {
+    self.selection = selection
+    self.label = label
+    self.content = content()
+  }
 
   public var body: Never {
     neverBody("_PickerLabel")
   }
 }
 
-public struct _PickerElement: View {
-  let content: AnyView
+public struct _PickerElement<SelectionValue>: View {
+  public let value: SelectionValue?
+  public let content: AnyView
+  @Environment(\.pickerStyle) public var style: PickerStyle
 
   public var body: Never {
     neverBody("_PickerElement")
@@ -32,7 +47,6 @@ public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View
   let selection: Binding<SelectionValue>
   let label: Label
   let content: Content
-  @Environment(\.pickerStyle) var style: PickerStyle
 
   public init(
     selection: Binding<SelectionValue>,
@@ -46,13 +60,22 @@ public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View
 
   public var body: some View {
     let children = self.children
-    // Need to implement a special behavior here. If one of the children is `ForEach`
-    // and its `Data.Element` type is the same as `SelectionValue` type, then we can
-    // update the binding.
-    Group {
-      _PickerLabel(label: label)
+
+    return _PickerContainer(selection: selection, label: label) {
+      // Need to implement a special behavior here. If one of the children is `ForEach`
+      // and its `Data.Element` type is the same as `SelectionValue` type, then we can
+      // update the binding.
       ForEach(0..<children.count) {
-        _PickerElement(content: children[$0])
+        if let forEach = children[$0] as? ForEachProtocol,
+          forEach.elementType == SelectionValue.self {
+          let nestedChildren = forEach.children
+
+          ForEach(0..<nestedChildren.count) {
+            _PickerElement(value: forEach.element(at: $0), content: nestedChildren[$0])
+          }
+        } else {
+          _PickerElement<SelectionValue>(value: nil, content: children[$0])
+        }
       }
     }
   }
diff --git a/Sources/TokamakDOM/Views/Picker.swift b/Sources/TokamakDOM/Views/Picker.swift
index eab16bac4..57fca76e6 100644
--- a/Sources/TokamakDOM/Views/Picker.swift
+++ b/Sources/TokamakDOM/Views/Picker.swift
@@ -21,16 +21,30 @@ public typealias SegmentedPickerStyle = TokamakCore.SegmentedPickerStyle
 public typealias WheelPickerStyle = TokamakCore.WheelPickerStyle
 public typealias DefaultPickerStyle = TokamakCore.DefaultPickerStyle
 
-extension _PopUpButtonPicker: ViewDeferredToRenderer where Label == Text {
+extension _PickerContainer: ViewDeferredToRenderer {
   public var deferredBody: AnyView {
-    AnyView(HTML("select") {
-      content
+    AnyView(HTML("label") {
+      label
+
+      HTML("select", listeners: ["change": { _ in }]) {
+        content
+      }
     })
   }
 }
 
-extension _DefaultPicker: ViewDeferredToRenderer {
+extension _PickerElement: ViewDeferredToRenderer {
   public var deferredBody: AnyView {
-    AnyView(_PopUpButtonPicker<Label, SelectionValue, Content>(content: content))
+    let attributes: [String: String]
+    if let value = value {
+      // FIXME: should match against IDs and map those IDs to values via a dictionary
+      attributes = ["value": "\(value)"]
+    } else {
+      attributes = [:]
+    }
+
+    return AnyView(HTML("option", attributes) {
+      content
+    })
   }
 }

From 322c1f9cf139e74f6a502e9a2967e9d0e5d99a6f Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Tue, 7 Jul 2020 23:06:22 +0100
Subject: [PATCH 07/11] Crash reproduction code

---
 Sources/TokamakCore/Views/ForEach.swift    |  1 +
 Sources/TokamakCore/Views/Picker.swift     | 32 +++++++++++++--------
 Sources/TokamakDOM/Shapes/Path.swift       |  2 +-
 Sources/TokamakDOM/Views/Picker.swift      | 33 +++++++++++-----------
 Sources/TokamakDOM/Views/SecureField.swift |  8 +++---
 Sources/TokamakDOM/Views/TextField.swift   |  8 +++---
 Sources/TokamakDemo/TokamakDemo.swift      | 20 +++++++++++++
 7 files changed, 67 insertions(+), 37 deletions(-)

diff --git a/Sources/TokamakCore/Views/ForEach.swift b/Sources/TokamakCore/Views/ForEach.swift
index 4a587c44f..7c2ef38db 100644
--- a/Sources/TokamakCore/Views/ForEach.swift
+++ b/Sources/TokamakCore/Views/ForEach.swift
@@ -79,6 +79,7 @@ public extension ForEach where Data == Range<Int>, ID == Int {
 
 extension ForEach: ParentView {
   public var children: [AnyView] {
+    // data.map { print($0); let result = AnyView(content($0)); print(result); return result }
     data.map { AnyView(content($0)) }
   }
 }
diff --git a/Sources/TokamakCore/Views/Picker.swift b/Sources/TokamakCore/Views/Picker.swift
index 5f61398e6..6d10b2da5 100644
--- a/Sources/TokamakCore/Views/Picker.swift
+++ b/Sources/TokamakCore/Views/Picker.swift
@@ -33,8 +33,8 @@ public struct _PickerContainer<Label: View, SelectionValue: Hashable, Content: V
   }
 }
 
-public struct _PickerElement<SelectionValue>: View {
-  public let value: SelectionValue?
+public struct _PickerElement: View {
+  public let valueIndex: Int?
   public let content: AnyView
   @Environment(\.pickerStyle) public var style: PickerStyle
 
@@ -47,6 +47,7 @@ public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View
   let selection: Binding<SelectionValue>
   let label: Label
   let content: Content
+  // let values: [SelectionValue:]
 
   public init(
     selection: Binding<SelectionValue>,
@@ -62,20 +63,27 @@ public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View
     let children = self.children
 
     return _PickerContainer(selection: selection, label: label) {
+      // EmptyView()
       // Need to implement a special behavior here. If one of the children is `ForEach`
       // and its `Data.Element` type is the same as `SelectionValue` type, then we can
       // update the binding.
-      ForEach(0..<children.count) {
-        if let forEach = children[$0] as? ForEachProtocol,
-          forEach.elementType == SelectionValue.self {
-          let nestedChildren = forEach.children
+      ForEach(0..<children.count) { index -> _ConditionalContent<AnyView, AnyView> in
+        print("index is \(index), children.count is \(children.count)")
+        // if let forEach = children[index] as? ForEachProtocol,
+        //   forEach.elementType == SelectionValue.self {
+        //   let nestedChildren = forEach.children
 
-          ForEach(0..<nestedChildren.count) {
-            _PickerElement(value: forEach.element(at: $0), content: nestedChildren[$0])
-          }
-        } else {
-          _PickerElement<SelectionValue>(value: nil, content: children[$0])
-        }
+        //   print("true branch")
+        //   return .trueBranch(AnyView(EmptyView()))
+        //   // return .trueBranch(AnyView(ForEach(0..<nestedChildren.count) { nestedIndex -> _PickerElement in
+        //   //   print(nestedIndex)
+        //   //   return _PickerElement(valueIndex: nestedIndex, content: nestedChildren[nestedIndex])
+        //   // }))
+        // } else {
+        // print("false branch")
+        return .falseBranch(AnyView(EmptyView()))
+        // return .falseBranch(AnyView(_PickerElement(valueIndex: nil, content: children[index])))
+        // }
       }
     }
   }
diff --git a/Sources/TokamakDOM/Shapes/Path.swift b/Sources/TokamakDOM/Shapes/Path.swift
index 752fb7cbb..801c38652 100644
--- a/Sources/TokamakDOM/Shapes/Path.swift
+++ b/Sources/TokamakDOM/Shapes/Path.swift
@@ -50,7 +50,7 @@ extension Path: ViewDeferredToRenderer {
         "rx": "\(roundedRect.cornerSize.width)",
         "ry": "\(roundedRect.style == .continuous ? roundedRect.cornerSize.width : roundedRect.cornerSize.height)",
       ]
-        .merging(stroke, uniquingKeysWith: uniqueKeys)))
+      .merging(stroke, uniquingKeysWith: uniqueKeys)))
     case let .stroked(stroked):
       return stroked.path.svgFrom(storage: stroked.path.storage, strokeStyle: stroked.style)
     case let .trimmed(trimmed):
diff --git a/Sources/TokamakDOM/Views/Picker.swift b/Sources/TokamakDOM/Views/Picker.swift
index 57fca76e6..b015a039c 100644
--- a/Sources/TokamakDOM/Views/Picker.swift
+++ b/Sources/TokamakDOM/Views/Picker.swift
@@ -26,25 +26,26 @@ extension _PickerContainer: ViewDeferredToRenderer {
     AnyView(HTML("label") {
       label
 
-      HTML("select", listeners: ["change": { _ in }]) {
-        content
+      HTML("select", listeners: ["change": { print($0) }]) { () -> AnyView in
+        print("content is \(content)")
+        // return AnyView(EmptyView())
+        return AnyView(content)
       }
     })
   }
 }
 
-extension _PickerElement: ViewDeferredToRenderer {
-  public var deferredBody: AnyView {
-    let attributes: [String: String]
-    if let value = value {
-      // FIXME: should match against IDs and map those IDs to values via a dictionary
-      attributes = ["value": "\(value)"]
-    } else {
-      attributes = [:]
-    }
+// extension _PickerElement: ViewDeferredToRenderer {
+//   public var deferredBody: AnyView {
+//     let attributes: [String: String]
+//     if let value = valueIndex {
+//       attributes = ["value": "\(value)"]
+//     } else {
+//       attributes = [:]
+//     }
 
-    return AnyView(HTML("option", attributes) {
-      content
-    })
-  }
-}
+//     return AnyView(HTML("option", attributes) {
+//       content
+//     })
+//   }
+// }
diff --git a/Sources/TokamakDOM/Views/SecureField.swift b/Sources/TokamakDOM/Views/SecureField.swift
index d500afc79..0a8d4f604 100644
--- a/Sources/TokamakDOM/Views/SecureField.swift
+++ b/Sources/TokamakDOM/Views/SecureField.swift
@@ -29,10 +29,10 @@ extension SecureField: ViewDeferredToRenderer where Label == Text {
     ], listeners: [
       "keypress": { event in if event.key == "Enter" { proxy.onCommit() } },
       "input": { event in
-          if let newValue = event.target.object?.value.string {
-            proxy.textBinding.wrappedValue = newValue
-          }
-        },
+        if let newValue = event.target.object?.value.string {
+          proxy.textBinding.wrappedValue = newValue
+        }
+      },
     ]))
   }
 }
diff --git a/Sources/TokamakDOM/Views/TextField.swift b/Sources/TokamakDOM/Views/TextField.swift
index 84e35cd93..8dd1be63e 100644
--- a/Sources/TokamakDOM/Views/TextField.swift
+++ b/Sources/TokamakDOM/Views/TextField.swift
@@ -44,10 +44,10 @@ extension TextField: ViewDeferredToRenderer where Label == Text {
       "blur": { _ in proxy.onEditingChanged(false) },
       "keypress": { event in if event.key == "Enter" { proxy.onCommit() } },
       "input": { event in
-          if let newValue = event.target.object?.value.string {
-            proxy.textBinding.wrappedValue = newValue
-          }
-        },
+        if let newValue = event.target.object?.value.string {
+          proxy.textBinding.wrappedValue = newValue
+        }
+      },
     ]))
   }
 }
diff --git a/Sources/TokamakDemo/TokamakDemo.swift b/Sources/TokamakDemo/TokamakDemo.swift
index ec7b02763..af4cd2386 100644
--- a/Sources/TokamakDemo/TokamakDemo.swift
+++ b/Sources/TokamakDemo/TokamakDemo.swift
@@ -21,6 +21,25 @@ import SwiftUI
 import TokamakDOM
 #endif
 
+struct CheeseStrength: View {
+  var strengths = ["Mild", "Medium", "Mature"]
+
+  @State private var selectedStrength = 0
+
+  var body: some View {
+    VStack {
+      Text("\(selectedStrength)")
+      Picker(selection: $selectedStrength, label: Text("Strength")) {
+        // EmptyView()
+        Text("Foo")
+        ForEach(strengths, id: \.self) {
+          Text($0)
+        }
+      }
+    }
+  }
+}
+
 struct TokamakDemoView: View {
   var body: some View {
     ScrollView(showsIndicators: false) {
@@ -48,6 +67,7 @@ struct TokamakDemoView: View {
           .frame(width: 25, height: 25)
         #endif
         TextFieldDemo()
+        CheeseStrength()
         SpacerDemo()
         Spacer()
         Text("Forced to bottom.")

From 6fcacaf3951ddb14cc332108a2a4fde587f83f65 Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Wed, 8 Jul 2020 00:21:02 +0100
Subject: [PATCH 08/11] Add @ViewBuilder annotation on `View.body`

---
 Sources/TokamakCore/Views/View.swift | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Sources/TokamakCore/Views/View.swift b/Sources/TokamakCore/Views/View.swift
index 12b734af5..d20b81c15 100644
--- a/Sources/TokamakCore/Views/View.swift
+++ b/Sources/TokamakCore/Views/View.swift
@@ -18,7 +18,7 @@
 public protocol View {
   associatedtype Body: View
 
-  var body: Self.Body { get }
+  @ViewBuilder var body: Self.Body { get }
 }
 
 extension Never: View {

From 6ec4622f6389d93a5cdfdc9241e8d68e68edce6f Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Thu, 16 Jul 2020 20:28:40 +0100
Subject: [PATCH 09/11] Fix PopUpButtonPickerStyle

---
 Sources/TokamakCore/Views/ForEach.swift       |  1 -
 Sources/TokamakCore/Views/Picker.swift        | 36 ++++++++--------
 Sources/TokamakDOM/Views/Picker.swift         | 41 +++++++++++--------
 Sources/TokamakDemo/GridDemo.swift            | 20 +++++----
 Sources/TokamakDemo/PathDemo.swift            |  1 -
 Sources/TokamakDemo/PickerDemo.swift          | 35 ++++++++++++++++
 Sources/TokamakDemo/TokamakDemo.swift         | 20 +--------
 .../project.pbxproj                           |  6 +++
 8 files changed, 92 insertions(+), 68 deletions(-)
 create mode 100644 Sources/TokamakDemo/PickerDemo.swift

diff --git a/Sources/TokamakCore/Views/ForEach.swift b/Sources/TokamakCore/Views/ForEach.swift
index 7c2ef38db..4a587c44f 100644
--- a/Sources/TokamakCore/Views/ForEach.swift
+++ b/Sources/TokamakCore/Views/ForEach.swift
@@ -79,7 +79,6 @@ public extension ForEach where Data == Range<Int>, ID == Int {
 
 extension ForEach: ParentView {
   public var children: [AnyView] {
-    // data.map { print($0); let result = AnyView(content($0)); print(result); return result }
     data.map { AnyView(content($0)) }
   }
 }
diff --git a/Sources/TokamakCore/Views/Picker.swift b/Sources/TokamakCore/Views/Picker.swift
index 6d10b2da5..96d25a6f5 100644
--- a/Sources/TokamakCore/Views/Picker.swift
+++ b/Sources/TokamakCore/Views/Picker.swift
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 public struct _PickerContainer<Label: View, SelectionValue: Hashable, Content: View>: View {
-  public let selection: Binding<SelectionValue>
+  @Binding public var selection: SelectionValue
   public let label: Label
   public let content: Content
   @Environment(\.pickerStyle) public var style: PickerStyle
@@ -23,7 +23,7 @@ public struct _PickerContainer<Label: View, SelectionValue: Hashable, Content: V
     label: Label,
     @ViewBuilder content: () -> Content
   ) {
-    self.selection = selection
+    _selection = selection
     self.label = label
     self.content = content()
   }
@@ -47,7 +47,6 @@ public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View
   let selection: Binding<SelectionValue>
   let label: Label
   let content: Content
-  // let values: [SelectionValue:]
 
   public init(
     selection: Binding<SelectionValue>,
@@ -63,27 +62,24 @@ public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View
     let children = self.children
 
     return _PickerContainer(selection: selection, label: label) {
-      // EmptyView()
       // Need to implement a special behavior here. If one of the children is `ForEach`
       // and its `Data.Element` type is the same as `SelectionValue` type, then we can
       // update the binding.
-      ForEach(0..<children.count) { index -> _ConditionalContent<AnyView, AnyView> in
-        print("index is \(index), children.count is \(children.count)")
-        // if let forEach = children[index] as? ForEachProtocol,
-        //   forEach.elementType == SelectionValue.self {
-        //   let nestedChildren = forEach.children
+      ForEach(0..<children.count) { index -> AnyView in
+        // print(children[index].type as? ForEachProtocol.Type)
+        if let forEach = mapAnyView(children[index], transform: { (v: ForEachProtocol) in v }),
+          forEach.elementType == SelectionValue.self {
+          print("ForEachProtocol")
+          print(SelectionValue.self)
+          print("elementType is \(forEach.elementType)")
+          let nestedChildren = forEach.children
 
-        //   print("true branch")
-        //   return .trueBranch(AnyView(EmptyView()))
-        //   // return .trueBranch(AnyView(ForEach(0..<nestedChildren.count) { nestedIndex -> _PickerElement in
-        //   //   print(nestedIndex)
-        //   //   return _PickerElement(valueIndex: nestedIndex, content: nestedChildren[nestedIndex])
-        //   // }))
-        // } else {
-        // print("false branch")
-        return .falseBranch(AnyView(EmptyView()))
-        // return .falseBranch(AnyView(_PickerElement(valueIndex: nil, content: children[index])))
-        // }
+          return AnyView(ForEach(0..<nestedChildren.count) { nestedIndex in
+            _PickerElement(valueIndex: nestedIndex, content: nestedChildren[nestedIndex])
+          })
+        } else {
+          return AnyView(_PickerElement(valueIndex: nil, content: children[index]))
+        }
       }
     }
   }
diff --git a/Sources/TokamakDOM/Views/Picker.swift b/Sources/TokamakDOM/Views/Picker.swift
index b015a039c..05c2939f3 100644
--- a/Sources/TokamakDOM/Views/Picker.swift
+++ b/Sources/TokamakDOM/Views/Picker.swift
@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import JavaScriptKit
 import TokamakCore
 
 public typealias Picker = TokamakCore.Picker
@@ -25,27 +26,31 @@ extension _PickerContainer: ViewDeferredToRenderer {
   public var deferredBody: AnyView {
     AnyView(HTML("label") {
       label
-
-      HTML("select", listeners: ["change": { print($0) }]) { () -> AnyView in
-        print("content is \(content)")
-        // return AnyView(EmptyView())
-        return AnyView(content)
+      Text(" ")
+      HTML("select", listeners: ["change": {
+        guard
+          let valueString = $0.target.object!.value.string,
+          let value = Int(valueString) as? SelectionValue
+        else { return }
+        selection = value
+      }]) {
+        content
       }
     })
   }
 }
 
-// extension _PickerElement: ViewDeferredToRenderer {
-//   public var deferredBody: AnyView {
-//     let attributes: [String: String]
-//     if let value = valueIndex {
-//       attributes = ["value": "\(value)"]
-//     } else {
-//       attributes = [:]
-//     }
+extension _PickerElement: ViewDeferredToRenderer {
+  public var deferredBody: AnyView {
+    let attributes: [String: String]
+    if let value = valueIndex {
+      attributes = ["value": "\(value)"]
+    } else {
+      attributes = [:]
+    }
 
-//     return AnyView(HTML("option", attributes) {
-//       content
-//     })
-//   }
-// }
+    return AnyView(HTML("option", attributes) {
+      content
+    })
+  }
+}
diff --git a/Sources/TokamakDemo/GridDemo.swift b/Sources/TokamakDemo/GridDemo.swift
index 90967c13f..64cef8bc9 100644
--- a/Sources/TokamakDemo/GridDemo.swift
+++ b/Sources/TokamakDemo/GridDemo.swift
@@ -39,15 +39,17 @@ public struct GridDemo: View {
       }
       VStack {
         Text("Simple LazyHGrid")
-        LazyHGrid(rows: [
-          GridItem(.fixed(50)),
-          GridItem(.fixed(50)),
-          GridItem(.fixed(50)),
-        ]) {
-          ForEach(0..<45) {
-            Text("\($0 + 1)")
-              .padding()
-              .background(Color.blue)
+        ScrollView(.horizontal) {
+          LazyHGrid(rows: [
+            GridItem(.fixed(50)),
+            GridItem(.fixed(50)),
+            GridItem(.fixed(50)),
+          ]) {
+            ForEach(0..<45) {
+              Text("\($0 + 1)")
+                .padding()
+                .background(Color.blue)
+            }
           }
         }
       }
diff --git a/Sources/TokamakDemo/PathDemo.swift b/Sources/TokamakDemo/PathDemo.swift
index 3ab10e730..2b62786a1 100644
--- a/Sources/TokamakDemo/PathDemo.swift
+++ b/Sources/TokamakDemo/PathDemo.swift
@@ -27,7 +27,6 @@ struct Star: Shape {
       path.addLine(to: .init(x: 0, y: 30.4))
       path.addLine(to: .init(x: 64, y: 76))
       path.addLine(to: .init(x: 40, y: 0))
-      print(path)
     }
   }
 }
diff --git a/Sources/TokamakDemo/PickerDemo.swift b/Sources/TokamakDemo/PickerDemo.swift
new file mode 100644
index 000000000..0557a94b7
--- /dev/null
+++ b/Sources/TokamakDemo/PickerDemo.swift
@@ -0,0 +1,35 @@
+// Copyright 2020 Tokamak contributors
+//
+// 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.
+
+#if canImport(SwiftUI)
+import SwiftUI
+#else
+import TokamakDOM
+#endif
+
+struct PickerDemo: View {
+  var textStyles = Font.TextStyle.allCases
+
+  @State private var selection = 0
+
+  var body: some View {
+    Picker(selection: $selection, label: Text("Text style")
+      .font(.system(textStyles[selection]))) {
+      Text("Pick a text style...")
+      ForEach(0..<textStyles.count) {
+        Text(String(describing: textStyles[$0]))
+      }
+    }
+  }
+}
diff --git a/Sources/TokamakDemo/TokamakDemo.swift b/Sources/TokamakDemo/TokamakDemo.swift
index 61850427b..83e989fa8 100644
--- a/Sources/TokamakDemo/TokamakDemo.swift
+++ b/Sources/TokamakDemo/TokamakDemo.swift
@@ -21,25 +21,6 @@ import SwiftUI
 import TokamakDOM
 #endif
 
-struct CheeseStrength: View {
-  var strengths = ["Mild", "Medium", "Mature"]
-
-  @State private var selectedStrength = 0
-
-  var body: some View {
-    VStack {
-      Text("\(selectedStrength)")
-      Picker(selection: $selectedStrength, label: Text("Strength")) {
-        // EmptyView()
-        Text("Foo")
-        ForEach(strengths, id: \.self) {
-          Text($0)
-        }
-      }
-    }
-  }
-}
-
 struct TokamakDemoView: View {
   var body: some View {
     ScrollView(showsIndicators: false) {
@@ -61,6 +42,7 @@ struct TokamakDemoView: View {
           .padding(20)
         }
         Group {
+          PickerDemo()
           ForEachDemo()
           TextDemo()
           PathDemo()
diff --git a/TokamakDemo Native/TokamakDemo Native.xcodeproj/project.pbxproj b/TokamakDemo Native/TokamakDemo Native.xcodeproj/project.pbxproj
index 97c25303b..28a29b8f7 100644
--- a/TokamakDemo Native/TokamakDemo Native.xcodeproj/project.pbxproj	
+++ b/TokamakDemo Native/TokamakDemo Native.xcodeproj/project.pbxproj	
@@ -35,6 +35,8 @@
 		D1B4229124B3B9BB00682F74 /* ListDemo.swift in Sources */ = {isa = PBXBuildFile; fileRef = D1B4228E24B3B9BB00682F74 /* ListDemo.swift */; };
 		D1B4229224B3B9BB00682F74 /* OutlineGroupDemo.swift in Sources */ = {isa = PBXBuildFile; fileRef = D1B4228F24B3B9BB00682F74 /* OutlineGroupDemo.swift */; };
 		D1B4229324B3B9BB00682F74 /* OutlineGroupDemo.swift in Sources */ = {isa = PBXBuildFile; fileRef = D1B4228F24B3B9BB00682F74 /* OutlineGroupDemo.swift */; };
+		D1EE7EA724C0DD2100C0D127 /* PickerDemo.swift in Sources */ = {isa = PBXBuildFile; fileRef = D1EE7EA624C0DD2100C0D127 /* PickerDemo.swift */; };
+		D1EE7EA824C0DD2100C0D127 /* PickerDemo.swift in Sources */ = {isa = PBXBuildFile; fileRef = D1EE7EA624C0DD2100C0D127 /* PickerDemo.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -58,6 +60,7 @@
 		B56F22E224BD1C26001738DF /* GridDemo.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = GridDemo.swift; sourceTree = "<group>"; };
 		D1B4228E24B3B9BB00682F74 /* ListDemo.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ListDemo.swift; sourceTree = "<group>"; };
 		D1B4228F24B3B9BB00682F74 /* OutlineGroupDemo.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = OutlineGroupDemo.swift; sourceTree = "<group>"; };
+		D1EE7EA624C0DD2100C0D127 /* PickerDemo.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = PickerDemo.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -104,6 +107,7 @@
 		85ED189924AD425E0085DFA0 /* TokamakDemo */ = {
 			isa = PBXGroup;
 			children = (
+				D1EE7EA624C0DD2100C0D127 /* PickerDemo.swift */,
 				D1B4228E24B3B9BB00682F74 /* ListDemo.swift */,
 				D1B4228F24B3B9BB00682F74 /* OutlineGroupDemo.swift */,
 				85ED189A24AD425E0085DFA0 /* SpacerDemo.swift */,
@@ -228,6 +232,7 @@
 				85ED18AF24AD425E0085DFA0 /* EnvironmentDemo.swift in Sources */,
 				85ED18A324AD425E0085DFA0 /* SpacerDemo.swift in Sources */,
 				D1B4229024B3B9BB00682F74 /* ListDemo.swift in Sources */,
+				D1EE7EA724C0DD2100C0D127 /* PickerDemo.swift in Sources */,
 				85ED18A924AD425E0085DFA0 /* TokamakDemo.swift in Sources */,
 				85ED18AD24AD425E0085DFA0 /* TextFieldDemo.swift in Sources */,
 				85ED18A724AD425E0085DFA0 /* ForEachDemo.swift in Sources */,
@@ -248,6 +253,7 @@
 				85ED18A424AD425E0085DFA0 /* SpacerDemo.swift in Sources */,
 				85ED18B024AD425E0085DFA0 /* EnvironmentDemo.swift in Sources */,
 				D1B4229124B3B9BB00682F74 /* ListDemo.swift in Sources */,
+				D1EE7EA824C0DD2100C0D127 /* PickerDemo.swift in Sources */,
 				85ED18B624AD42D70085DFA0 /* NSAppDelegate.swift in Sources */,
 				85ED18AC24AD425E0085DFA0 /* Counter.swift in Sources */,
 				85ED18A824AD425E0085DFA0 /* ForEachDemo.swift in Sources */,

From d5453891984c537cd44bb24fa854f4a4e1a8da30 Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Thu, 16 Jul 2020 21:40:52 +0100
Subject: [PATCH 10/11] Remove redundant print

---
 Sources/TokamakCore/Views/Picker.swift | 11 ++++-------
 Sources/TokamakDemo/TokamakDemo.swift  |  2 +-
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/Sources/TokamakCore/Views/Picker.swift b/Sources/TokamakCore/Views/Picker.swift
index 96d25a6f5..b0ba59d30 100644
--- a/Sources/TokamakCore/Views/Picker.swift
+++ b/Sources/TokamakCore/Views/Picker.swift
@@ -65,20 +65,17 @@ public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View
       // Need to implement a special behavior here. If one of the children is `ForEach`
       // and its `Data.Element` type is the same as `SelectionValue` type, then we can
       // update the binding.
-      ForEach(0..<children.count) { index -> AnyView in
+      ForEach(0..<children.count) { index in
         // print(children[index].type as? ForEachProtocol.Type)
         if let forEach = mapAnyView(children[index], transform: { (v: ForEachProtocol) in v }),
           forEach.elementType == SelectionValue.self {
-          print("ForEachProtocol")
-          print(SelectionValue.self)
-          print("elementType is \(forEach.elementType)")
           let nestedChildren = forEach.children
 
-          return AnyView(ForEach(0..<nestedChildren.count) { nestedIndex in
+          ForEach(0..<nestedChildren.count) { nestedIndex in
             _PickerElement(valueIndex: nestedIndex, content: nestedChildren[nestedIndex])
-          })
+          }
         } else {
-          return AnyView(_PickerElement(valueIndex: nil, content: children[index]))
+          _PickerElement(valueIndex: nil, content: children[index])
         }
       }
     }
diff --git a/Sources/TokamakDemo/TokamakDemo.swift b/Sources/TokamakDemo/TokamakDemo.swift
index 83e989fa8..118d02367 100644
--- a/Sources/TokamakDemo/TokamakDemo.swift
+++ b/Sources/TokamakDemo/TokamakDemo.swift
@@ -42,7 +42,6 @@ struct TokamakDemoView: View {
           .padding(20)
         }
         Group {
-          PickerDemo()
           ForEachDemo()
           TextDemo()
           PathDemo()
@@ -50,6 +49,7 @@ struct TokamakDemoView: View {
           SpacerDemo()
           EnvironmentDemo()
             .font(.system(size: 8))
+          PickerDemo()
         }
         Group {
           #if canImport(TokamakDOM)

From d7d8d39dcb0584764e3251e2cdd88de4d4094025 Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Thu, 16 Jul 2020 21:42:34 +0100
Subject: [PATCH 11/11] Remove print comment

---
 Sources/TokamakCore/Views/Picker.swift | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Sources/TokamakCore/Views/Picker.swift b/Sources/TokamakCore/Views/Picker.swift
index b0ba59d30..f270e4317 100644
--- a/Sources/TokamakCore/Views/Picker.swift
+++ b/Sources/TokamakCore/Views/Picker.swift
@@ -66,7 +66,6 @@ public struct Picker<Label: View, SelectionValue: Hashable, Content: View>: View
       // and its `Data.Element` type is the same as `SelectionValue` type, then we can
       // update the binding.
       ForEach(0..<children.count) { index in
-        // print(children[index].type as? ForEachProtocol.Type)
         if let forEach = mapAnyView(children[index], transform: { (v: ForEachProtocol) in v }),
           forEach.elementType == SelectionValue.self {
           let nestedChildren = forEach.children