vecty

README

Vecty is a React-like library for GopherJS so that you can do frontend development in Go instead of writing JavaScript/HTML/CSS.

Features

• Share frontend and backend code.
• Write everything in Go -- not JS/HTML/CSS!
• XSS protection: unsafe HTML must be explicitly denoted as such.
• Reusability: share components by making Go packages that others can import!

Goals

• Simplicity
  • Keep things as simple as possible to understand for newcomers.
  • Designed from the ground up to be easily mastered (like Go)!
• Performance
  • As efficient as possible, make it clear what each operation in your webpage will do.
  • Same performance as just using plain JS/HTML/CSS.
• Composability
  • Nest components to form your entire user interface, seperate them logically as you would any normal Go package.

Current Status

Vecty is currently considered to be an experimental work-in-progress.

• APIs will change.
• The scope of Vecty is only ~80% defined currently.
• There are a number of important open issues.

Community

• Join us in the #gopherjs and #vecty channels on the Gophers Slack!

Documentation

Index

• func AddStylesheet(url string)
• func RenderBody(body Component)
• func Rerender(c Component)
• func SetTitle(title string)
• type ClassMap
  • func (m ClassMap) Apply(h *HTML)
• type Component
• type ComponentOrHTML
• type Core
  • func (c *Core) Context() *Core
  • func (c *Core) Unmount()
• type Event
• type EventListener
  • func (l *EventListener) Apply(h *HTML)
  • func (l *EventListener) PreventDefault() *EventListener
  • func (l *EventListener) StopPropagation() *EventListener
• type HTML
  • func Tag(tag string, m ...MarkupOrComponentOrHTML) *HTML
  • func Text(text string, m ...MarkupOrComponentOrHTML) *HTML
  • func (h *HTML) Restore(old ComponentOrHTML)
  • func (h *HTML) Unmount()
• type List
  • func (l List) Apply(h *HTML)
• type Markup
  • func Data(key, value string) Markup
  • func Property(key string, value interface{}) Markup
  • func Style(key, value string) Markup
• type MarkupOrComponentOrHTML
  • func If(cond bool, markup ...MarkupOrComponentOrHTML) MarkupOrComponentOrHTML
• type Restorer
• type Unmounter

Functions

func AddStylesheet

func AddStylesheet(url string)

AddStylesheet adds an external stylesheet to the document.

func RenderBody

func RenderBody(body Component)

RenderBody renders the given component as the document body. The given Component's Render method must return a "body" element.

func Rerender

func Rerender(c Component)

Rerender causes the body of the given component (i.e. the HTML returned by the Component's Render method) to be re-rendered and subsequently restored.

func SetTitle

func SetTitle(title string)

SetTitle sets the title of the document.

Types

type ClassMap

type ClassMap map[string]bool

ClassMap is markup that specifies classes to be applied to an element if their boolean value are true.

func (ClassMap) Apply

func (m ClassMap) Apply(h *HTML)

Apply implements the Markup interface.

type Component

type Component interface {
	// Render is responsible for building HTML which represents the component.
	Render() *HTML

	// Context returns the components context, which is used internally by
	// Vecty in order to store the previous component render for diffing.
	Context() *Core
}

Component represents a single visual component within an application. To define a new component simply implement the Render method and embed the Core struct:

type MyComponent struct {
	vecty.Core
	... additional component fields (state or properties) ...
}

func (c *MyComponent) Render() *vecty.HTML {
	... rendering ...
}

type ComponentOrHTML

type ComponentOrHTML interface{}

ComponentOrHTML represents one of:

Component
*HTML

If the underlying value is not one of these types, the code handling the value is expected to panic.

type Core

type Core struct {
	// contains filtered or unexported fields
}

Core implements the Context method of the Component interface, and is the core/central struct which all Component implementations should embed.

func (*Core) Context

func (c *Core) Context() *Core

Context implements the Component interface.

func (*Core) Unmount

func (c *Core) Unmount()

type Event

type Event struct {
	*js.Object
	Target *js.Object
}

Event represents a DOM event.

type EventListener

type EventListener struct {
	Name     string
	Listener func(*Event)
	// contains filtered or unexported fields
}

EventListener is markup that specifies a callback function to be invoked when the named DOM event is fired.

func (*EventListener) Apply

func (l *EventListener) Apply(h *HTML)

Apply implements the Markup interface.

func (*EventListener) PreventDefault

func (l *EventListener) PreventDefault() *EventListener

PreventDefault prevents the default behavior of the event from occuring.

See https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault.

func (*EventListener) StopPropagation

func (l *EventListener) StopPropagation() *EventListener

StopPropagation prevents further propagation of the current event in the capturing and bubbling phases.

See https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation.

type HTML

type HTML struct {
	Node *js.Object
	// contains filtered or unexported fields
}

HTML represents some form of HTML: an element with a specific tag, or some literal text (a TextNode).

func Tag

func Tag(tag string, m ...MarkupOrComponentOrHTML) *HTML

Tag returns an HTML element with the given tag name. Generally, this function is not used directly but rather the elem subpackage (which is type safe) is used instead.

func Text

func Text(text string, m ...MarkupOrComponentOrHTML) *HTML

Text returns a TextNode with the given literal text. Because the returned HTML represents a TextNode, the text does not have to be escaped (arbitrary user input fed into this function will always be safely rendered).

func (*HTML) Restore

func (h *HTML) Restore(old ComponentOrHTML)

Restore implements the Restorer interface.

func (*HTML) Unmount

func (h *HTML) Unmount()

type List

type List []MarkupOrComponentOrHTML

List represents a list of Markup, Component, or HTML which is individually applied to an HTML element or text node.

func (List) Apply

func (l List) Apply(h *HTML)

Apply implements the Markup interface.

type Markup

type Markup interface {
	// Apply applies the markup to the given HTML element or text node.
	Apply(h *HTML)
}

Markup represents some type of markup (a style, property, data, etc) which can be applied to a given HTML element or text node.

func Data

func Data(key, value string) Markup

Data returns Markup which applies the given data attribute.

func Property

func Property(key string, value interface{}) Markup

Property returns Markup which applies the given JavaScript property to an HTML element or text node. Generally, this function is not used directly but rather the style subpackage (which is type safe) is used instead.

func Style

func Style(key, value string) Markup

Style returns Markup which applies the given CSS style. Generally, this function is not used directly but rather the style subpackage (which is type safe) is used instead.

type MarkupOrComponentOrHTML

type MarkupOrComponentOrHTML interface{}

MarkupOrComponentOrHTML represents one of:

Markup
Component
*HTML

If the underlying value is not one of these types, the code handling the value is expected to panic.

func If

func If(cond bool, markup ...MarkupOrComponentOrHTML) MarkupOrComponentOrHTML

If returns nil if cond is false, otherwise it returns the given markup.

type Restorer

type Restorer interface {
	// Restore is called when the component should restore itself against a
	// previous instance of a component. The previous component may be nil or
	// of a different type than this Restorer itself, thus a type assertion
	// should be used.
	//
	// If skip = true is returned, restoration of this component's body is
	// skipped. That is, the component is not rerendered. If the component can
	// prove when Restore is called that the HTML rendered by Component.Render
	// would not change, true should be returned.
	Restore(prev Component) (skip bool)
}

Restorer is an optional interface that Component's can implement in order to restore state during component reconciliation and also to short-circuit the reconciliation of a Component's body.

type Unmounter

type Unmounter interface {
	Unmount()
}