htmlc

ExampleRender_componentProps shows a parent passing a dynamic prop via :title="expr" and a static string prop via class="x" to a child component.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	header, _ := htmlc.ParseFile("Header.vue", `<template><h1>{{ title }}</h1></template>`)
	page, _ := htmlc.ParseFile("Page.vue", `<template><Header :title="heading" class="main"></Header></template>`)
	out, err := htmlc.NewRenderer(page).
		WithComponents(htmlc.Registry{"Header": header}).
		RenderString(map[string]any{"heading": "My Site"})
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<h1>My Site</h1>

ExampleRender_componentSlot shows a parent component passing inner HTML content into a child component's <slot /> placeholder.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	card, _ := htmlc.ParseFile("Card.vue", `<template><div class="card"><slot /></div></template>`)
	page, _ := htmlc.ParseFile("Page.vue", `<template><Card><p>inner</p></Card></template>`)
	out, err := htmlc.NewRenderer(page).
		WithComponents(htmlc.Registry{"Card": card}).
		RenderString(nil)
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<div class="card"><p>inner</p></div>

ExampleRender_eventPassthrough shows that client-side directives such as @click and v-model are stripped from server-rendered output because there is no client-side Vue runtime to process them.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	const src = `<template><button @click="handler">click</button><input v-model="name"></template>`
	comp, err := htmlc.ParseFile("t.vue", src)
	if err != nil {
		log.Fatal(err)
	}
	out, err := htmlc.RenderString(comp, nil)
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<button>click</button><input>

ExampleRender_interpolation shows {{ expr }} text interpolation: member access, arithmetic, and ternary expressions all evaluated at render time.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	const src = `<template><p>{{ user.name }}, total {{ price * qty }}, active: {{ active ? "yes" : "no" }}</p></template>`
	comp, err := htmlc.ParseFile("t.vue", src)
	if err != nil {
		log.Fatal(err)
	}
	out, err := htmlc.RenderString(comp, map[string]any{
		"user":   map[string]any{"name": "Alice"},
		"price":  float64(10),
		"qty":    float64(3),
		"active": true,
	})
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<p>Alice, total 30, active: yes</p>

ExampleRender_namedSlots demonstrates named slots: a Layout component declares header and footer named slots plus a default slot for body content, and the caller fills each slot with a <template #name> element.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	layout, _ := htmlc.ParseFile("Layout.vue",
		`<template><div class="layout"><slot name="header"></slot><main><slot></slot></main><slot name="footer"></slot></div></template>`)
	page, _ := htmlc.ParseFile("Page.vue",
		`<template><Layout><template #header><h1>Title</h1></template><p>Content</p><template #footer><em>Footer</em></template></Layout></template>`)
	out, err := htmlc.NewRenderer(page).
		WithComponents(htmlc.Registry{"Layout": layout}).
		RenderString(nil)
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<div class="layout"><h1>Title</h1><main><p>Content</p></main><em>Footer</em></div>

ExampleRender_scopedSlots demonstrates scoped slots: a List component passes each item and its index to the caller via slot props, and the caller uses v-slot="{ item, index }" to render a custom item template.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	list, _ := htmlc.ParseFile("List.vue",
		`<template><ul><li v-for="(item, i) in items"><slot :item="item" :index="i"></slot></li></ul></template>`)
	page, _ := htmlc.ParseFile("Page.vue",
		`<template><List :items="items" v-slot="{ item, index }"><span>{{ index }}: {{ item }}</span></List></template>`)
	out, err := htmlc.NewRenderer(page).
		WithComponents(htmlc.Registry{"List": list}).
		RenderString(map[string]any{"items": []any{"a", "b"}})
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<ul><li><span>0: a</span></li><li><span>1: b</span></li></ul>

