Add code formatting for Flutter and SwiftUI!

wxjrkm520 · Feb 1, 2021 · a48b9f6 · a48b9f6
1 parent 7c2fdb2
commit a48b9f6
Show file tree

Hide file tree

Showing 26 changed files with 690 additions and 242 deletions.
diff --git a/README.md b/README.md
@@ -46,7 +46,6 @@ When finding the unknown (a `Group` or `Frame` with more than one child and no v
 
 ### Flutter limits and ideas
 
-- **Unformatted code:** output code is not formatted, but even [dartpad](https://dartpad.dev/) offers a format button.
 - **Stack:** in some simpler cases, a `Stack` could be replaced with a `Container` and a `BoxDecoration`. Discover those cases and optimize them.
 - **Material Styles**: text could be matched to existing Material styles (like outputting `Headline6` when text size is 20).
 - **Identify Buttons**: the plugin could identify specific buttons and output them instead of always using `Container` or `Material`.

diff --git a/__tests__/altNodes/altConversions.test.ts b/__tests__/altNodes/altConversions.test.ts
@@ -111,6 +111,26 @@ describe("AltConversions", () => {
     ).toEqual(`<div class="w-5 h-5 rounded-full"></div>`);
   });
 
+  it("Line", () => {
+    // this test requires mocking the full EllipseNode. Figma-api-stub doesn't support VectorNode.
+    class LineNode {
+      readonly type = "LINE";
+    }
+
+    interface LineNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
+      readonly type: "LINE";
+      clone(): LineNode;
+    }
+
+    const node = new LineNode();
+    // set read-only variables
+    Object.defineProperty(node, "width", { value: 20 });
+
+    expect(
+      tailwindMain(convertIntoAltNodes([node], new AltFrameNode()))
+    ).toEqual(`<div class="w-5 h-0.5"></div>`);
+  });
+
   it("Vector", () => {
     // this test requires mocking the full VectorNode. Figma-api-stub doesn't support VectorNode.
     class VectorNode {
@@ -137,6 +157,4 @@ describe("AltConversions", () => {
       tailwindMain(convertIntoAltNodes([node], new AltFrameNode()))
     ).toEqual(`<div class="opacity-50 w-5 h-5"></div>`);
   });
-
-  // todo add a test for EllipseNode, but there is no EllipseNode in figma-api-stubs!
 });
