Big fat Christmas refactoring (#148)

* WIP

* Fix type error

* Fixed outstanding ts errors

* fixed all ts errors

* Added tsconfig to root which enables errors in VS Code for the project

* Removed unused files

* tsc no longer checks node_modules

* removed unused code & description component

* added messaging module

* refactoring messaging

* Reworked messaging on the frontend

* Renamed preferences to settings for consistency

* split types for conversion

Author: mimshwright

apps/debug/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

apps/debug/package.json

@@ -25,6 +25,7 @@
     "postcss": "^8.4.49",
     "tailwindcss": "3.4.6",
     "tsconfig": "workspace:*",
+    "types": "workspace:*",
     "typescript": "^5.7.2"
   }
 }

apps/debug/pages/index.tsx

@@ -1,5 +1,6 @@
-import { FrameworkTypes, PluginUI } from "plugin-ui";
+import { FrameworkTypes } from "types";
 import * as React from "react";
+import { PluginUI } from "plugin-ui";
 
 export default function Web() {
   const [selectedFramework, setSelectedFramework] =
@@ -22,8 +23,8 @@ export default function Web() {
               selectedFramework={selectedFramework}
               setSelectedFramework={setSelectedFramework}
               htmlPreview={null}
-              preferences={undefined}
-              onPreferenceChange={() => {}}
+              settings={undefined}
+              onPreferenceChanged={() => {}}
               colors={[]}
               gradients={[]}
             />
@@ -39,8 +40,8 @@ export default function Web() {
               setSelectedFramework={setSelectedFramework}
               emptySelection={false}
               htmlPreview={null}
-              preferences={undefined}
-              onPreferenceChange={() => {}}
+              settings={undefined}
+              onPreferenceChanged={() => {}}
               colors={[]}
               gradients={[]}
             />

apps/plugin/package.json

@@ -34,6 +34,7 @@
     "tailwindcss": "3.4.6",
     "tsconfig": "workspace:*",
     "typescript": "^5.7.2",
+    "types": "workspace:*",
     "vite": "^5.4.11",
     "vite-plugin-singlefile": "^2.1.0"
   }

apps/plugin/plugin-src/code.ts

@@ -6,12 +6,13 @@ import {
   swiftuiMain,
   convertIntoNodes,
   htmlMain,
-  PluginSettings,
+  postSettingsChanged,
 } from "backend";
 import { retrieveGenericSolidUIColors } from "backend/src/common/retrieveUI/retrieveColors";
 import { flutterCodeGenTextStyles } from "backend/src/flutter/flutterMain";
 import { htmlCodeGenTextStyles } from "backend/src/html/htmlMain";
 import { swiftUICodeGenTextStyles } from "backend/src/swiftui/swiftuiMain";
+import { PluginSettings, SettingWillChangeMessage } from "types";
 
 let userPluginSettings: PluginSettings;
 
@@ -58,11 +59,7 @@ const getUserSettings = async () => {
 
 const initSettings = async () => {
   await getUserSettings();
-  figma.ui.postMessage({
-    type: "pluginSettingChanged",
-    data: userPluginSettings,
-  });
-
+  postSettingsChanged(userPluginSettings);
   safeRun(userPluginSettings);
 };
 
@@ -71,19 +68,17 @@ const safeRun = (settings: PluginSettings) => {
     run(settings);
   } catch (e) {
     if (e && typeof e === "object" && "message" in e) {
-      console.log("error: ", (e as any).stack);
-      figma.ui.postMessage({
-        type: "error",
-        data: e.message,
-      });
+      const error = e as Error;
+      console.log("error: ", error.stack);
+      figma.ui.postMessage({ type: "error", error: error.message });
     }
   }
 };
 
 const standardMode = async () => {
   figma.showUI(__html__, { width: 450, height: 550, themeColors: true });
   await initSettings();
-  
+
   // Listen for selection changes
   figma.on("selectionchange", () => {
     safeRun(userPluginSettings);
@@ -97,13 +92,10 @@ const standardMode = async () => {
   figma.ui.onmessage = (msg) => {
     console.log("[node] figma.ui.onmessage", msg);
 
-    if (msg.type === "pluginSettingChanged") {
-      (userPluginSettings as any)[msg.key] = msg.value;
+    if (msg.type === "pluginSettingWillChange") {
+      const { key, value } = msg as SettingWillChangeMessage<unknown>;
+      (userPluginSettings as any)[key] = value;
       figma.clientStorage.setAsync("userPluginSettings", userPluginSettings);
-      // figma.ui.postMessage({
-      //   type: "pluginSettingChanged",
-      //   data: userPluginSettings,
-      // });
       safeRun(userPluginSettings);
     }
   };

apps/plugin/ui-src/App.tsx

@@ -1,32 +1,36 @@
 import { useEffect, useState } from "react";
-import { FrameworkTypes, PluginSettings, PluginUI } from "plugin-ui";
+import { PluginUI } from "plugin-ui";
+import {
+  FrameworkTypes,
+  PluginSettings,
+  ConversionMessage,
+  Message,
+  HTMLPreview,
+  LinearGradientConversion,
+  SolidColorConversion,
+  ErrorMessage,
+  SettingsChangedMessage,
+} from "types";
+import { postUISettingsChangingMessage } from "./messaging";
 
 interface AppState {
   code: string;
-  selectedFramework: FrameworkTypes | null;
+  selectedFramework: FrameworkTypes;
   isLoading: boolean;
-  htmlPreview: {
-    size: { width: number; height: number };
-    content: string;
-  } | null;
-  preferences: PluginSettings | null;
-  colors: {
-    hex: string;
-    colorName: string;
-    exportValue: string;
-    contrastWhite: number;
-    contrastBlack: number;
-  }[];
-  gradients: { cssPreview: string; exportedValue: string }[];
+  htmlPreview: HTMLPreview;
+  settings: PluginSettings | null;
+  colors: SolidColorConversion[];
+  gradients: LinearGradientConversion[];
 }
 
+const emptyPreview = { size: { width: 0, height: 0 }, content: "" };
 export default function App() {
   const [state, setState] = useState<AppState>({
     code: "",
-    selectedFramework: null,
+    selectedFramework: "HTML",
     isLoading: false,
-    htmlPreview: null,
-    preferences: null,
+    htmlPreview: emptyPreview,
+    settings: null,
     colors: [],
     gradients: [],
   });
@@ -38,42 +42,47 @@ export default function App() {
 
   useEffect(() => {
     window.onmessage = (event: MessageEvent) => {
-      const message = event.data.pluginMessage;
-      console.log("[ui] message received:", message);
-      switch (message.type) {
+      const untypedMessage = event.data.pluginMessage as Message;
+      console.log("[ui] message received:", untypedMessage);
+
+      switch (untypedMessage.type) {
         case "code":
+          const conversionMessage = untypedMessage as ConversionMessage;
           setState((prevState) => ({
             ...prevState,
-            code: message.data,
-            htmlPreview: message.htmlPreview,
-            colors: message.colors,
-            gradients: message.gradients,
-            preferences: message.preferences,
-            selectedFramework: message.preferences.framework,
+            ...conversionMessage,
+            selectedFramework: conversionMessage.settings.framework,
           }));
           break;
+
         case "pluginSettingChanged":
+          const settingsMessage = untypedMessage as SettingsChangedMessage;
           setState((prevState) => ({
             ...prevState,
-            preferences: message.data,
-            selectedFramework: message.data.framework,
+            settings: settingsMessage.settings,
+            selectedFramework: settingsMessage.settings.framework,
           }));
           break;
+
         case "empty":
+          // const emptyMessage = untypedMessage as EmptyMessage;
           setState((prevState) => ({
             ...prevState,
             code: "// No layer is selected.",
-            htmlPreview: null,
+            htmlPreview: emptyPreview,
             colors: [],
             gradients: [],
           }));
           break;
+
         case "error":
+          const errorMessage = untypedMessage as ErrorMessage;
+
           setState((prevState) => ({
             ...prevState,
             colors: [],
             gradients: [],
-            code: `Error :(\n// ${message.data}`,
+            code: `Error :(\n// ${errorMessage.error}`,
           }));
           break;
         default:
@@ -112,17 +121,9 @@ export default function App() {
       // code: "// Loading...",
       selectedFramework: updatedFramework,
     }));
-
-    parent.postMessage(
-      {
-        pluginMessage: {
-          type: "pluginSettingChanged",
-          key: "framework",
-          value: updatedFramework,
-        },
-      },
-      "*",
-    );
+    postUISettingsChangingMessage("framework", updatedFramework, {
+      targetOrigin: "*",
+    });
   };
   console.log("state.code", state.code.slice(0, 25));
 
@@ -134,24 +135,12 @@ export default function App() {
         selectedFramework={state.selectedFramework}
         setSelectedFramework={handleFrameworkChange}
         htmlPreview={state.htmlPreview}
-        preferences={state.preferences}
-        onPreferenceChange={(key: string, value: boolean | string) => {
-          parent.postMessage(
-            {
-              pluginMessage: {
-                type: "pluginSettingChanged",
-                key: key,
-                value: value,
-              },
-            },
-            "*",
-          );
-        }}
+        settings={state.settings}
+        onPreferenceChanged={(key: string, value: boolean | string) =>
+          postUISettingsChangingMessage(key, value, { targetOrigin: "*" })
+        }
         colors={state.colors}
-        gradients={state.gradients.map((gradient) => ({
-          ...gradient,
-          exportValue: gradient.exportedValue,
-        }))}
+        gradients={state.gradients}
       />
     </div>
   );

apps/plugin/ui-src/messaging.ts

@@ -0,0 +1,25 @@
+import { Message, SettingWillChangeMessage, UIMessage } from "types";
+
+if (!parent || !parent.postMessage) {
+  throw new Error("parent.postMessage() is not defined");
+}
+const postMessage = (message: UIMessage, options?: WindowPostMessageOptions) =>
+  parent.postMessage(message, options);
+
+export const postUIMessage = (
+  message: Message,
+  options?: WindowPostMessageOptions,
+) => postMessage({ pluginMessage: message }, options);
+
+export const postUISettingsChangingMessage = <T>(
+  key: string,
+  value: T,
+  options?: WindowPostMessageOptions,
+) => {
+  const message: SettingWillChangeMessage<T> = {
+    type: "pluginSettingWillChange",
+    key,
+    value,
+  };
+  postUIMessage(message, options);
+};

package.json

@@ -13,6 +13,7 @@
     "eslint": "^9.17.0",
     "eslint-config-custom": "workspace:*",
     "prettier": "^3.4.2",
-    "turbo": "^2.3.3"
+    "turbo": "^2.3.3",
+    "typescript": "^5.7.2"
   }
 }

packages/backend/package.json

@@ -15,7 +15,8 @@
   "dependencies": {
     "@figma/plugin-typings": "^1.105.0",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "types": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^18.3.17",