Pass attribute expressions for transition:animate (#836)

withastro · Jul 24, 2023 · ce5cf31 · ce5cf31
1 parent 3f3242c
commit ce5cf31
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 17 deletions.
diff --git a/.changeset/slimy-onions-itch.md b/.changeset/slimy-onions-itch.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Pass transition:animate expressions
diff --git a/internal/printer/print-to-js.go b/internal/printer/print-to-js.go
@@ -435,26 +435,12 @@ func render1(p *printer, n *Node, opts RenderOptions) {
 		p.print(`]`)
 	} else {
 		if transform.HasAttr(n, transform.TRANSITION_ANIMATE) || transform.HasAttr(n, transform.TRANSITION_NAME) {
-			animationName := ""
-			if transform.HasAttr(n, transform.TRANSITION_ANIMATE) {
-				animationName = transform.GetAttr(n, transform.TRANSITION_ANIMATE).Val
-			}
-			transitionExpr := ""
-			if transform.HasAttr(n, transform.TRANSITION_NAME) {
-				attr := transform.GetAttr(n, transform.TRANSITION_NAME)
-				switch attr.Type {
-				case astro.QuotedAttribute:
-					transitionExpr = fmt.Sprintf(`"%s"`, attr.Val)
-				case astro.ExpressionAttribute:
-					transitionExpr = fmt.Sprintf(`(%s)`, attr.Val)
-				case astro.TemplateLiteralAttribute:
-					transitionExpr = fmt.Sprintf("`%s`", attr.Val)
-				}
-			}
+			animationExpr := convertAttributeValue(n, transform.TRANSITION_ANIMATE)
+			transitionExpr := convertAttributeValue(n, transform.TRANSITION_NAME)
 
 			n.Attr = append(n.Attr, astro.Attribute{
 				Key:  "data-astro-transition-scope",
-				Val:  fmt.Sprintf(`%s(%s, "%s", "%s", %s)`, RENDER_TRANSITION, RESULT, n.TransitionScope, animationName, transitionExpr),
+				Val:  fmt.Sprintf(`%s(%s, "%s", %s, %s)`, RENDER_TRANSITION, RESULT, n.TransitionScope, animationExpr, transitionExpr),
 				Type: astro.ExpressionAttribute,
 			})
 		}

diff --git a/internal/printer/printer_test.go b/internal/printer/printer_test.go
@@ -2807,6 +2807,14 @@ const items = ["Dog", "Cat", "Platipus"];
 				code: `${$$maybeRenderHead($$result)}<div${$$addAttribute($$renderTransition($$result, "", "", ` + BACKTICK + `${one}-two` + BACKTICK + `), "data-astro-transition-scope")}></div>`,
 			},
 		},
+		{
+			name:     "transition:animate with an expression",
+			source:   "<div transition:animate={slide({duration:15})}></div>",
+			filename: "/projects/app/src/pages/page.astro",
+			want: want{
+				code: `${$$maybeRenderHead($$result)}<div${$$addAttribute($$renderTransition($$result, "", (slide({duration:15})), ""), "data-astro-transition-scope")}></div>`,
+			},
+		},
 	}
 
 	for _, tt := range tests {

diff --git a/internal/printer/utils.go b/internal/printer/utils.go
@@ -7,7 +7,9 @@ import (
 	"strings"
 
 	"github.com/iancoleman/strcase"
+	astro "github.com/withastro/compiler/internal"
 	"github.com/withastro/compiler/internal/js_scanner"
+	"github.com/withastro/compiler/internal/transform"
 )
 
 func escapeText(src string) string {
@@ -118,3 +120,19 @@ func removeComments(input string) (string, error) {
 
 	return strings.TrimSpace(sb.String()), nil
 }
+
+func convertAttributeValue(n *astro.Node, attrName string) string {
+	expr := `""`
+	if transform.HasAttr(n, attrName) {
+		attr := transform.GetAttr(n, attrName)
+		switch attr.Type {
+		case astro.QuotedAttribute:
+			expr = fmt.Sprintf(`"%s"`, attr.Val)
+		case astro.ExpressionAttribute:
+			expr = fmt.Sprintf(`(%s)`, attr.Val)
+		case astro.TemplateLiteralAttribute:
+			expr = fmt.Sprintf("`%s`", attr.Val)
+		}
+	}
+	return expr
+}