From 879caa2988eba644435898dcc9b289b9c6425ce6 Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Mon, 7 Jul 2025 13:21:23 -0700 Subject: [PATCH 1/3] Fix a style generation bug on placement of state selector --- packages/adaptive-ui/docs/api-report.md | 2 ++ packages/adaptive-ui/src/bin/aui.ts | 1 + .../core/modules/element-styles-renderer.ts | 18 ++++++++++++++++-- packages/adaptive-ui/src/core/modules/types.ts | 1 + 4 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/adaptive-ui/docs/api-report.md b/packages/adaptive-ui/docs/api-report.md index 43377e88..ac28fcc8 100644 --- a/packages/adaptive-ui/docs/api-report.md +++ b/packages/adaptive-ui/docs/api-report.md @@ -628,6 +628,8 @@ export interface SerializableStyleRule { // (undocumented) properties?: Record; // (undocumented) + stateOnContext?: boolean; + // (undocumented) styles?: string[]; } diff --git a/packages/adaptive-ui/src/bin/aui.ts b/packages/adaptive-ui/src/bin/aui.ts index c8b6de71..d01e838d 100644 --- a/packages/adaptive-ui/src/bin/aui.ts +++ b/packages/adaptive-ui/src/bin/aui.ts @@ -305,6 +305,7 @@ function jsonToAUIStyleSheet(obj: SerializableAnatomy): AUIStyleSheet { const target: StyleModuleTarget = { context: obj.context, contextCondition: createCondition(obj, style), + stateOnContext: style.stateOnContext, part: resolvePart(obj, style.part), }; diff --git a/packages/adaptive-ui/src/core/modules/element-styles-renderer.ts b/packages/adaptive-ui/src/core/modules/element-styles-renderer.ts index 48747d92..dd4e0aeb 100644 --- a/packages/adaptive-ui/src/core/modules/element-styles-renderer.ts +++ b/packages/adaptive-ui/src/core/modules/element-styles-renderer.ts @@ -8,6 +8,19 @@ import type { ComponentAnatomy, StyleModuleEvaluateParameters, StyleRules } from import { stylePropertyToCssProperty } from "./css.js"; import { convertStylesToFocusState, Styles } from "./styles.js"; +const deepFreeze =(obj: T): T => { + if (obj && typeof obj === "object" && !Object.isFrozen(obj)) { + Object.getOwnPropertyNames(obj).forEach((prop) => { + const value = (obj as any)[prop]; + if (value && typeof value === "object") { + deepFreeze(value); + } + }); + Object.freeze(obj); + } + return obj; +} + /** * The properties and values of a css declaration. */ @@ -160,7 +173,7 @@ export class ElementStylesRenderer { */ public render(target: StyleModuleTarget, interactivity?: InteractivityDefinition): ElementStyles { // Construct the evaluation params, not including interactivity if requested - const effectiveInteractivity = interactivity || {}; + const effectiveInteractivity = { ...(interactivity || {}) }; if (target.ignoreInteractivity === true) { Object.assign(effectiveInteractivity, Interactivity.always); } @@ -240,6 +253,7 @@ export class ElementStylesRenderer { public static renderStyleRules(baseStyles: ComposableStyles[] = [], styleRules: StyleRules, anatomy?: ComponentAnatomy) { const globalStyleRules: StyleRules = []; if (anatomy) { + anatomy = deepFreeze(anatomy); // If this component can be disabled, apply the style to all children. if (ElementStylesRenderer.disabledStyles && anatomy.interactivity?.disabled !== undefined) { // Focus and disabled are related in the way that they define the footprint of an indicator: @@ -292,7 +306,7 @@ export class ElementStylesRenderer { const styles = Styles.fromDeclaration(rule); // Transform the target selector if necessary - const target = rule.target || {} as StyleModuleTarget; + const target = { ...(rule.target || {}) } as StyleModuleTarget; if (anatomy?.context && target.context === undefined) { target.context = anatomy.context; if (anatomy.context === target.part) { diff --git a/packages/adaptive-ui/src/core/modules/types.ts b/packages/adaptive-ui/src/core/modules/types.ts index 883ff437..dc4dd3f5 100644 --- a/packages/adaptive-ui/src/core/modules/types.ts +++ b/packages/adaptive-ui/src/core/modules/types.ts @@ -508,6 +508,7 @@ export type SerializableCondition = SerializableBooleanCondition | SerializableS * @beta */ export interface SerializableStyleRule { + stateOnContext?: boolean; contextCondition?: Record; part?: string, styles?: string[], From 05f9ca60e794f1e33d71ee5fb4015419723c3f45 Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Mon, 7 Jul 2025 13:21:56 -0700 Subject: [PATCH 2/3] Performance setting default update --- .../src/figma/controller.ts | 7 +++++++ .../adaptive-ui-designer-figma-plugin/src/figma/main.ts | 4 ---- packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/adaptive-ui-designer-figma-plugin/src/figma/controller.ts b/packages/adaptive-ui-designer-figma-plugin/src/figma/controller.ts index be9977ca..b2bd4938 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/figma/controller.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/figma/controller.ts @@ -4,6 +4,13 @@ import type { PluginMessage} from "../core/messages.js"; import { FigmaPluginNode } from "./node.js"; export class FigmaController extends Controller { + constructor() { + super(); + + // Ignore invisible nodes for performance by default. There is a setting in the UI to toggle this. + figma.skipInvisibleInstanceChildren = true; + } + public async getNode(id: string): Promise { const node = await figma.getNodeByIdAsync(id); if (node) { diff --git a/packages/adaptive-ui-designer-figma-plugin/src/figma/main.ts b/packages/adaptive-ui-designer-figma-plugin/src/figma/main.ts index 9a2b77f7..4257e564 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/figma/main.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/figma/main.ts @@ -4,10 +4,6 @@ import { FigmaController } from "./controller.js"; const controller = new FigmaController(); -// Ignore invisible nodes for performance, which means if someone turns them back to visible they may need to run the plugin again. -// Update: With a reasonable number of invisible nodes the speed is no longer intolerable. Better to make sure styling is current. -// figma.skipInvisibleInstanceChildren = true; - figma.showUI(__html__, { height: 600, width: 356, diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts index dfc6b188..f121ea95 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts @@ -653,7 +653,7 @@ export class App extends FASTElement { } @observable - public skipInvisibleNodes: boolean = false; + public skipInvisibleNodes: boolean = true; protected skipInvisibleNodesChanged(prev: boolean, next: boolean) { const message: SkipInvisibleNodesMessage = { type: "SKIP_INVISIBLE_NODES", From c4b380767f6133836da102a3ca1763d6e7dc670c Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Mon, 7 Jul 2025 13:28:31 -0700 Subject: [PATCH 3/3] Change files --- ...b-adaptive-ui-296ddcb4-ce1d-4ec7-80b5-106cc55a112b.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@adaptive-web-adaptive-ui-296ddcb4-ce1d-4ec7-80b5-106cc55a112b.json diff --git a/change/@adaptive-web-adaptive-ui-296ddcb4-ce1d-4ec7-80b5-106cc55a112b.json b/change/@adaptive-web-adaptive-ui-296ddcb4-ce1d-4ec7-80b5-106cc55a112b.json new file mode 100644 index 00000000..103558d5 --- /dev/null +++ b/change/@adaptive-web-adaptive-ui-296ddcb4-ce1d-4ec7-80b5-106cc55a112b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Fix a style generation bug on placement of state selector", + "packageName": "@adaptive-web/adaptive-ui", + "email": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "patch" +}