Convention based component creation

[LinuxDoku]

Creating components needs a lot of boilerplate code. To reduce this I thought about a more convention based approach around structs. The idea is to give the developer a more lean interface to implement his components, he can add or remove methods and parameters as needed.

Example:

type ContactComponent struct {
    live.Component
}

func (c ContactComponent) Render() {
    // ....
}

func (c ContactComponent) OnClickValidate() {
    c.State.ValidationFailed = true
}

To register a component there should be a method which takes the type and uses reflection to build the live.HandlerConfigs. The reflection code iterates over all exported methods and interprets them by convention.

E.g. possible variations of an event handler the developer can implement:

func (Component) OnClickValidate()
func (Component) OnClickValidate() error
func (Component) OnClickValidate(any) error
func (Component) OnClickValidate(Context, any) error

This way it would be also possible to use public fields in the component-struct for state management. The generated wrapper functions could read the struct member's values back to the state object of live. So the component is strong typed without type conversion by the developer.

type ContactComponent struct {
    ValidationFailed bool
}

func (c ContactComponent) OnClickValidate() {
    c.ValidationFailed = true
}

What do you think about this approach? I think reflection adds some cost at startup, but at the runtime it's ok fot most of the users due to the already existing complexity and overhead of html on the wire especially render tree comparison itself.

[jfyne]

Hi, yes I like this idea. Would the html for that click look like

<div live-click="validate">

[jfyne]

@LinuxDoku sorry this took a while, I've been busy but have a look at https://github.com/jfyne/live-examples/blob/jf/components2/components/clock.go

This is clock from the examples repo

package components

import (
	"context"
	"time"

	"github.com/jfyne/live/page"
)

// Clock is a timezone aware clock.
type Clock struct {
	TZ   string
	Time time.Time
	loc  *time.Location

	page.Component
}

// NewClock create a new clock component.
func NewClock(timezone string) (*Clock, error) {
	location, err := time.LoadLocation(timezone)
	if err != nil {
		return nil, err
	}
	now := time.Now().In(location)
	c := &Clock{
		Time: now,
		loc:  location,
		TZ:   timezone,
	}
	return c, nil
}

func (c Clock) FormattedTime() string {
	return c.Time.Format(time.RubyDate)
}

func (c *Clock) Mount(ctx context.Context) error {
	// If we are mounting on connection send the first tick event.
	if c.Socket.Connected() {
		go func() {
			time.Sleep(1 * time.Second)
			c.Self(ctx, "tick", time.Now())
		}()
	}
	return nil
}

func (c Clock) Render() page.RenderFunc {
	return page.HTML(`
        <div>
            <p>{{.TZ}}</p>
            <time datetime="{{.Time}}">{{.FormattedTime}}</time>
        </div>
    `, c)
}

func (c *Clock) OnTick(ctx context.Context, t time.Time) {
	c.Time = t.In(c.loc)
	go func() {
		time.Sleep(1 * time.Second)
		c.Self(ctx, "tick", time.Now())
	}()
}