feat: improve component support

context.go

@@ -16,16 +16,16 @@ import (
 //
 // It binds user state and actions, manages reactive signals, and defines UI through View.
 type Context struct {
-	id             string
-	app            *via
-	view           func() h.H
-	components     map[string]*Context
-	componentsMux  sync.RWMutex
-	sse            *datastar.ServerSentEventGenerator
-	actionRegistry map[string]func()
-	signals        map[string]*signal
-	signalsMux     sync.Mutex
-	createdAt      time.Time
+	id                string
+	app               *via
+	view              func() h.H
+	componentRegistry map[string]*Context
+	parentPageCtx     *Context
+	sse               *datastar.ServerSentEventGenerator
+	actionRegistry    map[string]func()
+	signals           map[string]*signal
+	signalsMux        sync.Mutex
+	createdAt         time.Time
 }
 
 // View defines the UI rendered by this context.
@@ -40,25 +40,64 @@ func (c *Context) View(f func() h.H) {
 	c.view = func() h.H { return h.Div(h.ID(c.id), f()) }
 }
 
-// Component registers a sub context that is self contained self contained with it's own
-// view, state actions and signals and returns the DOM node that can be added to the view
-// of the parent.
+// Component registers a sub context that has self contained data, actions and signals.
+// It returns the component's view as a DOM node fn that can be placed in the view
+// of the parent. Components can be added to components.
+//
+// Example:
+//
+//	counterComponent := func(c *via.Context) {
+//		count := 0
+//		step := c.Signal(1)
+//
+//		increment := c.Action(func() {
+//			count += step.Int()
+//			c.Sync()
+//		})
+//
+//		c.View(func() h.H {
+//			return h.Div(
+//				h.P(h.Textf("Count: %d", count)),
+//				h.P(h.Span(h.Text("Step: ")), h.Span(step.Text())),
+//				h.Label(
+//					h.Text("Update Step: "),
+//					h.Input(h.Type("number"), step.Bind()),
+//				),
+//				h.Button(h.Text("Increment"), increment.OnClick()),
+//			)
+//		})
+//	})
+//
+//	v.Page("/", func(c *via.Context) {
+//		counter1 := c.Component(counterComponent)
+//		counter2 := c.Component(counterComponent)
+//
+//		c.View(func() h.H {
+//			return h.Div(
+//				h.H1(h.Text("Counter 1")),
+//				counter1(),
+//				h.H1(h.Text("Counter 2")),
+//				counter2(),
+//			)
+//		})
+//	})
 func (c *Context) Component(f func(c *Context)) func() h.H {
 	id := c.id + "/_component/" + genRandID()
 	compCtx := newContext(id, c.app)
+	if c.isComponent() {
+		compCtx.parentPageCtx = c.parentPageCtx
+	} else {
+		compCtx.parentPageCtx = c
+	}
 	f(compCtx)
-	compCtx.sse = c.sse
-	// c.componentsMux.Lock()
-	// defer c.componentsMux.Unlock()
-	//
-	// c.components[id] = compCtx
-	c.app.contextRegistryMutex.Lock()
-	defer c.app.contextRegistryMutex.Unlock()
-	c.app.contextRegistry[id] = compCtx
-
+	c.componentRegistry[id] = compCtx
 	return compCtx.view
 }
 
+func (c *Context) isComponent() bool {
+	return c.parentPageCtx != nil
+}
+
 // Action registers an event handler and returns a trigger to that event that
 // that can be added to the view fn as any other via.h element.
 //
@@ -77,15 +116,17 @@ func (c *Context) Component(f func(c *Context)) func() h.H {
 //		 )
 //	})
 func (c *Context) Action(f func()) *actionTrigger {
-	// if id == "" {
-	// 	c.app.logErr(c, "failed to bind action to context: id is ''")
-	// }
 	id := genRandID()
 	if f == nil {
 		c.app.logErr(c, "failed to bind action '%s' to context: nil func", id)
 		return nil
 	}
-	c.actionRegistry[id] = f
+
+	if c.isComponent() {
+		c.parentPageCtx.actionRegistry[id] = f
+	} else {
+		c.actionRegistry[id] = f
+	}
 	return &actionTrigger{id}
 }
 
@@ -137,7 +178,13 @@ func (c *Context) Signal(v any) *signal {
 		t:       reflect.TypeOf(v),
 		changed: true,
 	}
-	c.signals[sigID] = sig
+
+	// components register signals on parent page
+	if c.isComponent() {
+		c.parentPageCtx.signals[sigID] = sig
+	} else {
+		c.signals[sigID] = sig
+	}
 	return sig
 
 }
@@ -159,15 +206,22 @@ func (c *Context) injectSignals(sigs map[string]any) {
 // Sync pushes the current view state and signal changes to the browser immediately
 // over the live SSE event stream.
 func (c *Context) Sync() {
-	if c.sse == nil {
-		c.app.logErr(c, "sync view failed: no sse connection")
+	// components use parent page sse stream
+	var sse *datastar.ServerSentEventGenerator
+	if c.isComponent() {
+		sse = c.parentPageCtx.sse
+	} else {
+		sse = c.sse
+	}
+	if sse == nil {
+		c.app.logErr(c, "sync view failed: inactive SSE stream")
 	}
 	elemsPatch := bytes.NewBuffer(make([]byte, 0))
 	if err := c.view().Render(elemsPatch); err != nil {
 		c.app.logErr(c, "sync view failed: %v", err)
 		return
 	}
-	_ = c.sse.PatchElements(elemsPatch.String())
+	_ = sse.PatchElements(elemsPatch.String())
 	updatedSigs := make(map[string]any)
 	for id, sig := range c.signals {
 		if sig.err != nil {
@@ -178,7 +232,7 @@ func (c *Context) Sync() {
 		}
 	}
 	if len(updatedSigs) != 0 {
-		_ = c.sse.MarshalAndPatchSignals(updatedSigs)
+		_ = sse.MarshalAndPatchSignals(updatedSigs)
 	}
 }
 
@@ -200,7 +254,13 @@ func (c *Context) Sync() {
 // Then, the merge will only occur if the ID of the top level element in the patch
 // matches 'my-element'.
 func (c *Context) SyncElements(elem h.H) {
-	if c.sse == nil {
+	var sse *datastar.ServerSentEventGenerator
+	if c.isComponent() {
+		sse = c.parentPageCtx.sse
+	} else {
+		sse = c.sse
+	}
+	if sse == nil {
 		c.app.logErr(c, "sync element failed: no sse connection")
 	}
 	if c.view == nil {
@@ -213,13 +273,19 @@ func (c *Context) SyncElements(elem h.H) {
 	}
 	b := bytes.NewBuffer(make([]byte, 0))
 	_ = elem.Render(b)
-	c.sse.PatchElements(b.String())
+	_ = sse.PatchElements(b.String())
 }
 
 // SyncSignals pushes the current signal changes to the browser immediately
 // over the live SSE event stream.
 func (c *Context) SyncSignals() {
-	if c.sse == nil {
+	var sse *datastar.ServerSentEventGenerator
+	if c.isComponent() {
+		sse = c.parentPageCtx.sse
+	} else {
+		sse = c.sse
+	}
+	if sse == nil {
 		c.app.logErr(c, "sync signals failed: sse connection not found")
 	}
 	updatedSigs := make(map[string]any)
@@ -232,7 +298,7 @@ func (c *Context) SyncSignals() {
 		}
 	}
 	if len(updatedSigs) != 0 {
-		_ = c.sse.MarshalAndPatchSignals(updatedSigs)
+		_ = sse.MarshalAndPatchSignals(updatedSigs)
 	}
 }
 
@@ -242,11 +308,11 @@ func newContext(id string, a *via) *Context {
 	}
 
 	return &Context{
-		id:             id,
-		app:            a,
-		components:     make(map[string]*Context),
-		actionRegistry: make(map[string]func()),
-		signals:        make(map[string]*signal),
-		createdAt:      time.Now(),
+		id:                id,
+		app:               a,
+		componentRegistry: make(map[string]*Context),
+		actionRegistry:    make(map[string]func()),
+		signals:           make(map[string]*signal),
+		createdAt:         time.Now(),
 	}
 }