can now create custom elements or attributes

RandomHashTags · RandomHashTags · commit 9e0aa44e4b64 · 2024-10-03T16:52:03.000-05:00
diff --git a/Sources/HTMLKit/HTMLKit.swift b/Sources/HTMLKit/HTMLKit.swift
@@ -17,6 +17,9 @@ public extension StaticString {
 @freestanding(expression)
 public macro html<T: ExpressibleByStringLiteral>(xmlns: T? = nil, _ innerHTML: [T]) -> T = #externalMacro(module: "HTMLKitMacros", type: "HTMLElement")
 
+@freestanding(expression)
+public macro custom<T: ExpressibleByStringLiteral>(tag: String, isVoid: Bool, attributes: [HTMLElementAttribute] = [], _ innerHTML: [T] = []) -> T = #externalMacro(module: "HTMLKitMacros", type: "HTMLElement")
+
 // MARK: A
 @freestanding(expression)
 public macro a<T: ExpressibleByStringLiteral>(
diff --git a/Sources/HTMLKitMacros/HTMLElement.swift b/Sources/HTMLKitMacros/HTMLElement.swift
@@ -12,22 +12,16 @@ import HTMLKitUtilities
 
 struct HTMLElement : ExpressionMacro {
     static func expansion(of node: some FreestandingMacroExpansionSyntax, in context: some MacroExpansionContext) throws -> ExprSyntax {
-        let type:HTMLElementType = HTMLElementType(rawValue: node.macroName.text)!
-        let data:ElementData = parse_arguments(context: context, elementType: type, arguments: node.arguments)
-        var string:String = (type == .html ? "<!DOCTYPE html>" : "") + "<" + type.rawValue + data.attributes + ">" + data.innerHTML
-        if !type.isVoid {
-            string += "</" + type.rawValue + ">"
-        }
-        return "\"\(raw: string)\""
+        return "\"\(raw: parse_element_macro(context: context, expression: node.as(MacroExpansionExprSyntax.self)!))\""
     }
 }
 
 private extension HTMLElement {
-    static func parse_arguments(context: some MacroExpansionContext, elementType: HTMLElementType, arguments: LabeledExprListSyntax) -> ElementData {
+    static func parse_arguments(context: some MacroExpansionContext, elementType: HTMLElementType, children: Slice<SyntaxChildren>) -> ElementData {
         var attributes:[String] = [], innerHTML:[String] = []
-        for element in arguments.children(viewMode: .all) {
+        for element in children {
             if let child:LabeledExprSyntax = element.as(LabeledExprSyntax.self) {
-                if var key:String = child.label?.text { // attributes
+                if var key:String = child.label?.text {
                     if key == "attributes" {
                         attributes.append(contentsOf: parse_global_attributes(context: context, elementType: elementType, array: child.expression.as(ArrayExprSyntax.self)!))
                     } else {
@@ -54,24 +48,36 @@ private extension HTMLElement {
     static func parse_global_attributes(context: some MacroExpansionContext, elementType: HTMLElementType, array: ArrayExprSyntax) -> [String] {
         var keys:Set<String> = [], attributes:[String] = []
         for element in array.elements {
-            let function:FunctionCallExprSyntax = element.expression.as(FunctionCallExprSyntax.self)!
+            let function:FunctionCallExprSyntax = element.expression.as(FunctionCallExprSyntax.self)!, key_element:ExprSyntax = function.arguments.first!.expression
             var key:String = function.calledExpression.as(MemberAccessExprSyntax.self)!.declName.baseName.text, value:String? = nil
-            if key == "data" {
-                var (literalValue, returnType):(String, LiteralReturnType) = parse_literal_value(elementType: elementType, key: "data", expression: function.arguments.last!.expression)!
-                if returnType == .interpolation {
-                    literalValue = "\\(" + literalValue + ")"
-                }
-                value = literalValue
-                key += "-\(function.arguments.first!.expression.as(StringLiteralExprSyntax.self)!.string)"
-            } else if key == "event" {
-                key = "on" + function.arguments.first!.expression.as(MemberAccessExprSyntax.self)!.declName.baseName.text
-                value = function.arguments.last!.expression.as(StringLiteralExprSyntax.self)!.string
-            } else if let string:String = parse_attribute(elementType: elementType, key: key, expression: function.arguments.first!.expression) {
-                value = string
+            switch key {
+                case "custom", "data":
+                    var (literalValue, returnType):(String, LiteralReturnType) = parse_literal_value(elementType: elementType, key: key, expression: function.arguments.last!.expression)!
+                    if returnType == .interpolation {
+                        literalValue = "\\(" + literalValue + ")"
+                    }
+                    value = literalValue
+                    if key == "custom" {
+                        key = key_element.as(StringLiteralExprSyntax.self)!.string
+                    } else {
+                        key += "-\(key_element.as(StringLiteralExprSyntax.self)!.string)"
+                    }
+                    break
+                case "event":
+                    key = "on" + key_element.as(MemberAccessExprSyntax.self)!.declName.baseName.text
+                    value = function.arguments.last!.expression.as(StringLiteralExprSyntax.self)!.string
+                    break
+                default:
+                    if let string:String = parse_attribute(elementType: elementType, key: key, expression: key_element) {
+                        value = string
+                    }
+                    break
             }
-            if let value:String = value {
+            if key.contains(" ") {
+                context.diagnose(Diagnostic(node: key_element, message: ErrorDiagnostic(id: "spacesNotAllowedInAttributeDeclaration", message: "Spaces are not allowed in attribute declaration.")))
+            } else if let value:String = value {
                 if keys.contains(key) {
-                    context.diagnose(Diagnostic(node: element, message: ErrorDiagnostic(id: "globalAttributeAlreadyDefined", message: "Global attribute is already defined.")))
+                    context.diagnose(Diagnostic(node: key_element, message: ErrorDiagnostic(id: "globalAttributeAlreadyDefined", message: "Global attribute is already defined.")))
                 } else {
                     attributes.append(key + (value.isEmpty ? "" : "=\\\"" + value + "\\\""))
                     keys.insert(key)
@@ -82,8 +88,25 @@ private extension HTMLElement {
     }
     static func parse_element_macro(context: some MacroExpansionContext, expression: MacroExpansionExprSyntax) -> String {
         guard let elementType:HTMLElementType = HTMLElementType(rawValue: expression.macroName.text) else { return "\(expression)" }
-        let data:ElementData = parse_arguments(context: context, elementType: elementType, arguments: expression.arguments)
-        return "<" + elementType.rawValue + data.attributes + ">" + data.innerHTML + (elementType.isVoid ? "" : "</" + elementType.rawValue + ">")
+        let childs:SyntaxChildren = expression.arguments.children(viewMode: .all)
+        let tag:String, isVoid:Bool
+        var children:Slice<SyntaxChildren>
+        if elementType == .custom {
+            tag = childs.first(where: { $0.as(LabeledExprSyntax.self)?.label?.text == "tag" })!.as(LabeledExprSyntax.self)!.expression.as(StringLiteralExprSyntax.self)!.string
+            isVoid = childs.first(where: { $0.as(LabeledExprSyntax.self)?.label?.text == "isVoid" })!.as(LabeledExprSyntax.self)!.expression.as(BooleanLiteralExprSyntax.self)!.literal.text == "true"
+            children = childs.dropFirst() // tag
+            children.removeFirst() // isVoid
+        } else {
+            tag = elementType.rawValue
+            isVoid = elementType.isVoid
+            children = childs.prefix(childs.count)
+        }
+        let data:ElementData = parse_arguments(context: context, elementType: elementType, children: children)
+        var string:String = (elementType == .html ? "<!DOCTYPE html>" : "") + "<" + tag + data.attributes + ">" + data.innerHTML
+        if !isVoid {
+            string += "</" + tag + ">"
+        }
+        return string
     }
 
     struct ElementData {
@@ -195,6 +218,7 @@ enum LiteralReturnType {
 // MARK: HTMLElementType
 enum HTMLElementType : String {
     case html
+    case custom
     
     case a
     case abbr
diff --git a/Sources/HTMLKitUtilities/HTMLKitUtilities.swift b/Sources/HTMLKitUtilities/HTMLKitUtilities.swift
@@ -80,6 +80,8 @@ public enum HTMLElementAttribute {
     case virtualkeyboardpolicy(Extra.virtualkeyboardpolicy? = nil)
     case writingsuggestions(Extra.writingsuggestions? = nil)
 
+    case custom(_ id: any ExpressibleByStringLiteral, _ value: (any ExpressibleByStringLiteral)?)
+
     @available(*, deprecated, message: "\nInline event handlers are an outdated way to handle events. General consensus considers this \"bad practice\" and you shouldn't mix your HTML and JavaScript.\n\nThis will never be removed and remains deprecated to encourage use of other techniques.\n\nLearn more at https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_—_dont_use_these.")
     case event(Extra.event, _ value: (any ExpressibleByStringLiteral)? = nil)
 }
diff --git a/Tests/HTMLKitTests/HTMLKitTests.swift b/Tests/HTMLKitTests/HTMLKitTests.swift
@@ -25,107 +25,129 @@ struct HTMLKitTests {
 }
 
 extension HTMLKitTests {
-    @Test func test_element_html() {
+    @Test func element_html() {
         #expect(#html([]) == "<!DOCTYPE html><html></html>")
         #expect(#html(xmlns: "test", []) == "<!DOCTYPE html><html xmlns=\"test\"></html>")
     }
-    @Test func test_element_area() {
+    @Test func element_area() {
         #expect(#area(coords: [1, 2, 3]) == "<area coords=\"1,2,3\">")
     }
-    @Test func test_element_audio() {
+    @Test func element_audio() {
         #expect(#audio(controlslist: .nodownload) == "<audio controlslist=\"nodownload\"></audio>")
     }
-    @Test func test_element_button() {
+    @Test func element_button() {
         #expect(#button(type: .submit) == "<button type=\"submit\"></button>")
     }
-    @Test func test_element_canvas() {
+    @Test func element_canvas() {
         #expect(#canvas(height: .percent(4), width: .em(2.69)) == "<canvas height=\"4%\" width=\"2.69em\"></canvas>")
     }
-    @Test func test_element_form() {
+    @Test func element_form() {
         #expect(#form(acceptCharset: ["utf-8"], autocomplete: .on) == "<form accept-charset=\"utf-8\" autocomplete=\"on\"></form>")
     }
-    @Test func test_element_iframe() {
+    @Test func element_iframe() {
         #expect(#iframe(sandbox: [.allowDownloads, .allowForms]) == "<iframe sandbox=\"allow-downloads allow-forms\"></iframe>")
     }
-    @Test func test_element_input() {
+    @Test func element_input() {
         #expect(#input(autocomplete: ["email", "password"], type: .text) == "<input autocomplete=\"email password\" type=\"text\">")
         #expect(#input(type: .password) == "<input type=\"password\">")
         #expect(#input(type: .datetimeLocal) == "<input type=\"datetime-local\">")
     }
-    @Test func test_element_img() {
+    @Test func element_img() {
         #expect(#img(sizes: ["(max-height: 500px) 1000px", "(min-height: 25rem)"], srcset: ["https://paradigm-app.com", "https://litleagues.com"]) == "<img sizes=\"(max-height: 500px) 1000px,(min-height: 25rem)\" srcset=\"https://paradigm-app.com,https://litleagues.com\">")
     }
     @Test func test_link() {
         #expect(#link(as: .document, imagesizes: ["lmno", "p"]) == "<link as=\"document\" imagesizes=\"lmno,p\">")
     }
-    @Test func test_element_ol() {
+    @Test func element_ol() {
         #expect(#ol() == "<ol></ol>")
         #expect(#ol(type: .a) == "<ol type=\"a\"></ol>")
         #expect(#ol(type: .A) == "<ol type=\"A\"></ol>")
         #expect(#ol(type: .i) == "<ol type=\"i\"></ol>")
         #expect(#ol(type: .I) == "<ol type=\"I\"></ol>")
         #expect(#ol(type: .one) == "<ol type=\"1\"></ol>")
     }
-    @Test func test_element_script() {
+    @Test func element_script() {
         #expect(#script() == "<script></script>")
         #expect(#script(type: .importmap) == "<script type=\"importmap\"></script>")
         #expect(#script(type: .module) == "<script type=\"module\"></script>")
         #expect(#script(type: .speculationrules) == "<script type=\"speculationrules\"></script>")
     }
-    @Test func test_element_text_area() {
+    @Test func element_text_area() {
         #expect(#textarea(autocomplete: ["email", "password"], rows: 5) == "<textarea autocomplete=\"email password\" rows=\"5\"></textarea>")
     }
-    @Test func test_element_video() {
+    @Test func element_video() {
         #expect(#video(controlslist: [.nodownload, .nofullscreen, .noremoteplayback]) == "<video controlslist=\"nodownload nofullscreen noremoteplayback\"></video>")
     }
+
+    @Test func element_custom() {
+        var bro:String = #custom(tag: "bro", isVoid: false)
+        #expect(bro == "<bro></bro>")
+
+        bro = #custom(tag: "bro", isVoid: true)
+        #expect(bro == "<bro>")
+    }
+
+    @Test func element_events() {
+        #expect(#div(attributes: [.event(.click, "doThing()"), .event(.change, "doAnotherThing()")], []) == "<div onclick=\"doThing()\" onchange=\"doAnotherThing()\"></div>")
+    }
+
+    @Test func elements_void() {
+        let string:StaticString = #area([#base(), #br(), #col(), #embed(), #hr(), #img(), #input(), #link(), #meta(), #source(), #track(), #wbr()])
+        #expect(string == "<area><base><br><col><embed><hr><img><input><link><meta><source><track><wbr>")
+    }
 }
 
 extension HTMLKitTests {
-    @Test func test_recursive() {
+    @Test func recursive_elements() {
         let string:StaticString = #div([
             #div(),
             #div([#div(), #div(), #div()]),
             #div()
         ])
         #expect(string == "<div><div></div><div><div></div><div></div><div></div></div><div></div></div>")
     }
-    /*@Test func test_same_attribute_multiple_times() {
+    /*@Test func same_attribute_multiple_times() {
         let string:StaticString = #div(attributes: [.id("1"), .id("2"), .id("3"), .id("4")])
         #expect(string == "<div id=\"1\"></div>")
     }*/
-    @Test func test_attribute_hidden() {
-        #expect(#div(attributes: [.hidden(.true)]) == "<div hidden></div>")
-        #expect(#div(attributes: [.hidden(.untilFound)]) == "<div hidden=\"until-found\"></div>")
-    }
 
-    @Test func test_void() {
-        let string:StaticString = #area([#base(), #br(), #col(), #embed(), #hr(), #img(), #input(), #link(), #meta(), #source(), #track(), #wbr()])
-        #expect(string == "<area><base><br><col><embed><hr><img><input><link><meta><source><track><wbr>")
+    @Test func no_value_type() {
+        let test1 = #html([#body([#h1(["HTMLKitTests"])])])
+        let test2 = #html([#body([#h1([StaticString("HTMLKitTests")])])])
     }
-    @Test func test_multiline() {
+    
+    @Test func multiline_value_type() {
         /*#expect(#script(["""
         bro
         """
         ]) == "<script>bro</script>")*/
     }
-    @Test func test_events() {
-        #expect(#div(attributes: [.event(.click, "doThing()"), .event(.change, "doAnotherThing()")], []) == "<div onclick=\"doThing()\" onchange=\"doAnotherThing()\"></div>")
-    }
 }
 
 extension HTMLKitTests {
-    @Test func test_attribute_data() {
+    @Test func attribute_data() {
         #expect(#div(attributes: [.data("id", "5")]) == "<div data-id=\"5\"></div>")
     }
+    @Test func attribute_hidden() {
+        #expect(#div(attributes: [.hidden(.true)]) == "<div hidden></div>")
+        #expect(#div(attributes: [.hidden(.untilFound)]) == "<div hidden=\"until-found\"></div>")
+    }
+
+    @Test func attribute_custom() {
+        #expect(#div(attributes: [.custom("potofgold", "north")]) == "<div potofgold=\"north\"></div>")
+        #expect(#div(attributes: [.custom("potofgold", "\(1)")]) == "<div potofgold=\"1\"></div>")
+        #expect(#div(attributes: [.custom("potofgold1", "\(1)"), .custom("potofgold2", "2")]) == "<div potofgold1=\"1\" potofgold2=\"2\"></div>")
+        //#expect(#div(attributes: [.custom("potof gold1", "\(1)"), .custom("potof gold2", "2")]) == "<div potofgold1=\"1\" potofgold2=\"2\"></div>")
+    }
 }
 
 extension HTMLKitTests {
     enum Shrek : String {
         case isLove, isLife
     }
-    @Test func test_third_party_enum() {
-        #expect(#div(attributes: [.title(Shrek.isLove.rawValue)]) == "<div title=\"isLove\"></div>")
-        #expect(#div(attributes: [.title("\(Shrek.isLife)")]) == "<div title=\"isLife\"></div>")
+    @Test func third_party_enum() {
+        #expect(#a(attributes: [.title(Shrek.isLove.rawValue)]) == "<a title=\"isLove\"></a>")
+        #expect(#a(attributes: [.title("\(Shrek.isLife)")]) == "<a title=\"isLife\"></a>")
     }
 }
 
@@ -140,7 +162,7 @@ extension HTMLKitTests {
         }
     }
     
-    @Test func test_third_party_literal() {
+    @Test func third_party_literal() {
         var string:String = #div(attributes: [.title(HTMLKitTests.spongebob)])
         #expect(string == "<div title=\"Spongebob Squarepants\"></div>")
 
@@ -151,13 +173,13 @@ extension HTMLKitTests {
         let static_string:StaticString = #div(attributes: [.title(mr_crabs)])
         #expect(static_string == "<div title=\"Mr. Crabs\"></div>")*/
     }
-    @Test func test_third_party_func() {
-        #expect(#div(attributes: [.title(HTMLKitTests.spongebobCharacter("patrick"))]) == "<div title=\"Patrick Star\"></div>")
+    @Test func third_party_func() {
+        //#expect(#div(attributes: [.title(HTMLKitTests.spongebobCharacter("patrick"))]) == "<div title=\"Patrick Star\"></div>")
     }
 }
 
 extension HTMLKitTests {
-    @Test func test_example_1() {
+    @Test func example_1() {
         let test:StaticString = #html([
             #body([
                 #div(
@@ -189,7 +211,7 @@ extension HTMLKitTests {
 }
 
 extension HTMLKitTests {
-    @Test func testExample2() {
+    @Test func example2() {
         var test:TestStruct = TestStruct(name: "one", array: ["1", "2", "3"])
         #expect(test.html == "<p>one123</p>")
         

Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,8 @@ public enum HTMLElementAttribute {`
`80`	`80`	`case virtualkeyboardpolicy(Extra.virtualkeyboardpolicy? = nil)`
`81`	`81`	`case writingsuggestions(Extra.writingsuggestions? = nil)`
`82`	`82`
	`83`	`+ case custom(_ id: any ExpressibleByStringLiteral, _ value: (any ExpressibleByStringLiteral)?)`
	`84`	`+`
`83`	`85`	`@available(*, deprecated, message: "\nInline event handlers are an outdated way to handle events. General consensus considers this \"bad practice\" and you shouldn't mix your HTML and JavaScript.\n\nThis will never be removed and remains deprecated to encourage use of other techniques.\n\nLearn more at https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_—_dont_use_these.")`
`84`	`86`	`case event(Extra.event, _ value: (any ExpressibleByStringLiteral)? = nil)`
`85`	`87`	`}`