dom

func TestNullElementIsInert(t *testing.T)

{
	el := Doc().Query("#does-not-exist")
	el.SetHTML("<b>x</b>")
	el.SetText("x")
	el.SetAttr("a", "b")
	el.SetStyle("color", "red")
	el.SetValue("v")
	el.AddClass("c")
	el.RemoveClass("c")
	el.ToggleClass("c")
	if el.Text() != "" || el.HTML() != "" || el.Val() != "" || el.Attr("a") != "" ||
		el.Checked() || el.HasClass("c") || el.Data("x") != "" {
		t.Fatalf("null element readers must return zero values")
	}
}

func TestElementAttrsAndStyle(t *testing.T)

{
	doc := Doc()
	el := doc.CreateElement("div")
	el.SetAttr("data-x", "y")
	if got := el.Attr("data-x"); got != "y" {
		t.Fatalf("Attr() = %q", got)
	}
	el.SetHTML("<span>ok</span>")
	if got := el.HTML(); got != "<span>ok</span>" {
		t.Fatalf("HTML() = %q", got)
	}
	el.SetStyle("color", "red")
	if v := el.Get("style").Call("getPropertyValue", "color").String(); v != "red" {
		t.Fatalf("style color = %q", v)
	}
}

func TestElementCollections(t *testing.T)

{
	doc := Doc()
	parent := doc.CreateElement("div")
	parent.SetHTML("<span>a</span><span>b</span>")
	spans := parent.QueryAll("span")
	if spans.Length() != 2 {
		t.Fatalf("Length() = %d", spans.Length())
	}
	second := spans.Index(1)
	if second.Text() != "b" {
		t.Fatalf("Index(1).Text() = %q", second.Text())
	}
	second.ToggleClass("x")
	if !second.HasClass("x") {
		t.Fatalf("ToggleClass/HasClass failed")
	}
}

func StyleInline(styles map[string]string) string

{
	var b strings.Builder
	first := true
	for k, v := range styles {
		if !first {
			b.WriteByte(';')
		}
		first = false
		b.WriteString(k)
		b.WriteByte(':')
		b.WriteString(v)
	}
	return b.String()
}

func RegisterComponentHandler(componentID, name string, fn func(this js.Value, args []js.Value) any)

{
	handlerMu.Lock()
	defer handlerMu.Unlock()
	if componentHandlerRegistry[componentID] == nil {
		componentHandlerRegistry[componentID] = make(map[string]js.Func)
	}
	if old, ok := componentHandlerRegistry[componentID][name]; ok {
		old.Release()
	}
	componentHandlerRegistry[componentID][name] = js.SafeFuncOf(fn)
}

func RegisterHandlerElem(name string, fn func(el Element, evt Event))

{
	RegisterHandler(name, func(_ js.Value, args []js.Value) any {
		var evt, el js.Value
		if len(args) > 0 {
			evt = args[0]
		}
		if len(args) > 1 {
			el = args[1]
		} else if evt.Truthy() {
			el = evt.Get("target")
		}
		fn(Element{el}, Event{evt})
		return nil
	})
}

func DelegateEvents(componentID string, root js.Value)

{
	RemoveDelegatedEvents(componentID, root)

	var handlers []delegatedHandler
	events := []string{"click", "submit", "input", "change", "keydown", "keyup", "focus", "blur"}
	for _, evtName := range events {
		for _, capture := range []bool{false, true} {
			if (evtName == "focus" || evtName == "blur") && !capture {
				continue
			}
			handler := newDelegatedHandler(componentID, root, evtName, capture)
			handlers = append(handlers, handler)
			root.Call("addEventListener", evtName, handler.fn, capture)
		}
	}
	delegateMu.Lock()
	delegates[componentID] = handlers
	delegateMu.Unlock()
}

func newDelegatedHandler(componentID string, root js.Value, event string, capture bool) delegatedHandler

