diff --git a/.github/workflows/npm_notify_release.yml b/.github/workflows/npm_notify_release.yml index b5df2d4..8ccca2a 100644 --- a/.github/workflows/npm_notify_release.yml +++ b/.github/workflows/npm_notify_release.yml @@ -3,7 +3,7 @@ name: Node.js Public Release Notes on: release: types: - - created + - published jobs: test_develop: diff --git a/content.plugins.js b/content.plugins.js index 212eb82..1916f5d 100644 --- a/content.plugins.js +++ b/content.plugins.js @@ -1,4 +1,5 @@ const { emptyChildren, getComponentName, createComponent, getDescriptionStyles, saveSvgToDisk } = require('./lib'); +const svgtojsx = require('svg-to-jsx'); const contentPlugins = [ applyStyles, @@ -57,7 +58,7 @@ function renderMask(state) { async function renderVector(state, shared) { const { vectors, genClassName, additionalStyles } = shared; - const { node, content } = state; + const { node, props, content } = state; if (node.type === 'VECTOR' && vectors[node.id] && !node.isMask) { emptyChildren(state); @@ -86,10 +87,15 @@ async function renderVector(state, shared) { additionalStyles.push(additionalSvgStyles); } - const fileName = node.id.replace(/\W+/g, '-'); - const url = await saveSvgToDisk(fileName, vectors[node.id], shared); - - content.push(``); + if (Object.keys(props).includes('vectorImg')) { + const fileName = node.id.replace(/\W+/g, '-'); + const url = await saveSvgToDisk(fileName, vectors[node.id], shared); + content.push(``); + } else { + let svg = await svgtojsx(vectors[node.id]); + svg = svg.replace('=0.6.0", + "xmlbuilder": "~11.0.0" + }, + "dependencies": { + "xmlbuilder": { + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz", + "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==" + } + } + }, + "xmlbuilder": { + "version": "13.0.2", + "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz", + "integrity": "sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ==" + }, + "y18n": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", + "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=" + }, + "yargs": { + "version": "3.32.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz", + "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=", + "requires": { + "camelcase": "^2.0.1", + "cliui": "^3.0.3", + "decamelize": "^1.1.1", + "os-locale": "^1.4.0", + "string-width": "^1.0.1", + "window-size": "^0.1.4", + "y18n": "^3.2.0" + }, + "dependencies": { + "ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + }, + "camelcase": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz", + "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=" + }, + "is-fullwidth-code-point": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "requires": { + "number-is-nan": "^1.0.0" + } + }, + "string-width": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "requires": { + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" + } + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "requires": { + "ansi-regex": "^2.0.0" + } + }, + "window-size": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz", + "integrity": "sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY=" + } + } + }, "yargs-parser": { "version": "17.0.0", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-17.0.0.tgz", diff --git a/package.json b/package.json index 40f1c0e..7f3c5c9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "figma-react", "description": "This is a tool to help you export Figma project into React mockups", - "version": "1.0.12", + "version": "1.0.15", "private": false, "author": "Maxim Karpov ", "repository": { @@ -46,7 +46,8 @@ "dotenv": "^8.2.0", "node-fetch": "^2.6.0", "prettier": "^1.19.1", - "request-image-size": "^2.1.0" + "request-image-size": "^2.1.0", + "svg-to-jsx": "^1.0.2" }, "devDependencies": { "babel-eslint": "^10.0.3", diff --git a/style.plugins.js b/style.plugins.js index f7d6964..1297777 100644 --- a/style.plugins.js +++ b/style.plugins.js @@ -418,11 +418,9 @@ function setTextRenderer({ node, props, middleStyle, content }, { printStyle }) const fontStyle = node.style; applyFontStyle(middleStyle, fontStyle); - const makeItFlex = () => { - middleStyle.display = 'flex'; - middleStyle.maxWidth = '-webkit-fill-available'; - middleStyle.alignContent = 'flex-start'; - }; + middleStyle.display = 'flex'; + middleStyle.maxWidth = '-webkit-fill-available'; + middleStyle.alignContent = 'flex-start'; if (fontStyle.textAlignHorizontal === 'CENTER') { middleStyle.justifyContent = 'center'; @@ -479,7 +477,6 @@ function setTextRenderer({ node, props, middleStyle, content }, { printStyle }) } if (Object.keys(props).includes('input')) { - makeItFlex(); const inputId = printStyle({ flex: 1, height: '100%' @@ -495,8 +492,6 @@ function setTextRenderer({ node, props, middleStyle, content }, { printStyle }) const styleCache = {}; let currStyle = 0; let currStyleIndex = 0; - let nextLineCounter = 0; - let nextLineIndicator = false; const maxCurrStyle = Object.keys(node.styleOverrideTable) .map(s => Number.parseInt(s, 10)) @@ -529,7 +524,6 @@ function setTextRenderer({ node, props, middleStyle, content }, { printStyle }) ) { styleCache[currStyle].overflow = 'hidden'; styleCache[currStyle].textOverflow = 'ellipsis'; - makeItFlex(); } if (Object.keys(props).includes('ellipsisFlex') && maxCurrStyle === currStyle) { @@ -551,30 +545,33 @@ function setTextRenderer({ node, props, middleStyle, content }, { printStyle }) .join(''); para = para.trim(); - const br = Array(nextLineCounter) - .fill('
') - .join(''); - - if (id) content.push(`${spaceBefore}{\`${para}\`}${spaceAfter}${br}`); - else content.push(`${spaceBefore}{\`${para}\`}${spaceAfter}${br}`); + if (id) content.push(`${spaceBefore}{\`${para}\`}${spaceAfter}`); + else content.push(`${spaceBefore}{\`${para}\`}${spaceAfter}`); para = ''; currStyleIndex++; - - nextLineCounter = 0; - nextLineIndicator = false; }; for (const i in node.characters) { let idx = node.characterStyleOverrides && node.characterStyleOverrides[i]; const char = node.characters[i]; - if (nextLineIndicator && node.characters[i] !== '\n') { - commitParagraph(i); - para += char; + if (node.characters[i] === '\n' && node.characters[i - 1] === '\n') { + const id = printStyle({ + flex: 1, + minWidth: '-webkit-fill-available' + }); + content.push(`
 
`); } else if (node.characters[i] === '\n') { - nextLineIndicator = true; - nextLineCounter++; + commitParagraph(i); + + const id = printStyle({ + flex: 1, + content: '""', + minWidth: '-webkit-fill-available' + }); + content.push(`
`); + middleStyle.flexWrap = 'wrap'; } else { if (idx == null) { idx = 0;