[go: nahoru, domu]

Skip to content

Commit

Permalink
pre-build svgs to jsx [#152971919]
Browse files Browse the repository at this point in the history
  • Loading branch information
sjolicoeur authored and apps-manager committed Dec 8, 2017
1 parent 0c4ca64 commit 934f2ad
Show file tree
Hide file tree
Showing 8 changed files with 122 additions and 29 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -57,3 +57,5 @@ vendor/ruby

## Sinopia storage
/.sinopia/storage

src/react/iconography/icons.js
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
"stringifier": "^1.3.0",
"strong-wait-till-listening": "^1.0.1",
"style-loader": "^0.18.2",
"svg-to-jsx": "^0.0.21",
"through": "^2.3.8",
"through2": "^0.6.3",
"url-loader": "^0.5.9",
Expand Down
6 changes: 3 additions & 3 deletions spec/pivotal-ui-react/buttons/buttons_spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -206,23 +206,23 @@ describe('UIButton', () => {
describe('iconPosition', () => {
describe('is not set', () => {
it('renders the icon to the left', () => {
subject = renderComponent({icon: <Icon src="spinner_icon"/>});
subject = renderComponent({icon: <Icon src="spinner-sm"/>});
const icon = ReactTestUtils.findRenderedDOMComponentWithClass(subject, 'icon');
expect(icon.nextSibling.tagName).toEqual('SPAN');
});
});

describe('is set to left', () => {
it('renders the icon to the left', () => {
subject = renderComponent({icon: <Icon src="spinner_icon"/>});
subject = renderComponent({icon: <Icon src="spinner-sm"/>});
const icon = ReactTestUtils.findRenderedDOMComponentWithClass(subject, 'icon');
expect(icon.nextSibling.tagName).toEqual('SPAN');
});
});

describe('is set right', () => {
it('renders the icon to the right', () => {
subject = renderComponent({icon: <Icon src="spinner_icon"/>, iconPosition: 'right'});
subject = renderComponent({icon: <Icon src="spinner-sm"/>, iconPosition: 'right'});
const icon = ReactTestUtils.findRenderedDOMComponentWithClass(subject, 'icon');
expect(icon.previousSibling.tagName).toEqual('SPAN');
});
Expand Down
17 changes: 2 additions & 15 deletions src/react/iconography/iconography.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,8 @@
import {mergeProps} from '../helpers';
import PropTypes from 'prop-types';
import React from 'react';
import {Svg} from '../svg';
import classnames from 'classnames';

class SvgIcon extends Svg {
svgPathLoader = src => {
try {
return require(`!!babel-loader?{"presets":["react"]}!react-svg-loader?{"svgo":{"plugins":[{"removeUnknownsAndDefaults":false},{"cleanupNumericValues":false},{"removeUselessStrokeAndFill":false}]}}!../../css/iconography/svgs/${src}.svg`);
} catch (e) {
try {
return require(`!!babel-loader?{"presets":["react"]}!react-svg-loader?{"svgo":{"plugins":[{"removeUnknownsAndDefaults":false},{"cleanupNumericValues":false},{"removeUselessStrokeAndFill":false}]}}!../../../../app/svgs/${src}.svg`);
} catch (e) {
}
}
}
}
import Icons from './icons';

export class Icon extends React.Component {
static propTypes = {
Expand All @@ -42,7 +29,7 @@ export class Icon extends React.Component {
);

return (<div {...props}>
<SvgIcon {...{src, className: `icon-${src}`, key: src}}/>
{React.cloneElement(Icons[src], {className: `icon-${src}`, key: src})}
</div>);
}
}
66 changes: 63 additions & 3 deletions tasks/react-components.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,79 @@
import del from 'del';
import gulp from 'gulp';
import runSequence from 'run-sequence';
import svgToJs from 'svg-to-jsx';
import fs from 'fs';

const plugins = require('gulp-load-plugins')();
const COPYRIGHT = '/*(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.*/\n';
const srcFolder = 'src/react';
const buildFolder = 'dist/react';

gulp.task('react-build-src', function() {
return gulp.src('src/react/**/*.js')
function readdir(path) {
return new Promise((res, rej) => {
fs.readdir(path, (err, items) => {
if (err) return rej(err);
res(items);
});
});
}

function readFile(path) {
return new Promise((res, rej) => {
fs.readFile(path, (err, data) => {
if (err) return rej(err);
res(data);
});
});
}

function mkdir(path) {
return new Promise((res, rej) => {
fs.mkdir(path, err => {
if (err) return rej(err);
res();
});
});
}

function writeFile(path, data) {
return new Promise((res, rej) => {
fs.writeFile(path, data, err => {
if (err) return rej(err);
res();
});
});
}

gulp.task('react-build-src', function () {
return gulp.src(`${srcFolder}/**/*.js`)
.pipe(plugins.plumber())
.pipe(plugins.babel())
.pipe(plugins.header(COPYRIGHT))
.pipe(gulp.dest(buildFolder));
});

gulp.task('react-build-svgs', async() => {
const items = await readdir('./src/css/iconography/svgs');
const svgInfos = items.map(item => ({item, promise: readFile(`./src/css/iconography/svgs/${item}`)}));
const svgs = [];
for (let i = 0; i < svgInfos.length; i++) {
const {item, promise} = svgInfos[i];
const name = item.replace(/\.svg$/, '');
const svg = await promise;
svgs.push({name, svg});
}
const jsxInfos = svgs.map(({name, svg}) => ({name, promise: svgToJs(svg)}));
const jsxs = [];
for (let i = 0; i < jsxInfos.length; i++) {
const {name, promise} = jsxInfos[i];
jsxs.push(` '${name}': (${(await promise).toString()})`);
}
const iconsPath = `${srcFolder}/iconography/icons.js`;
const icons = `import React from 'react';\n\nexport default {\n${jsxs.join(',\n')}\n}`;
await writeFile(iconsPath, icons);
});

gulp.task('react-clean', callback => del([buildFolder], callback));

gulp.task('react-build', callback => runSequence('react-clean', 'react-build-src', callback));
gulp.task('react-build', callback => runSequence('react-clean', 'react-build-svgs', 'react-build-src', callback));
2 changes: 1 addition & 1 deletion tasks/sandbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ gulp.task('sandbox-copy-html', () =>
.pipe(gulp.dest(SANDBOX_BUILD_DIR))
);

gulp.task('sandbox-build-js', () =>
gulp.task('sandbox-build-js', ['react-build-svgs'], () =>
gulp.src('sandbox/index.js')
.pipe(plugins.plumber())
.pipe(webpack(webpackConfig()))
Expand Down
4 changes: 2 additions & 2 deletions tasks/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@ function reactTestAssets(options = {}) {
.pipe(webpack(config));
}

gulp.task('jasmine-react-ci', function() {
gulp.task('jasmine-react-ci', ['react-build-svgs'], function() {
return reactTestAssets({watch: false})
.pipe(jasmineBrowser.specRunner({console: true}))
.pipe(jasmineBrowser.headless({driver: 'phantomjs'}));
});

gulp.task('jasmine-react', function() {
gulp.task('jasmine-react', ['react-build-svgs'], function() {
var plugin = new (require('gulp-jasmine-browser/webpack/jasmine-plugin'))();
return reactTestAssets({plugins: [plugin]})
.pipe(jasmineBrowser.specRunner({
Expand Down
53 changes: 48 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1575,7 +1575,7 @@ camelcase@^1.0.2:
version "1.2.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"

camelcase@^2.0.0:
camelcase@^2.0.0, camelcase@^2.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"

Expand Down Expand Up @@ -1736,7 +1736,7 @@ cliui@^2.1.0:
right-align "^0.1.1"
wordwrap "0.0.2"

cliui@^3.2.0:
cliui@^3.0.3, cliui@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
dependencies:
Expand Down Expand Up @@ -5741,7 +5741,7 @@ lodash@^2.4.1:
version "2.4.2"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-2.4.2.tgz#fadd834b9683073da179b3eae6d9c0d15053f73e"

lodash@^3.3.1, lodash@^3.8.0, lodash@^3.9.3:
lodash@^3.3.1, lodash@^3.5.0, lodash@^3.8.0, lodash@^3.9.3:
version "3.10.1"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"

Expand Down Expand Up @@ -8270,7 +8270,7 @@ sass-loader@^6.0.0:
lodash.tail "^4.1.1"
pify "^3.0.0"

sax@~1.2.1:
sax@>=0.6.0, sax@~1.2.1:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"

Expand Down Expand Up @@ -8896,6 +8896,16 @@ supports-color@^4.0.0, supports-color@^4.2.1, supports-color@^4.4.0:
dependencies:
has-flag "^2.0.0"

svg-to-jsx@^0.0.21:
version "0.0.21"
resolved "https://registry.yarnpkg.com/svg-to-jsx/-/svg-to-jsx-0.0.21.tgz#96bf2f1819d8ecbad4d46bb61017c2fee73de5e6"
dependencies:
object-assign "^4.0.1"
q "^1.4.1"
xml2js "^0.4.10"
xmlbuilder "^2.6.4"
yargs "^3.21.0"

svgo@^0.7.0:
version "0.7.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
Expand Down Expand Up @@ -9746,6 +9756,10 @@ window-size@0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"

window-size@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"

window-size@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
Expand Down Expand Up @@ -9813,6 +9827,23 @@ xdg-basedir@^2.0.0:
dependencies:
os-homedir "^1.0.0"

xml2js@^0.4.10:
version "0.4.19"
resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
dependencies:
sax ">=0.6.0"
xmlbuilder "~9.0.1"

xmlbuilder@^2.6.4:
version "2.6.5"
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-2.6.5.tgz#6ff7ad60fb72d22764f007a164b77f2bf1400526"
dependencies:
lodash "^3.5.0"

xmlbuilder@~9.0.1:
version "9.0.4"
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f"

"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
Expand All @@ -9827,7 +9858,7 @@ xtend@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/xtend/-/xtend-3.0.0.tgz#5cce7407baf642cba7becda568111c493f59665a"

y18n@^3.2.1:
y18n@^3.2.0, y18n@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"

Expand Down Expand Up @@ -9858,6 +9889,18 @@ yargs@^1.3.3:
version "1.3.3"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-1.3.3.tgz#054de8b61f22eefdb7207059eaef9d6b83fb931a"

yargs@^3.21.0:
version "3.32.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
dependencies:
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"

yargs@^7.0.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
Expand Down

0 comments on commit 934f2ad

Please sign in to comment.