Skip to content

Latest commit

 

History

History
177 lines (143 loc) · 3.58 KB

README.md

File metadata and controls

177 lines (143 loc) · 3.58 KB
Raw

Vpl

Go Report Card

Vpl is a Vuejs-syntax like template-engine for Golang.

  • Componentization
  • Powerful template syntax for the modern html
  • Supports Js(Es5) expressions
  • A little faster (I tried my best to optimize :)

Installation

go get github.com/zbysir/vpl

Getting Started

Write the main.go file as follows

package main

import (
	"context"
	"github.com/zbysir/vpl"
)

func main() {
	v := vpl.New()

	err := v.ComponentTxt("app", `
<!DOCTYPE html>
<html :lang="lang">
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
</head>
<body>

<div :id="id" style="font-size: 20px" :style="{color: color}">
  <span v-if="color=='red'">
    color is red
  </span>
  <span v-else>
    color is {{color}}
  </span>
</div>

</body>
</html>
`)
	if err != nil {
		panic(err)
	}

	props := vpl.NewProps()
	props.AppendMap(map[string]interface{}{
		"title": "hello vpl",
		"color": "red",
		"id": "content",
		"lang": "en",
	})

	html, err := v.RenderComponent("app", &vpl.RenderParam{
		Global: nil,
		Ctx:    context.Background(),
		Props:  props,
	})
	if err != nil {
		panic(err)
	}

	print(html)
	// Output: <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>hello vpl</title></head><body><div style="color: red; font-size: 20px;"><span>color is red</span></div></body></html>
}

Then run it.

More examples in /example and /test

Description of the parameters

You only need to understand a few parameters.

vpl.Props

props := vpl.NewProps()
// use Append to add a variable
props.Append("lang", "en")

// use AppendMap to add multiple variables 
props.AppendMap(map[string]interface{}{
    "title": "hello vpl",
    "color": "red",
})

vpl.RenderParam

vpl.RenderParam{
    Global: nil, // Defined Global Variable in this rendering.
    Props:  props, // Parameters of the rendering component.
}

Admonition

All data used by Vpl must be a golang base types, such as int64, int, float32, float64, []interface, map[string]interface{}.

The following example is wrong:

props.Append("list", [3]int{1, 2, 3})

You should use []interface type instead of [3]int:

props.Append("list", []interface{}{1, 2, 3})

For convenience, vpl provides vpl.Copy function to convert a complex structure to a structure containing only basic types.

props.Append("list", vpl.Copy([3]int{1, 2, 3}))

Don't worry too much about performance, it is only executed once in each render.

With Go features

Let's add some go features to vpl.

Parallel

The advantage of go is concurrency, can vpl use it?

YES! Use the <parallel> component.

Let's see this example:

<div>
    <div>
        <!-- Some things took 1s -->
        {{ sleep(1) }} 
    </div>
    <div>
        <!-- Some things took 2s -->
        {{ sleep(2) }} 
    </div>
</div>

It will take 3s if the template is executed in order. You can wrap them with parallel component to parallel them.

<div>
    <parallel>
        <div>
            <!-- Some things took 1s -->
            {{ sleep(1) }} 
        </div>
    </parallel>
    <parallel>
        <div>
            <!-- Some things took 2s -->
            {{ sleep(2) }} 
        </div>
    </parallel>
</div>

It only takes 2s now.

Docs

IntelliJ Plugin

Just use the Vuejs plugin.

Dependencies

  • github.com/robertkrimen/otto: It is used to parse Js expression.