{
	var timerMu sync.Mutex
	timers := make(map[string]*time.Timer)
	throttled := make(map[string]time.Time)

	fn := js.SafeFuncOf(func(_ js.Value, args []js.Value) any {
		if len(args) == 0 {
			return nil
		}
		evt := args[0]
		target := evt.Get("target")
		for target.Truthy() {
			handlerName := target.Call("getAttribute", "data-on-"+event)
			if handlerName.Truthy() {
				modifiers := eventModifiers(target, event)
				_, wantsCapture := modifiers["capture"]
				nonBubbling := event == "focus" || event == "blur"
				if (nonBubbling || wantsCapture == capture) && eventAllowed(evt, target, modifiers) {
					h := GetComponentHandler(componentID, handlerName.String())
					if h.Truthy() {
						if _, ok := modifiers["prevent"]; ok {
							if _, passive := modifiers["passive"]; !passive {
								evt.Call("preventDefault")
							}
						}
						if _, ok := modifiers["stop"]; ok {
							evt.Call("stopPropagation")
						}
						if _, ok := modifiers["once"]; ok {
							target.Call("removeAttribute", "data-on-"+event)
							target.Call("removeAttribute", "data-on-"+event+"-modifiers")
						}

						invoke := func() {
							defer func() {
								if r := recover(); r != nil && OnHandlerPanic != nil {
									OnHandlerPanic(r, handlerName.String())
								}
							}()
							h.Invoke(evt, target)
						}
						key := eventBindingKey(target, event, handlerName.String())
						if delay, ok := modifierDelay(modifiers, "debounce"); ok {
							timerMu.Lock()
							if timer := timers[key]; timer != nil {
								timer.Stop()
							}
							var scheduled *time.Timer
							scheduled = time.AfterFunc(delay, func() {
								invoke()
								timerMu.Lock()
								if timers[key] == scheduled {
									delete(timers, key)
								}
								timerMu.Unlock()
							})
							timers[key] = scheduled
							timerMu.Unlock()
							return nil
						}
						if delay, ok := modifierDelay(modifiers, "throttle"); ok {
							timerMu.Lock()
							last := throttled[key]
							if time.Since(last) < delay {
								timerMu.Unlock()
								return nil
							}
							throttled[key] = time.Now()
							timerMu.Unlock()
						}
						invoke()
						return nil
					}
				}
			}
			if target.Equal(root) {
				break
			}
			target = target.Get("parentElement")
		}
		return nil
	})

	stop := func() {
		timerMu.Lock()
		for _, timer := range timers {
			timer.Stop()
		}
		clear(timers)
		clear(throttled)
		timerMu.Unlock()
	}
	return delegatedHandler{event: event, capture: capture, fn: fn, stop: stop}
}

func eventModifiers(target js.Value, event string) map[string]struct{}

{
	raw := target.Call("getAttribute", "data-on-"+event+"-modifiers")
	modifiers := make(map[string]struct{})
	if !raw.Truthy() {
		return modifiers
	}
	for _, modifier := range strings.Split(raw.String(), ",") {
		modifier = strings.ToLower(strings.TrimSpace(modifier))
		if modifier != "" {
			modifiers[modifier] = struct{}{}
		}
	}
	return modifiers
}

func eventAllowed(evt, target js.Value, modifiers map[string]struct{}) bool

{
	if _, ok := modifiers["self"]; ok && !evt.Get("target").Equal(target) {
		return false
	}
	keys := map[string]string{
		"enter": "Enter", "escape": "Escape", "tab": "Tab", "space": " ",
		"up": "ArrowUp", "down": "ArrowDown", "left": "ArrowLeft", "right": "ArrowRight",
	}
	for modifier, key := range keys {
		if _, ok := modifiers[modifier]; ok && evt.Get("key").String() != key {
			return false
		}
	}
	system := map[string]string{"ctrl": "ctrlKey", "shift": "shiftKey", "alt": "altKey", "meta": "metaKey"}
	for modifier, property := range system {
		if _, ok := modifiers[modifier]; ok && !evt.Get(property).Bool() {
			return false
		}
	}
	if _, exact := modifiers["exact"]; exact {
		for modifier, property := range system {
			_, required := modifiers[modifier]
			if evt.Get(property).Bool() != required {
				return false
			}
		}
	}
	return true
}

func modifierDelay(modifiers map[string]struct{}, name string) (time.Duration, bool)

{
	if _, ok := modifiers[name]; !ok {
		return 0, false
	}
	delay := 300
	for modifier := range modifiers {
		if ms, err := strconv.Atoi(modifier); err == nil && ms >= 0 {
			delay = ms
			break
		}
	}
	return time.Duration(delay) * time.Millisecond, true
}

func RemoveDelegatedEvents(componentID string, root js.Value)

{
	delegateMu.Lock()
	handlers, ok := delegates[componentID]
	if ok {
		delete(delegates, componentID)
	}
	delegateMu.Unlock()
	if !ok {
		return
	}
	// A root that is already gone (its subtree was replaced) cannot have its
	// listeners detached, but the callbacks still have to be released.
	live := root.Truthy()
	for _, handler := range handlers {
		if live {
			root.Call("removeEventListener", handler.event, handler.fn.Value, handler.capture)
		}
		handler.stop()
		handler.fn.Release()
	}
}

func SnapshotComponentSignals(componentID string) map[string]any

{
	componentSignalsMu.RLock()
	defer componentSignalsMu.RUnlock()
	if signals, ok := componentSignals[componentID]; ok {
		clone := make(map[string]any, len(signals))
		for k, v := range signals {
			clone[k] = v
		}
		return clone
	}
	return nil
}

func ComponentRoot(id string) Element

