vue

package module
v0.0.0-...-e0ca74c Latest Latest
Warning

This package is not in the latest version of its module.

Go to latest
Published: Dec 25, 2021 License: MIT Imports: 11 Imported by: 3

README

vue

GoDoc

Package vue is the progressive framework for WebAssembly applications.

Install

GOARCH=wasm GOOS=js go get github.com/norunners/vue

Requires Go 1.12 or higher.

Goals

  • Provide a unified solution for a framework, state manager and router in the frontend space.
  • Leverage templating to separate application logic from frontend rendering.
  • Simplify data binding to ease the relation of state management to rendering.
  • Encourage component reuse to promote development productivity.
  • Follow an idiomatic Go translation of the familiar Vue API.

Hello World!

The main.go file is compiled to a .wasm WebAssembly file.

package main

import "github.com/norunners/vue"

type Data struct {
	Message string
}

func main() {
	vue.New(
		vue.El("#app"),
		vue.Template("<p>{{ Message }}</p>"),
		vue.Data(Data{Message: "Hello WebAssembly!"}),
	)

	select {}
}

The index.wasmgo.html file fetches and runs a .wasm WebAssembly file.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="{{ .Script }}"></script>
    </head>
    <body>
        <div id="app"></div>
        <script src="{{ .Loader }}"></script>
    </body>
</html>

Note, the example above is compatible with wasmgo.

Serve Examples

Install wasmgo to serve examples.

go get -u github.com/dave/wasmgo

Serve an example locally.

cd examples/01-declarative-rendering
wasmgo serve

Status

Alpha - The state of this project is experimental until the common features of Vue are implemented. The plan is to follow the Vue API closely except for areas of major simplification, which may lead to a subset of the Vue API. During this stage, the API is expected to encounter minor breaking changes but increase in stability as the project progresses.

F.A.Q.

Why Vue?

One of the common themes of existing frameworks is to combine component application logic with frontend rendering. This can lead to a confusing mental model to reason about because both concerns may be mixed together in the same logic. By design, Vue renders components with templates which ensures application logic is developed separately from frontend rending.

Another commonality of existing frameworks is to unnecessarily expose the relation of state management to rendering in the API. By design, Vue binds data in both directions which ensures automatic updating and rendering when state changes.

This project aims to combine the simplicity of Vue with the power of Go WebAssembly.

License

Documentation

Overview

Package vue is the progressive framework for wasm applications.

Package vue is the progressive framework for wasm applications.

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

This section is empty.

Types

type Comp

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

Comp is a vue component.

func Component

func Component(options ...Option) *Comp

Component creates a new component from the given options.

type Context

type Context interface {
	Data() interface{}
	Get(field string) interface{}
	Set(field string, value interface{})
	Go(method string, args ...interface{})
	Emit(event string, args ...interface{})
}

Context is received by functions to interact with the component.

type Option

type Option func(*Comp)

Option uses the option pattern for components.

func Computed

func Computed(name string, function interface{}) Option

Computed is the computed option for components. The given name and function is registered as a computed property for the component. The function is required to accept context and return a value. For example: func(vctx vue.Context) Type

func Computeds

func Computeds(functions ...interface{}) Option

Computeds is the computeds option for components. The given functions are registered as computed properties for the component. The functions are required to accept context and return a value. For example: func(vctx vue.Context) Type

func Data

func Data(data interface{}) Option

Data is the data option for components. This option accepts either a function or a struct. The data function is expected to return a new data value. For example: func() *Type { return &Type{...} } Without a function the data is shared across components. The scope of the data is within the component. Data must be a pointer to be mutable by methods.

func El

func El(el string) Option

El is the element option for components. The root element of a component is query selected from the value, e.g. #app or body.

func Method

func Method(name string, function interface{}) Option

Method is the method option for components. The given name and function is registered as a method for the component. The function is required to accept context and allows optional arguments. For example: func(vctx vue.Context) or func(vctx vue.Context, a1 Arg1, ..., ak ArgK)

func Methods

func Methods(functions ...interface{}) Option

Methods is the methods option for components. The given functions are registered as methods for the component. The functions are required to accept context and allows optional arguments. For example: func(vctx vue.Context) or func(vctx vue.Context, a1 Arg1, ..., ak ArgK)

func Props

func Props(props ...string) Option

Props is the props option for subcomponents.

func Sub

func Sub(element string, sub *Comp) Option

Sub is the subcomponent option for components.

func Template

func Template(tmpl string) Option

Template is the template option for components. The template uses the mustache syntax for rendering. The template must have a single root element.

func Watch

func Watch(field string, function interface{}) Option

Watch is the watch option for components. The given function is registered as a watcher for the data field. All data fields are watchable, e.g. data, props and computed. The function is required to accept context and both the new and old values. For example: func(vctx vue.Context, newVal, oldVal Type)

type ViewModel

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

ViewModel is a vue view model, e.g. VM.

func New

func New(options ...Option) *ViewModel

New creates a new view model from the given options.

func (*ViewModel) Data

func (vm *ViewModel) Data() interface{}

Data returns the data for the component. Props and computed are excluded from data.

func (*ViewModel) Emit

func (vm *ViewModel) Emit(event string, args ...interface{})

Emit dispatches the given event with optional arguments.

func (*ViewModel) Get

func (vm *ViewModel) Get(field string) interface{}

Get returns the data field value. Props and computed are included to get. Computed may be calculated as needed.

func (*ViewModel) Go

func (vm *ViewModel) Go(method string, args ...interface{})

Go asynchronously calls the given method with optional arguments. Blocking functions must be called asynchronously.

func (*ViewModel) Set

func (vm *ViewModel) Set(field string, value interface{})

Set assigns the data field to the given value. Props and computed are excluded to set.

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL