Refactor.

Improve size with optimized parent.

Author: bernaferrari

__tests__/tailwind/conversionTables.test.ts

@@ -31,7 +31,7 @@ describe("Tailwind Conversion Table", () => {
     expect(pxToBorderRadius(2)).toEqual("-sm");
     expect(pxToBorderRadius(8)).toEqual("-lg");
 
-    expect(pxToLayoutSize(4)).toEqual("1");
-    expect(pxToLayoutSize(385)).toEqual("96");
+    expect(pxToLayoutSize(4, false)).toEqual("1");
+    expect(pxToLayoutSize(385, false)).toEqual("96");
   });
 });

apps/debug/package.json

@@ -10,21 +10,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "backend": "workspace:*",
     "next": "latest",
+    "plugin-ui": "workspace:*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "backend": "workspace:*",
-    "plugin-ui": "workspace:*"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^18.15.3",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/node": "^18.16.18",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "autoprefixer": "^10.4.14",
     "eslint-config-custom": "workspace:*",
-    "postcss": "^8.4.21",
-    "tsconfig": "workspace:*",
+    "postcss": "^8.4.24",
     "tailwindcss": "3.2.7",
-    "typescript": "^5.0.2"
+    "tsconfig": "workspace:*",
+    "typescript": "^5.1.3"
   }
 }

apps/plugin/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "pnpm run build:ui && pnpm run build:main --minify --tree-shaking=true",
     "build:main": "esbuild plugin-src/code.ts --bundle --target=ES6 --outfile=dist/code.js",
-    "build:ui": "npx vite build --minify esbuild --emptyOutDir=false",
+    "build:ui": "vite build --minify esbuild --emptyOutDir=false",
     "build:watch": "concurrently -n backend,ui \"pnpm run build:main --watch\" \"pnpm run build:ui --watch\"",
     "dev": "pnpm build:watch"
   },
@@ -18,23 +18,23 @@
   },
   "devDependencies": {
     "@types/node": "^17.0.45",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
-    "@vitejs/plugin-react": "^4.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.1",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
+    "@vitejs/plugin-react": "^4.0.1",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "concurrently": "^8.0.1",
+    "concurrently": "^8.2.0",
     "esbuild": "^0.17.19",
     "eslint-config-custom": "workspace:*",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "tailwindcss": "3.3.2",
     "tsconfig": "workspace:*",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.7",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
     "vite-plugin-singlefile": "^0.13.5"
   }
 }

manifest.json

@@ -1,38 +1,19 @@
 {
-  "name": "Figma to Code [Dev]",
-  "id": "1248037579235937673",
+  "name": "Figma to Code [HTML, Tailwind, Flutter, SwiftUI]",
+  "id": "842128343887142055",
   "api": "1.0.0",
   "main": "apps/plugin/dist/code.js",
   "ui": "apps/plugin/dist/index.html",
   "editorType": ["figma", "dev"],
   "capabilities": ["inspect", "codegen"],
   "permissions": [],
+
   "codegenLanguages": [
     { "label": "HTML", "value": "html" },
     { "label": "React (JSX)", "value": "html_jsx" },
     { "label": "Tailwind", "value": "tailwind" },
     { "label": "Tailwind (JSX)", "value": "tailwind_jsx" },
     { "label": "Flutter", "value": "flutter" },
     { "label": "SwiftUI", "value": "swiftUI" }
-  ],
-  "codegenPreferences": [
-    {
-      "itemType": "alternative-unit",
-      "scaledUnit": "Pixels",
-      "defaultScaleFactor": 16,
-      "default": true,
-      "includedLanguages": ["tailwind"]
-    },
-
-    {
-      "itemType": "select",
-      "propertyName": "tabSize",
-      "label": "Tab Size",
-      "options": [
-        { "label": "2", "value": "2", "isDefault": true },
-        { "label": "4", "value": "4" }
-      ],
-      "includedLanguages": ["tailwind"]
-    }
   ]
 }

manifest_original.json

@@ -8,10 +8,10 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
     "eslint-config-custom": "workspace:*",
     "prettier": "^2.8.8",
-    "turbo": "^1.10.3"
+    "turbo": "^1.10.6"
   },
   "packageManager": "pnpm@7.15.0"
 }

package.json

@@ -19,9 +19,9 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.9",
-    "@types/react-dom": "^18.2.4",
-    "eslint": "^8.42.0",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "eslint": "^8.43.0",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
     "tsup": "^6.7.0",

packages/backend/package.json

@@ -18,7 +18,9 @@ export const cloneNode = <T extends BaseNode>(node: T): T => {
       prop !== "masterComponent" &&
       prop !== "variantProperties" &&
       prop !== "componentPropertyDefinitions" &&
-      prop !== "exposedInstances"
+      prop !== "exposedInstances" &&
+      prop !== "componentProperties" &&
+      prop !== "componenPropertyReferences"
     ) {
       cloned[prop as keyof T] = node[prop as keyof T];
     }

packages/backend/src/altNodes/altConversion.ts

@@ -26,6 +26,5 @@ export const commonSortChildrenWhenInferredAutoLayout = (
         return children.sort((a, b) => a.y - b.y);
     }
   }
-  console.log("no inferredAutoLayout for ", node.name);
   return node.children;
 };

packages/backend/src/common/commonChildrenOrder.ts

@@ -15,16 +15,21 @@ export const flutterSize = (
   const size = nodeSize(node, optimizeLayout);
   let isExpanded: boolean = false;
 
+  const nodeParent =
+    (node.parent && optimizeLayout && "inferredAutoLayout" in node.parent
+      ? node.parent.inferredAutoLayout
+      : null) ?? node.parent;
+
   // this cast will always be true, since nodeWidthHeight was called with false to relative.
   let propWidth = "";
   if (typeof size.width === "number") {
     propWidth = sliceNum(size.width);
   } else if (size.width === "fill") {
     // When parent is a Row, child must be Expanded.
     if (
-      node.parent &&
-      "layoutMode" in node.parent &&
-      node.parent.layoutMode === "HORIZONTAL"
+      nodeParent &&
+      "layoutMode" in nodeParent &&
+      nodeParent.layoutMode === "HORIZONTAL"
     ) {
       isExpanded = true;
     } else {
@@ -38,9 +43,9 @@ export const flutterSize = (
   } else if (size.height === "fill") {
     // When parent is a Column, child must be Expanded.
     if (
-      node.parent &&
-      "layoutMode" in node.parent &&
-      node.parent.layoutMode === "VERTICAL"
+      nodeParent &&
+      "layoutMode" in nodeParent &&
+      nodeParent.layoutMode === "VERTICAL"
     ) {
       isExpanded = true;
     } else {