{
	doc := Doc()
	if id == "" {
		return doc.ByID("app")
	}
	el := doc.Query(fmt.Sprintf("[data-component-id='%s']", id))
	if el.IsNull() || el.IsUndefined() {
		return doc.ByID("app")
	}
	return el
}

func UpdateDOM(componentID string, html string)

{
	element := ComponentRoot(componentID)
	if element.IsNull() || element.IsUndefined() {
		return
	}

	// Diff-patch only when the resolved element is the component's OWN root: that
	// is an in-place reactive update, where patching preserves focus/selection.
	// Otherwise the target is the #app fallback (a fresh mount or a route change,
	// since ComponentRoot falls back to #app when the component root is not yet
	// in the DOM). There, positionally diffing two different <root> trees leaves
	// stale nodes from the previous component, so replace wholesale instead.
	elID := element.Call("getAttribute", "data-component-id")
	if componentID != "" && elID.Truthy() && elID.String() == componentID {
		patchInnerHTML(element.Value, html)
	} else {
		element.Set("innerHTML", html)
	}

	if TemplateHook != nil {
		TemplateHook(componentID, html)
	}

	// Release the listeners of the previous render: rebinding below attaches
	// fresh ones and stale listeners on replaced nodes would leak.
	ReleaseInputBindings(componentID)

	BindStoreInputsForComponent(componentID, element.Value)
	BindSignalInputs(componentID, element.Value)
	BindASTStoreInputs(componentID, element.Value)
	BindASTSignalInputs(componentID, element.Value)
	UpdateLifecycleHooks(componentID)
}

func UpdateMountedDOM(componentID, html string)

{
	el := ComponentRoot(componentID)
	if el.IsNull() || el.IsUndefined() {
		return
	}
	id := el.Call("getAttribute", "data-component-id")
	if !id.Truthy() || id.String() != componentID {
		return
	}
	UpdateDOM(componentID, html)
}

func UpdateDOMIn(target Element, componentID, html string)

{
	if target.IsNull() || target.IsUndefined() {
		return
	}
	target.Set("innerHTML", html)

	if TemplateHook != nil {
		TemplateHook(componentID, html)
	}

	ReleaseInputBindings(componentID)

	BindStoreInputsForComponent(componentID, target.Value)
	BindSignalInputs(componentID, target.Value)
	BindASTStoreInputs(componentID, target.Value)
	BindASTSignalInputs(componentID, target.Value)
	UpdateLifecycleHooks(componentID)
}

func BindASTStoreInputs(componentID string, element js.Value)

{
	inputs := element.Call("querySelectorAll", "[data-bind-store]")
	for i := 0; i < inputs.Length(); i++ {
		input := inputs.Index(i)
		binding := input.Call("getAttribute", "data-bind-store").String()
		parts := strings.Split(binding, ".")
		if len(parts) != 3 {
			continue
		}
		module, storeName, key := parts[0], parts[1], parts[2]
		store := state.GlobalStoreManager.GetStore(module, storeName)
		if store == nil {
			continue
		}
		if StoreBindingHook != nil && componentID != "" {
			StoreBindingHook(componentID, module, storeName, key)
		}
		storeValue := store.Get(key)
		tag := strings.ToLower(input.Get("tagName").String())
		if tag == "input" {
			inputType := input.Get("type").String()
			if inputType == "checkbox" {
				if b, ok := storeValue.(bool); ok {
					input.Set("checked", b)
				}
				ch, stop := events.Listen("change", input)
				addInputBindingStop(componentID, stop)
				go func(in js.Value, st *state.Store, k string) {
					for range ch {
						st.Set(k, in.Get("checked").Bool())
					}
				}(input, store, key)
				continue
			}
		}
		if storeValue == nil {
			storeValue = ""
		}
		input.Set("value", fmt.Sprintf("%v", storeValue))
		ch, stop := events.Listen("input", input)
		addInputBindingStop(componentID, stop)
		go func(in js.Value, st *state.Store, k string) {
			for range ch {
				st.Set(k, in.Get("value").String())
			}
		}(input, store, key)
	}
}

func BindASTSignalInputs(componentID string, element js.Value)

{
	inputs := element.Call("querySelectorAll", "[data-bind-signal]")
	for i := 0; i < inputs.Length(); i++ {
		input := inputs.Index(i)
		name := input.Call("getAttribute", "data-bind-signal").String()
		sig := getSignal(componentID, name)
		if sig == nil {
			continue
		}
		tag := strings.ToLower(input.Get("tagName").String())
		if tag == "input" {
			inputType := input.Get("type").String()
			if inputType == "checkbox" {
				if s, ok := sig.(interface {
					Read() any
					Set(bool)
				}); ok {
					if b, ok := s.Read().(bool); ok {
						input.Set("checked", b)
					}
					ch, stop := events.Listen("change", input)
					addInputBindingStop(componentID, stop)
					go func(in js.Value, sg interface{ Set(bool) }) {
						for range ch {
							sg.Set(in.Get("checked").Bool())
						}
					}(input, s)
					continue
				}
			}
		}
		if s, ok := sig.(interface {
			Read() any
			Set(string)
		}); ok {
			input.Set("value", fmt.Sprintf("%v", s.Read()))
			ch, stop := events.Listen("input", input)
			addInputBindingStop(componentID, stop)
			go func(in js.Value, sg interface{ Set(string) }) {
				for range ch {
					sg.Set(in.Get("value").String())
				}
			}(input, s)
		}
	}
}

