AUI state bug fix (#263)

* Fix a style generation bug on placement of state selector
* Performance setting default update

Author: bheston

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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<FigmaPluginNode | null> {
         const node = await figma.getNodeByIdAsync(id);
         if (node) {

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,

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",

packages/adaptive-ui/docs/api-report.md

@@ -628,6 +628,8 @@ export interface SerializableStyleRule {
     // (undocumented)
     properties?: Record<string, string>;
     // (undocumented)
+    stateOnContext?: boolean;
+    // (undocumented)
     styles?: string[];
 }
 

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),
             };
 

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 =<T>(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<any, any>) {
         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) {

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<string, string | boolean>;
     part?: string,
     styles?: string[],