Need documentation explaining how to build documents piece-by-piece especially with helper functions

[danwood]

So far all of the examples I've seen are for building up a .document from a complete set of sub-nodes all at once, but realistically a web page is going to be built up dynamically. I want to create a element and adjust the sub-tags based on logic in the program, then build up the piece by piece, and then finally assemble into .html and into a final .document for rendering.

After some exploration in the documentation and test methods I am for instance able to create an .html node like this:

		let htmlUsingHelper = Node.html(
			.body(
				.h1("Welcome!"),
				.p("You’ve found our site!")
			)
		)

But then why can't I do something similar to create a .head like this?

		let headUsingHelper = Node.head(
			.meta(attributes: [.charset(.utf8)]),
			.title(self.title)
		)

That has 3 compile errors!

Maybe there is a workaround by avoiding the "helper functions" but it would be so nice to be able to manipulate fragments with the helper functions and then assemble them into a full .document (or fragment) as needed.

BTW is the dot-syntax you are using here in the Swift language documented somewhere? It doesn't seem to be like functional programming where "." is used to chain the result of one function into another function (e.g. in SwiftUI), but something different altogether. If you can point your users to a starting point here, it might be easier to figure out how to make use of the framework beyond the surface level. Thanks!

[kevinrenskers]

Excellent question, but yes it's possible to generate a document from smaller pieces. It's not super obvious though and indeed some more docs and examples would be welcome.

import Html

let body: ChildOf<Tag.Html> = .body(
  .h1("Welcome!"),
  .p("You’ve found our site!")
)

let head: ChildOf<Tag.Html> = .head(
  .meta(attributes: [.charset(.utf8)]),
  .title("Hello")
)

let document: Node = .document(
  .html(
    head,
    body
  )
)

print(render(document))

As for your other question, that . in the beginning.

This:

let body: ChildOf<Tag.Html> = .body(
  .h1("Welcome!"),
  .p("You’ve found our site!")
)

Is the same as this:

let body: ChildOf<Tag.Html> = ChildOf<Tag.Html>.body(
  Node.h1("Welcome!"),
  Node.p("You’ve found our site!")
)

But the compiler can figure out that first part so you can leave it off.

[MHDallas]

How would you build out a TBody based on values in an array?

[stephencelis]

I'm going to convert this to a discussion.

How would you build out a TBody based on values in an array?

@MHDallas You can use .fragment:

Node.table(
  .tbody(
    .fragment(
      [1, 2, 3].map { n in
          .tr(
            .td(.text("\(n)"))
          )
      }
    )
  )
)