From 83b338146412a2c673b89cabb01f6d914f7ba181 Mon Sep 17 00:00:00 2001 From: Dale Alexander Webb Date: Mon, 2 May 2022 20:16:54 +0100 Subject: [PATCH 1/5] fix: prevents `div` elements from being self-closing tags (#54) * fix: prevents `div` elements from being self-closing tags When outputting in Tailwind and HTML without JSX, div elements representing space in auto-layout are self-closing. This will incorrectly place sibling HTML elements as children of the self-closing div in the Chrome browser. Fixes #31 * fix: remove orphan quotation mark and space from spacing `div` --- src/html/htmlMain.ts | 8 ++++++-- src/tailwind/tailwindMain.ts | 6 +++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/html/htmlMain.ts b/src/html/htmlMain.ts index bfca3839..e9bd7455 100644 --- a/src/html/htmlMain.ts +++ b/src/html/htmlMain.ts @@ -16,6 +16,8 @@ let parentId = ""; let showLayerName = false; +const selfClosingTags = ["img"]; + export const htmlMain = ( sceneNode: Array, parentIdSrc: string = "", @@ -218,8 +220,10 @@ export const htmlContainer = ( if (children) { return `\n<${tag}${build}${src}>${indentString(children)}\n`; + } else if (selfClosingTags.includes(tag) || isJsx) { + return `\n<${tag}${build}${src} />`; } else { - return `\n<${tag}${build}${src}/>`; + return `\n<${tag}${build}${src}>`; } } @@ -329,7 +333,7 @@ const addSpacingIfNeeded = ( const style = new HtmlDefaultBuilder(node, false, isJsx).build( formatWithJSX(wh, isJsx, node.parent.itemSpacing) ); - return `\n`; + return isJsx ? `\n` : `\n`; } } return ""; diff --git a/src/tailwind/tailwindMain.ts b/src/tailwind/tailwindMain.ts index 18fea79b..cec2dee7 100644 --- a/src/tailwind/tailwindMain.ts +++ b/src/tailwind/tailwindMain.ts @@ -16,6 +16,8 @@ import { retrieveTopFill } from "../common/retrieveFill"; let parentId = ""; let showLayerName = false; +const selfClosingTags = ["img"]; + export const tailwindMain = ( sceneNode: Array, parentIdSrc: string = "", @@ -223,8 +225,10 @@ export const tailwindContainer = ( if (children) { return `\n<${tag}${build}${src}>${indentString(children)}\n`; + } else if (selfClosingTags.includes(tag) || isJsx) { + return `\n<${tag}${build}${src} />`; } else { - return `\n<${tag}${build}${src}/>`; + return `\n<${tag}${build}${src}>`; } } From 4955328193b82e7c5de68fc22004968f9376e387 Mon Sep 17 00:00:00 2001 From: Dale Alexander Webb Date: Mon, 2 May 2022 20:17:17 +0100 Subject: [PATCH 2/5] fix: add "editorType" in manifest.json (#55) --- manifest.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 0a36d6fa..186edf5c 100644 --- a/manifest.json +++ b/manifest.json @@ -3,5 +3,6 @@ "id": "842128343887142055", "api": "1.0.0", "main": "public/code.js", - "ui": "public/index.html" + "ui": "public/index.html", + "editorType": ["figma"] } From 0d570714ab957b2c5a6082614d77ca23a39267ba Mon Sep 17 00:00:00 2001 From: Dale Alexander Webb Date: Fri, 6 May 2022 22:24:07 +0100 Subject: [PATCH 3/5] fix: tests with self-closing
nodes (#56) --- __tests__/altNodes/altConversions.test.ts | 12 +++++---- .../altNodes/convertGroupToFrame.test.ts | 2 +- .../altNodes/convertNodesOnRectangle.test.ts | 12 ++++----- .../altNodes/convertToAutoLayout.test.ts | 26 +++++++++---------- __tests__/html/builderImpl/htmlColor.test.ts | 2 +- __tests__/html/htmlMain.test.ts | 26 ++++++++++--------- .../builderImpl/tailwindColor.test.ts | 2 +- __tests__/tailwind/size.test.ts | 10 +++---- __tests__/tailwind/tailwindMain.test.ts | 12 ++++----- 9 files changed, 54 insertions(+), 50 deletions(-) diff --git a/__tests__/altNodes/altConversions.test.ts b/__tests__/altNodes/altConversions.test.ts index ab525f29..c7a6e9ae 100644 --- a/__tests__/altNodes/altConversions.test.ts +++ b/__tests__/altNodes/altConversions.test.ts @@ -16,7 +16,7 @@ describe("AltConversions", () => { rectangle.resize(20, 20); expect(tailwindMain(convertIntoAltNodes([rectangle]))).toEqual( - '
' + '
' ); }); @@ -41,7 +41,7 @@ describe("AltConversions", () => { expect(htmlMain(convertIntoAltNodes([frame]))).toEqual( `
-
+
` ); }); @@ -126,7 +126,7 @@ describe("AltConversions", () => { expect( tailwindMain(convertIntoAltNodes([node], new AltFrameNode())) - ).toEqual(`
`); + ).toEqual(`
`); }); it("Line", () => { @@ -146,7 +146,7 @@ describe("AltConversions", () => { expect( tailwindMain(convertIntoAltNodes([node], new AltFrameNode())) - ).toEqual(`
`); + ).toEqual(`
`); }); it("Vector", () => { @@ -173,6 +173,8 @@ describe("AltConversions", () => { expect( tailwindMain(convertIntoAltNodes([node], new AltFrameNode())) - ).toEqual(`
`); + ).toEqual( + `
` + ); }); }); diff --git a/__tests__/altNodes/convertGroupToFrame.test.ts b/__tests__/altNodes/convertGroupToFrame.test.ts index 69b10667..a08c189d 100644 --- a/__tests__/altNodes/convertGroupToFrame.test.ts +++ b/__tests__/altNodes/convertGroupToFrame.test.ts @@ -26,7 +26,7 @@ describe("Convert Group to Frame", () => { const converted = convertGroupToFrame(group); expect(tailwindMain([convertNodesOnRectangle(converted)])) .toEqual(`
-
+
`); }); diff --git a/__tests__/altNodes/convertNodesOnRectangle.test.ts b/__tests__/altNodes/convertNodesOnRectangle.test.ts index 861bf25f..80ce2d3e 100644 --- a/__tests__/altNodes/convertNodesOnRectangle.test.ts +++ b/__tests__/altNodes/convertNodesOnRectangle.test.ts @@ -42,7 +42,7 @@ describe("convert node if child is big rect", () => { expect(tailwindMain([converted])).toEqual( `
-
+
` ); }); @@ -99,7 +99,7 @@ describe("convert node if child is big rect", () => { expect(tailwindMain([invisibleConverted])).toEqual( `
-
+
` ); @@ -157,7 +157,7 @@ describe("convert node if child is big rect", () => { expect(tailwindMain([converted])).toEqual( `
-
+
` ); @@ -190,8 +190,8 @@ describe("convert node if child is big rect", () => { expect(tailwindMain([convertNodesOnRectangle(group)])) .toEqual(`
-
-
+
+
`); }); it("group with 2 children", () => { @@ -251,7 +251,7 @@ describe("convert node if child is big rect", () => { expect(tailwindMain([conv])).toEqual( `
-
+
` ); }); diff --git a/__tests__/altNodes/convertToAutoLayout.test.ts b/__tests__/altNodes/convertToAutoLayout.test.ts index 626b6d8c..ee1eb066 100644 --- a/__tests__/altNodes/convertToAutoLayout.test.ts +++ b/__tests__/altNodes/convertToAutoLayout.test.ts @@ -59,8 +59,8 @@ describe("Convert to AutoLayout", () => { // output should be HORIZONTAL expect(tailwindMain([convertToAutoLayout(frame)])).toEqual( `
-
-
+
+
` ); @@ -72,8 +72,8 @@ describe("Convert to AutoLayout", () => { expect(tailwindMain([convertToAutoLayout(frame)])).toEqual( `
-
-
+
+
` ); @@ -87,8 +87,8 @@ describe("Convert to AutoLayout", () => { expect(tailwindMain([convertToAutoLayout(frame)])).toEqual( `
-
-
+
+
` ); @@ -103,8 +103,8 @@ describe("Convert to AutoLayout", () => { expect(tailwindMain([convertToAutoLayout(frame)])).toEqual( `
-
-
+
+
` ); @@ -118,8 +118,8 @@ describe("Convert to AutoLayout", () => { expect(tailwindMain([convertToAutoLayout(frame)])).toEqual( `
-
-
+
+
` ); }); @@ -159,9 +159,9 @@ describe("Convert to AutoLayout", () => { // output should be HORIZONTAL expect(tailwindMain([convertToAutoLayout(frame)])) .toEqual(`
-
-
-
+
+
+
`); }); }); diff --git a/__tests__/html/builderImpl/htmlColor.test.ts b/__tests__/html/builderImpl/htmlColor.test.ts index 92b2fef5..43bf5df6 100644 --- a/__tests__/html/builderImpl/htmlColor.test.ts +++ b/__tests__/html/builderImpl/htmlColor.test.ts @@ -156,7 +156,7 @@ describe("HTML Color", () => { node.dashPattern = []; expect(htmlMain([node])).toEqual( - `
` + `
` ); }); diff --git a/__tests__/html/htmlMain.test.ts b/__tests__/html/htmlMain.test.ts index a8a77b95..d8b18092 100644 --- a/__tests__/html/htmlMain.test.ts +++ b/__tests__/html/htmlMain.test.ts @@ -54,8 +54,8 @@ describe("HTML Main", () => { expect(htmlMain([convertToAutoLayout(node)])) .toEqual(`
-
-
+
+
`); }); @@ -91,7 +91,7 @@ describe("HTML Main", () => { child.parent = node; expect(htmlMain([node], "", true, true)) .toEqual(`
-
+
`); }); @@ -99,7 +99,9 @@ describe("HTML Main", () => { const node = new AltEllipseNode(); // undefined (unitialized, only happen on tests) - expect(htmlMain([node])).toEqual('
'); + expect(htmlMain([node])).toEqual( + '
' + ); // todo verify if it is working properly. node.x = 0; node.y = 0; @@ -199,8 +201,8 @@ describe("HTML Main", () => { expect(htmlMain([convertToAutoLayout(node)], "", true, true)) .toEqual(`
-
-
+
+
`); }); @@ -256,9 +258,9 @@ describe("HTML Main", () => { expect(htmlMain([node], "", false, true)) .toEqual(`
-
-
-
+
+
+
`); node.primaryAxisAlignItems = "MAX"; @@ -269,9 +271,9 @@ describe("HTML Main", () => { expect(htmlMain([node], "", false, true)) .toEqual(`
-
-
-
+
+
+
`); }); diff --git a/__tests__/tailwind/builderImpl/tailwindColor.test.ts b/__tests__/tailwind/builderImpl/tailwindColor.test.ts index 034db545..600efc28 100644 --- a/__tests__/tailwind/builderImpl/tailwindColor.test.ts +++ b/__tests__/tailwind/builderImpl/tailwindColor.test.ts @@ -282,7 +282,7 @@ describe("Tailwind Color", () => { node.cornerRadius = 16; expect(tailwindMain([node])).toEqual( - `
` + `
` ); }); diff --git a/__tests__/tailwind/size.test.ts b/__tests__/tailwind/size.test.ts index 01f73724..09c1f680 100644 --- a/__tests__/tailwind/size.test.ts +++ b/__tests__/tailwind/size.test.ts @@ -89,7 +89,7 @@ describe("Tailwind Size", () => { expect(tailwindMain([frameNodeToAlt(node)])) .toEqual(`
- +
`); expect(tailwindSize(frameNodeToAlt(subnode))).toEqual("w-2 h-2 "); @@ -261,10 +261,10 @@ describe("Tailwind Size", () => { expect(tailwindMain([node])) .toEqual(`
-
-
-
-
+
+
+
+
`); }); }); diff --git a/__tests__/tailwind/tailwindMain.test.ts b/__tests__/tailwind/tailwindMain.test.ts index 7fc4b99d..9c214703 100644 --- a/__tests__/tailwind/tailwindMain.test.ts +++ b/__tests__/tailwind/tailwindMain.test.ts @@ -53,8 +53,8 @@ describe("Tailwind Main", () => { expect(tailwindMain([convertToAutoLayout(node)])) .toEqual(`
-
-
+
+
`); }); @@ -90,7 +90,7 @@ describe("Tailwind Main", () => { child.parent = node; expect(tailwindMain([node], "", true, true)) .toEqual(`
-
+
`); }); @@ -98,7 +98,7 @@ describe("Tailwind Main", () => { const node = new AltEllipseNode(); // undefined (unitialized, only happen on tests) - expect(tailwindMain([node])).toEqual('
'); + expect(tailwindMain([node])).toEqual('
'); node.width = 0; node.height = 10; @@ -195,8 +195,8 @@ describe("Tailwind Main", () => { expect(tailwindMain([convertToAutoLayout(node)], "", true, true)) .toEqual(`
-
-
+
+
`); }); }); From 4c5992a8e4662e22e14984f247e855c359c48a2f Mon Sep 17 00:00:00 2001 From: Dale Alexander Webb Date: Fri, 6 May 2022 22:32:15 +0100 Subject: [PATCH 4/5] fix: tests with self-closing
nodes (#57) From 4fd675a3db9f03752e79802a0cf0277796bb77c8 Mon Sep 17 00:00:00 2001 From: Dale Alexander Webb Date: Fri, 27 May 2022 20:31:46 +0100 Subject: [PATCH 5/5] fix: html placeholder attribute position in input node (#58) --- __tests__/html/htmlMain.test.ts | 2 +- src/html/htmlMain.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/__tests__/html/htmlMain.test.ts b/__tests__/html/htmlMain.test.ts index d8b18092..2e2bbb27 100644 --- a/__tests__/html/htmlMain.test.ts +++ b/__tests__/html/htmlMain.test.ts @@ -144,7 +144,7 @@ describe("HTML Main", () => { frameNode.name = "this is the InPuT"; expect(htmlMain([frameNode])).toEqual( - ' placeholder="username"' + '' ); }); diff --git a/src/html/htmlMain.ts b/src/html/htmlMain.ts index e9bd7455..d2b74b25 100644 --- a/src/html/htmlMain.ts +++ b/src/html/htmlMain.ts @@ -204,7 +204,7 @@ export const htmlContainer = ( .border(node); if (isInput) { - return `\n${children}`; + return `\n`; } if (builder.style || additionalStyle) {