fix(wab): replace isStyleVariant with isCodeComponentOrStyleVariant

Change-Id: Icc09e8ab03c19f9d765ad08c501cc2f772eb085b GitOrigin-RevId: d52420b8fb4c11470278b0c8169fb7474711b574
plasmicapp · Dec 13, 2024 · 33342be · 33342be
1 parent b1148de
commit 33342be
Show file tree

Hide file tree

Showing 31 changed files with 170 additions and 558 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/VariantControls.tsx b/platform/wab/src/wab/client/components/VariantControls.tsx
@@ -18,14 +18,14 @@ import { isTplCodeComponent, isTplTag } from "@/wab/shared/core/tpls";
 import { VARIANT_CAP, VARIANT_LOWER } from "@/wab/shared/Labels";
 import { Component, isKnownTplTag, Variant } from "@/wab/shared/model/classes";
 import {
+  CodeComponentOrStyleVariant,
   isBaseVariant,
+  isCodeComponentOrStyleVariant,
   isCodeComponentVariant,
   isGlobalVariant,
   isPrivateStyleVariant,
-  isRegisteredVariant,
   isStyleVariant,
   makeVariantName,
-  RegisteredVariant,
   StyleVariant,
 } from "@/wab/shared/Variants";
 import { Menu } from "antd";
@@ -93,7 +93,9 @@ const VariantLabel_: ForwardRefRenderFunction<
     <EditableLabel
       ref={ref}
       value={variantName}
-      disabled={isBaseVariant(variant) || isRegisteredVariant(variant)}
+      disabled={
+        isBaseVariant(variant) || isCodeComponentOrStyleVariant(variant)
+      }
       onEdit={_onRename}
       defaultEditing={defaultEditing}
       programmaticallyTriggered={programmaticallyTriggered}