func BindStoreInputsForComponent(componentID string, element js.Value)

{
	inputs := element.Call("querySelectorAll", "input, select, textarea")
	for i := 0; i < inputs.Length(); i++ {
		input := inputs.Index(i)

		valueAttr := ""
		if input.Call("hasAttribute", "value").Bool() {
			valueAttr = input.Call("getAttribute", "value").String()
		}
		checkedAttr := ""
		if input.Call("hasAttribute", "checked").Bool() {
			checkedAttr = input.Call("getAttribute", "checked").String()
		}

		re := reStoreWrite
		valueMatch := re.FindStringSubmatch(valueAttr)
		checkedMatch := re.FindStringSubmatch(checkedAttr)

		var module, storeName, key string
		var usesChecked bool
		if len(valueMatch) == 4 {
			module, storeName, key = valueMatch[1], valueMatch[2], valueMatch[3]
		} else if len(checkedMatch) == 4 {
			module, storeName, key = checkedMatch[1], checkedMatch[2], checkedMatch[3]
			usesChecked = true
		} else {
			continue
		}

		store := state.GlobalStoreManager.GetStore(module, storeName)
		if store == nil {
			continue
		}

		if StoreBindingHook != nil && componentID != "" {
			StoreBindingHook(componentID, module, storeName, key)
		}

		storeValue := store.Get(key)

		if usesChecked {
			boolVal, _ := storeValue.(bool)
			input.Set("checked", boolVal)
			ch, stop := events.Listen("change", input)
			addInputBindingStop(componentID, stop)
			go func(in js.Value, st *state.Store, k string) {
				for range ch {
					st.Set(k, in.Get("checked").Bool())
				}
			}(input, store, key)
			continue
		}

		if storeValue == nil {
			storeValue = ""
		}
		input.Set("value", fmt.Sprintf("%v", storeValue))
		ch, stop := events.Listen("input", input)
		addInputBindingStop(componentID, stop)
		go func(in js.Value, st *state.Store, k string) {
			for range ch {
				st.Set(k, in.Get("value").String())
			}
		}(input, store, key)
	}
}

func BindSignalInputs(componentID string, element js.Value)

{
	inputs := element.Call("querySelectorAll", "input, select, textarea")
	for i := 0; i < inputs.Length(); i++ {
		input := inputs.Index(i)

		valueAttr := ""
		if input.Call("hasAttribute", "value").Bool() {
			valueAttr = input.Call("getAttribute", "value").String()
		}
		checkedAttr := ""
		if input.Call("hasAttribute", "checked").Bool() {
			checkedAttr = input.Call("getAttribute", "checked").String()
		}

		re := reSignalWrite
		valueMatch := re.FindStringSubmatch(valueAttr)
		checkedMatch := re.FindStringSubmatch(checkedAttr)

		var name string
		var usesChecked bool
		if len(valueMatch) == 2 {
			name = valueMatch[1]
		} else if len(checkedMatch) == 2 {
			name = checkedMatch[1]
			usesChecked = true
		} else {
			continue
		}

		sig := getSignal(componentID, name)
		if sig == nil {
			continue
		}

		if usesChecked {
			if s, ok := sig.(interface {
				Read() any
				Set(bool)
			}); ok {
				if b, ok := s.Read().(bool); ok {
					input.Set("checked", b)
				}
				ch, stop := events.Listen("change", input)
				addInputBindingStop(componentID, stop)
				go func(in js.Value, sg interface{ Set(bool) }) {
					for range ch {
						sg.Set(in.Get("checked").Bool())
					}
				}(input, s)
			}
			continue
		}

		if s, ok := sig.(interface {
			Read() any
			Set(string)
		}); ok {
			input.Set("value", fmt.Sprintf("%v", s.Read()))
			ch, stop := events.Listen("input", input)
			addInputBindingStop(componentID, stop)
			go func(in js.Value, sg interface{ Set(string) }) {
				for range ch {
					sg.Set(in.Get("value").String())
				}
			}(input, s)
		}
	}
}

func patchInnerHTML(element js.Value, html string)

