fix(wab): Code component variants in model

Change-Id: I8b6792b7fcad6f08f04b9a1ba4f06b435f2ef4a2 GitOrigin-RevId: 322cead51a032675c2b5271ebc1b17863d917b70
plasmicapp · Dec 13, 2024 · 7831aa3 · 7831aa3
1 parent 3358b8d
commit 7831aa3
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 21 deletions.
diff --git a/platform/wab/src/wab/client/ProjectDependencyManager.ts b/platform/wab/src/wab/client/ProjectDependencyManager.ts
@@ -113,17 +113,17 @@ export class ProjectDependencyManager {
     });
 
     // We no longer plan to make any updates to plume site. So its unnecessary to re-fetch it if it has already been fetched.
-    if (!this.plumeSite) {
-      const bundler = new FastBundler();
-      // Get Plume site
-      const plumePkg = await this._sc.appCtx.api.getPlumePkg();
-      const plumeSite = unbundleProjectDependency(
-        bundler,
-        plumePkg.pkg,
-        plumePkg.depPkgs
-      ).projectDependency.site;
-      this.plumeSite = this.inlineAssets(plumeSite);
-    }
+    // if (!this.plumeSite) {
+    //   const bundler = new FastBundler();
+    //   // Get Plume site
+    //   const plumePkg = await this._sc.appCtx.api.getPlumePkg();
+    //   const plumeSite = unbundleProjectDependency(
+    //     bundler,
+    //     plumePkg.pkg,
+    //     plumePkg.depPkgs
+    //   ).projectDependency.site;
+    //   this.plumeSite = this.inlineAssets(plumeSite);
+    // }
   }
 
   /**

diff --git a/platform/wab/src/wab/client/components/canvas/site-ops.tsx b/platform/wab/src/wab/client/components/canvas/site-ops.tsx
@@ -1494,8 +1494,11 @@ export class SiteOps {
     );
   }
 
-  removeStyleVariantIfEmptyAndUnused(component: Component, variant: Variant) {
-    this.tplMgr.removeStyleVariantIfEmptyAndUnused(component, variant);
+  removeRegisteredVariantIfEmptyAndUnused(
+    component: Component,
+    variant: Variant
+  ) {
+    this.tplMgr.removeRegisteredVariantIfEmptyAndUnused(component, variant);
     this.studioCtx.ensureComponentStackFramesHasOnlyValidVariants(component);
     this.studioCtx.pruneInvalidViewCtxs();
   }

diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/private-style-variants-section.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/private-style-variants-section.tsx
@@ -144,7 +144,7 @@ export const PrivateStyleVariantsPanel = observer(
                       studioCtx.changeUnsafe(() => {
                         studioCtx
                           .siteOps()
-                          .removeStyleVariantIfEmptyAndUnused(
+                          .removeRegisteredVariantIfEmptyAndUnused(
                             component,
                             variant
                           );

diff --git a/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx b/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx
@@ -1039,7 +1039,7 @@ const ComponentStyleVariantRow = observer(
               studioCtx.change(({ success }) => {
                 studioCtx
                   .siteOps()
-                  .removeStyleVariantIfEmptyAndUnused(component, variant);
+                  .removeRegisteredVariantIfEmptyAndUnused(component, variant);
                 return success();
               })
             }

diff --git a/platform/wab/src/wab/client/components/variants/variant-menu.tsx b/platform/wab/src/wab/client/components/variants/variant-menu.tsx
@@ -5,6 +5,7 @@ import { ClickStopper } from "@/wab/client/components/widgets";
 import { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
 import { ensure, spawn } from "@/wab/shared/common";
 import {
+  allCodeComponentVariants,
   allComponentStyleVariants,
   allPrivateStyleVariants,
 } from "@/wab/shared/core/components";
@@ -33,6 +34,7 @@ import {
 import {
   getBaseVariant,
   isBaseVariant,
+  isCodeComponentVariant,
   isPrivateStyleVariant,
   isScreenVariantGroup,
   isStandaloneVariantGroup,
@@ -86,7 +88,10 @@ export function makeVariantMenu(opts: {
         builder.genSection(undefined, (push) => {
           push(
             <Menu.Item key="edit-selectors" onClick={onEditSelectors}>
-              Edit interaction selectors
+              Edit{" "}
+              {isCodeComponentVariant(variant)
+                ? "registered keys"
+                : "interaction selectors"}
             </Menu.Item>
           );
         });
@@ -189,6 +194,10 @@ function genCopyToVariantMenu(
       >
         {isStyleVariant(variant) ? (
           <div className="ml-lg">{variant.selectors.join(", ")}</div>
+        ) : isCodeComponentVariant(variant) ? (
+          <div className="ml-lg">
+            {variant.codeComponentVariantKeys.join(", ")}
+          </div>
         ) : (
           variant.name
         )}
@@ -227,6 +236,12 @@ function genCopyToVariantMenu(
       );
     });
 
+    builder.genSection(`Registered Variants`, (push2) => {
+      allCodeComponentVariants(component).forEach((v) =>
+        genMenuForVariant(v, push2)
+      );
+    });
+
     component.variantGroups.forEach((vg) => genMenuForVariantGroup(vg, push));
   });
 }

diff --git a/platform/wab/src/wab/shared/TplMgr.ts b/platform/wab/src/wab/shared/TplMgr.ts
@@ -48,6 +48,7 @@ import {
   hasScreenVariant,
   hasStyleVariant,
   isBaseVariant,
+  isCodeComponentVariant,
   isGlobalVariant,
   isGlobalVariantGroup,
   isRegisteredVariant,
@@ -601,10 +602,22 @@ export class TplMgr {
     });
   }
 
-  removeStyleVariantIfEmptyAndUnused(component: Component, variant: Variant) {
-    assert(isStyleVariant(variant), "Given variant should be a style variant");
+  removeRegisteredVariantIfEmptyAndUnused(
+    component: Component,
+    variant: Variant
+  ) {
+    assert(
+      isRegisteredVariant(variant),
+      "Given variant should be a registered variant"
+    );
+
+    if (isStyleVariant(variant) && variant.selectors.length > 0) {
+      return;
+    }
+
     if (
-      ensure(variant.selectors, "Style variant must have selectors").length > 0
+      isCodeComponentVariant(variant) &&
+      variant.codeComponentVariantKeys.length > 0
     ) {
       return;
     }
@@ -2257,8 +2270,8 @@ export class TplMgr {
       this.renameVariant(newVariant, newVariant.name);
     } else {
       assert(
-        isStyleVariant(variant),
-        "Variant with no parent is expected to be a style variant"
+        isRegisteredVariant(variant),
+        "Variant with no parent is expected to be a registered variant"
       );
       component.variants.push(newVariant);
     }