@@ -128,7 +130,7 @@ export function makeCanvasVariantContextMenu({
   return (
     <Menu>
       <Menu.Item onClick={onRequestEditing}>
-        {isRegisteredVariant(variant)
+        {isCodeComponentOrStyleVariant(variant)
           ? `Change ${VARIANT_LOWER} selectors`
           : `Rename ${VARIANT_LOWER}`}
       </Menu.Item>
@@ -175,7 +177,7 @@ export const StyleVariantEditor = observer(function StyleVariantEditor_({
         if (
           (isCodeComponentVariant(variant) &&
             variant.codeComponentVariantKeys?.length === 0) ||
-          (isStyleVariant(variant) && variant.selectors?.length === 0)
+          (isStyleVariant(variant) && variant.selectors.length === 0)
         ) {
           spawn(studioCtx.siteOps().removeVariant(component, variant));
         }
@@ -239,7 +241,7 @@ export const StyleVariantLabel = observer(forwardRef(StyleVariantLabel_));
 function StyleVariantLabel_(
   props: {
     defaultEditing?: boolean;
-    variant: RegisteredVariant;
+    variant: CodeComponentOrStyleVariant;
     forTag: string;
     onSelectorsChange: (selectors: Selector[]) => void;
     onBlur?: () => void;

diff --git a/platform/wab/src/wab/client/components/canvas/CanvasFrame/CanvasHeader.tsx b/platform/wab/src/wab/client/components/canvas/CanvasFrame/CanvasHeader.tsx
@@ -24,7 +24,7 @@ import {
 } from "@/wab/shared/Arenas";
 import {
   getDisplayVariants,
-  isRegisteredVariant,
+  isCodeComponentOrStyleVariant,
   StyleVariant,
 } from "@/wab/shared/Variants";
 import { cx } from "@/wab/shared/common";
@@ -215,7 +215,7 @@ export const VariantName = observer(function VariantName_({
             variant,
             component,
             onRequestEditing: () => {
-              if (isRegisteredVariant(variant)) {
+              if (isCodeComponentOrStyleVariant(variant)) {
                 setShowStyleVariantEditor(true);
               } else {
                 variantLabelRef.current?.setEditing(true);
@@ -226,7 +226,7 @@ export const VariantName = observer(function VariantName_({
       }}
     >
       <MaybeWrap
-        cond={isRegisteredVariant(variant)}
+        cond={isCodeComponentOrStyleVariant(variant)}
         wrapper={(children) => (
           <Popover
             placement="left"

diff --git a/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantBadge.tsx b/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantBadge.tsx
@@ -12,7 +12,10 @@ import {
 } from "@/wab/client/plasmic/plasmic_kit_variants_bar/PlasmicVariantBadge";
 import { useStudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
 import { MaybeWrap } from "@/wab/commons/components/ReactUtil";
-import { isRegisteredVariant, StyleVariant } from "@/wab/shared/Variants";
+import {
+  isCodeComponentOrStyleVariant,
+  StyleVariant,
+} from "@/wab/shared/Variants";
 import { Component, Variant } from "@/wab/shared/model/classes";
 import { Popover } from "antd";
 import { observer } from "mobx-react";
@@ -41,7 +44,7 @@ const VariantBadge = observer(function VariantBadge_({
 
   useLayoutEffect(() => {
     if (studioCtx.latestVariantCreated === variant) {
-      if (isRegisteredVariant(variant)) {
+      if (isCodeComponentOrStyleVariant(variant)) {
         setShowStyleVariantEditor(true);
       } else {
         variantLabelRef.current?.setEditing(true);
@@ -68,7 +71,7 @@ const VariantBadge = observer(function VariantBadge_({
               variant,
               component,
               onRequestEditing: () => {
-                if (isRegisteredVariant(variant)) {
+                if (isCodeComponentOrStyleVariant(variant)) {
                   setShowStyleVariantEditor(true);
                 } else {
                   variantLabelRef.current?.setEditing(true);
@@ -86,7 +89,7 @@ const VariantBadge = observer(function VariantBadge_({
       }}
     >
       <MaybeWrap
-        cond={isRegisteredVariant(variant)}
+        cond={isCodeComponentOrStyleVariant(variant)}
         wrapper={(children) => (
           <Popover
             placement="left"

diff --git a/platform/wab/src/wab/client/components/canvas/canvas-rendering.ts b/platform/wab/src/wab/client/components/canvas/canvas-rendering.ts
@@ -48,12 +48,12 @@ import {
   VariantCombo,
   getActiveVariantSettings,
   isBaseVariant,
+  isCodeComponentOrStyleVariant,
   isCodeComponentVariant,
   isDisabledPseudoSelectorVariantForTpl,
   isGlobalVariant,
   isMaybeInteractiveCodeComponentVariant,
   isPseudoElementVariantForTpl,
-  isRegisteredVariant,
   isScreenVariant,
   variantHasPrivatePseudoElementSelector,
 } from "@/wab/shared/Variants";
@@ -704,7 +704,7 @@ const mkTriggers = computedFn(
           activeVariants: new Set([
             ...ctx.activeVariants.keys(),
             ...component.variants.filter((variant) => {
-              if (!isRegisteredVariant(variant)) {
+              if (!isCodeComponentOrStyleVariant(variant)) {
                 return false;
               }
               // We include the style variants dynamically here to handle changes that require JS

diff --git a/platform/wab/src/wab/client/components/canvas/site-ops.tsx b/platform/wab/src/wab/client/components/canvas/site-ops.tsx
@@ -48,7 +48,6 @@ import {
   isGlobalVariantGroup,
   isScreenVariantGroup,
   isStandaloneVariantGroup,
-  isStyleVariant,
   makeVariantName,
   removeTplVariantSettings,
   removeTplVariantSettingsContaining,
@@ -567,9 +566,7 @@ export class SiteOps {
   ) {
     const usingComps = !component
       ? findComponentsUsingGlobalVariant(this.site, variant)
-      : !isStyleVariant(variant)
-      ? findComponentsUsingComponentVariant(this.site, component, variant)
-      : new Set<Component>();
+      : findComponentsUsingComponentVariant(this.site, component, variant);
     if (opts.confirm === "always" || usingComps.size > 0) {
       return await reactConfirm({
         title: (
@@ -1399,9 +1396,7 @@ export class SiteOps {
     await this.studioCtx.changeObserved(
       () => {
         return Array.from(
-          !isStyleVariant(variant)
-            ? findComponentsUsingComponentVariant(this.site, component, variant)
-            : new Set<Component>()
+          findComponentsUsingComponentVariant(this.site, component, variant)
         );
       },
       ({ success }) => {
@@ -1494,11 +1489,14 @@ export class SiteOps {
     );
   }
 
-  removeRegisteredVariantIfEmptyAndUnused(
+  removeCodeComponentOrStyleVariantIfEmptyAndUnused(
     component: Component,
     variant: Variant
   ) {
-    this.tplMgr.removeRegisteredVariantIfEmptyAndUnused(component, variant);
+    this.tplMgr.removeCodeComponentOrStyleVariantIfEmptyAndUnused(
+      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()
-                          .removeRegisteredVariantIfEmptyAndUnused(
+                          .removeCodeComponentOrStyleVariantIfEmptyAndUnused(
                             component,
                             variant
                           );

diff --git a/platform/wab/src/wab/client/components/sidebar/RuleSetControls.tsx b/platform/wab/src/wab/client/components/sidebar/RuleSetControls.tsx
@@ -9,9 +9,9 @@ import {
 } from "@/wab/shared/core/styles";
 import { Site } from "@/wab/shared/model/classes";
 import {
+  CodeComponentOrStyleVariant,
   isCodeComponentVariant,
   isStyleVariant,
-  RegisteredVariant,
 } from "@/wab/shared/Variants";
 import { Tooltip } from "antd";
 import { default as React, useLayoutEffect, useState } from "react";
@@ -87,7 +87,7 @@ function areSelectorsEqual(a: Selector, b: Selector) {
  * TODO: write migration so code components use key, presets use selector
  */
 export function styleVariantToSelectors(
-  variant: RegisteredVariant,
+  variant: CodeComponentOrStyleVariant,
   site: Site
 ): Selector[] {
   if (isCodeComponentVariant(variant)) {

diff --git a/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx b/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx
@@ -50,7 +50,7 @@ import {
 } from "@/wab/shared/model/classes";
 import { VariantOptionsType } from "@/wab/shared/TplMgr";
 import {
-  canHaveRegisteredVariant,
+  canHaveCodeComponentOrStyleVariant,
   isGlobalVariantGroup,
   isScreenVariantGroup,
   isStandaloneVariantGroup,
@@ -229,7 +229,7 @@ export const ComponentArenaLayout = observer(
           rowEndControls={(row) => {
             const group = ensureMaybeKnownVariantGroup(row.rowKey);
             if (!group) {
-              if (!canHaveRegisteredVariant(component)) {
+              if (!canHaveCodeComponentOrStyleVariant(component)) {
                 return null;
               }
               return (

diff --git a/platform/wab/src/wab/client/components/style-controls/DefinedIndicator.tsx b/platform/wab/src/wab/client/components/style-controls/DefinedIndicator.tsx
@@ -69,6 +69,7 @@ import { VariantedStylesHelper } from "@/wab/shared/VariantedStylesHelper";
 import {
   clearVariantSetting,
   isBaseVariant,
+  isCodeComponentVariant,
   isDefaultIgnorableStyleValue,
   isGlobalVariant,
   isPrivateStyleVariant,
@@ -93,12 +94,16 @@ export const variantComboName = (combo: VariantCombo) => {
       return `element:${ensure(
         variant.selectors,
         "style variants have selectors"
-      ).join(":")}`;
+      ).join(", ")}`;
     } else if (isStyleVariant(variant)) {
-      return `:${ensure(
-        variant.selectors,
-        "style variants have selectors"
-      ).join(":")}`;
+      return `${ensure(variant.selectors, "style variants have selectors").join(
+        ", "
+      )}`;
+    } else if (isCodeComponentVariant(variant)) {
+      return `${ensure(
+        variant.codeComponentVariantKeys,
+        "code component variants have keys"
+      ).join(", ")}`;
     } else if (isBaseVariant(variant)) {
       return "Base";
     } else {

diff --git a/platform/wab/src/wab/client/components/style-controls/OutlineControls.tsx b/platform/wab/src/wab/client/components/style-controls/OutlineControls.tsx
@@ -13,7 +13,7 @@ import MinusIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Minus";
 import PlusIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Plus";
 import { StandardMarkdown } from "@/wab/client/utils/StandardMarkdown";
 import { TokenType } from "@/wab/commons/StyleToken";
-import { hasStyleVariant } from "@/wab/shared/Variants";
+import { isCodeComponentOrStyleVariant } from "@/wab/shared/Variants";
 import { ensure } from "@/wab/shared/common";
 import { Alert } from "antd";
 import { observer } from "mobx-react";
@@ -48,9 +48,10 @@ export const OutlinePanelSection = observer(function OutlinePanelSection() {
     studioCtx.focusedViewCtx(),
     "Expected view ctx to exist"
   );
-  const isStyleVariantTargeted = hasStyleVariant(
-    viewCtx.variantTplMgr().getCurrentVariantCombo()
-  );
+  const isCodeComponentOrStyleVariantTargeted = viewCtx
+    .variantTplMgr()
+    .getCurrentVariantCombo()
+    .some(isCodeComponentOrStyleVariant);
 
   const onClick = async () => {
     if (isVisible) {
@@ -83,7 +84,7 @@ export const OutlinePanelSection = observer(function OutlinePanelSection() {
     >
       {isVisible && (
         <>
-          {!isStyleVariantTargeted && (
+          {!isCodeComponentOrStyleVariantTargeted && (
             <Alert
               className="mb-lg"
               message={

diff --git a/platform/wab/src/wab/client/components/top-bar/VariantsComboSelect.tsx b/platform/wab/src/wab/client/components/top-bar/VariantsComboSelect.tsx
@@ -9,8 +9,8 @@ import { ensure, xGroupBy } from "@/wab/shared/common";
 import {
   getAllVariantsForTpl,
   isBaseVariant,
+  isCodeComponentOrStyleVariant,
   isPrivateStyleVariant,
-  isRegisteredVariant,
   isScreenVariant,
   isStandaloneVariant,
 } from "@/wab/shared/Variants";
@@ -47,7 +47,7 @@ const VariantsComboSelect = observer(function VariantsComboSelect(
     site: studioCtx.site,
   }).filter(
     (v) =>
-      !isRegisteredVariant(v) &&
+      !isCodeComponentOrStyleVariant(v) &&
       !isScreenVariant(v) &&
       !isPrivateStyleVariant(v) &&
       !isBaseVariant(v)

diff --git a/platform/wab/src/wab/client/components/top-bar/VariantsMenu.tsx b/platform/wab/src/wab/client/components/top-bar/VariantsMenu.tsx
@@ -14,9 +14,8 @@ import { VARIANTS_LOWER } from "@/wab/shared/Labels";
 import {
   getAllVariantsForTpl,
   isBaseVariant,
-  isPrivateStyleVariant,
+  isCodeComponentOrStyleVariant,
   isScreenVariant,
-  isStyleVariant,
 } from "@/wab/shared/Variants";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -148,9 +147,8 @@ function VariantsMenu_({
         site: studioCtx.site,
       }).filter(
         (v) =>
-          !isStyleVariant(v) &&
+          !isCodeComponentOrStyleVariant(v) &&
           !isScreenVariant(v) &&
-          !isPrivateStyleVariant(v) &&
           !isBaseVariant(v) &&
           uuidSet.has(v.uuid)
       );

diff --git a/platform/wab/src/wab/client/components/variants/VariantSection.tsx b/platform/wab/src/wab/client/components/variants/VariantSection.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/wab/client/plasmic/plasmic_kit_variants/PlasmicVariantSection";
 import { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
 import { ViewCtx } from "@/wab/client/studio-ctx/view-ctx";
-import { isStyleVariant } from "@/wab/shared/Variants";
+import { isCodeComponentOrStyleVariant } from "@/wab/shared/Variants";
 import { spawn } from "@/wab/shared/common";
 import { isTplCodeComponent } from "@/wab/shared/core/tpls";
 import { Component, Variant } from "@/wab/shared/model/classes";
@@ -183,7 +183,7 @@ export function makeReadOnlySection(opts: {
               : undefined
           }
           label={
-            isStyleVariant(variant) ? (
+            isCodeComponentOrStyleVariant(variant) ? (
               <SelectorTags
                 isCodeComponent={isTplCodeComponent(component?.tplTree)}
                 selectors={styleVariantToSelectors(variant, studioCtx.site)}