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) WithChilds(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
}

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

	Childs []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 childs 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) WithChilds

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

WithChilds 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 WithChilds:

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

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

mogowk.Div().WithChilds(renderers...)

func (*Tag) WithValue

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

WithValue sugar method adds value attribute to Tag