#1127 #1126 #1125 #1139 Icon builder tests, grunt, templating

[tony]

All prior behavior works as intended. Plus:

• main() now accepts a opts, this is used inside of test/index.js and makes the builder usable as an API in user made scripts.
• Wrap argv in a function + require..main === module so it's not ran when build.js is imported as a library
• Add a new argument --renameFilter that can pass in module/js file to rename stuff.
• Adds grunt
• Add grunt watch to rerun tests on save
• grunt mochaTest to run mocha tests
• Tests
  • absolute / relative styles of including library (relative is used on the SvgIcon's in the project)
  • against a an excerpt of a non-mui SVG icon set (game icons)
  • Output directory
  • chai asserts / temp directories
  • fixtures for mui/game icons (also has a variable to toggle using the full library)
  • basic function tests
• Clean up old comments / unnecessary code

Helpful for #1064

[tony]

Finishing this tomorrow.

[tony]

@hai-cea : Ok, updated the original post with the changes. This preserves current functionality and adds test to back it. build.js now works as a module or script, so if a developer has a custom need they can pick what they want.

What do you think?

[hai-cea]

@tony I'm trying to run the default build and am getting some weird results. Are you seeing the same?

//Running with:
npm run build

Here's the JSX that it's currently generating:

let React = require('react');
let SvgIcon = require('../../svg-icon');

;

let ActionAccessibility = React.createClass({

  render() {
    return (
      <path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/>
    );
  }

});

module.exports = ActionAccessibility;

Here's what it should generate:

let React = require('react');
let SvgIcon = require('../../svg-icon');

let ActionAccessibility = React.createClass({

  render() {
    return (
      <SvgIcon {...this.props}>
        <path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/>
      </SvgIcon>
    );
  }

});

module.exports = ActionAccessibility;

[tony]

@hai-cea: Good catch,

Fixed template and added a test for output.

[tony]

The last commit I made simplified things a lot. It handle svg icons for my other icon sets as well as the project's.

• Passes tests (including test added to verify output on a sample file)
• Adds node-glob, mkdirp to scan for file matches (instead of the hard-coded way + it can recursively find svg files now)
• Middleware allows user to rewrite output of files relative to the output directory. By default the output will use the same structure --svgDir / options.svgDir had.
• Arguments for the functions pass options in via options. Default options that work when using build.js as API / unit testing too.

[hai-cea]

Thanks @tony - I'm getting build error when trying to npm run build

hai-mbpro:icon-builder Hai$ npm run build

> [email protected] prebuild /Users/Hai/GitHub/material-ui/icon-builder
> rm -rf js


> [email protected] build /Users/Hai/GitHub/material-ui/icon-builder
> npm run createMuiIconsJsx && babel --stage 1 ./jsx --out-dir ./js


> [email protected] createMuiIconsJsx /Users/Hai/GitHub/material-ui/icon-builder
> node build.js --output-dir jsx --svg-dir ./node_modules/material-design-icons --glob '/**/*_24px.svg' --mui-require relative --renameFilter ./filters/rename/material-design-icons.js

module.js:338
    throw err;
          ^
Error: Cannot find module 'glob'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/Hai/GitHub/material-ui/icon-builder/build.js:16:12)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)

[tony]

@hai-cea Give it a shot now. It was missing a package.

[hai-cea]

@tony Beautiful - thanks! 👍