Await the result of renderTransition() after it was made async in Astro 5.9. (#1080)

* await renderTransition

* plus changeset

* adapt expected test results

* improve heuristic for async function

Author: martrapp

.changeset/sharp-pans-allow.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/compiler": patch
+---
+
+Fixes a bug where view transition names got lost after update to Astro 5.9

internal/printer/__printer_js__/transition_animate_on_Component.snap

@@ -33,9 +33,9 @@ import "transitions.css";
 
 export const $$metadata = $$createMetadata("/projects/app/src/pages/page.astro", { modules: [], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [] });
 
-const $$Page = $$createComponent(($$result, $$props, $$slots) => {
+const $$Page = $$createComponent(async ($$result, $$props, $$slots) => {
 
-return $$render`${$$renderComponent($$result,'Component',Component,{"class":"bar","data-astro-transition-scope":($$renderTransition($$result, "wkm5vset", "morph", ""))})}`;
+return $$render`${$$renderComponent($$result,'Component',Component,{"class":"bar","data-astro-transition-scope":(await $$renderTransition($$result, "wkm5vset", "morph", ""))})}`;
 }, '/projects/app/src/pages/page.astro', 'self');
 export default $$Page;
 ```

internal/printer/__printer_js__/transition_animate_with_an_expression.snap

@@ -33,9 +33,9 @@ import "transitions.css";
 
 export const $$metadata = $$createMetadata("/projects/app/src/pages/page.astro", { modules: [], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [] });
 
-const $$Page = $$createComponent(($$result, $$props, $$slots) => {
+const $$Page = $$createComponent(async ($$result, $$props, $$slots) => {
 
-return $$render`${$$maybeRenderHead($$result)}<div${$$addAttribute($$renderTransition($$result, "ih7yuffh", (slide({duration:15})), ""), "data-astro-transition-scope")}></div>`;
+return $$render`${$$maybeRenderHead($$result)}<div${$$addAttribute(await $$renderTransition($$result, "ih7yuffh", (slide({duration:15})), ""), "data-astro-transition-scope")}></div>`;
 }, '/projects/app/src/pages/page.astro', 'self');
 export default $$Page;
 ```

internal/printer/__printer_js__/transition_name_with_an_expression.snap

@@ -33,9 +33,9 @@ import "transitions.css";
 
 export const $$metadata = $$createMetadata("/projects/app/src/pages/page.astro", { modules: [], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [] });
 
-const $$Page = $$createComponent(($$result, $$props, $$slots) => {
+const $$Page = $$createComponent(async ($$result, $$props, $$slots) => {
 
-return $$render`${$$maybeRenderHead($$result)}<div${$$addAttribute($$renderTransition($$result, "daiq24ry", "", (one + '-' + 'two')), "data-astro-transition-scope")}></div>`;
+return $$render`${$$maybeRenderHead($$result)}<div${$$addAttribute(await $$renderTransition($$result, "daiq24ry", "", (one + '-' + 'two')), "data-astro-transition-scope")}></div>`;
 }, '/projects/app/src/pages/page.astro', 'self');
 export default $$Page;
 ```

internal/printer/__printer_js__/transition_name_with_an_template_literal.snap

@@ -33,9 +33,9 @@ import "transitions.css";
 
 export const $$metadata = $$createMetadata("/projects/app/src/pages/page.astro", { modules: [], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [] });
 
-const $$Page = $$createComponent(($$result, $$props, $$slots) => {
+const $$Page = $$createComponent(async ($$result, $$props, $$slots) => {
 
-return $$render`${$$maybeRenderHead($$result)}<div${$$addAttribute($$renderTransition($$result, "vvov4lyr", "", `${one}-two`), "data-astro-transition-scope")}></div>`;
+return $$render`${$$maybeRenderHead($$result)}<div${$$addAttribute(await $$renderTransition($$result, "vvov4lyr", "", `${one}-two`), "data-astro-transition-scope")}></div>`;
 }, '/projects/app/src/pages/page.astro', 'self');
 export default $$Page;
 ```

internal/printer/__printer_js__/transition_persist_uses_transition_name_if_defined.snap

@@ -33,9 +33,9 @@ import "transitions.css";
 
 export const $$metadata = $$createMetadata(import.meta.url, { modules: [], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [] });
 
-const $$Component = $$createComponent(($$result, $$props, $$slots) => {
+const $$Component = $$createComponent(async ($$result, $$props, $$slots) => {
 
-return $$render`${$$maybeRenderHead($$result)}<div data-astro-transition-persist="foo"${$$addAttribute($$renderTransition($$result, "peuy4xf7", "", "foo"), "data-astro-transition-scope")}></div>`;
+return $$render`${$$maybeRenderHead($$result)}<div data-astro-transition-persist="foo"${$$addAttribute(await $$renderTransition($$result, "peuy4xf7", "", "foo"), "data-astro-transition-scope")}></div>`;
 }, undefined, 'self');
 export default $$Component;
 ```

internal/printer/printer.go

@@ -108,7 +108,7 @@ func (p *printer) addTSXStyle(start int, end int, content string, styleType stri
 func (p *printer) getAsyncFuncPrefix() string {
 	// Decide whether to print `async` if top-level await is used. Use a loose check for now.
 	funcPrefix := ""
-	if strings.Contains(p.sourcetext, "await") {
+	if strings.Contains(p.sourcetext, "await") || strings.Contains(p.sourcetext, "transition:name") || strings.Contains(p.sourcetext, "transition:animate") {
 		funcPrefix = "async "
 	}
 	return funcPrefix
@@ -569,7 +569,7 @@ func maybeConvertTransition(n *astro.Node) {
 
 		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),
+			Val:  fmt.Sprintf(`await %s(%s, "%s", %s, %s)`, RENDER_TRANSITION, RESULT, n.TransitionScope, animationExpr, transitionExpr),
 			Type: astro.ExpressionAttribute,
 		})
 	}