{
	activeEl := js.Global().Get("document").Get("activeElement")
	activeID := ""
	activeSelStart := 0
	activeSelEnd := 0
	if activeEl.Truthy() {
		tag := activeEl.Get("nodeName").String()
		if tag == "INPUT" || tag == "TEXTAREA" || tag == "SELECT" {
			activeID = activeEl.Get("id").String()
			if activeID != "" {
				activeSelStart = activeEl.Get("selectionStart").Int()
				activeSelEnd = activeEl.Get("selectionEnd").Int()
			}
		}
	}

	template := CreateElement("template")
	template.Set("innerHTML", html)
	newContent := template.Get("content")

	patched := false
	firstChild := newContent.Get("firstChild")
	if firstChild.Truthy() && firstChild.Get("nodeName").String() == "ROOT" {
		cid := element.Call("getAttribute", "data-component-id")
		newCid := firstChild.Call("getAttribute", "data-component-id")
		if cid.Truthy() && cid.String() == newCid.String() {
			patchAttributes(element, firstChild)
			patchChildren(element, firstChild)
			patched = true
		}
	}

	if !patched {
		patchChildren(element, newContent)
	}

	if activeID != "" {
		restore := js.Global().Get("document").Call("getElementById", activeID)
		if restore.Truthy() {
			restore.Call("focus")
			restore.Call("setSelectionRange", activeSelStart, activeSelEnd)
		}
	}
}

func patchChildren(oldParent, newParent js.Value)

{
	// Snapshot the significant children (elements and non-blank text).
	// Whitespace-only text nodes are formatting noise: pairing them
	// positionally shifts the diff whenever a keyed list grows or a
	// conditional toggles, morphing unrelated siblings into each other.
	oldKids := significantChildren(oldParent)
	newKids := significantChildren(newParent)

	keyed := make(map[string]js.Value)
	for _, child := range oldKids {
		if key := getDataKey(child); key != "" {
			keyed[key] = child
		}
	}

	consumed := make([]bool, len(oldKids))
	oi := 0
	// cursor returns the first unconsumed old node: inserts anchor before it.
	cursor := func() js.Value {
		for i := oi; i < len(oldKids); i++ {
			if !consumed[i] {
				return oldKids[i]
			}
		}
		return js.Null()
	}
	insertAtCursor := func(node js.Value) {
		if ref := cursor(); ref.Truthy() {
			oldParent.Call("insertBefore", node, ref)
		} else {
			oldParent.Call("appendChild", node)
		}
	}

	for _, newChild := range newKids {
		if key := getDataKey(newChild); key != "" {
			if oldChild, ok := keyed[key]; ok {
				patchNode(oldChild, newChild)
				if ref := cursor(); !oldChild.Equal(ref) {
					insertAtCursor(oldChild)
				} else {
					// already in position: consume it
					for i := oi; i < len(oldKids); i++ {
						if oldKids[i].Equal(oldChild) {
							consumed[i] = true
							break
						}
					}
				}
				delete(keyed, key)
			} else {
				insertAtCursor(newChild.Call("cloneNode", true))
			}
			continue
		}

		// advance past keyed leftovers (handled through the map above)
		for oi < len(oldKids) && (consumed[oi] || getDataKey(oldKids[oi]) != "") {
			oi++
		}
		if oi < len(oldKids) && samePatchType(oldKids[oi], newChild) {
			patchNode(oldKids[oi], newChild)
			consumed[oi] = true
			oi++
		} else if oi < len(oldKids) {
			oldParent.Call("replaceChild", newChild.Call("cloneNode", true), oldKids[oi])
			consumed[oi] = true
			oi++
		} else {
			oldParent.Call("appendChild", newChild.Call("cloneNode", true))
		}
	}

	// leftover keyed nodes not reused by the new render
	for _, child := range keyed {
		child.Call("remove")
	}
	// leftover unkeyed significant nodes past the new list
	for i := 0; i < len(oldKids); i++ {
		if !consumed[i] && getDataKey(oldKids[i]) == "" {
			oldKids[i].Call("remove")
		}
	}
}

func significantChildren(parent js.Value) []js.Value

{
	children := parent.Get("childNodes")
	out := make([]js.Value, 0, children.Length())
	for i := 0; i < children.Length(); i++ {
		child := children.Index(i)
		if child.Get("nodeType").Int() == 3 && strings.TrimSpace(child.Get("nodeValue").String()) == "" {
			continue
		}
		out = append(out, child)
	}
	return out
}

func samePatchType(oldNode, newNode js.Value) bool

{
	if oldNode.Get("nodeName").String() != newNode.Get("nodeName").String() {
		return false
	}
	if oldNode.Get("nodeType").Int() != 1 {
		return true
	}
	oc := oldNode.Call("getAttribute", "data-condition")
	nc := newNode.Call("getAttribute", "data-condition")
	os, ns := "", ""
	if !oc.IsNull() {
		os = oc.String()
	}
	if !nc.IsNull() {
		ns = nc.String()
	}
	return os == ns
}

