mogowk

README

mogowk

Go WASM Frontend render

About

• Golang Fronted HTML render (GoFrenDer)
• Build your frontend app with your custom components
• Without magic. It works as you expect
• Sets of the HTML tags and event listeners
• Experimental lib. API may be changed

Install

Use go modules

go get gitlab.com/mogowk/mogowk

Hello world example

package main

import (
	"gitlab.com/mogowk/mogowk"
	"gitlab.com/mogowk/mogowk/tag"
)

// Page is your custom component
type Page struct {
	mogowk.Component // must to be embedded

	text string
}

// Render implements of the mogowk.Renderer interface
// This is rander of your component
func (p *Page) Render() *mogowk.Tag {
	return tag.Body().WithChilds(
		tag.H1().WithChilds(tag.Text(p.text)),
	)
}

func main() {
	mogowk.SetTitile("Mogowk")
	p := &Page{text: "Hello mogowk"}
	mogowk.RenderBody(p)
}

Run it

Install wasmserve

go get -u github.com/hajimehoshi/wasmserve

Run wasm local server wasmserve ./main.go

Open http://localhost:8080/

See more examples in mogowk_examples

Documentation

Overview

Package mogowk contains base types and methods of the project.

Index

• func AddStylesheet(url string)
• func RenderBody(r Renderer)
• func RenderIntoDomElem(oldNode js.Value, r Renderer)
• func RenderIntoTag(tagName string, r Renderer)
• func Rerender(r Renderer)
• func SetEventListenerInto(element js.Value, event *EventListener)
• func SetEventsIntoDocument(events ...*EventListener)
• func SetEventsIntoWindow(events ...*EventListener)
• func SetFavicon(imageType, url string)
• func SetTitle(title string)
• type Component
• type EventData
• type EventListener
  • func (e *EventListener) PreventDefault() *EventListener
  • func (e *EventListener) StopPropagation() *EventListener
• type Renderer
• type Tag
  • func (t *Tag) CompileElement() js.Value
  • func (t *Tag) Render() *Tag
  • func (t *Tag) WithAttribute(name string, value interface{}) *Tag
  • func (t *Tag) WithChildren(tagsOrComponents ...Renderer) *Tag
  • func (t *Tag) WithClasses(classes ...string) *Tag
  • func (t *Tag) WithEvents(events ...*EventListener) *Tag
  • func (t *Tag) WithListChild(list interface{}) *Tag
  • func (t *Tag) WithValue(value interface{}) *Tag

Functions

func AddStylesheet

func AddStylesheet(url string)

AddStylesheet adds new stylesheet link to the document

https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet

func RenderBody

func RenderBody(r Renderer)

RenderBody renders root Component that returns a body html tag.

func RenderIntoDomElem

func RenderIntoDomElem(oldNode js.Value, r Renderer)

RenderIntoDomElem renders Component into your special DOM element.

func RenderIntoTag

func RenderIntoTag(tagName string, r Renderer)

RenderIntoTag renders Component into first HTML tag.

func Rerender

func Rerender(r Renderer)

Rerender rerenders rendered component only.

func SetEventListenerInto

func SetEventListenerInto(element js.Value, event *EventListener)

SetEventListenerInto adds event listener to js element.

func SetEventsIntoDocument

func SetEventsIntoDocument(events ...*EventListener)

SetEventsIntoDocument sets event listener to document object

https://developer.mozilla.org/en-US/docs/Web/API/Document

func SetEventsIntoWindow

func SetEventsIntoWindow(events ...*EventListener)

SetEventsIntoWindow sets event listener to window object

https://developer.mozilla.org/en-US/docs/Web/API/Window

func SetFavicon

func SetFavicon(imageType, url string)

SetFavicon updates exists icon or sets new icon of the document imageType may be one of icon image type for example: image/x-icon, image/png, image/ico

https://developer.mozilla.org/en-US/docs/Glossary/Favicon

func SetTitle

func SetTitle(title string)

SetTitle sets new title of the document

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title

Types

type Component

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

Component is a built-in type for user's custom components

For Example:

type MyComponent struct {
    mogowk.Component // <- embedded
    Field1 string
}

It's required.

type EventData

type EventData struct {
	Target js.Value
	Args   []js.Value
}

EventData contains target and other arguments of an event.

type EventListener

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

EventListener represents js event listener.

func (*EventListener) PreventDefault

func (e *EventListener) PreventDefault() *EventListener

PreventDefault tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

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

func (*EventListener) StopPropagation

func (e *EventListener) StopPropagation() *EventListener

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

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

type Renderer

type Renderer interface {
	Render() *Tag
	// contains filtered or unexported methods
}

Renderer returns Tag for compiling into js element and may be a Component.

type Tag

type Tag struct {
	Name       string                 // Name of the HTML tag.
	Classes    []string               // Values list of the "class" attribute.
	Events     []*EventListener       // Event Listeners of the tag.
	Attributes map[string]interface{} // Set of the HTML tag's attributes.

	Children []Renderer // List of the user Components or other Tags.

	Text       string // Value of the Text Node.
	IsTextNode bool   // If set to true then Tag will be rendered as a TextNode without classes and attrs.
	// contains filtered or unexported fields
}

Tag represents HTML tag with children. Call CompileElement if you want to use tag in your component. Use With... method to fill tag's fields.

func (*Tag) CompileElement

func (t *Tag) CompileElement() js.Value

CompileElement compiles Tag to a js element that allows you to use it in the your component.

func (*Tag) Render

func (t *Tag) Render() *Tag

Render implements Renderer interface not for users.

func (*Tag) WithAttribute

func (t *Tag) WithAttribute(name string, value interface{}) *Tag

WithAttribute adds HTML tag's attribute into Tag.

func (*Tag) WithChildren

func (t *Tag) WithChildren(tagsOrComponents ...Renderer) *Tag

WithChildren adds other Tags or user components into Tag.

func (*Tag) WithClasses

func (t *Tag) WithClasses(classes ...string) *Tag

WithClasses adds list of classes into Tag.

func (*Tag) WithEvents

func (t *Tag) WithEvents(events ...*EventListener) *Tag

WithEvents adds list of EventListeners into Tag.

func (*Tag) WithListChild

func (t *Tag) WithListChild(list interface{}) *Tag

WithListChild adds list of the Tags or user components into Tag Uses reflection and may be slower than manual converting You can convert your list to Renderers list and use WithChildren:

renderers := make([]mogowk.Renderer, len(yourList))

for i, item := range yourList {
  renderers[i] = item
}

mogowk.Div().WithChildren(renderers...)

func (*Tag) WithValue

func (t *Tag) WithValue(value interface{}) *Tag

WithValue sugar method adds value attribute to Tag.