From 0d7a8e3c5a2d949957d327520ae2430b8ac47a8d Mon Sep 17 00:00:00 2001
From: Joe Davidson <joe.davidson.21111@gmail.com>
Date: Fri, 3 Nov 2023 22:22:35 +0000
Subject: [PATCH] chore: remove reference to legacy template call expression
 (#280)

---
 .../09-template-composition.md                | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/docs/docs/03-syntax-and-usage/09-template-composition.md b/docs/docs/03-syntax-and-usage/09-template-composition.md
index b68076910..5131023b5 100644
--- a/docs/docs/03-syntax-and-usage/09-template-composition.md
+++ b/docs/docs/03-syntax-and-usage/09-template-composition.md
@@ -66,17 +66,21 @@ The use of the `{ children... }` expression in the child component.
 
 # Components as parameters
 
-Components can also be passed as parameters and rendered using the `{! component }` expression.
+Components can also be passed as parameters and rendered using the `@component` expression.
 
 ```templ
 package main
 
-templ layout(l, r templ.Component) {
-	<div id="left">
-		{! l }
+templ heading() {
+    <h1>Heading</h1>
+}
+
+templ layout(contents templ.Component) {
+	<div id="heading">
+		@heading()
 	</div>
-	<div id="right">
-		{! r }
+	<div id="contents">
+		@contents
 	</div>
 }
 
@@ -94,18 +98,17 @@ import (
 )
 
 func main() {
-	l := paragraph("Left contents")
-	r := paragraph("Right contents")
-	layout(l, r).Render(context.Background(), os.Stdout)
+	c := paragraph("Dynamic contents")
+	layout(c).Render(context.Background(), os.Stdout)
 }
 ```
 
 ```html title="output"
-<div id="left">
-	<p>Left contents</p>
+<div id="heading">
+	<h1>Heading</h1>
 </div>
 <div id="right">
-	<p>Right contents</p>
+	<p>Dynamic contents</p>
 </div>
 ```
 
@@ -114,12 +117,16 @@ You can pass `templ` components as parameters to other components within templat
 ```templ
 package main
 
-templ layout(l, r templ.Component) {
-	<div id="left">
-		{! l }
+templ heading() {
+    <h1>Heading</h1>
+}
+
+templ layout(contents templ.Component) {
+	<div id="heading">
+		@heading()
 	</div>
-	<div id="right">
-		{! r }
+	<div id="contents">
+		@contents
 	</div>
 }
 
@@ -128,7 +135,7 @@ templ paragraph(contents string) {
 }
 
 templ root() {
-	@layout(paragraph("Left contents"), paragraph("Right contents"))
+	@layout(paragraph("Dynamic contents"))
 }
 ```
 
@@ -146,10 +153,10 @@ func main() {
 ```
 
 ```html title="output"
-<div id="left">
-	<p>Left contents</p>
+<div id="heading">
+	<h1>Heading</h1>
 </div>
 <div id="right">
-	<p>Right contents</p>
+	<p>Dynamic contents</p>
 </div>
 ```