Skip to content

Commit 867f17c

Browse files
matteocngmatteocng
committed
feat: add Webpack and React-Flag-Icon-Css version as globals and display them
1 parent 675ac4d commit 867f17c

File tree

8 files changed

+99
-108
lines changed

8 files changed

+99
-108
lines changed

‎.eslintrc.js‎

Lines changed: 17 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
11
module.exports = {
22
parser: 'babel-eslint',
3-
plugins: [
4-
'react',
5-
'flowtype',
6-
'import',
7-
'babel'
8-
],
3+
plugins: ['react', 'flowtype', 'import', 'babel'],
94
env: {
105
browser: true
116
},
127
extends: ['airbnb'],
138
globals: {
14-
__USE_CSS_MODULES__: true
9+
__USE_CSS_MODULES__: true,
10+
MODULE_VERSION_WEBPACK: '',
11+
MODULE_VERSION_REACT_FLAG_ICON_CSS: ''
1512
},
16-
rules:
17-
{
13+
rules: {
1814
'import/no-duplicates': 1,
1915
'no-duplicate-imports': 0,
2016
'babel/new-cap': 0,
@@ -25,19 +21,10 @@ module.exports = {
2521
'comma-dangle': 0,
2622
'react/jsx-filename-extension': 0,
2723
'react/require-extension': 'off',
28-
'flowtype/boolean-style': [
29-
2,
30-
'boolean'
31-
],
24+
'flowtype/boolean-style': [2, 'boolean'],
3225
'flowtype/define-flow-type': 1,
33-
'flowtype/delimiter-dangle': [
34-
2,
35-
'never'
36-
],
37-
'flowtype/generic-spacing': [
38-
2,
39-
'never'
40-
],
26+
'flowtype/delimiter-dangle': [2, 'never'],
27+
'flowtype/generic-spacing': [2, 'never'],
4128
'flowtype/no-weak-types': 2,
4229
'flowtype/require-parameter-type': 2,
4330
'flowtype/require-return-type': [
@@ -48,38 +35,18 @@ module.exports = {
4835
}
4936
],
5037
'flowtype/require-valid-file-annotation': 2,
51-
'flowtype/semi': [
52-
2,
53-
'never'
54-
],
55-
'flowtype/space-after-type-colon': [
56-
2,
57-
'always'
58-
],
59-
'flowtype/space-before-generic-bracket': [
60-
2,
61-
'never'
62-
],
63-
'flowtype/space-before-type-colon': [
64-
2,
65-
'never'
66-
],
67-
'flowtype/type-id-match': [
68-
2,
69-
'^([A-Z][a-z0-9]+)+Type$'
70-
],
71-
'flowtype/union-intersection-spacing': [
72-
2,
73-
'always'
74-
],
38+
'flowtype/semi': [2, 'never'],
39+
'flowtype/space-after-type-colon': [2, 'always'],
40+
'flowtype/space-before-generic-bracket': [2, 'never'],
41+
'flowtype/space-before-type-colon': [2, 'never'],
42+
'flowtype/type-id-match': [2, '^([A-Z][a-z0-9]+)+Type$'],
43+
'flowtype/union-intersection-spacing': [2, 'always'],
7544
'flowtype/use-flow-type': 1,
7645
'flowtype/valid-syntax': 1
7746
},
78-
settings:
79-
{
80-
flowtype:
81-
{
47+
settings: {
48+
flowtype: {
8249
onlyFilesWithFlowAnnotation: false
8350
}
8451
}
85-
}
52+
};

‎flow/decls/decls.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
declare var __USE_CSS_MODULES__: boolean
1+
declare var __USE_CSS_MODULES__: boolean;
2+
declare var MODULE_VERSION_REACT_FLAG_ICON_CSS: string;
3+
declare var MODULE_VERSION_WEBPACK: string;

‎src/js/App.js‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,26 @@ const AppFactory = (options: AppFactoryOptionsType): StatelessFunctionalComponen
3030
const propsHeading = { [styleProp]: 'heading' };
3131
const propsSubHeading = { [styleProp]: 'sub-heading' };
3232
const propsFlagContainer = { [styleProp]: 'flag-container' };
33-
const { headingText, subHeadingText } = props;
33+
const propsSup = { [styleProp]: 'sup' };
34+
const {
35+
headingText,
36+
moduleVersionReactFlagIconCss,
37+
moduleVersionWebpack,
38+
useCssModules
39+
} = props;
40+
41+
const subHeadingText = `Webpack (${moduleVersionWebpack}) Example ${
42+
useCssModules ? 'using CSS Modules' : 'with global CSS'
43+
}`;
3444

3545
return (
3646
<span>
3747
<div {...propsHeader}>
3848
<div {...propsHeading}>
3949
{headingText}
50+
<sup {...propsSup}>
51+
{moduleVersionReactFlagIconCss}
52+
</sup>
4053
</div>
4154
<div {...propsSubHeading}>
4255
{subHeadingText}
@@ -54,16 +67,15 @@ const AppFactory = (options: AppFactoryOptionsType): StatelessFunctionalComponen
5467
App.displayName = 'App';
5568

5669
App.propTypes = {
57-
stylePropName: PropTypes.string.isRequired,
5870
headingText: PropTypes.string.isRequired,
59-
subHeadingText: PropTypes.string.isRequired,
71+
moduleVersionWebpack: PropTypes.string.isRequired,
72+
moduleVersionReactFlagIconCss: PropTypes.string.isRequired,
73+
useCssModules: PropTypes.bool.isRequired
6074
};
6175

62-
return App
63-
}
76+
return App;
77+
};
6478
const AppComponent = AppFactory({ stylePropName });
65-
const AppComponentTransformed = __USE_CSS_MODULES__
66-
? CssModules(AppComponent)
67-
: AppComponent;
79+
const AppComponentTransformed = __USE_CSS_MODULES__ ? CssModules(AppComponent) : AppComponent;
6880

6981
export default AppComponentTransformed;

‎src/js/index.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
// @flow
2-
import ReactDOM from 'react-dom'
3-
import React from 'react'
4-
import App from './App'
5-
import type { AppPropsType } from '../types/flow'
6-
2+
import ReactDOM from 'react-dom';
3+
import React from 'react';
4+
import App from './App';
5+
import type { AppPropsType } from '../types/flow';
76

87
const appProps: AppPropsType = {
98
headingText: 'React Flag Icon Css',
10-
subHeadingText: `Webpack Example ${__USE_CSS_MODULES__ ? 'using CSS Modules' : 'with global CSS'}`
11-
}
9+
useCssModules: __USE_CSS_MODULES__,
10+
moduleVersionWebpack: MODULE_VERSION_WEBPACK,
11+
moduleVersionReactFlagIconCss: MODULE_VERSION_REACT_FLAG_ICON_CSS
12+
};
1213

13-
const rootEL = document.querySelector('#app')
14+
const rootEL = document.querySelector('#app');
1415
const render = () => {
1516
if (rootEL !== null) {
16-
ReactDOM.render(<App {...appProps} />, rootEL)
17+
ReactDOM.render(<App {...appProps} />, rootEL);
1718
}
18-
}
19+
};
1920

20-
render()
21+
render();

‎src/styles/app.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ body {
2727
font-size: 0.8rem;
2828
}
2929

30+
.sup {
31+
font-size: 0.9rem;
32+
padding-left: 0.5rem;
33+
}
34+
3035
// Flags
3136

3237
.flag-container {

‎src/types/flow.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ export type AppFactoryOptionsType = {|
1212

1313
export type AppPropsType = {|
1414
headingText: String,
15-
subHeadingText: String
15+
subHeadingText: String,
16+
moduleVersionReactFlagIconCss: String
1617
|}
1718

1819
export type KeyType = string | number

‎webpack/server.js‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
11
// eslint-disable-next-line import/no-extraneous-dependencies
2-
import WebpackDevServer from 'webpack-dev-server'
2+
import WebpackDevServer from 'webpack-dev-server';
33
// eslint-disable-next-line import/no-extraneous-dependencies
4-
import webpack from 'webpack'
5-
import configMaker, { outputPath } from './webpack.config'
4+
import webpack from 'webpack';
5+
import configMaker, { outputPath } from './webpack.config';
6+
import packageJson from '../package.json';
67

7-
const config = configMaker()
8-
const compiler = webpack(config)
8+
const {
9+
dependencies,
10+
devDependencies: { webpack: moduleVersionWebpack }
11+
} = packageJson;
12+
const moduleVersionReactFlagIconCss = dependencies['react-flag-icon-css'];
13+
14+
const config = configMaker({ moduleVersionReactFlagIconCss, moduleVersionWebpack });
15+
const compiler = webpack(config);
916

1017
const server = new WebpackDevServer(compiler, {
1118
contentBase: outputPath,
1219
filename: config.output.filename,
1320
publicPath: config.output.publicPath,
1421
stats: {
15-
colors: true,
16-
},
17-
})
22+
colors: true
23+
}
24+
});
1825

