Using declarative Shadow DOM #781
Replies: 9 comments 9 replies
-
|
thats amazing. thanks for this. |
Beta Was this translation helpful? Give feedback.
-
|
My understanding is that this would already be possible with templ? |
Beta Was this translation helpful? Give feedback.
-
|
I think I'm struggling here to see what templ would need to add for it to support this? |
Beta Was this translation helpful? Give feedback.
-
|
I agree that tempo does not need to chance to support it. I have a question about the way that the out of order updates are sent to the browser though . To update the browser it seems that it’s a forever http call to the server with the server flushing to force the client to update . This is so you don’t need any js or htmx . It pretty neat, but it means that the server will be overloaded with a continuous connection that lasts for ever ? Is this what is termed long polling ? |
Beta Was this translation helpful? Give feedback.
-
|
I think one can create this with templ in it's current form with some manual declarion of the shadow dom and some Go channels. For people to use it that way they would need to have deeper knowledge of how this works. Replacing @Hello(person.Name)with this ?@Hello(person.Name)could make the rendering of the Hello fragment as a shadow dom node and the the decoupling of the rendering with Go channels and push make this much easier. The challenge I think is how to get the connection flushing without coupling to http. |
Beta Was this translation helpful? Give feedback.
-
|
I've put together a POC of what would need to change in templ to support this. Answer is, potentially not very much. package main
import (
"net/http"
"fmt"
"time"
"bufio"
"sync"
)
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
data := make(chan string)
go func() {
for i := 0; i < 10; i++ {
if r.Context().Err() != nil {
return
}
data <- fmt.Sprintf("Data %d", i)
time.Sleep(1 * time.Second)
}
close(data)
}()
// Can't use the templ.Component function as it doesn't support flushing.
Page(data).Render(r.Context(), w)
})
http.ListenAndServe("127.0.0.1:8080", nil)
}
func Flush() *FlushComponent {
return &FlushComponent{}
}
type FlushComponent struct {
}
func (f *FlushComponent) Render(ctx context.Context, w io.Writer) (err error) {
if err = templ.GetChildren(ctx).Render(ctx, w); err != nil {
return err
}
b, isTemplBuffer := w.(*Buffer)
if isTemplBuffer {
return b.Flush()
}
return fmt.Errorf("unable to flush, writer is not a http.Flusher or *bufio.Writer")
}
templ Page(data chan string) {
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<h1>Page</h1>
for d := range data {
@Flush() {
<div>{ d }</div>
}
}
</body>
</html>
}
var bufferPool = sync.Pool{
New: func() any {
return new(Buffer)
},
}
type Buffer struct {
Underlying io.Writer
b *bufio.Writer
}
func (b *Buffer) Write(p []byte) (n int, err error) {
return b.b.Write(p)
}
func (b *Buffer) Flush() error {
if err := b.b.Flush(); err != nil {
return err
}
if f, ok := b.Underlying.(http.Flusher); ok {
f.Flush()
}
return nil
}
func (b *Buffer) Close() error {
if c, ok := b.Underlying.(io.Closer); ok {
return c.Close()
}
return nil
}
func (b *Buffer) Reset(w io.Writer) {
if b.b == nil {
b.b = bufio.NewWriterSize(b, DefaultBufferSize)
}
b.Underlying = w
b.b.Reset(w)
}
func (b *Buffer) Size() int {
return b.b.Size()
}
func (b *Buffer) WriteString(s string) (n int, err error) {
return b.b.WriteString(s)
}
func GetBuffer(w io.Writer) (b *Buffer, existing bool) {
b, ok := w.(*Buffer)
if ok {
return b, true
}
b = bufferPool.Get().(*Buffer)
b.Reset(w)
return b, false
}
var DefaultBufferSize = 4 * 1024 // 4KB
var MaxBufferSize = 64 * 1024 // 64KB
func ReleaseBuffer(b *Buffer) (err error) {
if err = b.Flush(); err != nil {
return
}
if b.Size() > MaxBufferSize {
b.Reset(nil)
}
bufferPool.Put(b)
return nil
}Let me break this down... Here, we start a background http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
data := make(chan string)
go func() {
for i := 0; i < 10; i++ {
if r.Context().Err() != nil {
return
}
data <- fmt.Sprintf("Data %d", i)
time.Sleep(1 * time.Second)
}
close(data)
}()
// Can't use the templ.Handler function as it doesn't support flushing.
Page(data).Render(r.Context(), w)
})
http.ListenAndServe("127.0.0.1:8080", nil)Note that the current Next, I define a templ component in code - it implements the It currently returns an error if it can't flush, but I think I'd remove that, and turn it into an opt-in log message. func Flush() *FlushComponent {
return &FlushComponent{}
}
type FlushComponent struct {
}
func (f *FlushComponent) Render(ctx context.Context, w io.Writer) (err error) {
if err = templ.GetChildren(ctx).Render(ctx, w); err != nil {
return err
}
b, isTemplBuffer := w.(*Buffer)
if isTemplBuffer {
return b.Flush()
}
return fmt.Errorf("unable to flush, writer is not a http.Flusher or *bufio.Writer")
}Then, there's a normal templ component. Note that templ Page(data chan string) {
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<h1>Page</h1>
for d := range data {
@Flush() {
<div>{ d }</div>
}
}
</body>
</html>
}Next, here's some changes that would have to be made in the templ runtime. These could be put into a new package, e.g. The current implementation of var bufferPool = sync.Pool{
New: func() any {
return new(Buffer)
},
}
type Buffer struct {
Underlying io.Writer
b *bufio.Writer
}
func (b *Buffer) Write(p []byte) (n int, err error) {
return b.b.Write(p)
}
func (b *Buffer) Flush() error {
if err := b.b.Flush(); err != nil {
return err
}
if f, ok := b.Underlying.(http.Flusher); ok {
f.Flush()
}
return nil
}
func (b *Buffer) Close() error {
if c, ok := b.Underlying.(io.Closer); ok {
return c.Close()
}
return nil
}
func (b *Buffer) Reset(w io.Writer) {
if b.b == nil {
b.b = bufio.NewWriterSize(b, DefaultBufferSize)
}
b.Underlying = w
b.b.Reset(w)
}
func (b *Buffer) Size() int {
return b.b.Size()
}
func (b *Buffer) WriteString(s string) (n int, err error) {
return b.b.WriteString(s)
}Then, we'd have to change the implementation of a couple of templ runtime functions. The current I've exposed global variables for the func GetBuffer(w io.Writer) (b *Buffer, existing bool) {
b, ok := w.(*Buffer)
if ok {
return b, true
}
b = bufferPool.Get().(*Buffer)
b.Reset(w)
return b, false
}
var DefaultBufferSize = 4 * 1024 // 4KB
var MaxBufferSize = 64 * 1024 // 64KB
func ReleaseBuffer(b *Buffer) (err error) {
if err = b.Flush(); err != nil {
return
}
if b.Size() > MaxBufferSize {
b.Reset(nil)
}
bufferPool.Put(b)
return nil
}The changes to the generated code would actually be fairly minor: Generated file// Code generated by templ - DO NOT EDIT.
// templ: version: v0.2.708
package main
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import "context"
import "io"
import (
"bufio"
"fmt"
"net/http"
"sync"
"time"
)
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
data := make(chan string)
go func() {
for i := 0; i < 10; i++ {
if r.Context().Err() != nil {
return
}
data <- fmt.Sprintf("Data %d", i)
time.Sleep(1 * time.Second)
}
close(data)
}()
// Can't use the templ.Component function as it doesn't support flushing.
Page(data).Render(r.Context(), w)
})
http.ListenAndServe("127.0.0.1:8080", nil)
}
func Flush() *FlushComponent {
return &FlushComponent{}
}
type FlushComponent struct {
}
func (f *FlushComponent) Render(ctx context.Context, w io.Writer) (err error) {
if err = templ.GetChildren(ctx).Render(ctx, w); err != nil {
return err
}
b, isTemplBuffer := w.(*Buffer)
if isTemplBuffer {
return b.Flush()
}
return fmt.Errorf("unable to flush, writer is not a http.Flusher or *bufio.Writer")
}
func Page(data chan string) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() { templ_7745c5c3_Err = ReleaseBuffer(templ_7745c5c3_Buffer) }()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html><head><title>Page</title></head><body><h1>Page</h1>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for d := range data {
templ_7745c5c3_Var2 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer ReleaseBuffer(templ_7745c5c3_Buffer)
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(d)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `main.templ`, Line: 65, Col: 13}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
templ_7745c5c3_Err = Flush().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</body></html>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
}
var bufferPool = sync.Pool{
New: func() any {
return new(Buffer)
},
}
type Buffer struct {
Underlying io.Writer
b *bufio.Writer
}
func (b *Buffer) Write(p []byte) (n int, err error) {
return b.b.Write(p)
}
func (b *Buffer) Flush() error {
if err := b.b.Flush(); err != nil {
return err
}
if f, ok := b.Underlying.(http.Flusher); ok {
f.Flush()
}
return nil
}
func (b *Buffer) Close() error {
if c, ok := b.Underlying.(io.Closer); ok {
return c.Close()
}
return nil
}
func (b *Buffer) Reset(w io.Writer) {
if b.b == nil {
b.b = bufio.NewWriterSize(b, DefaultBufferSize)
}
b.Underlying = w
b.b.Reset(w)
}
func (b *Buffer) Size() int {
return b.b.Size()
}
func (b *Buffer) WriteString(s string) (n int, err error) {
return b.b.WriteString(s)
}
func GetBuffer(w io.Writer) (b *Buffer, existing bool) {
b, ok := w.(*Buffer)
if ok {
return b, true
}
b = bufferPool.Get().(*Buffer)
b.Reset(w)
return b, false
}
var DefaultBufferSize = 4 * 1024 // 4KB
var MaxBufferSize = 64 * 1024 // 64KB
func ReleaseBuffer(b *Buffer) (err error) {
if err = b.Flush(); err != nil {
return
}
if b.Size() > MaxBufferSize {
b.Reset(nil)
}
bufferPool.Put(b)
return nil
}You can drop that into a directory with an appropriate I think this would be a fix for #207. |
Beta Was this translation helpful? Give feedback.
-
|
With that in place. Here's how we could do the shadow DOM. I haven't used the Flush feature above in this example, but essentially, each call to flush the First, we'd need some middleware to provide us with a channel and wait group, so that we can defer and multithread execution of parts of the webpage construction. package main
import (
"bytes"
"context"
"fmt"
"io"
"net/http"
"sync"
"time"
"github.com/a-h/templ"
)
func NewSlotMiddleware(next http.Handler) *SlotMiddleware {
return &SlotMiddleware{
Next: next,
}
}
type SlotMiddleware struct {
Next http.Handler
}
type slotContextKey struct{}
var SlotContextKey = slotContextKey{}
type slotContextValue struct {
WaitGroup *sync.WaitGroup
Done chan templ.Component
}
func (sm *SlotMiddleware) ServeHTTP(w http.ResponseWriter, r *http.Request) {
value := &slotContextValue{
WaitGroup: &sync.WaitGroup{},
Done: make(chan templ.Component),
}
ctx := context.WithValue(r.Context(), SlotContextKey, value)
sm.Next.ServeHTTP(w, r.WithContext(ctx))
}
func Slot(id string) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
// Get the slot context value.
value, ok := ctx.Value(SlotContextKey).(*slotContextValue)
if !ok {
return fmt.Errorf("slot context value not found")
}
value.WaitGroup.Add(1)
// Render the slot.
if _, err = io.WriteString(w, fmt.Sprintf(`<slot name="%s"></slot>`, templ.EscapeString(id))); err != nil {
return err
}
children := templ.GetChildren(ctx)
// Start a goroutine to populate the channel.
go func() {
//TODO: Something with errors, e.g. update the channel to support them.
defer value.WaitGroup.Done()
// Would get a buffer from a pool, I think.
buf := bytes.NewBuffer(nil)
// Write to the buffer because it could take a while.
io.WriteString(buf, fmt.Sprintf(`<div slot="%s">`, templ.EscapeString(id)))
fmt.Println("Rendering slot", id)
children.Render(ctx, buf)
io.WriteString(buf, `</div>`)
// If we don't render to the buffer, then we might get stuck at the first slow component, even though the others are ready.
// Now it's rendered, we can flush it.
value.Done <- templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
_, err = io.Copy(w, buf)
return err
})
}()
return nil
})
}
func Flush() templ.Component {
return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
// Get the slot context value.
value, ok := ctx.Value(SlotContextKey).(*slotContextValue)
if !ok {
return fmt.Errorf("slot context value not found")
}
go func() {
value.WaitGroup.Wait()
close(value.Done)
}()
for done := range value.Done {
//TODO: Handle errors, think about what to do in case of goroutine leak.
done.Render(ctx, w)
}
return nil
})
}
func Sleep(d time.Duration) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
fmt.Printf("Sleeping for %v\n", d)
time.Sleep(d)
return nil
})
}
func main() {
mux := http.NewServeMux()
mux.Handle("/", templ.Handler(templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
return Page(time.Now()).Render(ctx, w)
})))
withSlots := NewSlotMiddleware(mux)
http.ListenAndServe("127.0.0.1:8080", withSlots)
}With the middleware in place, the package main
import "time"
templ Page(start time.Time) {
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<h1>Hello, World!</h1>
@Slot("name1") {
@Sleep(time.Second * 3)
<div>
{ time.Now().Sub(start).String() }
</div>
}
@Slot("name2") {
@Sleep(time.Second)
<div>
{ time.Now().Sub(start).String() }
</div>
}
@Slot("name3") {
<div>
{ time.Now().Sub(start).String() }
</div>
}
@Flush()
</body>
</html>
}Note how slot 1 should take 3 seconds, so its contents should be rendered last. Slot 2 should take 1 second, so it should be second, and slot <title>
Page
</title>
<h1>
Hello, World!
</h1>
<slot name="name1">
</slot>
<slot name="name2">
</slot>
<slot name="name3">
</slot>
<div slot="name3">
<div>
45.208µs
</div>
</div>
<div slot="name2">
<div>
1.001228292s
</div>
</div>
<div slot="name1">
<div>
3.001286958s
</div>
</div>And indeed, the slot contents are rendered in the correct order. There's likely some details to work out around locking the context object in templ on a per request basis, but that's the entire concept, end to end. If you forget to flush, you're going to use up goroutines, but I think the middleware could warn about forgetting to flush. There's probably a footgun in there around flushing twice. I think that's fairly ergonomic, for a multithreaded render of a webpage. |
Beta Was this translation helpful? Give feedback.
-
|
This is really cool @a-h Thank you for all the work you put into this and working out how to support Flush. I was also wondering about the best way to do this. I am really intrigued with this at the moment, because of the Out of Order nature of this. It may have some nice design advantages with sub systems where the order of changes is non deterministic. Here is a working golang example that uses standard golang templates: https://github.com/ryoid/go-streaming-html-ooo. It is an exact copy of the demo that started this Issue: https://ooo.lamplightdev.workers.dev/ Perhaps we can make the templ equivalent of this as a nice demo. |
Beta Was this translation helpful? Give feedback.
-
|
This looks fantastic - thanks @gedw99 I had the same thought when I saw that demo in r/golang. I think @flush is the better way, it doesn't change the syntax as my idea did. Do you think Slot middleware should be in templ or a templ-middleware package? |
Beta Was this translation helpful? Give feedback.
-
|
whats @flush ?? Are you sure you meant to add a handle to the front of that ?? As far as I know the way the above golang code by @a-h that handles flush is quite a good strategy. I am a little worried about scaling, in that a client will be forever http pulling and never closing, until the server finally does a full and final response. For example if you run that golang demo, you will see the browser holding a long connection. The only way to use this in a useful way where Clients get updates is to hold the connection forever and just flushing new updates out to the client. So, I think the decision is not over yet is my point. This might have implications for Google SEO also. #207 and the TTFB ( Time To First Byte ) pretty important aspect. I also need to test this with caddy in front and the many streams flowing UP to the browser. Am curious how efficient / inefficient it is. SO there is a lot to consider. Regarding, middleware's, etc I reckon @a-h is the one that would know best ???? I cant find any templ-middleware package. I assume it does not exist yet ? |
Beta Was this translation helpful? Give feedback.
-
|
"whats @flush ??" See the code above. |
Beta Was this translation helpful? Give feedback.
-
Ah yes now I see it . I am prototyping this to see how it affects scaling aspects with regarding to max connections The other aspect is when what is returned into a slot is not always the same html. For example a Chat application has slots inside slots. I am curious how far this architectural approach scales in terms of design flexibility. |
Beta Was this translation helpful? Give feedback.
-
|
In the next version of templ, you'll be able to use Declarative Shadow DOM to defer loading of content without JavaScript on the client side. See PR #802 The PR adds two new examples - one that demonstrates basic flushing, and another that uses Declarative Shadow DOM to defer loading with placeholders (suspense) without JavaScript. Just some documentation required on how streaming mode affects your ability to set the HTTP header one the body has started to be sent to the client, and an explanation of the examples is required now. Thanks for the nudge to do this. There was discussion of streaming responses, but I didn't really see the value. The Declarative Shadow DOM is worth it. |
Beta Was this translation helpful? Give feedback.
-
|
This made my day !! thanks @a-h |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Hi! The |
Beta Was this translation helpful? Give feedback.
-
|
You will need to make sure that you're using the latest version of the templ runtime in your project. Also, if you have a proxy server or load balancer in the request chain, it may interfere with the streaming by adding additional caching. Browser support is at around 92% - but it's worth checking. |
Beta Was this translation helpful? Give feedback.
-
|
Right, To clarify: the h1 tag is present in the html, it just isn't visible Is it the same suspense example in the demo video found here in the templ docs: https://templ.guide/server-side-rendering/streaming/#declarative-shadow-dom? If so, it's not visible in that either |
Beta Was this translation helpful? Give feedback.
-
Browsers now (or in the near future) support declarative Shadow DOM.
https://caniuse.com/declarative-shadow-dom
You can then render
<slot name="content"></slot>, stream this to the client, then later stream<div slot="content">Rendered with content</div>and the browser will replace the slot with the new content without the need for Javascript.The content could come from a Go channel e.g. reading from a database, and the page could still be sent (header, footer, nav) with the data replacing the placeholder as soon as the channel delivers results.
AJAX without Javascript for a faster Time to First Byte (TTFB).
For a demo see https://ooo.lamplightdev.workers.dev/
It's like Metas BigPipe (2010) but without Javascript
https://engineering.fb.com/2010/06/04/web/bigpipe-pipelining-web-pages-for-high-performance/
Beta Was this translation helpful? Give feedback.
All reactions