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..2e2bbb27 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; @@ -142,7 +144,7 @@ describe("HTML Main", () => { frameNode.name = "this is the InPuT"; expect(htmlMain([frameNode])).toEqual( - ' placeholder="username"' + '' ); }); @@ -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(`
-
-
+
+
`); }); }); 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"] } diff --git a/src/html/htmlMain.ts b/src/html/htmlMain.ts index bfca3839..d2b74b25 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 = "", @@ -202,7 +204,7 @@ export const htmlContainer = ( .border(node); if (isInput) { - return `\n${children}`; + return `\n`; } if (builder.style || additionalStyle) { @@ -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}>`; } }