ExampleRender_singleVariableSlotBinding demonstrates v-slot="slotProps" binding: the entire slot props map is bound to a single variable, allowing the caller to access any prop via slotProps.key.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	child, _ := htmlc.ParseFile("Child.vue",
		`<template><div><slot :user="theuser" :count="total"></slot></div></template>`)
	page, _ := htmlc.ParseFile("Page.vue",
		`<template><Child :theuser="u" :total="n" v-slot="props"><p>{{ props.user.name }}: {{ props.count }}</p></Child></template>`)
	out, err := htmlc.NewRenderer(page).
		WithComponents(htmlc.Registry{"Child": child}).
		RenderString(map[string]any{
			"u": map[string]any{"name": "Alice"},
			"n": float64(3),
		})
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<div><p>Alice: 3</p></div>

ExampleRender_slotFallbackContent demonstrates slot fallback content: when the caller provides no content for a slot, the child component's fallback children inside <slot>…</slot> are rendered instead.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	card, _ := htmlc.ParseFile("Card.vue",
		`<template><div class="card"><slot><p>No content provided</p></slot></div></template>`)
	page, _ := htmlc.ParseFile("Page.vue", `<template><Card></Card></template>`)
	out, err := htmlc.NewRenderer(page).
		WithComponents(htmlc.Registry{"Card": card}).
		RenderString(nil)
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<div class="card"><p>No content provided</p></div>

ExampleRender_vBind shows :attr dynamic attribute binding, and how boolean attributes are handled: :disabled="false" omits the attribute entirely while :disabled="true" emits it without a value.

package main

import (
	"fmt"

	"github.com/dhamidi/htmlc"
)

func main() {
	// Dynamic href binding.
	c1, _ := htmlc.ParseFile("t.vue", `<template><a :href="url">link</a></template>`)
	o1, _ := htmlc.RenderString(c1, map[string]any{"url": "https://example.com"})
	fmt.Println(o1)

	// :disabled="false" — attribute is omitted.
	c2, _ := htmlc.ParseFile("t.vue", `<template><button :disabled="false">enabled</button></template>`)
	o2, _ := htmlc.RenderString(c2, nil)
	fmt.Println(o2)

	// :disabled="true" — attribute is present without a value.
	c3, _ := htmlc.ParseFile("t.vue", `<template><button :disabled="true">disabled</button></template>`)
	o3, _ := htmlc.RenderString(c3, nil)
	fmt.Println(o3)
}

Output:
<a href="https://example.com">link</a>
<button>enabled</button>
<button disabled>disabled</button>

ExampleRender_vBindClass shows :class with object syntax (keys whose values are truthy are included) and array syntax, both merged with a static class.

package main

import (
	"fmt"

	"github.com/dhamidi/htmlc"
)

func main() {
	// Object syntax merged with static class="base".
	c1, _ := htmlc.ParseFile("t.vue", `<template><div class="base" :class="{ active: isActive, hidden: isHidden }">x</div></template>`)
	o1, _ := htmlc.RenderString(c1, map[string]any{"isActive": true, "isHidden": false})
	fmt.Println(o1)

	// Array syntax: non-empty strings are included.
	c2, _ := htmlc.ParseFile("t.vue", `<template><div :class="['btn', flag ? 'primary' : '']">y</div></template>`)
	o2, _ := htmlc.RenderString(c2, map[string]any{"flag": true})
	fmt.Println(o2)
}

Output:
<div class="base active">x</div>
<div class="btn primary">y</div>

ExampleRender_vBindStyle shows :style with an object whose camelCase keys are automatically converted to kebab-case CSS property names.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	const src = `<template><p :style="{ color: 'red', fontSize: '14px' }">styled</p></template>`
	comp, err := htmlc.ParseFile("t.vue", src)
	if err != nil {
		log.Fatal(err)
	}
	out, err := htmlc.RenderString(comp, nil)
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<p style="color:red;font-size:14px">styled</p>

ExampleRender_vFor shows v-for iterating over an array, with (item, index) destructuring, and over an integer range (n in N produces 1..N).

package main

import (
	"fmt"

	"github.com/dhamidi/htmlc"
)