func patchNode(oldNode, newNode js.Value)

{
	nodeType := newNode.Get("nodeType").Int()

	// The router owns whatever sits inside an outlet. A shell that re-renders
	// (a store-driven list or condition in a MountRoot root) must not diff the
	// routed page away, and must not undo the DOM a mounted page built for
	// itself after its own render.
	if nodeType == 1 && isRouterOutlet(oldNode) && isRouterOutlet(newNode) {
		patchAttributes(oldNode, newNode)
		return
	}
	if nodeType == 3 { // Text node
		if oldNode.Get("nodeValue").String() != newNode.Get("nodeValue").String() {
			oldNode.Set("nodeValue", newNode.Get("nodeValue"))
		}
		return
	}

	if oldNode.Get("nodeName").String() != newNode.Get("nodeName").String() {
		oldNode.Call("replaceWith", newNode.Call("cloneNode", true))
		return
	}

	if nodeType == 1 { // Element node
		patchAttributes(oldNode, newNode)
	}
	patchChildren(oldNode, newNode)
}

func patchAttributes(oldNode, newNode js.Value)

{
	oldAttrs := oldNode.Call("getAttributeNames")
	for i := 0; i < oldAttrs.Length(); i++ {
		name := oldAttrs.Index(i).String()
		if !newNode.Call("hasAttribute", name).Bool() {
			oldNode.Call("removeAttribute", name)
		}
	}

	newAttrs := newNode.Call("getAttributeNames")
	for i := 0; i < newAttrs.Length(); i++ {
		name := newAttrs.Index(i).String()
		val := newNode.Call("getAttribute", name)
		if oldNode.Call("getAttribute", name).String() != val.String() {
			oldNode.Call("setAttribute", name, val)
		}
	}
}

func ExpandEvents(markup string) string

{
	return reExpandEvent.ReplaceAllStringFunc(markup, func(match string) string {
		parts := reExpandEvent.FindStringSubmatch(match)
		if len(parts) != 5 {
			return match
		}
		fullEvent := parts[2]
		handler := parts[3]
		suffix := parts[4]
		eventParts := strings.Split(fullEvent, ".")
		event := eventParts[0]
		attr := fmt.Sprintf("data-on-%s=%q", event, handler)
		if len(eventParts) > 1 {
			attr += fmt.Sprintf(" data-on-%s-modifiers=%q", event, strings.Join(eventParts[1:], ","))
		}
		return attr + suffix
	})
}

func ScheduleRender(componentID string, html string, delay time.Duration)

{
	sched.Lock()
	defer sched.Unlock()
	if t, ok := sched.timers[componentID]; ok {
		t.Stop()
	}
	sched.timers[componentID] = time.AfterFunc(delay, func() {
		UpdateDOM(componentID, html)
		sched.Lock()
		delete(sched.timers, componentID)
		sched.Unlock()
	})
}

func RegisterBindings(id, name, template string)

{
	if bs, ok := precompiledByName[name]; ok {
		compiledBindings[id] = bs
		return
	}
	bs, err := parseTemplate(template)
	if err != nil {
		return
	}
	precompiledByName[name] = bs
	compiledBindings[id] = bs
}

func collectBindings(n *html.Node, path []int) []binding

{
	var res []binding
	if n.Type == html.ElementNode {
		attrs := map[string]string{}
		for _, a := range n.Attr {
			attrs[a.Key] = a.Val
		}
		for k, v := range attrs {
			if strings.HasPrefix(k, "data-on-") && !strings.HasSuffix(k, "-modifiers") {
				event := strings.TrimPrefix(k, "data-on-")
				mods := []string{}
				if m, ok := attrs[fmt.Sprintf("data-on-%s-modifiers", event)]; ok && m != "" {
					for _, s := range strings.Split(m, ",") {
						s = strings.TrimSpace(s)
						if s != "" {
							mods = append(mods, s)
						}
					}
				}
				res = append(res, binding{Path: append([]int(nil), path...), Event: event, Handler: v, Modifiers: mods})
			}
		}
	}
	child := n.FirstChild
	idx := 0
	for child != nil {
		res = append(res, collectBindings(child, append(path, idx))...)
		child = child.NextSibling
		idx++
	}
	return res
}

func replaceEventHandlers(template string) string

{
	return eventRegex.ReplaceAllStringFunc(template, func(match string) string {
		parts := eventRegex.FindStringSubmatch(match)
		if len(parts) != 5 {
			return match
		}
		fullEvent := parts[2]
		handler := parts[3]
		suffix := parts[4]
		eventParts := strings.Split(fullEvent, ".")
		event := eventParts[0]
		modifiers := []string{}
		if len(eventParts) > 1 {
			modifiers = eventParts[1:]
		}
		attr := fmt.Sprintf("data-on-%s=\"%s\"", event, handler)
		if len(modifiers) > 0 {
			attr += fmt.Sprintf(" data-on-%s-modifiers=\"%s\"", event, strings.Join(modifiers, ","))
		}
		return attr + suffix
	})
}

