diff --git a/.eslintrc.js b/.eslintrc.js index ec0246fae3d..69bdc79c15f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -222,7 +222,7 @@ module.exports = { "platform/wab/src/wab/main.tsx", ], rules: { - "@typescript-eslint/switch-exhaustiveness-check": "off", + "@typescript-eslint/switch-exhaustiveness-check": "error", "no-shadow": "off", "no-extra-boolean-cast": "off", "@typescript-eslint/no-shadow": "error", diff --git a/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx b/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx index 1102c03d71e..a2dfeef2454 100644 --- a/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx +++ b/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx @@ -21,14 +21,15 @@ import { ensureCustomFrameForActivatedVariants, getFrameHeight, } from "@/wab/shared/Arenas"; +import { isTplRootWithCodeComponentVariants } from "@/wab/shared/code-components/variants"; import { maybe, spawn } from "@/wab/shared/common"; import { getComponentArenaRowLabel } from "@/wab/shared/component-arenas"; import { allComponentVariants, getSuperComponentVariantGroupToComponent, - hasCodeComponentRoot, } from "@/wab/shared/core/components"; import { allGlobalVariantGroups } from "@/wab/shared/core/sites"; +import { isTplCodeComponent } from "@/wab/shared/core/tpls"; import { COMBINATIONS_CAP, FRAME_LOWER, @@ -161,6 +162,7 @@ export const ComponentArenaLayout = observer( ); const vController = makeVariantsController(studioCtx); + const tplRoot = component.tplTree; return (
studioCtx.changeUnsafe(() => - hasCodeComponentRoot(component) + isTplCodeComponent(tplRoot) ? studioCtx .siteOps() - .createCodeComponentVariant(component) + .createCodeComponentVariant( + component, + tplRoot.component.name + ) : studioCtx.siteOps().createStyleVariant(component) ) } diff --git a/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx b/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx index 814eb7f599c..2cb1458e8f6 100644 --- a/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx +++ b/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx @@ -49,18 +49,19 @@ import { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx"; import { ViewCtx } from "@/wab/client/studio-ctx/view-ctx"; import { testIds } from "@/wab/client/test-helpers/test-ids"; import { findNonEmptyCombos } from "@/wab/shared/cached-selectors"; +import { isTplRootWithCodeComponentVariants } from "@/wab/shared/code-components/variants"; import { ensure, ensureInstance, partitions, spawn } from "@/wab/shared/common"; import { allComponentStyleVariants, allStyleOrCodeComponentVariants, getSuperComponents, - hasCodeComponentRoot, isPageComponent, } from "@/wab/shared/core/components"; import { isGlobalVariantGroupUsedInSplits, isVariantUsedInSplits, } from "@/wab/shared/core/splits"; +import { isTplCodeComponent } from "@/wab/shared/core/tpls"; import { ScreenSizeSpec } from "@/wab/shared/css-size"; import { Component, @@ -316,6 +317,8 @@ export const VariantsPanel = observer( return success(); }); + const tplRoot = component.tplTree; + return (
} title={ - hasCodeComponentRoot(component) + isTplRootWithCodeComponentVariants(tplRoot) ? "Registered Variants" : "Interaction Variants" } emptyAddButtonText="Add variant" emptyAddButtonTooltip={ - hasCodeComponentRoot(component) + isTplRootWithCodeComponentVariants(tplRoot) ? "Registered variants are registered in code component meta" : "Interaction variants are automatically activated when the user interacts with the component -- by hovering, focusing, pressing, etc." } onAddNewVariant={() => studioCtx.change(({ success }) => { - hasCodeComponentRoot(component) + isTplCodeComponent(tplRoot) ? studioCtx .siteOps() - .createCodeComponentVariant(component) + .createCodeComponentVariant( + component, + tplRoot.component.name + ) : studioCtx.siteOps().createStyleVariant(component); return success(); }) diff --git a/platform/wab/src/wab/shared/core/components.ts b/platform/wab/src/wab/shared/core/components.ts index f75d17b4146..97821765cfd 100644 --- a/platform/wab/src/wab/shared/core/components.ts +++ b/platform/wab/src/wab/shared/core/components.ts @@ -209,16 +209,6 @@ export interface CodeComponent extends Component { _meta?: ComponentRegistration /* Unset when DEVFLAGS.ccStubs is set */; } -export interface ComponentWithCodeComponentRoot extends Component { - tplTree: Tpls.TplCodeComponent; -} - -export function hasCodeComponentRoot( - component: Component -): component is ComponentWithCodeComponentRoot { - return Tpls.isTplCodeComponent(component.tplTree); -} - export function groupComponents(components: Component[]) { return { components: components.filter((it) => !isPageComponent(it) && it.name), @@ -271,6 +261,7 @@ function mkRawComponent(props: Omit) { } return component; } + /** * If variants includes the base variant, it must be at index 0. If it doesn't * include the base variant, a base variant will be automatically inserted at