Add flex-1 to Tailwind and HTML.

Fix maxWidth/maxHeight in SwiftUI.

__tests__/altNodes/convertNodesOnRectangle.test.ts

@@ -98,7 +98,7 @@ describe("convert node if child is big rect", () => {
     expect(tailwindMain([invisibleConverted])).toEqual(
       `<div class="w-24 h-24">
 <div class="inline-flex items-start justify-start pr-12 pb-12 w-full h-full">
-<div class="w-full h-full bg-white"></div></div></div>`
+<div class="flex-1 h-full bg-white"></div></div></div>`
     );
   });
 
@@ -154,7 +154,7 @@ describe("convert node if child is big rect", () => {
     expect(tailwindMain([converted])).toEqual(
       `<div class="w-5 h-5">
 <div class="inline-flex items-center justify-center p-1 w-full h-full bg-black">
-<div class="w-full h-full bg-white"></div></div></div>`
+<div class="flex-1 h-full bg-white"></div></div></div>`
     );
   });
 
@@ -245,7 +245,7 @@ describe("convert node if child is big rect", () => {
 
     expect(tailwindMain([conv])).toEqual(
       `<div class="inline-flex items-start justify-start pr-3 pb-3 w-5 h-5 bg-black">
-<div class="w-full h-full bg-white"></div></div>`
+<div class="flex-1 h-full bg-white"></div></div>`
     );
   });
 

__tests__/altNodes/convertToAutoLayout.test.ts

@@ -70,7 +70,7 @@ describe("Convert to AutoLayout", () => {
     frame.children = [node2, node1];
 
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
-      `<div class="inline-flex flex-col items-start justify-end pr-8 pb-2.5 w-12">
+      `<div class="inline-flex flex-col items-start justify-end pr-8 pb-2.5 w-12 h-12">
 <div class="w-full h-1/2 bg-white"></div>
 <div class="w-full h-1/2 bg-black"></div></div>`
     );
@@ -84,7 +84,7 @@ describe("Convert to AutoLayout", () => {
     frame.children = [node2, node1];
 
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
-      `<div class="inline-flex flex-col space-y-1 items-end justify-end pb-1 w-12">
+      `<div class="inline-flex flex-col space-y-1 items-end justify-end pb-1 w-12 h-12">
 <div class="w-full h-5 bg-white"></div>
 <div class="w-5 h-5 bg-black"></div></div>`
     );

__tests__/flutter/flutterMain.test.ts

@@ -92,7 +92,7 @@ Container(width: 4, height: 4, ),),],),)`);
     child2.parent = node;
 
     expect(flutterMain([convertToAutoLayout(node)]))
-      .toEqual(`Container(width: 420, child: Stack(children:[Positioned(left: 9, top: 9, child: 
+      .toEqual(`Container(width: 420, height: 420, child: Stack(children:[Positioned(left: 9, top: 9, child: 
 Container(width: 385, height: 8, color: Colors.white, ),),Positioned(left: 9, top: 9, child: 
 Container(width: 8, height: 385, ),),],),)`);
   });

__tests__/html/htmlMain.test.ts

@@ -53,7 +53,7 @@ describe("HTML Main", () => {
     child2.parent = node;
 
     expect(htmlMain([convertToAutoLayout(node)]))
-      .toEqual(`<div style="width: 320px; position: relative;">
+      .toEqual(`<div style="width: 320px; height: 320px; position: relative;">
 <div style="width: 385px; height: 8px; left: 9px; top: 9px; position: absolute; background-color: white;"></div>
 <div style="width: 8px; height: 385px; left: 9px; top: 9px; position: absolute;"></div></div>`);
   });
@@ -337,6 +337,6 @@ describe("HTML Main", () => {
 
     expect(htmlMain([node], "", false, true))
       .toEqual(`<div class="FRAME" style="width: 32px; height: 32px; background-image: linear-gradient(131deg, rgba(0, 0, 255, 1), rgba(255, 0, 0, 1)); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;">
-<p class="TEXT" style="width: 20px; background: linear-gradient(131deg, rgba(0, 0, 255, 1), rgba(255, 0, 0, 1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">gradient</p></div>`);
+<p class="TEXT" style="width: 20px; background: linear-gradient(131deg, rgba(0, 0, 255, 1), rgba(255, 0, 0, 1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">gradient</p></div>`);
   });
 });

__tests__/swiftui/builderImpl/swiftuiSize.test.ts

@@ -43,6 +43,17 @@ describe("swiftui Builder", () => {
       "\n.frame(maxWidth: .infinity, maxHeight: .infinity)"
     );
 
+    child.layoutGrow = 0;
+    expect(swiftuiSize(child)).toEqual(
+      "\n.frame(maxWidth: 100, maxHeight: .infinity)"
+    );
+
+    child.layoutGrow = 1;
+    child.layoutAlign = "INHERIT";
+    expect(swiftuiSize(child)).toEqual(
+      "\n.frame(maxWidth: .infinity, maxHeight: 100)"
+    );
+
     // fail
     node.layoutMode = "VERTICAL";
     child.layoutAlign = "INHERIT";
@@ -52,7 +63,7 @@ describe("swiftui Builder", () => {
     expect(swiftuiSize(child)).toEqual("\n.frame(width: 16, height: 16)");
 
     // child is relative, therefore it must have a value
-    expect(swiftuiSize(node)).toEqual("\n.frame(width: 100)");
+    expect(swiftuiSize(node)).toEqual("\n.frame(width: 100, height: 100)");
   });
 
   it("Vertical layout with FIXED counterAxis", () => {

__tests__/tailwind/builderImpl/tailwindSize.test.ts

@@ -46,7 +46,7 @@ describe("Tailwind Builder", () => {
     child.parent = node;
     node.children = [child];
 
-    expect(tailwindSize(child)).toEqual("w-full h-full ");
+    expect(tailwindSize(child)).toEqual("flex-1 h-full ");
 
     // fail
     node.layoutMode = "VERTICAL";
@@ -55,7 +55,7 @@ describe("Tailwind Builder", () => {
     expect(tailwindSize(child)).toEqual("w-full h-1/6 ");
 
     // child is relative, therefore it must have a value
-    expect(tailwindSize(node)).toEqual("w-24 ");
+    expect(tailwindSize(node)).toEqual("w-24 h-24 ");
   });
 
   it("Vertical layout with FIXED counterAxis", () => {

__tests__/tailwind/size.test.ts

@@ -89,7 +89,7 @@ describe("Tailwind Size", () => {
 
     expect(tailwindMain([frameNodeToAlt(node)]))
       .toEqual(`<div class="inline-flex items-center justify-center p-60" style="width: 500px; height: 500px;">
-<div class="w-full h-full"></div></div>`);
+<div class="flex-1 h-full"></div></div>`);
 
     expect(tailwindSize(frameNodeToAlt(subnode))).toEqual("w-2 h-2 ");
   });
@@ -177,12 +177,12 @@ describe("Tailwind Size", () => {
       child.parent = subnode;
 
       expect(tailwindSize(node)).toEqual("w-full ");
-      expect(tailwindSize(subnode)).toEqual("w-full ");
-      expect(tailwindSize(child)).toEqual("w-4 h-full ");
+      expect(tailwindSize(subnode)).toEqual("");
+      expect(tailwindSize(child)).toEqual("w-4 flex-1 ");
 
       // additional test for layoutGrow
       subnode.layoutMode = "HORIZONTAL";
-      expect(tailwindSize(child)).toEqual("w-full h-64 ");
+      expect(tailwindSize(child)).toEqual("flex-1 h-64 ");
     });
 
     it("complex autolayout example", () => {
@@ -259,7 +259,7 @@ describe("Tailwind Size", () => {
       node.children = [child1, child2, child3, child4];
 
       expect(tailwindMain([node]))
-        .toEqual(`<div class="inline-flex flex-col space-y-2.5 items-center justify-center px-2.5 w-56 bg-red-600">
+        .toEqual(`<div class="inline-flex flex-col space-y-2.5 items-center justify-center px-2.5 w-56 h-72 bg-red-600">
 <div class="w-full h-5 bg-white"></div>
 <div class="w-full h-5 bg-white"></div>
 <div class="w-24 h-5 bg-white"></div>

src/common/nodeWidthHeight.ts

@@ -104,18 +104,38 @@ export const nodeWidthHeight = (
     }
   }
 
-  if (
-    ("layoutMode" in node && node.layoutMode === "VERTICAL") ||
-    ("layoutMode" in node &&
-      ((node.layoutMode === "HORIZONTAL" &&
+  if ("layoutMode" in node) {
+    if (
+      (node.layoutMode === "HORIZONTAL" &&
         node.counterAxisSizingMode === "AUTO") ||
-        (node.layoutMode === "VERTICAL" &&
-          node.primaryAxisSizingMode === "AUTO"))) ||
-    (node.type !== "RECTANGLE" && nodeHeight > 384) ||
-    childLargerThanMaxSize(node, "y")
-  ) {
-    // propHeight = "h-full ";
-    propHeight = null;
+      (node.layoutMode === "VERTICAL" && node.primaryAxisSizingMode === "AUTO")
+    ) {
+      propHeight = null;
+    }
+
+    if (
+      (node.layoutMode === "VERTICAL" &&
+        node.counterAxisSizingMode === "AUTO") ||
+      (node.layoutMode === "HORIZONTAL" &&
+        node.primaryAxisSizingMode === "AUTO")
+    ) {
+      propWidth = null;
+    }
+  }
+
+  // On Tailwind, do not let the size be larger than 384.
+  if (allowRelative) {
+    if (
+      (node.type !== "RECTANGLE" && nodeHeight > 384) ||
+      childLargerThanMaxSize(node, "y")
+    ) {
+      propHeight = null;
+    } else if (
+      (node.type !== "RECTANGLE" && nodeWidth > 384) ||
+      childLargerThanMaxSize(node, "x")
+    ) {
+      propWidth = null;
+    }
   }
 
   if ("layoutMode" in node && node.layoutMode !== "NONE") {

src/html/builderImpl/htmlSize.ts

@@ -16,14 +16,30 @@ export const htmlSizePartial = (
   if (typeof size.width === "number") {
     w += formatWithJSX("width", isJsx, size.width);
   } else if (size.width === "full") {
-    w += formatWithJSX("width", isJsx, "100%");
+    if (
+      node.parent &&
+      "layoutMode" in node.parent &&
+      node.parent.layoutMode === "HORIZONTAL"
+    ) {
+      w += formatWithJSX("flex", isJsx, "1 1 0%");
+    } else {
+      w += formatWithJSX("width", isJsx, "100%");
+    }
   }
 
   let h = "";
   if (typeof size.height === "number") {
     h += formatWithJSX("height", isJsx, size.height);
   } else if (typeof size.height === "string") {
-    h += formatWithJSX("height", isJsx, "100%");
+    if (
+      node.parent &&
+      "layoutMode" in node.parent &&
+      node.parent.layoutMode === "VERTICAL"
+    ) {
+      h += formatWithJSX("flex", isJsx, "1 1 0%");
+    } else {
+      h += formatWithJSX("height", isJsx, "100%");
+    }
   }
 
   return [w, h];

src/html/htmlDefaultBuilder.ts

@@ -12,7 +12,10 @@ import {
   htmlOpacity,
 } from "./builderImpl/htmlBlend";
 import { htmlPosition } from "./builderImpl/htmlPosition";
-import { htmlColorFromFills, htmlGradientFromFills } from "./builderImpl/htmlColor";
+import {
+  htmlColorFromFills,
+  htmlGradientFromFills,
+} from "./builderImpl/htmlColor";
 import { htmlPadding } from "./builderImpl/htmlPadding";
 import { formatWithJSX } from "../common/parseJSX";
 import { parentCoordinates } from "../common/parentCoordinates";

src/swiftui/builderImpl/swiftuiSize.ts

@@ -5,17 +5,32 @@ import { numToAutoFixed } from "../../common/numToAutoFixed";
 export const swiftuiSize = (node: AltSceneNode): string => {
   const size = nodeWidthHeight(node, false);
 
+  // if width is set as maxWidth, height must also be set as maxHeight (not height)
+  const shouldExtend = size.height === "full" || size.width === "full";
+
   // this cast will always be true, since nodeWidthHeight was called with false to relative.
   let propWidth = "";
   if (typeof size.width === "number") {
-    propWidth = `width: ${numToAutoFixed(size.width)}`;
+    const w = numToAutoFixed(size.width);
+
+    if (shouldExtend) {
+      propWidth = `maxWidth: ${w}`;
+    } else {
+      propWidth = `width: ${w}`;
+    }
   } else if (size.width === "full") {
     propWidth = `maxWidth: .infinity`;
   }
 
   let propHeight = "";
   if (typeof size.height === "number") {
-    propHeight = `height: ${numToAutoFixed(size.height)}`;
+    const h = numToAutoFixed(size.height);
+
+    if (shouldExtend) {
+      propHeight = `maxHeight: ${h}`;
+    } else {
+      propHeight = `height: ${h}`;
+    }
   } else if (size.height === "full") {
     propHeight = `maxHeight: .infinity`;
   }

src/tailwind/builderImpl/tailwindSize.ts

@@ -1,3 +1,4 @@
+import { tailwindVector } from "./../vector";
 import { AltSceneNode } from "../../altNodes/altMixins";
 import { pxToLayoutSize } from "../conversionTables";
 import { nodeWidthHeight } from "../../common/nodeWidthHeight";
@@ -14,7 +15,16 @@ export const tailwindSizePartial = (node: AltSceneNode): [string, string] => {
   if (typeof size.width === "number") {
     w += `w-${pxToLayoutSize(size.width)} `;
   } else if (typeof size.width === "string") {
-    w += `w-${size.width} `;
+    if (
+      size.width === "full" &&
+      node.parent &&
+      "layoutMode" in node.parent &&
+      node.parent.layoutMode === "HORIZONTAL"
+    ) {
+      w += `flex-1 `;
+    } else {
+      w += `w-${size.width} `;
+    }
   }
 
   let h = "";
@@ -23,7 +33,16 @@ export const tailwindSizePartial = (node: AltSceneNode): [string, string] => {
   if (typeof size.height === "number") {
     h = `h-${pxToLayoutSize(size.height)} `;
   } else if (typeof size.height === "string") {
-    w += `h-${size.height} `;
+    if (
+      size.height === "full" &&
+      node.parent &&
+      "layoutMode" in node.parent &&
+      node.parent.layoutMode === "VERTICAL"
+    ) {
+      h += `flex-1 `;
+    } else {
+      h += `h-${size.height} `;
+    }
   }
 
   return [w, h];