func TestElementRemoveAttr(t *testing.T)

{
	el := Doc().CreateElement("button")
	el.SetAttr("disabled", "")
	if !el.Call("hasAttribute", "disabled").Bool() {
		t.Fatal("SetAttr did not set disabled")
	}
	el.RemoveAttr("disabled")
	if el.Call("hasAttribute", "disabled").Bool() {
		t.Fatal("RemoveAttr left the attribute in place")
	}
}

func TestFromWrapsRawValue(t *testing.T)

{
	parent := Doc().CreateElement("div")
	parent.SetHTML(`<span data-id="7" class="a">x</span>`)
	raw := parent.Call("querySelector", "span")

	el := From(raw)
	if got := el.Data("id"); got != "7" {
		t.Fatalf("Data(id) = %q", got)
	}
	if !el.HasClass("a") {
		t.Fatal("HasClass(a) = false")
	}
	if c := el.Closest("div"); c.IsNull() {
		t.Fatal("Closest(div) returned null")
	}
}

func TestComponentHandlersAreScoped(t *testing.T)

{
	firstRoot := mountHandlerRoot(t, `<button data-on-click="save">one</button>`)
	secondRoot := mountHandlerRoot(t, `<button data-on-click="save">two</button>`)
	var first, second int

	RegisterComponentHandlerFunc("first", "save", func() { first++ })
	RegisterComponentHandlerFunc("second", "save", func() { second++ })
	DelegateEvents("first", firstRoot.Value)
	DelegateEvents("second", secondRoot.Value)
	t.Cleanup(func() {
		RemoveDelegatedEvents("first", firstRoot.Value)
		RemoveDelegatedEvents("second", secondRoot.Value)
		ReleaseComponentHandlers("first")
		ReleaseComponentHandlers("second")
	})

	firstRoot.Query("button").Call("click")
	secondRoot.Query("button").Call("click")
	if first != 1 || second != 1 {
		t.Fatalf("scoped handler counts = %d, %d", first, second)
	}
}

func TestDelegatedEventModifiers(t *testing.T)

{
	root := mountHandlerRoot(t, `<button data-on-click="save" data-on-click-modifiers="prevent,once">save</button>`)
	var calls int
	RegisterComponentHandlerFunc("modifiers", "save", func() { calls++ })
	DelegateEvents("modifiers", root.Value)
	t.Cleanup(func() {
		RemoveDelegatedEvents("modifiers", root.Value)
		ReleaseComponentHandlers("modifiers")
	})

	button := root.Query("button")
	first := js.Get("MouseEvent").New("click", eventOptions().Value)
	if allowed := button.Call("dispatchEvent", first).Bool(); allowed {
		t.Fatal("prevent modifier did not cancel the event")
	}
	button.Call("dispatchEvent", js.Get("MouseEvent").New("click", eventOptions().Value))
	if calls != 1 {
		t.Fatalf("once handler calls = %d", calls)
	}
}

func TestDelegatedKeyAndTimingModifiers(t *testing.T)

{
	root := mountHandlerRoot(t, `
		<input data-on-keydown="submit" data-on-keydown-modifiers="enter">
		<button id="debounce" data-on-click="search" data-on-click-modifiers="debounce,10">search</button>
		<button id="throttle" data-on-click="refresh" data-on-click-modifiers="throttle,10">refresh</button>
	`)
	var submit, search, refresh int
	RegisterComponentHandlerFunc("timing", "submit", func() { submit++ })
	RegisterComponentHandlerFunc("timing", "search", func() { search++ })
	RegisterComponentHandlerFunc("timing", "refresh", func() { refresh++ })
	DelegateEvents("timing", root.Value)
	t.Cleanup(func() {
		RemoveDelegatedEvents("timing", root.Value)
		ReleaseComponentHandlers("timing")
	})

	input := root.Query("input")
	escape := eventOptions()
	escape.Set("key", "Escape")
	input.Call("dispatchEvent", js.Get("KeyboardEvent").New("keydown", escape.Value))
	enter := eventOptions()
	enter.Set("key", "Enter")
	input.Call("dispatchEvent", js.Get("KeyboardEvent").New("keydown", enter.Value))
	if submit != 1 {
		t.Fatalf("enter handler calls = %d", submit)
	}

	debounce := root.Query("#debounce")
	debounce.Call("click")
	debounce.Call("click")
	throttle := root.Query("#throttle")
	throttle.Call("click")
	throttle.Call("click")
	time.Sleep(30 * time.Millisecond)
	throttle.Call("click")

	if search != 1 {
		t.Fatalf("debounce handler calls = %d", search)
	}
	if refresh != 2 {
		t.Fatalf("throttle handler calls = %d", refresh)
	}
}

