From 41b4090fbc5997a4e244e9f1c9c9440357076fe8 Mon Sep 17 00:00:00 2001
From: Felipe Mota <fmota@plasmic.app>
Date: Tue, 17 Dec 2024 19:58:16 -0300
Subject: [PATCH] fix(slots): Keep slots ordered by tpl order

Issue: https://linear.app/plasmic/issue/PLA-11570
GitOrigin-RevId: 5411a003e8399b405b9d63158593697aa2d7d024
---
 .../wab/src/wab/client/fixes-post-change.ts   | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/platform/wab/src/wab/client/fixes-post-change.ts b/platform/wab/src/wab/client/fixes-post-change.ts
index d757380a72c..2ad6e15ec28 100644
--- a/platform/wab/src/wab/client/fixes-post-change.ts
+++ b/platform/wab/src/wab/client/fixes-post-change.ts
@@ -17,7 +17,7 @@ import { $$$ } from "@/wab/shared/TplQuery";
 import { isBaseVariant } from "@/wab/shared/Variants";
 import { getActiveVariantsForFrame } from "@/wab/shared/cached-selectors";
 import { notNil, tuple } from "@/wab/shared/common";
-import { isPageComponent } from "@/wab/shared/core/components";
+import { isCodeComponent, isPageComponent } from "@/wab/shared/core/components";
 import {
   RecordedChanges,
   mergeRecordedChanges,
@@ -35,6 +35,7 @@ import {
   isGrid,
   isTplComponent,
   isTplContainer,
+  isTplSlot,
   isTplTag,
   isTplTagOrComponent,
   isTplVariantable,
@@ -47,6 +48,7 @@ import {
   TplComponent,
   TplNode,
   TplSlot,
+  isKnownSlotParam,
   isKnownTplComponent,
   isKnownTplSlot,
   isKnownVirtualRenderExpr,
@@ -102,6 +104,10 @@ export function fixupForChanges(
       fixupIncorrectlyNamedNodes(summary, studioCtx);
       fixupImplicitStates(summary);
     });
+
+    [changes, summary] = applyFix(() => {
+      fixupSlotParamsOrder(summary);
+    });
   }
 
   // Now do view-related fixes
@@ -419,3 +425,23 @@ export function fixupVirtualSlotArgs(
     }
   }
 }
+
+function fixupSlotParamsOrder(summary: ChangeSummary) {
+  for (const component of summary.updatedComponents) {
+    const slotParams = component.params.filter((param) =>
+      isKnownSlotParam(param)
+    );
+
+    // Skip code components, since they don't have tpl trees
+    // and ignore components with at most one slot param to avoid unnecessary work
+    if (isCodeComponent(component) || slotParams.length <= 1) {
+      return;
+    }
+
+    const slots = flattenTpls(component.tplTree).filter(isTplSlot);
+    component.params = [
+      ...component.params.filter((param) => !isKnownSlotParam(param)),
+      ...slots.map((slot) => slot.param),
+    ];
+  }
+}