Skip to content

Commit ae72f83

Browse files
ctrlplusbctrlplusb
committed
perf(Library): Version 1 release ready.
Wrote a whole bunch of tests and fixed a lot of issues that I found. I believe v1 of the library is ready for release. BREAKING CHANGE: v1 release.
1 parent 173acb4 commit ae72f83

File tree

17 files changed

+471
-218
lines changed

17 files changed

+471
-218
lines changed

‎.babelrc‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
{
22
"presets": ["es2015", "stage-1", "react"],
3-
"plugins": ["lodash"],
43
"ignore": [
54
"/node_modules/"
6-
]
5+
],
6+
"env": {
7+
"test": {
8+
"plugins": ["rewire"]
9+
},
10+
"production": {
11+
"plugins": ["lodash"]
12+
}
13+
}
714
}

‎example/.babelrc‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎example/devServer/index.js‎ renamed to ‎example/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
require(`babel-register`);
2-
require(`./devServer`);
2+
require(`./server`);

‎example/lib/sizeme-example.js‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎example/package.json‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎example/public/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,13 @@
4444

4545
<body>
4646
<div class="header">
47-
<p align='center'>
47+
<p style='text-align: center;'>
4848
<img src='https://raw.githubusercontent.com/ctrlplusb/react-sizeme/master/assets/logo.png' width='350'/>
4949
</p>
5050

51-
<p align='center'>Resize your browser window to see it in action.</p>
51+
<p style='text-align: center; margin-top: 20px;'>
52+
Resize your browser window to see it in action.
53+
</p>
5254
</div>
5355

5456
<div id="app"></div>

‎example/devServer/devServer.js‎ renamed to ‎example/server.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import path from 'path';
22
import express from 'express';
33
import webpack from 'webpack';
4-
import config from '../webpack.config.babel';
4+
import config from './webpack.config.babel';
55

66
const server = express();
77
const compiler = webpack(config);
@@ -14,7 +14,7 @@ server.use(require(`webpack-dev-middleware`)(compiler, {
1414
server.use(require(`webpack-hot-middleware`)(compiler));
1515

1616
server.get(`*`, (req, res) => {
17-
res.sendFile(path.resolve(__dirname, `../public/index.html`));
17+
res.sendFile(path.resolve(__dirname, `./public/index.html`));
1818
});
1919

2020
server.listen(3002, `localhost`, (err) => {

‎example/server/index.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎example/src/MySizeAwareComponent.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,10 @@ if (process.env.NODE_ENV === `development`) {
99
SizeMe = require(`react-sizeme`).default;
1010
}
1111

12-
const baseStyle = {
13-
height: `100px`,
14-
margin: `10px`,
12+
const rootStyle = {
1513
fontWeight: `bold`,
16-
position: `relative`
14+
position: `relative`,
15+
textAlign: `center`
1716
};
1817

1918
const spanStyle = {
@@ -26,8 +25,11 @@ const spanStyle = {
2625

2726
function MyComponent({ size: { width, height }, style }) {
2827
return (
29-
<div style={merge({}, baseStyle, style)}>
30-
<span style={spanStyle}>{width}x{height}</span>
28+
<div style={merge({}, rootStyle, style)}>
29+
<span style={spanStyle}>
30+
{Math.round(width)}x{Math.round(height)}<br />
31+
<span style={{ fontWeight: `normal`, fontStyle: `italic` }}>(rounded)</span>
32+
</span>
3133
</div>
3234
);
3335
}

‎example/src/index.js‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,34 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33
import MySizeAwareComponent from './MySizeAwareComponent.js';
44

5-
const container = document.getElementById(`app`);
5+
function App() {
6+
return (
7+
<div style={{ width: `100%`, height: `100%` }}>
8+
<MySizeAwareComponent
9+
style={{ height: `100px`, backgroundColor: `rgb(139, 155, 244)` }}
10+
/>
11+
<MySizeAwareComponent
12+
style={{ height: `100px`, backgroundColor: `rgb(145, 252, 141)` }}
13+
/>
614

7-
ReactDOM.render((
8-
<div style={{ width: `100%`, height: `100%` }}>
9-
<MySizeAwareComponent style={{ backgroundColor: `rgb(139, 155, 244)` }} />
10-
<MySizeAwareComponent style={{ backgroundColor: `rgb(145, 252, 141)` }} />
15+
<div className="clearfix">
16+
<div style={{ float: `left`, width: `60%` }}>
17+
<MySizeAwareComponent
18+
style={{ height: `500px`, backgroundColor: `rgb(112, 209, 207)` }}
19+
/>
20+
</div>
1121

12-
<div className="clearfix">
13-
<div style={{ float: `left`, width: `60%` }}>
14-
<MySizeAwareComponent style={{ height: `500px`, backgroundColor: `rgb(112, 209, 207)` }} />
15-
</div>
16-
17-
<div style={{ float: `left`, width: `40%` }}>
18-
<MySizeAwareComponent style={{ height: `245px`, backgroundColor: `rgb(29, 165, 154)` }} />
19-
<MySizeAwareComponent style={{ height: `245px`, backgroundColor: `rgb(252, 181, 193)` }} />
22+
<div style={{ float: `left`, width: `40%` }}>
23+
<MySizeAwareComponent
24+
style={{ height: `250px`, backgroundColor: `rgb(29, 165, 154)` }}
25+
/>
26+
<MySizeAwareComponent
27+
style={{ height: `250px`, backgroundColor: `rgb(252, 181, 193)` }}
28+
/>
29+
</div>
2030
</div>
2131
</div>
32+
);
33+
}
2234

23-
24-
</div>
25-
), container);
35+
ReactDOM.render(<App />, document.getElementById(`app`));

0 commit comments

Comments
 (0)