Web components (#24)

- component basics
- component tests
- fix format
- fix readme

Author: tib

Makefile

@@ -42,7 +42,7 @@ test:
 	swift test --parallel
 
 docker-test:
-	docker build -t tests . -f ./docker/Dockerfile.testing && docker run --rm tests
+	docker build -t swift-web-standards-tests . -f ./docker/tests/Dockerfile && docker run --rm swift-web-standards-tests
 
 
 

Package.swift

@@ -2,16 +2,15 @@
 import PackageDescription
 
 // NOTE: https://github.com/swift-server/swift-http-server/blob/main/Package.swift
-var defaultSwiftSettings: [SwiftSetting] =
-[
+var defaultSwiftSettings: [SwiftSetting] = [
     // https://github.com/swiftlang/swift-evolution/blob/main/proposals/0441-formalize-language-mode-terminology.md
     .swiftLanguageMode(.v6),
     // https://github.com/swiftlang/swift-evolution/blob/main/proposals/0444-member-import-visibility.md
     .enableUpcomingFeature("MemberImportVisibility"),
     // https://forums.swift.org/t/experimental-support-for-lifetime-dependencies-in-swift-6-2-and-beyond/78638
     .enableExperimentalFeature("Lifetimes"),
     // https://github.com/swiftlang/swift/pull/65218
-    .enableExperimentalFeature("AvailabilityMacro=swift-web-standards 1.0:macOS 15.0, iOS 18.0, tvOS 18.0, watchOS 11.0, visionOS 2.0"),
+    .enableExperimentalFeature("AvailabilityMacro=swiftWebStandards 1.0:macOS 15.0, iOS 18.0, tvOS 18.0, watchOS 11.0, visionOS 2.0"),
 ]
 
 #if compiler(>=6.2)
@@ -37,7 +36,10 @@ let package = Package(
     ],
     dependencies: [
         // [docc-plugin-placeholder]
-        .package(url: "https://github.com/apple/swift-collections", .upToNextMinor(from: "1.3.0")),
+        .package(
+            url: "https://github.com/apple/swift-collections",
+            from: "1.3.0"
+        ),
     ],
     targets: [
         .target(

README.md

@@ -2,7 +2,11 @@
 
 An awesome Swift library that closely follows the [W3C web standards](https://www.w3.org/standards/).
 
-[![Release: 1.0.0-beta.2](https://img.shields.io/badge/Release-1.0.0--beta.2-F05138)]( https://github.com/binarybirds/swift-web-standards/releases/tag/1.0.0-beta.2)
+[
+    ![Release: 1.0.0-beta.1](https://img.shields.io/badge/Release-1.0.0--beta.1-F05138)
+](
+    https://github.com/binarybirds/swift-web-standards/releases/tag/1.0.0-beta.1
+)
 
 ## Features
 
@@ -46,7 +50,7 @@ The Swift Web Standards package is distributed through **Swift Package Manager**
 Add this package to your `Package.swift` dependencies:
 
 ```swift
-.package(url: "https://github.com/binarybirds/swift-web-standards", from: "1.0.0-beta.2"),
+.package(url: "https://github.com/binarybirds/swift-web-standards", from: "1.0.0-beta.1"),
 ```
 
 Then include the required product as a dependency for your target:
@@ -325,7 +329,11 @@ let css = Stylesheet {
 print(StylesheetRenderer(minify: false, indent: 4).render(css))
 ```
 
-[![DocC API documentation](https://img.shields.io/badge/DocC-API_documentation-F05138)](https://binarybirds.github.io/swift-web-standards)
+[
+    ![DocC API documentation](https://img.shields.io/badge/DocC-API_documentation-F05138)
+](
+    https://binarybirds.github.io/swift-web-standards
+)
 
 API documentation is available at the following link.
 

Sources/CSS/Properties/BackdropFilter.swift

@@ -7,31 +7,13 @@
 /// CSS `backdrop-filter` property.
 /// Provides typed values for this declaration.
 public struct BackdropFilter: Property {
-    /// Supported length value for `backdrop-filter: blur(...)`.
-    public struct BlurLength: UnitRepresentable, Sendable {
-        public let rawValue: String
-
-        /// Creates a blur length from a CSS `Unit`.
-        /// Returns `nil` for unsupported units (for example `%`).
-        public init?<T>(
-            _ unit: Unit<T>
-        ) where T: Numeric & Sendable {
-            switch unit.type {
-            case .cm, .mm, .in, .px, .pt, .pc, .em, .ex, .ch, .rem, .vw, .vh,
-                .vmin, .vmax:
-                self.rawValue = unit.rawValue
-            case .percent:
-                return nil
-            }
-        }
-    }
 
     /// Value options for the `backdrop-filter` property.
     public enum Value: Sendable {
         /// Default value. Specifies no effects.
         case none
         /// Applies a blur effect to the backdrop.
-        case blur(BlurLength)
+        case blur(UnitRepresentable)
         /// Sets this property to its default value.
         case initial
         /// Inherits this property from its parent element.
@@ -65,17 +47,6 @@ public struct BackdropFilter: Property {
         self.isImportant = false
     }
 
-    /// Convenience initializer for `backdrop-filter: blur(...)` using `Unit`.
-    /// Returns `nil` when the supplied unit is unsupported by blur().
-    public init?<T>(
-        blur unit: Unit<T>
-    ) where T: Numeric & Sendable {
-        guard let blurLength = BlurLength(unit) else {
-            return nil
-        }
-        self.init(.blur(blurLength))
-    }
-
     // TODO: add support for the remaining backdrop-filter functions:
     // - brightness()
     // - contrast()

Sources/CSS/Properties/Border.swift

@@ -11,7 +11,8 @@
 public struct Border: Property {
     /// Value options for the `border` property.
     public enum Value: Sendable {
-        case values(BorderWidth.Value, BorderStyle.Value, CSSColor)
+
+        case values(BorderWidth.Value, BorderStyle.Value?, CSSColor?)
         /// Sets this property to its default value.
         case initial
         /// Inherits this property from its parent element.
@@ -20,8 +21,9 @@ public struct Border: Property {
         var rawValue: String {
             switch self {
             case .values(let width, let style, let color):
-                return width.rawValue + " " + style.rawValue + " "
-                    + color.rawValue
+                return [width.rawValue, style?.rawValue, color?.rawValue]
+                    .compactMap { $0 }
+                    .joined(separator: " ")
             case .initial:
                 return "initial"
             case .inherit:
@@ -43,4 +45,21 @@ public struct Border: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ width: BorderWidth.Value,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.values(width, style, color))
+    }
+
+    public init(
+        _ width: UnitRepresentable,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.length(width), style, color)
+    }
+
 }

Sources/CSS/Properties/BorderBottom.swift

@@ -19,4 +19,20 @@ public struct BorderBottom: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ width: BorderWidth.Value,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.values(width, style, color))
+    }
+
+    public init(
+        _ width: UnitRepresentable,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.length(width), style, color)
+    }
 }

Sources/CSS/Properties/BorderLeft.swift

@@ -19,4 +19,20 @@ public struct BorderLeft: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ width: BorderWidth.Value,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.values(width, style, color))
+    }
+
+    public init(
+        _ width: UnitRepresentable,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.length(width), style, color)
+    }
 }

Sources/CSS/Properties/BorderRadius.swift

@@ -53,6 +53,15 @@ public struct BorderRadius: Property {
         self.isImportant = false
     }
 
+    public init(
+        _ v1: UnitRepresentable,
+        _ v2: UnitRepresentable? = nil,
+        _ v3: UnitRepresentable? = nil,
+        _ v4: UnitRepresentable? = nil
+    ) {
+        self.init(.length(v1, v2, v3, v4))
+    }
+
     // @TODO: better API for all value cases
     // https://www.w3schools.com/cssref/css3_pr_border-radius.asp
 }

Sources/CSS/Properties/BorderRight.swift

@@ -19,4 +19,20 @@ public struct BorderRight: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ width: BorderWidth.Value,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.values(width, style, color))
+    }
+
+    public init(
+        _ width: UnitRepresentable,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.length(width), style, color)
+    }
 }

Sources/CSS/Properties/BorderTop.swift

@@ -19,4 +19,20 @@ public struct BorderTop: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ width: BorderWidth.Value,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.values(width, style, color))
+    }
+
+    public init(
+        _ width: UnitRepresentable,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.length(width), style, color)
+    }
 }