func main() {
	// Plain array.
	c1, _ := htmlc.ParseFile("t.vue", `<template><li v-for="item in items">{{ item }}</li></template>`)
	o1, _ := htmlc.RenderString(c1, map[string]any{"items": []any{"a", "b", "c"}})
	fmt.Println(o1)

	// Array with zero-based index.
	c2, _ := htmlc.ParseFile("t.vue", `<template><li v-for="(item, i) in items">{{ i }}:{{ item }}</li></template>`)
	o2, _ := htmlc.RenderString(c2, map[string]any{"items": []any{"x", "y"}})
	fmt.Println(o2)

	// Integer range: n iterates 1, 2, 3.
	c3, _ := htmlc.ParseFile("t.vue", `<template><span v-for="n in 3">{{ n }}</span></template>`)
	o3, _ := htmlc.RenderString(c3, nil)
	fmt.Println(o3)
}

Output:
<li>a</li><li>b</li><li>c</li>
<li>0:x</li><li>1:y</li>
<span>1</span><span>2</span><span>3</span>

ExampleRender_vForObject shows v-for iterating map entries using the (value, key) destructuring form.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	const src = `<template><dt v-for="(value, key) in obj">{{ key }}: {{ value }}</dt></template>`
	comp, err := htmlc.ParseFile("t.vue", src)
	if err != nil {
		log.Fatal(err)
	}
	// Use a single-entry map so iteration order is deterministic.
	out, err := htmlc.RenderString(comp, map[string]any{
		"obj": map[string]any{"lang": "Go"},
	})
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<dt>lang: Go</dt>

ExampleRender_vHtml shows v-html="expr" which renders a raw HTML string as element content without escaping angle brackets or other HTML characters.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	const src = `<template><div v-html="raw"></div></template>`
	comp, err := htmlc.ParseFile("t.vue", src)
	if err != nil {
		log.Fatal(err)
	}
	out, err := htmlc.RenderString(comp, map[string]any{"raw": "<b>bold</b>"})
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<div><b>bold</b></div>

ExampleRender_vIf shows v-if/v-else-if/v-else conditional rendering: only the first truthy branch produces output; the rest are skipped entirely.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	const src = `<template><span v-if="score >= 90">A</span><span v-else-if="score >= 70">B</span><span v-else>C</span></template>`
	comp, err := htmlc.ParseFile("t.vue", src)
	if err != nil {
		log.Fatal(err)
	}
	out, err := htmlc.RenderString(comp, map[string]any{"score": float64(75)})
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<span>B</span>

ExampleRender_vPre shows v-pre: mustache syntax inside the element is emitted literally without any interpolation or directive processing.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	const src = `<template><code v-pre>{{ raw }}</code></template>`
	comp, err := htmlc.ParseFile("t.vue", src)
	if err != nil {
		log.Fatal(err)
	}
	out, err := htmlc.RenderString(comp, map[string]any{"raw": "ignored"})
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<code>{{ raw }}</code>

ExampleRender_vShow shows v-show: a falsy expression injects style="display:none" while the element is still present in the DOM; a truthy expression renders the element normally.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	const src = `<template><p v-show="false">hidden</p><p v-show="true">visible</p></template>`
	comp, err := htmlc.ParseFile("t.vue", src)
	if err != nil {
		log.Fatal(err)
	}
	out, err := htmlc.RenderString(comp, nil)
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<p style="display:none">hidden</p><p>visible</p>

ExampleRender_vText shows v-text="expr" which sets element text content with HTML escaping, replacing any child nodes.

package main

import (
	"fmt"
	"log"

	"github.com/dhamidi/htmlc"
)

func main() {
	const src = `<template><p v-text="msg"></p></template>`
	comp, err := htmlc.ParseFile("t.vue", src)
	if err != nil {
		log.Fatal(err)
	}
	out, err := htmlc.RenderString(comp, map[string]any{"msg": "Hello & World"})
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(out)
}

Output:
<p>Hello &amp; World</p>