Pass transition directives onto components (#838)

withastro · Jul 27, 2023 · 6b4873d · 6b4873d
1 parent 616785d
commit 6b4873d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 12 deletions.
diff --git a/.changeset/tall-keys-repair.md b/.changeset/tall-keys-repair.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Pass transition directives onto components
diff --git a/internal/printer/print-to-js.go b/internal/printer/print-to-js.go
@@ -11,7 +11,6 @@ import (
 	"strings"
 
 	. "github.com/withastro/compiler/internal"
-	astro "github.com/withastro/compiler/internal"
 	"github.com/withastro/compiler/internal/handler"
 	"github.com/withastro/compiler/internal/js_scanner"
 	"github.com/withastro/compiler/internal/loc"
@@ -404,6 +403,7 @@ func render1(p *printer, n *Node, opts RenderOptions) {
 	if isImplicit {
 		// do nothing
 	} else if isComponent {
+		maybeConvertTransition(n)
 		p.print(",")
 		p.printAttributesToObject(n)
 	} else if isSlot {
@@ -434,16 +434,7 @@ func render1(p *printer, n *Node, opts RenderOptions) {
 		}
 		p.print(`]`)
 	} else {
-		if transform.HasAttr(n, transform.TRANSITION_ANIMATE) || transform.HasAttr(n, transform.TRANSITION_NAME) {
-			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, animationExpr, transitionExpr),
-				Type: astro.ExpressionAttribute,
-			})
-		}
+		maybeConvertTransition(n)
 
 		for _, a := range n.Attr {
 			if transform.IsImplicitNodeMarker(a) || a.Key == "is:inline" {

diff --git a/internal/printer/printer.go b/internal/printer/printer.go
@@ -283,7 +283,8 @@ func (p *printer) printAttributesToObject(n *astro.Node) {
 		if i != 0 && !lastAttributeSkipped {
 			p.print(",")
 		}
-		if a.Key == "set:text" || a.Key == "set:html" || a.Key == "is:raw" {
+		if a.Key == "set:text" || a.Key == "set:html" || a.Key == "is:raw" || a.Key == "transition:animate" || a.Key == "transition:name" {
+			lastAttributeSkipped = true
 			continue
 		}
 		if a.Namespace != "" {
@@ -446,6 +447,19 @@ func remove(slice []*astro.Node, node *astro.Node) []*astro.Node {
 	return append(slice[:s], slice[s+1:]...)
 }
 
+func maybeConvertTransition(n *astro.Node) {
+	if transform.HasAttr(n, transform.TRANSITION_ANIMATE) || transform.HasAttr(n, transform.TRANSITION_NAME) {
+		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, animationExpr, transitionExpr),
+			Type: astro.ExpressionAttribute,
+		})
+	}
+}
+
 func (p *printer) printComponentMetadata(doc *astro.Node, opts transform.TransformOptions, source []byte) {
 	var specs []string
 	var asrts []string

diff --git a/internal/printer/printer_test.go b/internal/printer/printer_test.go
@@ -2815,6 +2815,15 @@ const items = ["Dog", "Cat", "Platipus"];
 				code: `${$$maybeRenderHead($$result)}<div${$$addAttribute($$renderTransition($$result, "", (slide({duration:15})), ""), "data-astro-transition-scope")}></div>`,
 			},
 		},
+		{
+			name:     "transition:animate on Component",
+			only:     true,
+			source:   `<Component class="bar" transition:animate="morph"></Component>`,
+			filename: "/projects/app/src/pages/page.astro",
+			want: want{
+				code: `${$$renderComponent($$result,'Component',Component,{"class":"bar","data-astro-transition-scope":($$renderTransition($$result, "", "morph", ""))})}`,
+			},
+		},
 	}
 
 	for _, tt := range tests {