From c291772a85d309a32896ce7d616157d93e631408 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sat, 16 Apr 2022 14:50:51 +0200 Subject: icons-react build --- .build/svgr-template.js | 12 ------- gulpfile.js | 49 ++------------------------ package.json | 10 +++--- packages/icons-react/package.json | 7 +--- scripts/build-react.js | 59 ++++++++++++++++++++++++++++++++ scripts/svgr-template.js | 12 +++++++ scripts/update-unicode.js | 72 +++++++++++++++++++++++++++++++++++++++ scripts/update-version.js | 47 +++++++++++++++++++++++++ scripts/updateUnicode.js | 72 --------------------------------------- scripts/updateVersion.js | 47 ------------------------- scripts/utils.js | 14 ++++++++ 11 files changed, 212 insertions(+), 189 deletions(-) delete mode 100644 .build/svgr-template.js create mode 100644 scripts/build-react.js create mode 100644 scripts/svgr-template.js create mode 100644 scripts/update-unicode.js create mode 100644 scripts/update-version.js delete mode 100644 scripts/updateUnicode.js delete mode 100644 scripts/updateVersion.js create mode 100644 scripts/utils.js diff --git a/.build/svgr-template.js b/.build/svgr-template.js deleted file mode 100644 index c8c41384..00000000 --- a/.build/svgr-template.js +++ /dev/null @@ -1,12 +0,0 @@ -function template( - { template }, - opts, - { imports, componentName, props, jsx, exports }, -) { - return template.ast` - ${imports} - function ${componentName}({ size = 24, color = "currentColor", stroke = 2, ...props }) { return (${jsx}); } - ${exports} - `; -} -module.exports = template; diff --git a/gulpfile.js b/gulpfile.js index d86a965d..7123ab54 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -52,7 +52,7 @@ if (fs.existsSync('./compile-options.json')) { } }) } - + if (typeof tempOptions.excludeIcons !== "undefined") { if (!Array.isArray(tempOptions.excludeIcons)) { throw "property excludeIcons is not an array" @@ -89,11 +89,7 @@ if (fs.existsSync('./compile-options.json')) { } -async function asyncForEach (array, callback) { - for (let index = 0; index < array.length; index++) { - await callback(array[index], index, array) - } -} + const svgToPng = async (filePath, destination) => { filePath = path.join(__dirname, filePath) @@ -592,48 +588,7 @@ gulp.task('clean-react', function (cb) { }) gulp.task('svg-to-react', gulp.series('clean-react', async function (cb) { - let files = glob.sync("./icons/*.svg") - - const camelize = function (str) { - str = str.replace(/-/g, ' ') - - return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) { - return word.toUpperCase() - }).replace(/\s+/g, '') - } - const componentName = function (file) { - file = path.basename(file, '.svg') - file = camelize(`Icon ${file}`) - - return file - } - - const optimizeSvgCode = function (svgCode) { - return svgCode.replace('', '') - } - - let indexCode = '', - indexDCode = `import { FC, SVGAttributes } from 'react';\n\ninterface TablerIconProps extends SVGAttributes { color?: string; size?: string | number; stroke?: string | number; }\n\ntype TablerIcon = FC;\n\n` - - await asyncForEach(files, async function (file) { - const svgCode = optimizeSvgCode(fs.readFileSync(file).toString()), - fileName = path.basename(file, '.svg') + '.js', - iconComponentName = componentName(file) - - await svgr(svgCode, { - icon: false, - svgProps: { width: '{size}', height: '{size}', strokeWidth: '{stroke}', stroke: '{color}' }, - template: require('./.build/svgr-template') - }, { componentName: iconComponentName }).then(jsCode => { - fs.writeFileSync('icons-react/icons-js/' + fileName, jsCode) - indexCode += `export { default as ${iconComponentName} } from './icons-js/${fileName}';\n` - indexDCode += `export const ${iconComponentName}: TablerIcon;\n` - }) - - fs.writeFileSync('icons-react/index.js', indexCode) - fs.writeFileSync('icons-react/index.d.ts', indexDCode) - }) cb() })) diff --git a/package.json b/package.json index e347c01d..4a1fc382 100644 --- a/package.json +++ b/package.json @@ -48,11 +48,12 @@ "access": "public" }, "scripts": { - "build": "yarn optimize && yarn update-version && yarn build-svg && yarn icons-react build", + "build": "yarn optimize && yarn update-version && yarn update-unicode && yarn build-svg && yarn build-react", "build-svg": "rm -rf dist && bundle exec jekyll build && mkdir dist && cp -R _site/{icons,tags.json} dist/ && rm -rf _site", + "build-react": "babel-node ./scripts/build-react.js", "optimize": "babel-node ./scripts/optimize.js --presets @babel/env", - "update-version": "babel-node ./scripts/updateVersion.js --presets @babel/env", - "update-unicode": "babel-node ./scripts/updateUnicode.js --presets @babel/env", + "update-version": "babel-node ./scripts/update-version.js --presets @babel/env", + "update-unicode": "babel-node ./scripts/update-unicode.js --presets @babel/env", "start": "bundle exec jekyll serve --watch --livereload --trace --livereload_port 8888", @@ -60,13 +61,12 @@ "icons-angular": "yarn workspace @tabler/icons-angular", "icons-iconfont": "yarn workspace @tabler/icons-iconfont", "icons-preact": "yarn workspace @tabler/icons-preact", - "icons-react": "yarn workspace @tabler/icons-react", "icons-svelte": "yarn workspace @tabler/icons-svelte", "icons-vue-2": "yarn workspace @tabler/icons-vue-2", "icons-vue-3": "yarn workspace @tabler/icons-vue-3", "prebuild-react": "rm -rf ./icons-react/dist/", - "build-react": "rollup -c", + "_build-react": "rollup -c", "release": "release-it", "_optimize": "gulp optimize", "_build": "gulp build", diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json index 58321f8c..abca00ff 100644 --- a/packages/icons-react/package.json +++ b/packages/icons-react/package.json @@ -16,10 +16,5 @@ "url": "https://github.com/tabler/tabler-icons.git", "directory": "packages/icons-react" }, - "sideEffects": false, - "scripts": { - "build": "yarn clean && yarn build:icons", - "build:icons": "echo 'Build icons React'", - "clean": "rm -rf dist && rm -rf ./src/icons/*.js" - } + "sideEffects": false } diff --git a/scripts/build-react.js b/scripts/build-react.js new file mode 100644 index 00000000..17cbb742 --- /dev/null +++ b/scripts/build-react.js @@ -0,0 +1,59 @@ +const glob = require('glob') +const path = require('path') +const fs = require('fs') +const { default: svgr } = require('@svgr/core') +const { asyncForEach, camelize } = require('./utils') + +const packageDir = path.resolve(__dirname, '../packages/icons-react') + +const optimizeSvgCode = function (svgCode) { + return svgCode + .replace('', '') +} + +const componentName = function (file) { + file = path.basename(file, '.svg') + file = camelize(`Icon ${file}`) + + return file +} + +const buildReact = async () => { + let files = glob.sync(`./dist/icons/*.svg`) + + let indexCode = '', + indexDCode = `import { FC, SVGAttributes } from 'react'; + +interface TablerIconProps extends SVGAttributes { color?: string; size?: string | number; stroke?: string | number; } + +type TablerIcon = FC;\n\n` + + await asyncForEach(files, async function (file) { + const svgCode = optimizeSvgCode(fs.readFileSync(file).toString()), + fileName = path.basename(file, '.svg') + '.js', + iconComponentName = componentName(file) + + if(fs.existsSync(`${packageDir}/icons/`)) { + fs.rmSync(`${packageDir}/icons/`, { recursive: true }) + } + + fs.mkdirSync(`${packageDir}/icons/`, { recursive: true }) + + await svgr(svgCode, { + icon: false, + svgProps: { width: '{size}', height: '{size}', strokeWidth: '{stroke}', stroke: '{color}' }, + template: require('./svgr-template') + }, { componentName: iconComponentName }).then(jsCode => { + fs.writeFileSync(`${packageDir}/icons/${fileName}`, jsCode) + + indexCode += `export { default as ${iconComponentName} } from './icons/${fileName}';\n` + indexDCode += `export const ${iconComponentName}: TablerIcon;\n` + }) + + fs.writeFileSync(`${packageDir}/index.js`, indexCode) + fs.writeFileSync(`${packageDir}/index.d.ts`, indexDCode) + }) +} + + +buildReact() diff --git a/scripts/svgr-template.js b/scripts/svgr-template.js new file mode 100644 index 00000000..c8c41384 --- /dev/null +++ b/scripts/svgr-template.js @@ -0,0 +1,12 @@ +function template( + { template }, + opts, + { imports, componentName, props, jsx, exports }, +) { + return template.ast` + ${imports} + function ${componentName}({ size = 24, color = "currentColor", stroke = 2, ...props }) { return (${jsx}); } + ${exports} + `; +} +module.exports = template; diff --git a/scripts/update-unicode.js b/scripts/update-unicode.js new file mode 100644 index 00000000..8649c435 --- /dev/null +++ b/scripts/update-unicode.js @@ -0,0 +1,72 @@ +import cp from 'child_process' +import fs from 'fs' +import glob from 'glob' + +let maxUnicode = 0 + +const setMaxUnicode = () => { + const path = 'src/_icons/*.svg' + + const files = glob.sync(path) + + files.forEach(function(file) { + const svgFile = fs.readFileSync(file).toString() + + svgFile.replace(/unicode: "([a-f0-9.]+)"/i, function(m, unicode) { + const newUnicode = parseInt(unicode, 16) + + if(newUnicode) { + maxUnicode = Math.max(maxUnicode, newUnicode) + } + }) + }) +} + +const addUnicodeToIcons = (files) => { + + for (const i in files) { + const file = files[i] + + if (fs.existsSync(`src/_icons/${file}.svg`)) { + let svgFile = fs.readFileSync(`src/_icons/${file}.svg`).toString() + + if (!svgFile.match(/unicode: ([a-f0-9.]+)/i)) { + maxUnicode++ + const unicode = maxUnicode.toString(16) + + if(unicode) { + svgFile = svgFile.replace(/---\n/i, function(m) { + return `unicode: "${unicode}"\n${m}` + }) + + console.log(`Add unicode "${unicode}" to "${file}"`); + fs.writeFileSync(`src/_icons/${file}.svg`, svgFile) + } + } else { + console.log(`File ${file} already has unicode`) + } + } else { + console.log(`File ${file} doesn't exists`) + } + } +} + +const updateIconsUnicode = () => { + setMaxUnicode() + + cp.exec(`grep -RiL "unicode: " ./src/_icons/*.svg`, function(err, ret) { + + let newIcons = [] + + ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) { + newIcons.push(fileName) + }) + + if (newIcons.length) { + console.log('newIcons', newIcons.join(', ')); + addUnicodeToIcons(newIcons) + } + }) +} + +updateIconsUnicode() diff --git a/scripts/update-version.js b/scripts/update-version.js new file mode 100644 index 00000000..218ffa9a --- /dev/null +++ b/scripts/update-version.js @@ -0,0 +1,47 @@ +import p from '../package.json' +import cp from 'child_process' +import fs from 'fs' +import { basename } from 'path' + +const setVersionToIcons = (version, files) => { + for (const i in files) { + const file = files[i] + + if (fs.existsSync(`src/_icons/${file}.svg`)) { + let svgFile = fs.readFileSync(`src/_icons/${file}.svg`).toString() + + if (!svgFile.match(/version: ([0-9.]+)/i)) { + svgFile = svgFile.replace(/---\n/i, function(m) { + return `version: "${version}"\n${m}` + }) + + console.log(`Set version to ${version} in "${basename(file)}"`); + fs.writeFileSync(`src/_icons/${file}.svg`, svgFile) + } else { + console.log(`File ${file} already has version`) + } + } else { + console.log(`File ${file} doesn't exists`) + } + } +} + +const updateIconsVersion = (version) => { + + if (version) { + cp.exec(`grep -RiL "version: " ./src/_icons/*.svg`, function(err, ret) { + + let newIcons = [] + + ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) { + newIcons.push(fileName) + }) + + if (newIcons.length) { + setVersionToIcons(version.replace(/\.0$/, ''), newIcons) + } + }) + } +} + +updateIconsVersion(p.version) diff --git a/scripts/updateUnicode.js b/scripts/updateUnicode.js deleted file mode 100644 index 85332d90..00000000 --- a/scripts/updateUnicode.js +++ /dev/null @@ -1,72 +0,0 @@ -import cp from 'child_process' -import fs from 'fs' -import glob from 'glob' - -let maxUnicode = 0 - -const setMaxUnicode = () => { - const path = 'src/_icons/*.svg' - - const files = glob.sync(path) - - files.forEach(function(file) { - const svgFile = fs.readFileSync(file).toString() - - svgFile.replace(/unicode: "([a-f0-9.]+)"/i, function(m, unicode) { - const newUnicode = parseInt(unicode, 16) - - if(newUnicode) { - maxUnicode = Math.max(maxUnicode, newUnicode) - } - }) - }) -} - -const addUnicodeToIcons = (files) => { - - for (const i in files) { - const file = files[i] - - if (fs.existsSync(`src/_icons/${file}.svg`)) { - let svgFile = fs.readFileSync(`src/_icons/${file}.svg`).toString() - - if (!svgFile.match(/unicode: ([a-f0-9.]+)/i)) { - maxUnicode++ - const unicode = maxUnicode.toString(16) - - if(unicode) { - svgFile = svgFile.replace(/---\n/i, function(m) { - return `unicode: "${unicode}"\n${m}` - }) - - console.log(`Add unicode "${unicode}" to "${file}"`); - fs.writeFileSync(`src/_icons/${file}.svg`, svgFile) - } - } else { - console.log(`File ${file} already has unicode`) - } - } else { - console.log(`File ${file} doesn't exists`) - } - } -} - -const updateIconsUnicode = () => { - setMaxUnicode() - - cp.exec(`grep -RiL "unicode: " ./src/_icons/*.svg`, function(err, ret) { - - let newIcons = [] - - ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) { - newIcons.push(fileName) - }) - - if (newIcons.length) { - console.log('newIcons', newIcons); - addUnicodeToIcons(newIcons) - } - }) -} - -updateIconsUnicode() diff --git a/scripts/updateVersion.js b/scripts/updateVersion.js deleted file mode 100644 index 218ffa9a..00000000 --- a/scripts/updateVersion.js +++ /dev/null @@ -1,47 +0,0 @@ -import p from '../package.json' -import cp from 'child_process' -import fs from 'fs' -import { basename } from 'path' - -const setVersionToIcons = (version, files) => { - for (const i in files) { - const file = files[i] - - if (fs.existsSync(`src/_icons/${file}.svg`)) { - let svgFile = fs.readFileSync(`src/_icons/${file}.svg`).toString() - - if (!svgFile.match(/version: ([0-9.]+)/i)) { - svgFile = svgFile.replace(/---\n/i, function(m) { - return `version: "${version}"\n${m}` - }) - - console.log(`Set version to ${version} in "${basename(file)}"`); - fs.writeFileSync(`src/_icons/${file}.svg`, svgFile) - } else { - console.log(`File ${file} already has version`) - } - } else { - console.log(`File ${file} doesn't exists`) - } - } -} - -const updateIconsVersion = (version) => { - - if (version) { - cp.exec(`grep -RiL "version: " ./src/_icons/*.svg`, function(err, ret) { - - let newIcons = [] - - ret.replace(/src\/_icons\/([a-z0-9-]+)\.svg/g, function(m, fileName) { - newIcons.push(fileName) - }) - - if (newIcons.length) { - setVersionToIcons(version.replace(/\.0$/, ''), newIcons) - } - }) - } -} - -updateIconsVersion(p.version) diff --git a/scripts/utils.js b/scripts/utils.js new file mode 100644 index 00000000..86ea64aa --- /dev/null +++ b/scripts/utils.js @@ -0,0 +1,14 @@ +export const asyncForEach = async (array, callback) => { + for (let index = 0; index < array.length; index++) { + await callback(array[index], index, array) + } +} + + +export const camelize = function (str) { + str = str.replace(/-/g, ' ') + + return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) { + return word.toUpperCase() + }).replace(/\s+/g, '') +} -- cgit v1.2.1