19-
server.listen(8080, '0.0.0.0', () => { })
26+
server.listen(8080, '0.0.0.0', () => {});

‎webpack/webpack.config.js‎

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import path from 'path'
2-
import webpack from 'webpack'
3-
import HtmlWebpackPlugin from 'html-webpack-plugin' // eslint-disable-line import/no-extraneous-dependencies
4-
import ExtractTextPlugin from 'extract-text-webpack-plugin' // eslint-disable-line import/no-extraneous-dependencies
5-
import autoprefixer from 'autoprefixer' // eslint-disable-line import/no-extraneous-dependencies
1+
import path from 'path';
2+
import webpack from 'webpack';
3+
import HtmlWebpackPlugin from 'html-webpack-plugin'; // eslint-disable-line import/no-extraneous-dependencies
4+
import ExtractTextPlugin from 'extract-text-webpack-plugin'; // eslint-disable-line import/no-extraneous-dependencies
5+
import autoprefixer from 'autoprefixer'; // eslint-disable-line import/no-extraneous-dependencies
66

7-
8-
const port = 8080
9-
const JS_REGEX = /\.js$|\.jsx$|\.es6$|\.babel$/
10-
const CSS_REGEX = /\.css$|\.scss$/
11-
const context = path.join(__dirname, '../src/js')
12-
export const outputPath = 'www'
7+
const port = 8080;
8+
const JS_REGEX = /\.js$|\.jsx$|\.es6$|\.babel$/;
9+
const CSS_REGEX = /\.css$|\.scss$/;
10+
const context = path.join(__dirname, '../src/js');
11+
export const outputPath = 'www';
1312

1413
type GetRulesInputType = { useCssModules: boolean }
1514

@@ -35,14 +34,12 @@ const getRules = ({ useCssModules }: GetRulesInputType): {}[] => [
3534
{
3635
loader: 'postcss-loader',
3736
options: {
38-
plugins: [
39-
autoprefixer({ browsers: ['last 4 versions'] }),
40-
],
37+
plugins: [autoprefixer({ browsers: ['last 4 versions'] })]
4138
}
4239
},
4340
{ loader: 'sass-loader', options: {} }
4441
]
45-
}),
42+
})
4643
},
4744
{
4845
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
@@ -52,23 +49,20 @@ const getRules = ({ useCssModules }: GetRulesInputType): {}[] => [
5249
test: /\.json$/,
5350
loader: 'json-loader'
5451
}
55-
]
56-
52+
];
5753

5854
const config = (options: {}): {} => {
59-
const useCssModules = JSON.parse(process.env.USE_CSS_MODULES)
60-
const computedOptions = { useCssModules, ...options }
55+
const useCssModules = JSON.parse(process.env.USE_CSS_MODULES);
56+
const computedOptions = { useCssModules, ...options };
57+
const { moduleVersionReactFlagIconCss, moduleVersionWebpack } = computedOptions;
6158

6259
return {
6360
context,
64-
entry: [
65-
`webpack-dev-server/client?http://0.0.0.0:${port}/`,
66-
path.join(context, 'index.js'),
67-
],
61+
entry: [`webpack-dev-server/client?http://0.0.0.0:${port}/`, path.join(context, 'index.js')],
6862
output: {
6963
path: path.join(__dirname, outputPath),
7064
filename: 'bundle.js',
71-
publicPath: '/',
65+
publicPath: '/'
7266
},
7367
plugins: [
7468
new webpack.HotModuleReplacementPlugin(),
@@ -81,7 +75,9 @@ const config = (options: {}): {} => {
8175
}),
8276
new ExtractTextPlugin('bundle.css'),
8377
new webpack.DefinePlugin({
84-
__USE_CSS_MODULES__: JSON.stringify(JSON.parse(process.env.USE_CSS_MODULES || 'true'))
78+
__USE_CSS_MODULES__: JSON.stringify(JSON.parse(process.env.USE_CSS_MODULES || 'true')),
79+
MODULE_VERSION_REACT_FLAG_ICON_CSS: JSON.stringify(moduleVersionReactFlagIconCss),
80+
MODULE_VERSION_WEBPACK: JSON.stringify(moduleVersionWebpack)
8581
})
8682
],
8783
// Some libraries import Node modules but don't use them in the browser.
@@ -94,7 +90,7 @@ const config = (options: {}): {} => {
9490
module: {
9591
rules: getRules(computedOptions)
9692
}
97-
}
98-
}
93+
};
94+
};
9995

100-
export default config
96+
export default config;

0 commit comments

Comments
 (0)