Make figma project stricter (slint-ui#8461)

This tidies up some dead code and turns on a more stricter tsconfig to automate keeping the project this way.

Author: NigelBreslaw

tools/figma-inspector/README.md

@@ -64,7 +64,7 @@ As of writing Figma has real test support. Testing is limited to unit testing so
 You can find the test files under `/tests`. This folder also includes the JSON export of a real Figma file
 to test against. The easiest way to update the file is to to edit it in Figma and then use a personal access token to get a JSON version.
 
-To get an access Token in Figma go to the home screen. Then top right click the loggedin user name. Then `Settings` and then the `Security` tab. Scroll to the bottom and choose `Generate new token`. Then save the token in a secure private place.
+To get an access Token in Figma go to the home screen. Then top right click the logged in user name. Then `Settings` and then the `Security` tab. Scroll to the bottom and choose `Generate new token`. Then save the token in a secure private place.
 
 You then need to get the file ID. Open figma.com, login and open the file. You will then have a url like
 `https://www.figma.com/design/njC6jSUbrYpqLRJ2dyV6NT/energy-test-file?node-id=113-2294&p=f&t=5IDwrGIFUnri3Z17-0`. The ID is the part of the URL after `/design/` so in this example `njC6jSUbrYpqLRJ2dyV6NT`.
@@ -77,7 +77,7 @@ curl -H 'X-Figma-Token: <YOUR_ACCESS_TOKEN>' \
 -o figma_output.json
 ```
 
-Vitest can then be run in hot reload mode for ease of test developmet with:
+Vitest can then be run in hot reload mode for ease of test development with:
 
 ```sh
 pnpm test

tools/figma-inspector/backend/code.ts

@@ -55,19 +55,12 @@ listenTS("generateSnippetRequest", async (payload) => {
     if (selection.length === 1) {
         const node = selection[0];
         title = node.name;
-        try {
-            // --- Pass the useVariables value received from UI ---
-            slintSnippet = await generateSlintSnippet(node, useVariables);
 
-            if (slintSnippet === null) {
-                slintSnippet = `// Unsupported node type: ${node.type}`;
-            }
-        } catch (error) {
-            console.error(
-                `[Backend] Error generating snippet for ${node.name}:`,
-                error,
-            );
-            slintSnippet = `// Error generating snippet for ${node.name}:\n// ${error instanceof Error ? error.message : String(error)}`;
+        // --- Pass the useVariables value received from UI ---
+        slintSnippet = await generateSlintSnippet(node, useVariables);
+
+        if (slintSnippet === null) {
+            slintSnippet = `// Unsupported node type: ${node.type}`;
         }
     } else if (selection.length > 1) {
         slintSnippet = "// Select a single component to inspect";
@@ -127,9 +120,6 @@ const variableMonitoring: {
     lastEventTime: 0,
 };
 
-// Keep the DEBOUNCE_INTERVAL as a constant
-const DEBOUNCE_INTERVAL = 3000; // 3 seconds
-
 listenTS("monitorVariableChanges", () => {
     figma.ui.postMessage({
         type: "variableMonitoringActive", // Keep this confirmation

tools/figma-inspector/backend/utils/code-utils.ts

@@ -1,9 +1,7 @@
 // Copyright © SixtyFPS GmbH <[email protected]>
 // SPDX-License-Identifier: MIT
 
-import type { Message, PluginMessageEvent } from "../../src/globals";
 import type { EventTS } from "../../shared/universals";
-import { generateSlintSnippet } from "./property-parsing.js";
 
 export function dispatch(data: any, origin = "*") {
     figma.ui.postMessage(data, {

tools/figma-inspector/backend/utils/export-variables.ts

@@ -216,7 +216,6 @@ function createReferenceExpression(
 
     // Loop Detection
     const targetIdentifier = `${targetCollection}.${targetPath.join(".")}`;
-    const currentIdentifier = `${currentCollection}.${currentPath.join(".")}`;
 
     if (resolutionStack.includes(targetIdentifier)) {
         const loopPath = `${resolutionStack.join(" -> ")} -> ${targetIdentifier}`;
@@ -558,7 +557,7 @@ interface PropertyInstance {
 
 function generateStructsAndInstances(
     variableTree: VariableNode,
-    collectionName: string,
+    _collectionName: string,
     collectionData: CollectionData, // using strict type interface
 ): {
     structs: string;
@@ -581,8 +580,6 @@ function generateStructsAndInstances(
         if (node.name === "root") {
             // Process all root children
             for (const [childName, childNode] of node.children.entries()) {
-                const sanitizedChildName = sanitizePropertyName(childName);
-
                 // Always process child nodes with proper path propagation
                 buildStructModel(childNode, [childName]); // Keep this single-element path for first level
             }
@@ -916,10 +913,6 @@ function generateStructsAndInstances(
                 result += `${indent}// NOTE: This property was renamed from "mode" to "mode-var" to avoid collision\n`;
                 result += `${indent}// with the scheme mode property of the same name.\n`;
             }
-            // Root level property
-            const slintType = instance.isMultiMode
-                ? `${collectionData.formattedName}_mode${collectionData.modes.size}_${instance.type}`
-                : instance.type;
 
             if (instance.children && instance.children.size > 0) {
                 // Struct instance
@@ -1118,9 +1111,6 @@ export async function exportFigmaVariablesToSeparateFiles(
         const variableCollections =
             await figma.variables.getLocalVariableCollectionsAsync();
 
-        // Array to store all exported files
-        const exportedFiles: Array<{ name: string; content: string }> = [];
-
         // First, initialize the collection structure for ALL collections
         const collectionStructure = new Map<string, CollectionData>();
 
@@ -1450,7 +1440,7 @@ export async function exportFigmaVariablesToSeparateFiles(
 
         // Generate content for each collection
         for (const [
-            collectionName,
+            _collectionName,
             collectionData,
         ] of collectionStructure.entries()) {
             // Skip collections with no variables
@@ -1613,7 +1603,7 @@ export async function exportFigmaVariablesToSeparateFiles(
                 // Replace unresolved references with appropriate defaults based on context
                 file.content = file.content.replace(
                     /(@ref:VariableID:[0-9:]+)/g,
-                    (match, reference) => {
+                    (_match, reference) => {
                         exportInfo.warnings.add(
                             `  Replacing unresolved reference: ${reference}`,
                         );
@@ -1705,12 +1695,6 @@ interface SchemeStruct {
     path: string[];
 }
 
-interface ModeValue {
-    value: string;
-    refId?: string;
-    comment?: string;
-}
-
 // Main function for generating scheme structs
 function generateSchemeStructs(
     variableTree: VariableNode,
@@ -1960,7 +1944,7 @@ function collectMultiModeStructs(
 
     // Still scan the tree for any other types we might have missed (for future proofing)
     function findUniqueTypeConfigs(node: VariableNode) {
-        for (const [childName, childNode] of node.children.entries()) {
+        for (const [_childName, childNode] of node.children.entries()) {
             if (childNode.valuesByMode && childNode.valuesByMode.size > 0) {
                 const slintType = getSlintType(childNode.type || "COLOR");
                 // Skip if we already added this type

tools/figma-inspector/backend/utils/property-parsing.ts

@@ -376,7 +376,6 @@ export async function generateSlintSnippet(
     useVariables: boolean,
 ): Promise<string> {
     const nodeType = sceneNode.type;
-    const nodeId = sanitizePropertyName(sceneNode.name);
 
     switch (nodeType) {
         case "FRAME":

tools/figma-inspector/src/main.tsx

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <[email protected]>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import { getColorTheme, subscribeColorTheme } from "./utils/bolt-utils";
 import CodeSnippet from "./components/snippet/CodeSnippet";
 import { ExportType, useInspectorStore } from "./utils/store";
@@ -22,7 +22,7 @@ export const App = () => {
         exportFiles,
     } = useInspectorStore();
 
-    const [lightOrDarkMode, setLightOrDarkMode] = useState(getColorTheme());
+    const [_lightOrDarkMode, setLightOrDarkMode] = useState(getColorTheme());
 
     // Init
     useEffect(() => {