Designer: Fix plugin data format and handling for remote components (#283)

Author: bheston

.changeset/olive-jokes-warn.md

@@ -0,0 +1,6 @@
+---
+"@adaptive-web/adaptive-ui-designer-figma": patch
+"@adaptive-web/adaptive-ui-designer-core": patch
+---
+
+Fix plugin data storage

.vscode/settings.json

@@ -26,6 +26,7 @@
         "Lrgb",
         "okhsl",
         "tablist",
+        "tslog",
         "Unregisters"
     ],
     "editor.insertSpaces": true,

package-lock.json

@@ -35,9 +35,10 @@
   "dependencies": {
     "@adaptive-web/adaptive-ui": "^0.13.0",
     "@microsoft/fast-foundation": "^3.0.0-alpha.31",
-    "@types/culori": "^2.0.0"
+    "tslog": "^4.10.2"
   },
   "devDependencies": {
+    "@types/culori": "^2.0.0",
     "rimraf": "^3.0.2",
     "typescript": "^5.4.5"
   }

packages/adaptive-ui-designer-core/package.json

@@ -25,6 +25,11 @@ export abstract class Controller {
      */
     public static nodeCount: number = 0;
 
+    /**
+     * Resets the node cache.
+     */
+    public abstract resetNodeCache(): Promise<void>;
+
     /**
      * Gets a Node from the design tool by ID.
      * @param id - The ID of the node.
@@ -77,6 +82,8 @@ export abstract class Controller {
     }
 
     private async getPluginUIState(ids: string[]): Promise<PluginUIState> {
+        await this.resetNodeCache();
+
         const nodes = await Promise.all(ids
             .map(async id => await this.getNode(id))
         );

packages/adaptive-ui-designer-core/src/controller.ts

@@ -1,4 +1,5 @@
 export { Controller, PluginUIState, STYLE_REMOVE } from "./controller.js";
+export { getLogger, indent } from "./logger.js";
 export {
     Config,
     PluginNodeData,

packages/adaptive-ui-designer-core/src/index.ts

@@ -0,0 +1,48 @@
+import { IMeta, Logger } from "tslog";
+
+let loggerInstance: Logger<unknown> | null = null;
+
+export const getLogger = (): Logger<unknown> => {
+    if (!loggerInstance) {
+        loggerInstance = new Logger({
+            name: "Adaptive UI Designer",
+            stylePrettyLogs: false,
+            prettyLogTemplate: "{{dateIsoStr}}\t{{name}}\t",
+            prettyErrorTemplate: "{{errorName}}: {{errorMessage}}",
+            minLevel: 3,  // 0: silly, 1: trace, 2: debug, 3: info, 4: warn, 5: error, 6: fatal
+            overwrite: {
+                addPlaceholders: (logObjMeta: IMeta, placeholderValues: Record<string, string | number>) => {
+                    if (logObjMeta.name) {
+                        placeholderValues["name"] = logObjMeta.name.substring(0, 20).padEnd(20);
+                    }
+                },
+                transportFormatted: (logMetaMarkup, logArgs, logErrors, logMeta) => {
+                    // Send different log levels to appropriate console methods
+                    const logLevel = logMeta?.logLevelName ?? logMetaMarkup.trim().split("\t")[1];
+                    switch (logLevel) {
+                        case "WARN":
+                            console.warn(logMetaMarkup, ...logArgs, ...logErrors);
+                            break;
+                        case "ERROR":
+                        case "FATAL":
+                            console.error(logMetaMarkup, ...logArgs, ...logErrors);
+                            break;
+                        case "INFO":
+                            // In the console log, errors and warnings show a stack trace behind an arrow, so indent to align with that.
+                            console.info("  " + logMetaMarkup, ...logArgs, ...logErrors);
+                            break;
+                        case "DEBUG":
+                        case "TRACE":
+                        case "SILLY":
+                        default:
+                            console.log("  " + logMetaMarkup, ...logArgs, ...logErrors);
+                            break;
+                    }
+                }
+            }
+        });
+    }
+    return loggerInstance;
+};
+
+export const indent = (level: number) => "  ".repeat(level);

packages/adaptive-ui-designer-core/src/logger.ts

@@ -136,14 +136,14 @@ export interface PluginNodeData {
     designTokens: DesignTokenValues;
 
     /**
-     * Style modules applied to the node.
+     * Token + value pairs applied to the style of a node, evaluated from local and inherited design tokens.
      */
-    appliedStyleModules: AppliedStyleModules;
+    appliedDesignTokens: AppliedDesignTokens;
 
     /**
-     * Token + value pairs applied to the style of a node, evaluated from local and inherited design tokens.
+     * Style modules applied to the node.
      */
-    appliedDesignTokens: AppliedDesignTokens;
+    appliedStyleModules: AppliedStyleModules;
 }
 
 /**
@@ -181,19 +181,19 @@ export interface PluginUINodeData extends PluginNodeData {
     inheritedDesignTokens: ReadonlyDesignTokenValues;
 
     /**
-     * The design token values inherited by an instance node from the main component.
+     * The design token values from the chain of reference nodes, like the main component for an instance node.
      */
-    componentDesignTokens?: ReadonlyDesignTokenValues;
+    refDesignTokens?: ReadonlyDesignTokenValues;
 
     /**
-     * Applied style modules inherited by an instance node from the main component.
+     * Applied style modules from the chain of reference nodes, like the main component for an instance node.
      */
-    componentAppliedStyleModules?: ReadonlyAppliedStyleModules;
+    refAppliedStyleModules?: ReadonlyAppliedStyleModules;
 
     /**
-     * Applied design tokens inherited by an instance node from the main component.
+     * Applied design tokens from the chain of reference nodes, like the main component for an instance node.
      */
-    componentAppliedDesignTokens?: ReadonlyAppliedDesignTokens;
+    refAppliedDesignTokens?: ReadonlyAppliedDesignTokens;
 
     /**
      * The resultant set of effective applied design tokens and values that need to be updated
@@ -228,13 +228,13 @@ export const pluginNodesToUINodes = async (
                 supports: await node.getSupports(),
                 additionalData: await node.getAdditionalData(),
                 inheritedDesignTokens,
-                componentDesignTokens: node.componentDesignTokens,
-                componentAppliedStyleModules: node.componentAppliedStyleModules,
-                componentAppliedDesignTokens: node.componentAppliedDesignTokens,
+                refDesignTokens: node.refDesignTokens,
+                refAppliedStyleModules: node.refAppliedStyleModules,
+                refAppliedDesignTokens: node.refAppliedDesignTokens,
                 effectiveAppliedStyleValues: new AppliedStyleValues(),
                 children,
                 config: node.config,
-                designTokens: node.localDesignTokens as DesignTokenValues,
+                designTokens: node.designTokens as DesignTokenValues,
                 appliedStyleModules: node.appliedStyleModules as AppliedStyleModules,
                 appliedDesignTokens: node.appliedDesignTokens as AppliedDesignTokens,
             };