feat: (WIP) SSR support

mirkobrombin · mirkobrombin · commit 472b5ffcb660 · 2025-08-21T13:51:36.000+02:00
diff --git a/docs/articles/guide/ssr.md b/docs/articles/guide/ssr.md
@@ -45,3 +45,13 @@ WebAssembly.instantiateStreaming(fetch("/dist/client/app.wasm"), go.importObject
 ```
 
 This setup delivers an initial server-side render followed by client-side hydration of the Wasm bundle. See `examples/ssr_example` for a working server.
+
+Additional routes in `examples/ssr_example` showcase common patterns:
+
+- `/list` renders a list with `@for`.
+- `/layout` demonstrates a layout component using `@slot` and `@include`.
+- `/conditional` toggles `@if/@else` blocks based on server-initialized store values.
+- `/users` loads data from a JSON file and illustrates multi-page routing.
+- A shared sidebar, included via `@include`, links all these demos together for easy navigation.
+
+Templates referenced with `@include` must be registered on the server using `core.RegisterComponent` so the renderer can instantiate them during SSR.
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,9 @@
+# Examples
+
+- [SSR Example](ssr_example) demonstrates server-side rendering features:
+  - `/counter` – counter with hydrated store state.
+  - `/list` – list rendering using `@for`.
+  - `/layout` – layout component with named slots via `@slot` and `@include`.
+  - `/conditional` – `@if/@else` driven by server-initialized store values.
+  - `/users` – data fetched from JSON with SSR routing across pages.
+  - all pages share a navigation sidebar included with `@include` for easy exploration.
diff --git a/examples/ssr_example/conditional.rtml b/examples/ssr_example/conditional.rtml
@@ -0,0 +1,8 @@
+<root>
+  @include:sidebar
+  @if:store:app.default.loggedIn == "true"
+    <p>Welcome back!</p>
+  @else
+    <p>Please log in.</p>
+  @endif
+</root>
diff --git a/examples/ssr_example/data/users.json b/examples/ssr_example/data/users.json
@@ -0,0 +1,4 @@
+[
+  {"name": "Alice", "city": "Rome"},
+  {"name": "Bob", "city": "Milan"}
+]
diff --git a/examples/ssr_example/dist/client/app.wasm b/examples/ssr_example/dist/client/app.wasm
diff --git a/examples/ssr_example/home.rtml b/examples/ssr_example/home.rtml
@@ -0,0 +1,4 @@
+<root>
+  @include:sidebar
+  <h1>SSR Examples</h1>
+</root>
diff --git a/examples/ssr_example/index.rtml b/examples/ssr_example/index.rtml
@@ -1,4 +1,5 @@
 <root>
+  @include:sidebar
   <p>Hello {{name}}</p>
   <button data-on-click="increment">Increment</button>
   <p>Count: <span data-store="app.default.count">{{count}}</span></p>
diff --git a/examples/ssr_example/layout.rtml b/examples/ssr_example/layout.rtml
@@ -0,0 +1,4 @@
+<root>
+  <header class="p-2 bg-gray-200">@slot:header</header>
+  <main class="p-4">@slot</main>
+</root>
diff --git a/examples/ssr_example/layout_page.rtml b/examples/ssr_example/layout_page.rtml
@@ -0,0 +1,10 @@
+<root>
+  @include:sidebar
+  @slot:layout.header
+    <h1>Layout Example</h1>
+  @endslot
+  @slot:layout
+    <p>Content rendered inside the layout.</p>
+  @endslot
+  @include:layout
+</root>
diff --git a/examples/ssr_example/list.rtml b/examples/ssr_example/list.rtml
@@ -0,0 +1,9 @@
+<root>
+  @include:sidebar
+  <h1>Languages</h1>
+  <ul>
+    @for:item in items
+      <li>@prop:item</li>
+    @endfor
+  </ul>
+</root>
diff --git a/examples/ssr_example/main.go b/examples/ssr_example/main.go
@@ -22,17 +22,28 @@ func main() {
 	}
 
 	store := state.NewStore("default", state.WithModule("app"))
-	if v, ok := props["count"].(float64); ok {
-		store.Set("count", int(v))
-	} else {
-		store.Set("count", 0)
+	if stores, ok := props["store"].(map[string]any); ok {
+		if appStores, ok := stores["app"].(map[string]any); ok {
+			if def, ok := appStores["default"].(map[string]any); ok {
+				for k, v := range def {
+					switch val := v.(type) {
+					case float64:
+						store.Set(k, int(val))
+					default:
+						store.Set(k, v)
+					}
+				}
+			}
+		}
 	}
 
 	root := document.Call("getElementById", "app")
 	span := root.Call("querySelector", "[data-store='app.default.count']")
-	store.OnChange("count", func(v any) {
-		span.Set("textContent", fmt.Sprintf("%v", v))
-	})
+	if span.Truthy() {
+		store.OnChange("count", func(v any) {
+			span.Set("textContent", fmt.Sprintf("%v", v))
+		})
+	}
 
 	dom.RegisterHandlerFunc("increment", func() {
 		if val, ok := store.Get("count").(int); ok {
diff --git a/examples/ssr_example/server/main.go b/examples/ssr_example/server/main.go
@@ -1,45 +1,103 @@
 package main
 
 import (
+	"encoding/json"
 	"fmt"
 	"log"
 	"net/http"
 	"os"
 	"path/filepath"
+	"runtime"
 
 	"github.com/rfwlab/rfw/cmd/rfw/build"
+	core "github.com/rfwlab/rfw/v1/core"
 	"github.com/rfwlab/rfw/v1/ssr"
+	"github.com/rfwlab/rfw/v1/state"
 )
 
 func main() {
-	if err := os.Chdir(".."); err != nil {
-		log.Fatalf("chdir failed: %v", err)
+	// Ensure we run from the example root regardless of invocation directory
+	if _, file, _, ok := runtime.Caller(0); ok {
+		dir := filepath.Dir(file)
+		if err := os.Chdir(filepath.Join(dir, "..")); err != nil {
+			log.Fatalf("chdir failed: %v", err)
+		}
 	}
 
 	if err := build.Build(nil); err != nil {
 		log.Fatalf("build failed: %v", err)
 	}
 
+	registerComponents()
+
 	clientDir := filepath.Join("dist", "client")
 	http.Handle("/dist/client/", http.StripPrefix("/dist/client/", http.FileServer(http.Dir(clientDir))))
 
 	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
-		if r.URL.Path != "/" {
+		switch r.URL.Path {
+		case "/":
+			render(w, "home.rtml", nil)
+		case "/counter":
+			name := r.URL.Query().Get("name")
+			if name == "" {
+				name = "World"
+			}
+			store := state.NewStore("default", state.WithModule("app"))
+			store.Set("count", 0)
+			props := map[string]any{"name": name, "store": state.GlobalStoreManager.Snapshot()}
+			render(w, "index.rtml", props)
+		case "/list":
+			items := []string{"Go", "Rust", "Python"}
+			props := map[string]any{"items": items}
+			render(w, "list.rtml", props)
+		case "/layout":
+			render(w, "layout_page.rtml", nil)
+		case "/conditional":
+			store := state.NewStore("default", state.WithModule("app"))
+			store.Set("loggedIn", true)
+			props := map[string]any{"store": state.GlobalStoreManager.Snapshot()}
+			render(w, "conditional.rtml", props)
+		case "/users":
+			data, err := os.ReadFile("data/users.json")
+			if err != nil {
+				http.Error(w, "load failed", http.StatusInternalServerError)
+				return
+			}
+			var users []map[string]any
+			if err := json.Unmarshal(data, &users); err != nil {
+				http.Error(w, "decode failed", http.StatusInternalServerError)
+				return
+			}
+			props := map[string]any{"users": users}
+			render(w, "users.rtml", props)
+		default:
 			http.NotFound(w, r)
-			return
 		}
-		name := r.URL.Query().Get("name")
-		if name == "" {
-			name = "World"
-		}
-		rendered, err := ssr.RenderFile("index.rtml", map[string]any{"name": name, "count": 0})
-		if err != nil {
-			http.Error(w, "render failed", http.StatusInternalServerError)
-			return
-		}
-		fmt.Fprintf(w, "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>SSR Example</title>\n</head>\n<body>\n<div id=\"app\" data-hydrate>%s</div>\n<script src=\"/dist/client/wasm_exec.js\"></script>\n<script>\nconst go = new Go();\nWebAssembly.instantiateStreaming(fetch(\"/dist/client/app.wasm\"), go.importObject).then((result) => { go.run(result.instance); });\n</script>\n</body>\n</html>", rendered)
 	})
 
 	log.Println("listening on :8080")
 	log.Fatal(http.ListenAndServe(":8080", nil))
 }
+
+func render(w http.ResponseWriter, path string, props map[string]any) {
+	rendered, err := ssr.RenderFile(path, props)
+	if err != nil {
+		http.Error(w, "render failed", http.StatusInternalServerError)
+		return
+	}
+	fmt.Fprintf(w, "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>SSR Example</title>\n</head>\n<body>\n<div id=\"app\" data-hydrate>%s</div>\n<script src=\"/dist/client/wasm_exec.js\"></script>\n<script>\nconst go = new Go();\nWebAssembly.instantiateStreaming(fetch(\"/dist/client/app.wasm\"), go.importObject).then((result) => { go.run(result.instance); });\n</script>\n</body>\n</html>", rendered)
+}
+
+func registerComponents() {
+	reg := func(name, file string) {
+		data, err := os.ReadFile(file)
+		if err != nil {
+			log.Fatalf("load %s: %v", file, err)
+		}
+		core.RegisterComponent(name, func() core.Component {
+			return core.NewComponent(name, data, nil)
+		})
+	}
+	reg("sidebar", "sidebar.rtml")
+	reg("layout", "layout.rtml")
+}
diff --git a/examples/ssr_example/sidebar.rtml b/examples/ssr_example/sidebar.rtml
@@ -0,0 +1,12 @@
+<root>
+  <aside>
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li><a href="/counter">Counter</a></li>
+      <li><a href="/list">List Rendering</a></li>
+      <li><a href="/layout">Layout & Slots</a></li>
+      <li><a href="/conditional">Conditional</a></li>
+      <li><a href="/users">Data Fetching & Routing</a></li>
+    </ul>
+  </aside>
+</root>
diff --git a/examples/ssr_example/users.rtml b/examples/ssr_example/users.rtml
@@ -0,0 +1,9 @@
+<root>
+  @include:sidebar
+  <h1>Users</h1>
+  <ul>
+    @for:user in users
+      <li>@prop:user.name - @prop:user.city</li>
+    @endfor
+  </ul>
+</root>
diff --git a/v1/core/component_host.go b/v1/core/component_host.go
@@ -17,6 +17,14 @@ func RegisterComponent(name string, constructor func() Component) {
 	ComponentRegistry[name] = constructor
 }
 
+// LoadComponent retrieves a registered component by name.
+func LoadComponent(name string) Component {
+	if ctor, ok := ComponentRegistry[name]; ok {
+		return ctor()
+	}
+	return nil
+}
+
 // NewComponent returns a basic HTMLComponent initialized with the provided template and props.
 func NewComponent(name string, templateFS []byte, props map[string]any) *HTMLComponent {
 	c := NewHTMLComponent(name, templateFS, props)
diff --git a/v1/core/html_component_host.go b/v1/core/html_component_host.go
@@ -39,6 +39,8 @@ func NewHTMLComponent(name string, templateFS []byte, props map[string]any) *HTM
 func (c *HTMLComponent) Render() (renderedTemplate string) {
 	renderedTemplate, _ = LoadComponentTemplate(c.TemplateFS)
 	renderedTemplate = strings.Replace(renderedTemplate, "<root", fmt.Sprintf("<root data-component-id=\"%s\"", c.ID), 1)
+	renderedTemplate = replaceComponentIncludes(renderedTemplate, c)
+	renderedTemplate = extractSlotContents(renderedTemplate, c)
 	ctx := rtml.Context{Props: c.Props, Slots: c.Slots, Dependencies: make(map[string]rtml.Dependency)}
 	for k, dep := range c.Dependencies {
 		ctx.Dependencies[k] = dep
diff --git a/v1/core/rtml_host.go b/v1/core/rtml_host.go
@@ -0,0 +1,83 @@
+//go:build !js || !wasm
+
+package core
+
+import (
+	"html"
+	"regexp"
+)
+
+func replaceComponentIncludes(template string, c *HTMLComponent) string {
+	patterns := []string{
+		`<p>@include:([\w-]+):\{([^}]*)\}</p>`,
+		`@include:([\w-]+):\{([^}]*)\}`,
+	}
+	for _, pat := range patterns {
+		re := regexp.MustCompile(pat)
+		template = re.ReplaceAllStringFunc(template, func(match string) string {
+			parts := re.FindStringSubmatch(match)
+			if len(parts) < 3 {
+				return match
+			}
+			name := parts[1]
+			propStr := html.UnescapeString(parts[2])
+			comp := LoadComponent(name)
+			if comp == nil {
+				return match
+			}
+			props := map[string]any{}
+			propRe := regexp.MustCompile(`(\w+):"([^"]*)"`)
+			for _, m := range propRe.FindAllStringSubmatch(propStr, -1) {
+				props[m[1]] = m[2]
+			}
+			if hc, ok := comp.(*HTMLComponent); ok {
+				hc.Props = props
+				hc.ID = generateComponentID(hc.Name, hc.Props)
+			}
+			c.AddDependency(name, comp)
+			return "@include:" + name
+		})
+	}
+	re := regexp.MustCompile(`@include:([\w-]+)`)
+	template = re.ReplaceAllStringFunc(template, func(match string) string {
+		parts := re.FindStringSubmatch(match)
+		if len(parts) < 2 {
+			return match
+		}
+		name := parts[1]
+		if _, ok := c.Dependencies[name]; ok {
+			return match
+		}
+		if comp := LoadComponent(name); comp != nil {
+			c.AddDependency(name, comp)
+		}
+		return match
+	})
+	return template
+}
+
+func extractSlotContents(template string, c *HTMLComponent) string {
+	slotRegex := regexp.MustCompile(`@slot:(\w+)(?:\.(\w+))?([\s\S]*?)@endslot`)
+	return slotRegex.ReplaceAllStringFunc(template, func(match string) string {
+		parts := slotRegex.FindStringSubmatch(match)
+		if len(parts) < 4 {
+			return match
+		}
+		depName := parts[1]
+		slotName := parts[2]
+		if slotName == "" {
+			slotName = "default"
+		}
+		content := parts[3]
+		if dep, ok := c.Dependencies[depName]; ok {
+			if hc, ok := dep.(*HTMLComponent); ok {
+				if hc.Slots == nil {
+					hc.Slots = make(map[string]any)
+				}
+				hc.Slots[slotName] = content
+			}
+			return ""
+		}
+		return match
+	})
+}
diff --git a/v1/rtml/rtml.go b/v1/rtml/rtml.go
@@ -52,9 +52,15 @@ func replaceSlotPlaceholders(template string, ctx Context) string {
 		return template
 	}
 	for name, content := range ctx.Slots {
+		if name == "default" {
+			continue
+		}
 		placeholder := fmt.Sprintf("@slot:%s", name)
 		template = strings.ReplaceAll(template, placeholder, fmt.Sprintf("%v", content))
 	}
+	if content, ok := ctx.Slots["default"]; ok {
+		template = strings.ReplaceAll(template, "@slot", fmt.Sprintf("%v", content))
+	}
 	return template
 }
 
diff --git a/v1/ssr/ssr_test.go b/v1/ssr/ssr_test.go

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +[
 +  {"name": "Alice", "city": "Rome"},
 +  {"name": "Bob", "city": "Milan"}
 +]
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<root>`
	`2`	`+ @include:sidebar`
`2`	`3`	`<p>Hello {{name}}</p>`
`3`	`4`	`<button data-on-click="increment">Increment</button>`
`4`	`5`	`<p>Count: <span data-store="app.default.count">{{count}}</span></p>`