From 034c96a57b8d2c14b5ad0f8cae8862a217310b42 Mon Sep 17 00:00:00 2001 From: Tony Narlock Date: Sun, 12 Jul 2015 12:31:12 -0500 Subject: [PATCH] https://github.com/callemall/material-ui/issues/1139 split file renaming into module / argument. --- icon-builder/build.js | 61 ++++++++++--------- icon-builder/filters/rename/default.js | 12 ++++ .../filters/rename/material-design-icons.js | 14 +++++ icon-builder/package.json | 2 +- icon-builder/test/index.js | 16 +++-- 5 files changed, 70 insertions(+), 35 deletions(-) create mode 100644 icon-builder/filters/rename/default.js create mode 100644 icon-builder/filters/rename/material-design-icons.js diff --git a/icon-builder/build.js b/icon-builder/build.js index e20e36eb7e2f70..d89f34ed9b6497 100755 --- a/icon-builder/build.js +++ b/icon-builder/build.js @@ -12,9 +12,12 @@ var fs = require('fs'); var path = require('path'); var rimraf = require('rimraf'); var Mustache = require("mustache"); +var _ = require('lodash'); -var svgIconRelativeRequire = "require('../../svg-icon');\n\n"; -var svgIconAbsoluteRequire = "require('material-ui/lib/svg-icon');\n\n" +var svgIconRelativeRequire = "require('../../svg-icon');\n\n" + , svgIconAbsoluteRequire = "require('material-ui/lib/svg-icon');\n\n" + , defaultRenameFilter = './filters/rename/default' + , muiRenameFilter = './filters/rename/material-design-icons'; function parseArgs() { return require('yargs') @@ -28,6 +31,9 @@ function parseArgs() { ' e.g. "action/svg/production/icon_3d_rotation_24px.svg"') .describe('file-suffix', 'Filter only files ending with a suffix (pretty much only' + ' for material-ui-icons)') + .options('rename-filter', { + default: defaultRenameFilter + }) .options('mui-require', { demand: false, default: 'absolute', @@ -48,11 +54,20 @@ function main(options, cb) { rimraf.sync(options.outputDir); // Clean old files console.log('** Starting Build'); - //Process each folder var dirs = fs.readdirSync(options.svgDir); + + var renameFilter = options.renameFilter; + if (_.isString(renameFilter)) { + renameFilter = require(renameFilter); + } + if (!_.isFunction(renameFilter)) { + throw Error("renameFilter must be a function"); + } + fs.mkdirSync(options.outputDir); + dirs.forEach(function(dirName) { - processDir(dirName, options.svgDir, options.outputDir, options.innerPath, options.fileSuffix, options.muiRequire) + processDir(dirName, options.svgDir, options.outputDir, options.innerPath, options.fileSuffix, renameFilter, options.muiRequire) }); if (cb) { @@ -64,7 +79,7 @@ function main(options, cb) { } } -function processDir(dirName, svgDir, outputDir, innerPath, fileSuffix, muiRequire) { +function processDir(dirName, svgDir, outputDir, innerPath, fileSuffix, renameFilter, muiRequire) { var newIconDirPath = path.join(outputDir, dirName); var svgIconDirPath = path.join(svgDir, dirName, innerPath); if (!fs.existsSync(svgIconDirPath)) { return false; } @@ -76,37 +91,21 @@ function processDir(dirName, svgDir, outputDir, innerPath, fileSuffix, muiRequir fs.mkdirSync(newIconDirPath); files.forEach(function(fileName) { - processFile(dirName, fileName, newIconDirPath, svgIconDirPath, fileSuffix, muiRequire); + processFile(dirName, fileName, newIconDirPath, svgIconDirPath, fileSuffix, renameFilter, muiRequire); }); } -function processFile(dirName, fileName, dirPath, svgDirPath, fileSuffix, muiRequire) { - //Only process 24px files +function processFile(dirName, fileName, dirPath, svgDirPath, fileSuffix, renameFilter, muiRequire) { + var fullPath; var svgFilePath = svgDirPath + '/' + fileName; - var newFile; - if (fileSuffix) { - // todo: rm / separate material icons only code - // Things like .slice and 3d are only for material-ui - if (fileName.indexOf(fileSuffix, fileName.length - fileSuffix.length) !== -1) { - fileName = fileName.replace(fileSuffix, '.jsx'); - fileName = fileName.slice(3); - fileName = fileName.replace(/_/g, '-'); - - if (fileName.indexOf('3d') === 0) { - fileName = 'three-d' + fileName.slice(2); - } - } else { - return; - } - } else { - fileName = fileName.replace('.svg', '.jsx'); - fileName = fileName.replace(/_/g, '-'); - } - newFile = path.join(dirPath, fileName); + + fileName = renameFilter(fileName, fileSuffix); + if (!fileName) return; // filter can return a falsey to skip + fullPath = path.join(dirPath, fileName); //console.log('writing ' + newFile); var fileString = getJsxString(dirName, fileName, svgFilePath, muiRequire); - fs.writeFileSync(newFile, fileString); + fs.writeFileSync(fullPath, fileString); } function getJsxString(dirName, newFilename, svgFilePath, muiRequire, fileString) { @@ -160,5 +159,7 @@ module.exports = { processFile: processFile, main: main, svgIconRelativeRequire: svgIconRelativeRequire, - svgIconAbsoluteRequire: svgIconAbsoluteRequire + svgIconAbsoluteRequire: svgIconAbsoluteRequire, + defaultRenameFilter: defaultRenameFilter, + muiRenameFilter: muiRenameFilter } diff --git a/icon-builder/filters/rename/default.js b/icon-builder/filters/rename/default.js new file mode 100644 index 00000000000000..980264cb14c6c8 --- /dev/null +++ b/icon-builder/filters/rename/default.js @@ -0,0 +1,12 @@ +function defaultFilter(fileName, fileSuffix) { + if (fileSuffix) { + fileName.replace(fileSuffix, ".svg"); + } else { + fileName = fileName.replace('.svg', '.jsx'); + } + fileName = fileName.replace(/_/g, '-'); + return fileName; +} + + +module.exports = defaultFilter; diff --git a/icon-builder/filters/rename/material-design-icons.js b/icon-builder/filters/rename/material-design-icons.js new file mode 100644 index 00000000000000..a9931c59da600e --- /dev/null +++ b/icon-builder/filters/rename/material-design-icons.js @@ -0,0 +1,14 @@ +function myFilter(fileName, fileSuffix) { + if (fileSuffix && fileName.indexOf(fileSuffix, fileName.length - fileSuffix.length) !== -1) { + fileName = fileName.replace(fileSuffix, '.jsx'); + fileName = fileName.slice(3); + fileName = fileName.replace(/_/g, '-'); + + if (fileName.indexOf('3d') === 0) { + fileName = 'three-d' + fileName.slice(2); + } + return fileName; + } +} + +module.exports = myFilter; diff --git a/icon-builder/package.json b/icon-builder/package.json index aa10c3dd59ac7a..141dded24f9380 100644 --- a/icon-builder/package.json +++ b/icon-builder/package.json @@ -4,7 +4,7 @@ "description": "Material Design Svg Icons converted to React components.", "scripts": { "prebuild": "rm -rf js", - "createMuiIconsJsx": "node build.js --output-dir jsx --svg-dir ./node_modules/material-design-icons --inner-path /svg/production/ --file-suffix _24px.svg --mui-require relative", + "createMuiIconsJsx": "node build.js --output-dir jsx --svg-dir ./node_modules/material-design-icons --inner-path /svg/production/ --file-suffix _24px.svg --mui-require relative --renameFilter ./filters/rename/material-design-icons.js", "build": "npm run createMuiIconsJsx && babel --stage 1 ./jsx --out-dir ./js", "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/icon-builder/test/index.js b/icon-builder/test/index.js index 6cb27621fe4d88..8365e28211958e 100644 --- a/icon-builder/test/index.js +++ b/icon-builder/test/index.js @@ -5,6 +5,8 @@ var path = require('path'); var temp = require('temp').track(); var _ = require('lodash'); +var DISABLE_LOG = true; + // To cut down on test time, use fixtures instead of node_modules // TODO: Make a flag to toggle this. var muiIconsDir = path.join(__dirname, './fixtures/material-design-icons/'); @@ -71,13 +73,16 @@ describe('builder', function() { }); }); + // renameFilter = require('filter/rename/default'); + // renameFilter = require('filter/rename/material-design-icons'); describe('--output-dir', function() { var options = { svgDir: muiIconsDir, innerPath: "/svg/production/", fileSuffix: "_24px.svg", - disable_log: true + renameFilter: builder.muiRenameFilter, + disable_log: DISABLE_LOG }, tempPath; before(function() { @@ -93,7 +98,6 @@ describe('--output-dir', function() { builder.main(options, function() { assert.ok(fs.lstatSync(tempPath).isDirectory()); assert.ok(fs.lstatSync(path.join(tempPath, "action")).isDirectory()); - done(); }); }); @@ -104,7 +108,9 @@ describe('--svg-dir, --innerPath, --fileSuffix', function() { var options = { svgDir: gameIconsDir, innerPath: "/dice/svg/000000/transparent/", - muiRequire: 'absolute' + muiRequire: 'absolute', + renameFilter: builder.defaultRenameFilter, + disable_log: DISABLE_LOG, }, tempPath, jsxExampleOutputPath; before(function() { @@ -120,6 +126,7 @@ describe('--svg-dir, --innerPath, --fileSuffix', function() { builder.main(options, function() { assert.ok(fs.lstatSync(tempPath).isDirectory()); assert.ok(fs.lstatSync(path.join(tempPath, "delapouite")).isDirectory()); + jsxExampleOutputPath = path.join(tempPath, 'delapouite', 'dice-six-faces-four.jsx'); data = fs.readFileSync(jsxExampleOutputPath, {encoding: 'utf8'}); assert.include(data, builder.svgIconAbsoluteRequire); @@ -135,7 +142,8 @@ describe('--mui-require', function() { svgDir: muiIconsDir, innerPath: "/svg/production/", fileSuffix: "_24px.svg", - disable_log: true + disable_log: DISABLE_LOG, + renameFilter: builder.muiRenameFilter, }, tempPath, jsxExampleOutputPath; before(function() {