func TestDelegatedFocusHandlerUsesCaptureListener(t *testing.T)

{
	root := mountHandlerRoot(t, `<input data-on-focus="focus">`)
	var calls int
	RegisterComponentHandlerFunc("focus", "focus", func() { calls++ })
	DelegateEvents("focus", root.Value)
	t.Cleanup(func() {
		RemoveDelegatedEvents("focus", root.Value)
		ReleaseComponentHandlers("focus")
	})

	options := js.NewDict()
	options.Set("bubbles", false)
	root.Query("input").Call("dispatchEvent", js.Get("FocusEvent").New("focus", options.Value))
	if calls != 1 {
		t.Fatalf("focus handler calls = %d", calls)
	}
}

func RegisterLifecycleHook(componentID string, hook LifecycleHook) func()

{
	record := &lifecycleRecord{id: lifecycleHooks.sequence.Add(1), hook: hook}
	lifecycleHooks.Lock()
	component := lifecycleHooks.components[componentID]
	if component == nil {
		component = &componentLifecycle{}
		lifecycleHooks.components[componentID] = component
	}
	component.hooks = append(component.hooks, record)
	mounted := component.mounted
	lifecycleHooks.Unlock()

	if mounted && hook.Mounted != nil {
		record.setCleanup(runMountedHook(componentID, hook.Mounted, ownComponentRoot(componentID)))
	}
	var once sync.Once
	return func() {
		once.Do(func() {
			lifecycleHooks.Lock()
			component := lifecycleHooks.components[componentID]
			if component != nil {
				for index, candidate := range component.hooks {
					if candidate.id == record.id {
						component.hooks = append(component.hooks[:index], component.hooks[index+1:]...)
						break
					}
				}
				if len(component.hooks) == 0 {
					delete(lifecycleHooks.components, componentID)
				}
			}
			cleanup := record.takeCleanup(true)
			lifecycleHooks.Unlock()
			if cleanup != nil {
				cleanup()
			}
		})
	}
}

func MountLifecycleHooks(componentID string)

{
	lifecycleHooks.Lock()
	component := lifecycleHooks.components[componentID]
	if component == nil || component.mounted {
		lifecycleHooks.Unlock()
		return
	}
	component.mounted = true
	hooks := append([]*lifecycleRecord(nil), component.hooks...)
	lifecycleHooks.Unlock()
	root := ownComponentRoot(componentID)
	for _, record := range hooks {
		if record.hook.Mounted != nil {
			record.setCleanup(runMountedHook(componentID, record.hook.Mounted, root))
		}
	}
}

func UpdateLifecycleHooks(componentID string)

{
	lifecycleHooks.Lock()
	component := lifecycleHooks.components[componentID]
	if component == nil || !component.mounted {
		lifecycleHooks.Unlock()
		return
	}
	hooks := append([]*lifecycleRecord(nil), component.hooks...)
	lifecycleHooks.Unlock()
	root := ownComponentRoot(componentID)
	for _, record := range hooks {
		if record.hook.Updated != nil {
			runLifecycleHook(componentID, "updated", func() {
				record.hook.Updated(root)
			})
		}
	}
}

func UnmountLifecycleHooks(componentID string)

{
	lifecycleHooks.Lock()
	component := lifecycleHooks.components[componentID]
	if component == nil || !component.mounted {
		lifecycleHooks.Unlock()
		return
	}
	component.mounted = false
	hooks := append([]*lifecycleRecord(nil), component.hooks...)
	lifecycleHooks.Unlock()
	root := ownComponentRoot(componentID)
	for index := len(hooks) - 1; index >= 0; index-- {
		record := hooks[index]
		if cleanup := record.takeCleanup(false); cleanup != nil {
			runLifecycleHook(componentID, "cleanup", cleanup)
		}
		if record.hook.Unmounted != nil {
			runLifecycleHook(componentID, "unmounted", func() {
				record.hook.Unmounted(root)
			})
		}
	}
}

func TestExpandEvents(t *testing.T)

{
	cases := []struct{ in, want string }{
		{`<button @on:click:save>`, `<button data-on-click="save">`},
		{`<button @click:save>`, `<button data-on-click="save">`},
		{`<input @on:keydown.enter:submit />`, `<input data-on-keydown="submit" data-on-keydown-modifiers="enter" />`},
		{`<tr @on:click:openRow data-id="3">`, `<tr data-on-click="openRow" data-id="3">`},
		{`plain text with an [email protected] stays`, `plain text with an [email protected] stays`},
	}
	for _, c := range cases {
		if got := ExpandEvents(c.in); got != c.want {
			t.Errorf("ExpandEvents(%q) = %q, want %q", c.in, got, c.want)
		}
	}
}