Invalid renderings

[onionjake]

I've seen an invalid render on firefox and had a minimal way to reproduce the issue with a minimal example. It seems like an issue with the DOM patching?

This is using v0.12.1

Click the Inside button first.

package main

import (
	"bytes"
	"context"
	"io"
	"log"
	"net/http"
	"sync"
	"text/template"

	"github.com/jfyne/live"
)

type State struct {
	Inside  int
	Outside int
}

func main() {
	var mu sync.Mutex
	var inside, outside int
	h, err := live.NewHandler(live.NewCookieStore("session-name", []byte("weak-secret")))
	if err != nil {
		log.Fatal("could not create handler")
	}
	h.Render = func(ctx context.Context, data interface{}) (io.Reader, error) {
		tmpl, err := template.New("thermo").Parse(`

Hello<br/>
Outside is: {{.Outside}}
<button live-click="inside">Inside</button>
<button live-click="outside">Outside</button>
<button live-click="nothing">Nothing</button>
<details>
<summary>Advanced</summary>
Inside is: {{.Inside}}
<button live-click="inside">Inside</button>
<button live-click="outside">Outside</button>
<button live-click="nothing">Nothing</button>
</details>
<script src="/live.js"></script>
	`)
		if err != nil {
			return nil, err
		}
		var buf bytes.Buffer
		if err := tmpl.Execute(&buf, data); err != nil {
			return nil, err
		}
		return &buf, nil
	}
	h.HandleEvent("inside", func(context.Context, *live.Socket, live.Params) (interface{}, error) {
		mu.Lock()
		defer mu.Unlock()
		inside += 1

		return &State{inside, outside}, nil
	})
	h.HandleEvent("outside", func(context.Context, *live.Socket, live.Params) (interface{}, error) {
		mu.Lock()
		defer mu.Unlock()
		outside += 1

		return &State{inside, outside}, nil
	})
	h.HandleEvent("nothing", func(context.Context, *live.Socket, live.Params) (interface{}, error) {
		mu.Lock()
		defer mu.Unlock()
		return &State{inside, outside}, nil
	})

	http.Handle("/", h)
	http.Handle("/live.js", live.Javascript{})
	http.ListenAndServe(":8080", nil)
}

[onionjake]

Strangely enough pushing the buttons enough gets it back into a good state? Perhaps it is because I am not properly mounting the socket with a default value?

[jfyne]

Hello<br/>
<span>Outside is: {{.Outside}}</span>
<button live-click="inside">Inside</button>
<button live-click="outside">Outside</button>
<button live-click="nothing">Nothing</button>
<details>
    <summary>Advanced</summary>
    <span>Inside is: {{.Inside}}</span>
    <button live-click="inside">Inside</button>
    <button live-click="outside">Outside</button>
    <button live-click="nothing">Nothing</button>
</details>
<script src="/live.js"></script>

I think if you wrap you "Outside is {{.Outside}}" and "Inside is: {{.Inside}}" in an element like a span this should fix the issues you are seeing.

I think because your "Outside is" section was just in the body it was causing the whole body to update which was probably breaking it.

[onionjake]

Yes using the span fixes all the issues. I mentioned on the other issue perhaps warning if patches to entire body are happening and/or adding a small section to the readme would be helpful!