component specific css and js #148
Description
Hi @markuswustenberg
thank you very much for creating this library. It's an intuitive, easy and fast way to write html in go. I come from js-world and i really love the declarative syntax to describe user interfaces. Has a little bit of SwiftUI when I think about it 😄
Right now I'm thinking about making a switch to go + gomponents for my project. I want to create a dynamic website with HTMX. Since gomponents are ultimately functions, I see no problems here. I have done exactly the same approach in JS so far. Instead of using bloated frameworks, I used ES6 template strings.
The only problem I have now is handling css and js. Basically I love the component approach. You have one component that consists of HTML, CSS and JS. When I use multiple components on a page, all the css and js code is merged into the head element. This is so handy and performant at the same time, because the css and js code is not always that big and therefore can be better inserted directly into the html document, instead of just referring to external files, so that a new request has to be made.
Hence my consideration: Would it be possible to extend the render function so that all components <style /> and <script /> tags are automatically merged and inserted into the head element, maybe like this?
func Page(title string) g.Node {
return Doctype(
HTML(
Lang("en"),
Head(
TitleEl(g.Text(title))
),
Body(
ComponentA(),
ComponentB(),
),
),
),
}
func ComponentA() g.Node {
return Group(
H2(g.Text("Component A")),
StyleEl(g.Raw("h2 { color: green; }")),
Script(g.Raw("alert("Component A")")),
),
}
func ComponentB() g.Node {
return Group(
H3(g.Text("Component B")),
StyleEl(g.Raw("h3 { color: red; }")),
Script(g.Raw("console.log("Component B")")),
),
}this would be rendered to:
<!DOCTYPE html>
<html lang="end">
<head>
<title>Hello World</title>
<style>h2 { color: green; } h3 { color: red; }</style>
<script>alert("Component A"); console.log("Component B");</script>
</head>
<body>
<h2>Component A</h2>
<h3>Component B</h3>
</bod>
</html>
Perhaps some of this can be implemented. I am curious about your feedback.