From 6a5f5bf0283458aabdcc34eb695175cfea4a632f Mon Sep 17 00:00:00 2001 From: codecalm Date: Sun, 17 Apr 2022 20:43:39 +0200 Subject: build react script --- package.json | 5 +++-- scripts/build-preact.js | 1 + scripts/build-react.js | 31 ++++++++++++++++++------------- scripts/build-vue-2.js | 3 +++ scripts/svgr-template.js | 12 ------------ scripts/utils.js | 5 +++++ 6 files changed, 30 insertions(+), 27 deletions(-) create mode 100644 scripts/build-preact.js create mode 100644 scripts/build-vue-2.js delete mode 100644 scripts/svgr-template.js diff --git a/package.json b/package.json index a3d9f20f..09c63787 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,8 @@ "scripts": { "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", + "prebuild-react": "rm -rf ./packages/icons-react/{icons,index.js,index.d.ts}", + "build-react": "babel-node ./scripts/build-react.js --presets @babel/env", "optimize": "babel-node ./scripts/optimize.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", @@ -61,7 +62,7 @@ "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/", + "_prebuild-react": "rm -rf ./icons-react/dist/", "_build-react": "rollup -c", "release": "release-it", "_optimize": "gulp optimize", diff --git a/scripts/build-preact.js b/scripts/build-preact.js new file mode 100644 index 00000000..908ba841 --- /dev/null +++ b/scripts/build-preact.js @@ -0,0 +1 @@ +#!/usr/bin/env node diff --git a/scripts/build-react.js b/scripts/build-react.js index 17cbb742..2aa87d0e 100644 --- a/scripts/build-react.js +++ b/scripts/build-react.js @@ -1,14 +1,23 @@ -const glob = require('glob') -const path = require('path') -const fs = require('fs') -const { default: svgr } = require('@svgr/core') -const { asyncForEach, camelize } = require('./utils') +#!/usr/bin/env node + +import glob from 'glob' +import path from 'path' +import fs from 'fs' +import svgr from '@svgr/core' +import { asyncForEach, camelize, optimizeSvgCode } from './utils' const packageDir = path.resolve(__dirname, '../packages/icons-react') -const optimizeSvgCode = function (svgCode) { - return svgCode - .replace('', '') +const componentTemplate = 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} + `; } const componentName = function (file) { @@ -33,16 +42,12 @@ type TablerIcon = FC;\n\n` 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') + template: componentTemplate }, { componentName: iconComponentName }).then(jsCode => { fs.writeFileSync(`${packageDir}/icons/${fileName}`, jsCode) diff --git a/scripts/build-vue-2.js b/scripts/build-vue-2.js new file mode 100644 index 00000000..633f1e1c --- /dev/null +++ b/scripts/build-vue-2.js @@ -0,0 +1,3 @@ +#!/usr/bin/env node + + diff --git a/scripts/svgr-template.js b/scripts/svgr-template.js deleted file mode 100644 index c8c41384..00000000 --- a/scripts/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/scripts/utils.js b/scripts/utils.js index 86ea64aa..f305dc72 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -12,3 +12,8 @@ export const camelize = function (str) { return word.toUpperCase() }).replace(/\s+/g, '') } + +export const optimizeSvgCode = function (svgCode) { + return svgCode + .replace('', '') +} -- cgit v1.2.1