Refactor.

Improve size with optimized parent.

__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"]
-    }
   ]
 }

package.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": "[email protected]"
 }

packages/backend/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/src/altNodes/altConversion.ts

@@ -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/common/commonChildrenOrder.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/flutter/builderImpl/flutterSize.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 {

packages/backend/src/flutter/flutterContainer.ts

@@ -29,6 +29,7 @@ export const flutterContainer = (
   // ignore for Groups
   const propBoxDecoration = getDecoration(node);
   const { width, height, isExpanded } = flutterSize(node, optimizeLayout);
+
   const clipBehavior =
     "clipsContent" in node && node.clipsContent === true
       ? "Clip.antiAlias"
@@ -46,12 +47,13 @@ export const flutterContainer = (
 
   let result: string;
   if (width || height || propBoxDecoration || clipBehavior) {
+    const parsedDecoration = skipDefaultProperty(propBoxDecoration, "BoxDecoration()");
     result = generateWidgetCode("Container", {
       width: skipDefaultProperty(width, "0"),
       height: skipDefaultProperty(height, "0"),
       padding: propPadding,
       clipBehavior: clipBehavior,
-      decoration: skipDefaultProperty(getDecoration(node), "BoxDecoration()"),
+      decoration: clipBehavior ? propBoxDecoration : parsedDecoration,
       child: child,
     });
   } else if (propPadding) {

packages/backend/src/flutter/flutterMain.ts

@@ -114,7 +114,7 @@ const flutterWidgetGenerator = (
     }
 
     if (index !== sceneLen - 1) {
-      const spacing = addSpacingIfNeeded(node);
+      const spacing = addSpacingIfNeeded(node, localSettings.optimizeLayout);
       if (spacing) {
         comp.push(spacing);
       }
@@ -173,11 +173,11 @@ const flutterFrame = (
   );
 
   if (node.layoutMode !== "NONE") {
-    const rowColumn = makeRowColumn(node, node, children);
+    const rowColumn = makeRowColumn(node, children);
     return flutterContainer(node, rowColumn);
   } else {
     if (localSettings.optimizeLayout && node.inferredAutoLayout) {
-      const rowColumn = makeRowColumn(node, node.inferredAutoLayout, children);
+      const rowColumn = makeRowColumn(node.inferredAutoLayout, children);
       return flutterContainer(node, rowColumn);
     }
 
@@ -191,11 +191,10 @@ const flutterFrame = (
 };
 
 const makeRowColumn = (
-  node: BaseFrameMixin,
   autoLayout: inferredAutoLayoutResult,
   children: string
 ): string => {
-  const rowOrColumn = node.layoutMode === "HORIZONTAL" ? "Row" : "Column";
+  const rowOrColumn = autoLayout.layoutMode === "HORIZONTAL" ? "Row" : "Column";
 
   const widgetProps = {
     mainAxisSize: "MainAxisSize.min",
@@ -208,16 +207,20 @@ const makeRowColumn = (
   return generateWidgetCode(rowOrColumn, widgetProps);
 };
 
-const addSpacingIfNeeded = (node: SceneNode): string => {
-  if (node.parent?.type === "FRAME" && node.parent.layoutMode !== "NONE") {
-    if (node.parent.itemSpacing > 0) {
-      if (node.parent.layoutMode === "HORIZONTAL") {
+const addSpacingIfNeeded = (node: SceneNode, optimizeLayout: boolean): string => {
+  const nodeParentLayout = optimizeLayout && node.parent && "itemSpacing" in node.parent
+    ? node.parent.inferredAutoLayout
+    : null ?? node.parent;
+
+  if (nodeParentLayout && node.parent?.type === "FRAME" && "itemSpacing" in nodeParentLayout && nodeParentLayout.layoutMode !== "NONE") {
+    if (nodeParentLayout.itemSpacing > 0) {
+      if (nodeParentLayout.layoutMode === "HORIZONTAL") {
         return generateWidgetCode("const SizedBox", {
-          width: node.parent.itemSpacing,
+          width: nodeParentLayout.itemSpacing,
         });
-      } else {
+      } else if (nodeParentLayout.layoutMode === "VERTICAL") {
         return generateWidgetCode("const SizedBox", {
-          height: node.parent.itemSpacing,
+          height: nodeParentLayout.itemSpacing,
         });
       }
     }

packages/backend/src/html/builderImpl/htmlSize.ts

@@ -15,15 +15,19 @@ export const htmlSizePartial = (
   }
 
   const size = nodeSize(node, optimizeLayout);
+  const nodeParent =
+    (node.parent && optimizeLayout && "inferredAutoLayout" in node.parent
+      ? node.parent.inferredAutoLayout
+      : null) ?? node.parent;
 
   let w = "";
   if (typeof size.width === "number") {
     w = formatWithJSX("width", isJsx, size.width);
   } else if (size.width === "fill") {
     if (
-      node.parent &&
-      "layoutMode" in node.parent &&
-      node.parent.layoutMode === "HORIZONTAL"
+      nodeParent &&
+      "layoutMode" in nodeParent &&
+      nodeParent.layoutMode === "HORIZONTAL"
     ) {
       w = formatWithJSX("flex", isJsx, "1 1 0");
     } else {
@@ -36,9 +40,9 @@ export const htmlSizePartial = (
     h = formatWithJSX("height", isJsx, size.height);
   } else if (typeof size.height === "string") {
     if (
-      node.parent &&
-      "layoutMode" in node.parent &&
-      node.parent.layoutMode === "VERTICAL"
+      nodeParent &&
+      "layoutMode" in nodeParent &&
+      nodeParent.layoutMode === "VERTICAL"
     ) {
       h = formatWithJSX("flex", isJsx, "1 1 0");
     } else {

packages/backend/src/tailwind/builderImpl/tailwindPadding.ts

@@ -12,17 +12,20 @@ export const tailwindPadding = (node: inferredAutoLayoutResult): string[] => {
   }
 
   if ("all" in padding) {
+    if (padding.all === 0) {
+      return [];
+    }
     return [`p-${pxToLayoutSize(padding.all)}`];
   }
 
   let comp: string[] = [];
 
   if ("horizontal" in padding) {
     // horizontal and vertical, as the default AutoLayout
-    if (padding.horizontal) {
+    if (padding.horizontal && padding.horizontal !== 0) {
       comp.push(`px-${pxToLayoutSize(padding.horizontal)}`);
     }
-    if (padding.vertical) {
+    if (padding.vertical && padding.vertical !== 0) {
       comp.push(`py-${pxToLayoutSize(padding.vertical)}`);
     }
     return comp;