diff --git a/__tests__/flutter/builderImpl/flutterBorder.test.ts b/__tests__/flutter/builderImpl/flutterBorder.test.ts
@@ -21,7 +21,7 @@ describe("Flutter Border", () => {
 
     node.cornerRadius = 2;
     expect(flutterBorderRadius(node)).toEqual(
-      "borderRadius: BorderRadius.circular(2), "
+      "\nborderRadius: BorderRadius.circular(2),"
     );
 
     node.cornerRadius = figma.mixed;
@@ -30,7 +30,7 @@ describe("Flutter Border", () => {
     node.bottomLeftRadius = 0;
     node.bottomRightRadius = 0;
     expect(flutterBorderRadius(node)).toEqual(
-      "borderRadius: BorderRadius.only(topLeft: Radius.circular(2), topRight: Radius.circular(0), bottomLeft: Radius.circular(0), bottomRight: Radius.circular(0), ), "
+      "\nborderRadius: BorderRadius.only(topLeft: Radius.circular(2), topRight: Radius.circular(0), bottomLeft: Radius.circular(0), bottomRight: Radius.circular(0), ),"
     );
 
     const ellipseNode = new AltEllipseNode();
@@ -47,7 +47,7 @@ describe("Flutter Border", () => {
       },
     ];
     expect(flutterBorder(node)).toEqual(
-      "border: Border.all(color: Colors.black, width: 2,), "
+      "\nborder: Border.all(color: Colors.black, width: 2, ),"
     );
 
     node.strokeWeight = 0;
@@ -65,7 +65,9 @@ describe("Flutter Border", () => {
     node.bottomLeftRadius = 0;
     node.bottomRightRadius = 0;
     expect(flutterShape(node)).toEqual(
-      "shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(0), bottomLeft: Radius.circular(0), bottomRight: Radius.circular(0), ), ),"
+      `\nshape: RoundedRectangleBorder(
+    borderRadius: BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(0), bottomLeft: Radius.circular(0), bottomRight: Radius.circular(0), ),
+),`
     );
 
     const ellipseNode = new AltEllipseNode();
@@ -77,7 +79,9 @@ describe("Flutter Border", () => {
       },
     ];
     expect(flutterShape(ellipseNode)).toEqual(
-      "shape: CircleBorder(side: BorderSide(width: 4, color: Color(0xff3f3f3f), ), ), "
+      `\nshape: CircleBorder(
+    side: BorderSide(width: 4, color: Color(0xff3f3f3f), ),
+),`
     );
   });
 });
diff --git a/__tests__/flutter/builderImpl/flutterColor.test.ts b/__tests__/flutter/builderImpl/flutterColor.test.ts
@@ -24,8 +24,8 @@ describe("Flutter Color", () => {
       },
     ];
 
-    expect(flutterColorFromFills(node.fills)).toEqual(
-      "color: Color(0xffef5138), "
+    expect(flutterBoxDecorationColor(node.fills)).toEqual(
+      "\ncolor: Color(0xffef5138),"
     );
   });
 
@@ -44,7 +44,7 @@ describe("Flutter Color", () => {
       },
     ];
 
-    expect(flutterColorFromFills(node.fills)).toEqual("color: Colors.black, ");
+    expect(flutterColorFromFills(node.fills)).toEqual("color: Colors.black,");
 
     node.fills = [
       {
@@ -58,7 +58,7 @@ describe("Flutter Color", () => {
       },
     ];
 
-    expect(flutterColorFromFills(node.fills)).toEqual("color: Colors.white, ");
+    expect(flutterColorFromFills(node.fills)).toEqual("color: Colors.white,");
   });
 
   it("opacity and visibility changes", () => {
@@ -92,7 +92,7 @@ describe("Flutter Color", () => {
     ];
 
     // this scenario should never happen in real life; figma allows undefined to be set, but not to be get.
-    expect(flutterColorFromFills(node.fills)).toEqual("color: Colors.black, ");
+    expect(flutterColorFromFills(node.fills)).toEqual("color: Colors.black,");
 
     node.fills = [
       {
@@ -106,8 +106,8 @@ describe("Flutter Color", () => {
         visible: true,
       },
     ];
-    expect(flutterColorFromFills(node.fills)).toEqual(
-      "color: Color(0x00000000), "
+    expect(flutterBoxDecorationColor(node.fills)).toEqual(
+      "\ncolor: Color(0x00000000),"
     );
   });
 
@@ -135,7 +135,7 @@ describe("Flutter Color", () => {
     node.fills = [gradientFill];
 
     expect(flutterBoxDecorationColor(node.fills)).toEqual(
-      "gradient: LinearGradient(begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [Colors.black], ), "
+      "\ngradient: LinearGradient(begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [Colors.black], ),"
     );
 
     // topLeft to bottomRight (135)
@@ -144,7 +144,7 @@ describe("Flutter Color", () => {
       [1.3402682542800903, -1.4652644395828247, 0.5407097935676575],
     ]);
     expect(flutterBoxDecorationColor(node.fills)).toEqual(
-      "gradient: LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Colors.black], ), "
+      "\ngradient: LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Colors.black], ),"
     );
 
     // bottom to top (-90)
@@ -153,7 +153,7 @@ describe("Flutter Color", () => {
       [-2.3507132530212402, -1.0997783306265774e-7, 1.6796307563781738],
     ]);
     expect(flutterBoxDecorationColor(node.fills)).toEqual(
-      "gradient: LinearGradient(begin: Alignment.bottomCenter, end: Alignment.topCenter, colors: [Colors.black], ), "
+      "\ngradient: LinearGradient(begin: Alignment.bottomCenter, end: Alignment.topCenter, colors: [Colors.black], ),"
     );
 
     // top to bottom (90)
@@ -162,7 +162,7 @@ describe("Flutter Color", () => {
       [3.9725232124328613, -1.4210854715202004e-14, -0.8289895057678223],
     ]);
     expect(flutterBoxDecorationColor(node.fills)).toEqual(
-      "gradient: LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.black], ), "
+      "\ngradient: LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.black], ),"
     );
 
     // left to right (0)
@@ -171,7 +171,7 @@ describe("Flutter Color", () => {
       [6.030897026221282e-8, -3.364259719848633, 2.188383102416992],
     ]);
     expect(flutterBoxDecorationColor(node.fills)).toEqual(
-      "gradient: LinearGradient(begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [Colors.black], ), "
+      "\ngradient: LinearGradient(begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [Colors.black], ),"
     );
 
     // right to left (180)
@@ -180,7 +180,7 @@ describe("Flutter Color", () => {
       [0.07747448235750198, 4.357592582702637, -1.0299113988876343],
     ]);
     expect(flutterBoxDecorationColor(node.fills)).toEqual(
-      "gradient: LinearGradient(begin: Alignment.centerRight, end: Alignment.centerLeft, colors: [Colors.black], ), "
+      "\ngradient: LinearGradient(begin: Alignment.centerRight, end: Alignment.centerLeft, colors: [Colors.black], ),"
     );
 
     // bottom left to top right (-135)
@@ -189,7 +189,7 @@ describe("Flutter Color", () => {
       [-3.7344324588775635, 2.3110527992248535, 0.4661891460418701],
     ]);
     expect(flutterBoxDecorationColor(node.fills)).toEqual(
-      "gradient: LinearGradient(begin: Alignment.bottomRight, end: Alignment.topLeft, colors: [Colors.black], ), "
+      "\ngradient: LinearGradient(begin: Alignment.bottomRight, end: Alignment.topLeft, colors: [Colors.black], ),"
     );
 
     // bottom left to top right (-45)
@@ -198,7 +198,7 @@ describe("Flutter Color", () => {
       [-1.3051068782806396, -1.3525396585464478, 1.8345310688018799],
     ]);
     expect(flutterBoxDecorationColor(node.fills)).toEqual(
-      "gradient: LinearGradient(begin: Alignment.bottomLeft, end: Alignment.topRight, colors: [Colors.black], ), "
+      "\ngradient: LinearGradient(begin: Alignment.bottomLeft, end: Alignment.topRight, colors: [Colors.black], ),"
     );
 
     // top right to bottom left (-45)
@@ -207,7 +207,7 @@ describe("Flutter Color", () => {
       [1.5028705596923828, 1.2872726917266846, -1.0877336263656616],
     ]);
     expect(flutterBoxDecorationColor(node.fills)).toEqual(
-      "gradient: LinearGradient(begin: Alignment.topRight, end: Alignment.bottomLeft, colors: [Colors.black], ), "
+      "\ngradient: LinearGradient(begin: Alignment.topRight, end: Alignment.bottomLeft, colors: [Colors.black], ),"
     );
   });
 
@@ -256,7 +256,15 @@ describe("Flutter Color", () => {
     node.cornerRadius = 16;
 
     expect(flutterMain([node])).toEqual(
-      `Container(width: 18, height: 18, decoration: BoxDecoration(borderRadius: BorderRadius.circular(16), border: Border.all(color: Color(0xff3f3f3f), width: 4,), gradient: LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Colors.black, Color(0xffff0000)], ), ), )`
+      `Container(
+    width: 18,
+    height: 18,
+    decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: Color(0xff3f3f3f), width: 4, ),
+        gradient: LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Colors.black, Color(0xffff0000)], ),
+    ),
+)`
     );
   });
 

diff --git a/__tests__/flutter/builderImpl/flutterPadding.test.ts b/__tests__/flutter/builderImpl/flutterPadding.test.ts
@@ -17,39 +17,39 @@ describe("Flutter Padding", () => {
     frameNode.paddingTop = 2;
     frameNode.paddingBottom = 2;
     expect(flutterPadding(frameNode)).toEqual(
-      "padding: const EdgeInsets.all(2), "
+      "\npadding: const EdgeInsets.all(2),"
     );
 
     frameNode.paddingLeft = 1;
     frameNode.paddingRight = 2;
     frameNode.paddingTop = 3;
     frameNode.paddingBottom = 4;
     expect(flutterPadding(frameNode)).toEqual(
-      "padding: const EdgeInsets.only(left: 1, right: 2, top: 3, bottom: 4, ), "
+      "\npadding: const EdgeInsets.only(left: 1, right: 2, top: 3, bottom: 4, ),"
     );
 
     frameNode.paddingLeft = 2;
     frameNode.paddingRight = 2;
     frameNode.paddingTop = 4;
     frameNode.paddingBottom = 4;
     expect(flutterPadding(frameNode)).toEqual(
-      "padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 4, ), "
+      "\npadding: const EdgeInsets.symmetric(horizontal: 2, vertical: 4, ),"
     );
 
     frameNode.paddingLeft = 2;
     frameNode.paddingRight = 2;
     frameNode.paddingTop = 0;
     frameNode.paddingBottom = 0;
     expect(flutterPadding(frameNode)).toEqual(
-      "padding: const EdgeInsets.symmetric(horizontal: 2, ), "
+      "\npadding: const EdgeInsets.symmetric(horizontal: 2, ),"
     );
 
     frameNode.paddingLeft = 0;
     frameNode.paddingRight = 0;
     frameNode.paddingTop = 2;
     frameNode.paddingBottom = 2;
     expect(flutterPadding(frameNode)).toEqual(
-      "padding: const EdgeInsets.symmetric(vertical: 2, ), "
+      "\npadding: const EdgeInsets.symmetric(vertical: 2, ),"
     );
 
     frameNode.paddingLeft = 0;