Merge pull request #154 from liveviewnative/naming-convention

carson-katri · web-flow · commit d1be5b10ae0a · 2023-01-25T16:25:10.000-05:00
Consistent naming convention
diff --git a/Sources/LiveViewNative/BuiltinRegistry.swift b/Sources/LiveViewNative/BuiltinRegistry.swift
@@ -14,43 +14,43 @@ struct BuiltinRegistry {
     @ViewBuilder
     static func lookup<R: CustomRegistry>(_ name: String, _ element: ElementNode, context: LiveContext<R>) -> some View {
         switch name {
-        case "textfield":
+        case "text-field":
             TextField<R>(element: element, context: context)
-        case "securefield":
+        case "secure-field":
             SecureField<R>(element: element, context: context)
         case "text":
             Text(context: context)
-        case "hstack":
+        case "h-stack", "hstack":
             HStack<R>(element: element, context: context)
-        case "vstack":
+        case "v-stack", "vstack":
             VStack<R>(element: element, context: context)
-        case "zstack":
+        case "z-stack", "zstack":
             ZStack<R>(element: element, context: context)
         case "button":
             Button<R>(element: element, context: context, action: nil)
         case "image":
             Image(element: element, context: context)
-        case "asyncimage":
+        case "async-image":
             AsyncImage(element: element, context: context)
-        case "scrollview":
+        case "scroll-view":
             ScrollView<R>(element: element, context: context)
         case "spacer":
             Spacer(element: element, context: context)
-        case "navigationlink":
+        case "navigation-link":
             NavigationLink(element: element, context: context)
         case "list":
             List<R>(element: element, context: context)
         case "rectangle":
             Shape(element: element, context: context, shape: Rectangle())
-        case "roundedrectangle":
+        case "rounded-rectangle":
             Shape(element: element, context: context, shape: RoundedRectangle(from: element))
         case "circle":
             Shape(element: element, context: context, shape: Circle())
         case "ellipse":
             Shape(element: element, context: context, shape: Ellipse())
         case "capsule":
             Shape(element: element, context: context, shape: Capsule(from: element))
-        case "containerrelativeshape":
+        case "container-relative-shape":
             Shape(element: element, context: context, shape: ContainerRelativeShape())
         case "lvn-link":
             Link(element: element, context: context)
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Elements/AsyncImage.md b/Sources/LiveViewNative/LiveViewNative.docc/Elements/AsyncImage.md
@@ -1,6 +1,6 @@
 # AsyncImage
 
-`<asyncimage>`, displays images loaded from a remote URL.
+`<async-image>`, displays images loaded from a remote URL.
 
 ## Attributes
 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Elements/HStack.md b/Sources/LiveViewNative/LiveViewNative.docc/Elements/HStack.md
@@ -1,6 +1,6 @@
 # HStack
 
-`<hstack>`, lays out children in a horizontal line.
+`<h-stack>`, lays out children in a horizontal line.
 
 ## Attributes
 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Elements/NavigationLink.md b/Sources/LiveViewNative/LiveViewNative.docc/Elements/NavigationLink.md
@@ -1,6 +1,6 @@
 # NavigationLink
 
-`<navigationlink>`, links to another live view page.
+`<navigation-link>`, links to another live view page.
 
 ## Attributes
 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Elements/RoundedRectangle.md b/Sources/LiveViewNative/LiveViewNative.docc/Elements/RoundedRectangle.md
@@ -1,6 +1,6 @@
 # RoundedRectangle
 
-`<roundedrectangle>`, a rectangle shape with rounded corners.
+`<rounded-rectangle>`, a rectangle shape with rounded corners.
 
 ## Attributes
 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Elements/ScrollView.md b/Sources/LiveViewNative/LiveViewNative.docc/Elements/ScrollView.md
@@ -1,5 +1,5 @@
 # ScrollView
 
-`<scrollview>`, allows its content to be scrolled if it's larger than the available space.
+`<scroll-view>`, allows its content to be scrolled if it's larger than the available space.
 
 ## Attributes
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Elements/TextField.md b/Sources/LiveViewNative/LiveViewNative.docc/Elements/TextField.md
@@ -1,6 +1,6 @@
 # TextField
 
-`<textfield>`, a text field form element.
+`<text-field>`, a text field form element.
 
 ## Overview
 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Elements/VStack.md b/Sources/LiveViewNative/LiveViewNative.docc/Elements/VStack.md
@@ -1,6 +1,6 @@
 # VStack
 
-`<vstack>`, lays out children in a vertical line
+`<v-stack>`, lays out children in a vertical line
 
 ## Attributes
 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Elements/ZStack.md b/Sources/LiveViewNative/LiveViewNative.docc/Elements/ZStack.md
@@ -1,6 +1,6 @@
 # ZStack
 
-`<zstack>`, lays out children on top of each other, from back to front.
+`<z-stack>`, lays out children on top of each other, from back to front.
 
 ## Attributes
 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Resources/01-03-03-images.ios.heex b/Sources/LiveViewNative/LiveViewNative.docc/Resources/01-03-03-images.ios.heex
@@ -1,9 +1,9 @@
 <list>
   <%= for name <- @cats do %>
-    <hstack id={name}>
-      <asyncimage src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
+    <h-stack id={name}>
+      <async-image src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
       <text><%= name %></text>
-    </hstack>
+    </h-stack>
   <% end %>
 </list>
 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Resources/02-02-01-template.ios.heex b/Sources/LiveViewNative/LiveViewNative.docc/Resources/02-02-01-template.ios.heex
@@ -1,9 +1,9 @@
 <list>
   <%= for {name, favorite} <- @cats_and_favorites do %>
-    <hstack id={name}>
-      <asyncimage src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
+    <h-stack id={name}>
+      <async-image src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
       <text><%= name %></text>
-    </hstack>
+    </h-stack>
   <% end %>
 </list>
 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Resources/02-02-02-button.ios.heex b/Sources/LiveViewNative/LiveViewNative.docc/Resources/02-02-02-button.ios.heex
@@ -1,13 +1,13 @@
 <list>
   <%= for {name, favorite} <- @cats_and_favorites do %>
-    <hstack id={name}>
-      <asyncimage src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
+    <h-stack id={name}>
+      <async-image src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
       <text><%= name %></text>
       <spacer />
       <button>
         <image system-name={if favorite, do: "star.fill", else: "star"} symbol-color={if favorite, do: "#f3c51a", else: "#000000"} />
       </button>
-    </hstack>
+    </h-stack>
   <% end %>
 </list>
 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Resources/02-02-04-button-click.ios.heex b/Sources/LiveViewNative/LiveViewNative.docc/Resources/02-02-04-button-click.ios.heex
@@ -1,13 +1,13 @@
 <list>
   <%= for {name, favorite} <- @cats_and_favorites do %>
-    <hstack id={name}>
-      <asyncimage src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
+    <h-stack id={name}>
+      <async-image src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
       <text><%= name %></text>
       <spacer />
       <button phx-click="toggle-favorite" phx-value-name={name}>
         <image system-name={if favorite, do: "star.fill", else: "star"} symbol-color={if favorite, do: "#f3c51a", else: "#000000"} />
       </button>
-    </hstack>
+    </h-stack>
   <% end %>
 </list>
 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Resources/03-01-03-cat_live.ios.heex b/Sources/LiveViewNative/LiveViewNative.docc/Resources/03-01-03-cat_live.ios.heex
@@ -1,3 +1,3 @@
-<vstack modifiers={[%{"type" => "navigation_title", "title" => @name}] |> Jason.encode!}>
-  <asyncimage src={"/images/cats/#{@name}.jpg"} modifiers='[{"type": "frame", "width": 300, "height": 300}]' />
-</vstack>
+<v-stack modifiers={[%{"type" => "navigation_title", "title" => @name}] |> Jason.encode!}>
+  <async-image src={"/images/cats/#{@name}.jpg"} modifiers='[{"type": "frame", "width": 300, "height": 300}]' />
+</v-stack>
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Resources/03-02-02-nav-title.ios.heex b/Sources/LiveViewNative/LiveViewNative.docc/Resources/03-02-02-nav-title.ios.heex
@@ -1,12 +1,12 @@
 <list modifiers={[%{"type" => "navigation_title", "title" => "Cats!"}] |> Jason.encode!}>
   <%= for {name, favorite} <- @cats_and_favorites do %>
-    <hstack id={name}>
-      <asyncimage src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
+    <h-stack id={name}>
+      <async-image src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
       <text><%= name %></text>
       <spacer />
       <button phx-click="toggle-favorite" phx-value-name={name}>
         <image system-name={if favorite, do: "star.fill", else: "star"} symbol-color={if favorite, do: "#f3c51a", else: "#000000"} />
       </button>
-    </hstack>
+    </h-stack>
   <% end %>
 </list>
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Resources/03-02-04-navigationlink.ios.heex b/Sources/LiveViewNative/LiveViewNative.docc/Resources/03-02-04-navigationlink.ios.heex
@@ -1,14 +1,14 @@
 <list modifiers={[%{"type" => "navigation_title", "title" => "Cats!"}] |> Jason.encode!}>
   <%= for {name, favorite} <- @cats_and_favorites do %>
-    <navigationlink id={name} data-phx-link="redirect" data-phx-link-state="push" data-phx-href={Routes.live_path(@socket, LvnTutorialWeb.CatLive, name)}>
-      <hstack>
-        <asyncimage src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
+    <navigation-link id={name} data-phx-link="redirect" data-phx-link-state="push" data-phx-href={Routes.live_path(@socket, LvnTutorialWeb.CatLive, name)}>
+      <h-stack>
+        <async-image src={"/images/cats/#{name}.jpg"} modifiers='[{"type": "frame", "width": 100, "height": 100}]' />
         <text><%= name %></text>
         <spacer />
         <button phx-click="toggle-favorite" phx-value-name={name}>
           <image system-name={if favorite, do: "star.fill", else: "star"} symbol-color={if favorite, do: "#f3c51a", else: "#000000"} />
         </button>
-      </hstack>
-    </navigationlink>
+      </h-stack>
+    </navigation-link>
   <% end %>
 </list>
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Resources/04-04-02-cat-rating.ios.heex b/Sources/LiveViewNative/LiveViewNative.docc/Resources/04-04-02-cat-rating.ios.heex
@@ -1,4 +1,4 @@
-<vstack modifiers={[%{"type" => "navigation_title", "title" => @title}] |> Jason.encode!}>
-  <asyncimage src={"/images/cats/#{@name}.jpg"} modifiers='[{"type": "frame", "width": 300, "height": 300}]' />
+<v-stack modifiers={[%{"type" => "navigation_title", "title" => @title}] |> Jason.encode!}>
+  <async-image src={"/images/cats/#{@name}.jpg"} modifiers='[{"type": "frame", "width": 300, "height": 300}]' />
   <cat-rating score={@score} />
-</vstack>
+</v-stack>
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Resources/05-01-03-attribute.ios.heex b/Sources/LiveViewNative/LiveViewNative.docc/Resources/05-01-03-attribute.ios.heex
@@ -1,4 +1,4 @@
-<vstack modifiers={[%{"type" => "navigation_title", "title" => @title}, %{"type" => "nav_favorite", "is_favorite" => @favorite}] |> Jason.encode!}>
-  <asyncimage src={"/images/cats/#{@name}.jpg"} modifiers='[{"type": "frame", "width": 300, "height": 300}]' />
+<v-stack modifiers={[%{"type" => "navigation_title", "title" => @title}, %{"type" => "nav_favorite", "is_favorite" => @favorite}] |> Jason.encode!}>
+  <async-image src={"/images/cats/#{@name}.jpg"} modifiers='[{"type": "frame", "width": 300, "height": 300}]' />
   <cat-rating score={@score} />
-</vstack>
+</v-stack>
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/SupportedModifiers.md b/Sources/LiveViewNative/LiveViewNative.docc/SupportedModifiers.md
@@ -7,9 +7,9 @@ Common modifiers supported by all DOM elements.
 These attributes are supported by all elements, including custom ones. Modifiers are specified as a JSON array of objects on elements.
 
 ```html
-<hstack modifiers='[{"type": "padding", "all": 16}]'>
+<h-stack modifiers='[{"type": "padding", "all": 16}]'>
     <!-- ... -->
-</hstack>
+</h-stack>
 ```
 
 ## Attributes
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Tutorials/01 Initial List.tutorial b/Sources/LiveViewNative/LiveViewNative.docc/Tutorials/01 Initial List.tutorial
@@ -193,7 +193,7 @@
             }
             
             @Step {
-                Then, let's replace the `<text>` element in the list with an `<hstack>` (used to layout elements in a horizontal row). Inside the stack, we'll have an `<asyncimage>` element which loads the remote cat image from the server and then the cat's name as before.
+                Then, let's replace the `<text>` element in the list with an `<h-stack>` (used to layout elements in a horizontal row). Inside the stack, we'll have an `<async-image>` element which loads the remote cat image from the server and then the cat's name as before.
                 
                 We also use the `frame` modifier to set the size of the image to 100×100 points.
                 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Tutorials/02 Favorite Button.tutorial b/Sources/LiveViewNative/LiveViewNative.docc/Tutorials/02 Favorite Button.tutorial
@@ -97,7 +97,7 @@
             }
             
             @Step {
-                Then, to the `<hstack>`, add a spacer and a button.
+                Then, to the `<h-stack>`, add a spacer and a button.
                 
                 The content of the button will be an `<image>`, which can be used to display an SF Symbol. In our case, we'll use either the filled or unfilled star depending on whether the cat is favorited. We'll also use the `symbol-color` attribute to tint it gold when the cat is favorited.
                 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Tutorials/03 Navigation and Hero.tutorial b/Sources/LiveViewNative/LiveViewNative.docc/Tutorials/03 Navigation and Hero.tutorial
@@ -88,7 +88,7 @@
             }
             
             @Step {
-                Next, wrap the `<hstack>` in a `<navigationlink>`. This element functions like an HTML anchor tag, indicating that, when tapped, the client should navigate to a new page. The attributes we provide tell the client which mode to navigate in and to which page. Don't forget to move the `id` attribute from the `<hstack>` to the link!
+                Next, wrap the `<h-stack>` in a `<navigation-link>`. This element functions like an HTML anchor tag, indicating that, when tapped, the client should navigate to a new page. The attributes we provide tell the client which mode to navigate in and to which page. Don't forget to move the `id` attribute from the `<h-stack>` to the link!
                 
                 Once you've done that, you can tap a cat on the list and navigate to the detail view and see the larger image!
                 
diff --git a/Sources/LiveViewNative/LiveViewNative.docc/Tutorials/05 Custom Modifier.tutorial b/Sources/LiveViewNative/LiveViewNative.docc/Tutorials/05 Custom Modifier.tutorial
@@ -51,7 +51,7 @@
             }
             
             @Step {
-                Add the custom modifier `nav_favorite` to the `<vstack>`. With the modifier we'll pass the current state, so the frontend can display it in the navigation bar button.
+                Add the custom modifier `nav_favorite` to the `<v-stack>`. With the modifier we'll pass the current state, so the frontend can display it in the navigation bar button.
                 
                 @Comment {
                     project = "backend"
diff --git a/Sources/LiveViewNative/Views/Layout Containers/Stacks/HStack.swift b/Sources/LiveViewNative/Views/Layout Containers/Stacks/HStack.swift
@@ -30,7 +30,7 @@ struct HStack<R: CustomRegistry>: View {
         case "bottom":
             return .bottom
         default:
-            fatalError("Invalid value '\(element.attributeValue(for: "alignment")!)' for alignment attribute of <hstack>")
+            fatalError("Invalid value '\(element.attributeValue(for: "alignment")!)' for alignment attribute of <h-stack>")
         }
     }
     
diff --git a/Sources/LiveViewNative/Views/Layout Containers/Stacks/VStack.swift b/Sources/LiveViewNative/Views/Layout Containers/Stacks/VStack.swift
@@ -30,7 +30,7 @@ struct VStack<R: CustomRegistry>: View {
         case "trailing":
             return .trailing
         default:
-            fatalError("Invalid value '\(element.attributeValue(for: "alignment")!)' for alignment attribute of <vstack>")
+            fatalError("Invalid value '\(element.attributeValue(for: "alignment")!)' for alignment attribute of <v-stack>")
         }
     }
     
diff --git a/Tests/RenderingTests/LinkTests.swift b/Tests/RenderingTests/LinkTests.swift
@@ -20,10 +20,10 @@ final class LinkTests: XCTestCase {
     func testComplexBody() throws {
         try assertMatch(#"""
 <lvn-link destination="https://apple.com">
-    <hstack>
+    <h-stack>
         <image system-name="link" />
         <text>Click the link</text>
-    </hstack>
+    </h-stack>
 </lvn-link>
 """#) {
             Link(destination: URL(string: "https://apple.com")!) {
diff --git a/Tests/RenderingTests/ShapeTests.swift b/Tests/RenderingTests/ShapeTests.swift
@@ -18,19 +18,19 @@ final class ShapeTests: XCTestCase {
     }
     
     func testRoundedRectangle() throws {
-        try assertMatch(#"<roundedrectangle corner-radius="5" />"#, size: .init(width: 100, height: 50)) {
+        try assertMatch(#"<rounded-rectangle corner-radius="5" />"#, size: .init(width: 100, height: 50)) {
             RoundedRectangle(cornerRadius: 5)
         }
-        try assertMatch(#"<roundedrectangle corner-width="5" corner-height="10" />"#, size: .init(width: 100, height: 50)) {
+        try assertMatch(#"<rounded-rectangle corner-width="5" corner-height="10" />"#, size: .init(width: 100, height: 50)) {
             RoundedRectangle(cornerSize: .init(width: 5, height: 10))
         }
-        try assertMatch(#"<roundedrectangle corner-width="5" corner-radius="15" />"#, size: .init(width: 100, height: 50)) {
+        try assertMatch(#"<rounded-rectangle corner-width="5" corner-radius="15" />"#, size: .init(width: 100, height: 50)) {
             RoundedRectangle(cornerSize: .init(width: 5, height: 15))
         }
-        try assertMatch(#"<roundedrectangle corner-height="5" corner-radius="15" />"#, size: .init(width: 100, height: 50)) {
+        try assertMatch(#"<rounded-rectangle corner-height="5" corner-radius="15" />"#, size: .init(width: 100, height: 50)) {
             RoundedRectangle(cornerSize: .init(width: 15, height: 5))
         }
-        try assertMatch(#"<roundedrectangle corner-radius="10" style="continuous" />"#, size: .init(width: 100, height: 50)) {
+        try assertMatch(#"<rounded-rectangle corner-radius="10" style="continuous" />"#, size: .init(width: 100, height: 50)) {
             RoundedRectangle(cornerRadius: 10, style: .continuous)
         }
     }
@@ -60,7 +60,7 @@ final class ShapeTests: XCTestCase {
     }
     
     func testContainerRelativeShape() throws {
-        try assertMatch(#"<containerrelativeshape />"#) {
+        try assertMatch(#"<container-relative-shape />"#) {
             ContainerRelativeShape()
         }
     }
diff --git a/Tests/RenderingTests/TextFieldTests.swift b/Tests/RenderingTests/TextFieldTests.swift
@@ -12,18 +12,18 @@ import SwiftUI
 @MainActor
 final class TextFieldTests: XCTestCase {
     func testSimple() throws {
-        try assertMatch(#"<textfield placeholder="Type here" />"#) {
+        try assertMatch(#"<text-field placeholder="Type here" />"#) {
             TextField("Type here", text: .constant(""))
         }
-        try assertMatch(#"<securefield placeholder="Password" />"#) {
+        try assertMatch(#"<secure-field placeholder="Password" />"#) {
             SecureField("Password", text: .constant(""))
         }
     }
     func testPrompt() throws {
-        try assertMatch(#"<textfield placeholder="Placeholder" prompt="Prompt" />"#) {
+        try assertMatch(#"<text-field placeholder="Placeholder" prompt="Prompt" />"#) {
             TextField("Placeholder", text: .constant(""), prompt: Text("Prompt"))
         }
-        try assertMatch(#"<securefield placeholder="Placeholder" prompt="Prompt" />"#) {
+        try assertMatch(#"<secure-field placeholder="Placeholder" prompt="Prompt" />"#) {
             SecureField("Placeholder", text: .constant(""), prompt: Text("Prompt"))
         }
     }
