feat: add Webpack and React-Flag-Icon-Css version as globals and display them

Author: matteocng

.eslintrc.js

@@ -1,20 +1,16 @@
 module.exports = {
   parser: 'babel-eslint',
-  plugins: [
-    'react',
-    'flowtype',
-    'import',
-    'babel'
-  ],
+  plugins: ['react', 'flowtype', 'import', 'babel'],
   env: {
     browser: true
   },
   extends: ['airbnb'],
   globals: {
-    __USE_CSS_MODULES__: true
+    __USE_CSS_MODULES__: true,
+    MODULE_VERSION_WEBPACK: '',
+    MODULE_VERSION_REACT_FLAG_ICON_CSS: ''
   },
-  rules:
-  {
+  rules: {
     'import/no-duplicates': 1,
     'no-duplicate-imports': 0,
     'babel/new-cap': 0,
@@ -25,19 +21,10 @@ module.exports = {
     'comma-dangle': 0,
     'react/jsx-filename-extension': 0,
     'react/require-extension': 'off',
-    'flowtype/boolean-style': [
-      2,
-      'boolean'
-    ],
+    'flowtype/boolean-style': [2, 'boolean'],
     'flowtype/define-flow-type': 1,
-    'flowtype/delimiter-dangle': [
-      2,
-      'never'
-    ],
-    'flowtype/generic-spacing': [
-      2,
-      'never'
-    ],
+    'flowtype/delimiter-dangle': [2, 'never'],
+    'flowtype/generic-spacing': [2, 'never'],
     'flowtype/no-weak-types': 2,
     'flowtype/require-parameter-type': 2,
     'flowtype/require-return-type': [
@@ -48,38 +35,18 @@ module.exports = {
       }
     ],
     'flowtype/require-valid-file-annotation': 2,
-    'flowtype/semi': [
-      2,
-      'never'
-    ],
-    'flowtype/space-after-type-colon': [
-      2,
-      'always'
-    ],
-    'flowtype/space-before-generic-bracket': [
-      2,
-      'never'
-    ],
-    'flowtype/space-before-type-colon': [
-      2,
-      'never'
-    ],
-    'flowtype/type-id-match': [
-      2,
-      '^([A-Z][a-z0-9]+)+Type$'
-    ],
-    'flowtype/union-intersection-spacing': [
-      2,
-      'always'
-    ],
+    'flowtype/semi': [2, 'never'],
+    'flowtype/space-after-type-colon': [2, 'always'],
+    'flowtype/space-before-generic-bracket': [2, 'never'],
+    'flowtype/space-before-type-colon': [2, 'never'],
+    'flowtype/type-id-match': [2, '^([A-Z][a-z0-9]+)+Type$'],
+    'flowtype/union-intersection-spacing': [2, 'always'],
     'flowtype/use-flow-type': 1,
     'flowtype/valid-syntax': 1
   },
-  settings:
-  {
-    flowtype:
-    {
+  settings: {
+    flowtype: {
       onlyFilesWithFlowAnnotation: false
     }
   }
-}
+};

flow/decls/decls.js

@@ -1 +1,3 @@
-declare var __USE_CSS_MODULES__: boolean
+declare var __USE_CSS_MODULES__: boolean;
+declare var MODULE_VERSION_REACT_FLAG_ICON_CSS: string;
+declare var MODULE_VERSION_WEBPACK: string;

src/js/App.js

@@ -30,13 +30,26 @@ const AppFactory = (options: AppFactoryOptionsType): StatelessFunctionalComponen
     const propsHeading = { [styleProp]: 'heading' };
     const propsSubHeading = { [styleProp]: 'sub-heading' };
     const propsFlagContainer = { [styleProp]: 'flag-container' };
-    const { headingText, subHeadingText } = props;
+    const propsSup = { [styleProp]: 'sup' };
+    const {
+      headingText,
+      moduleVersionReactFlagIconCss,
+      moduleVersionWebpack,
+      useCssModules
+    } = props;
+
+    const subHeadingText = `Webpack (${moduleVersionWebpack}) Example ${
+      useCssModules ? 'using CSS Modules' : 'with global CSS'
+    }`;
 
     return (
       <span>
         <div {...propsHeader}>
           <div {...propsHeading}>
             {headingText}
+            <sup {...propsSup}>
+              {moduleVersionReactFlagIconCss}
+            </sup>
           </div>
           <div {...propsSubHeading}>
             {subHeadingText}
@@ -54,16 +67,15 @@ const AppFactory = (options: AppFactoryOptionsType): StatelessFunctionalComponen
   App.displayName = 'App';
 
   App.propTypes = {
-    stylePropName: PropTypes.string.isRequired,
     headingText: PropTypes.string.isRequired,
-    subHeadingText: PropTypes.string.isRequired,
+    moduleVersionWebpack: PropTypes.string.isRequired,
+    moduleVersionReactFlagIconCss: PropTypes.string.isRequired,
+    useCssModules: PropTypes.bool.isRequired
   };
 
-  return App
-}
+  return App;
+};
 const AppComponent = AppFactory({ stylePropName });
-const AppComponentTransformed = __USE_CSS_MODULES__
-  ? CssModules(AppComponent)
-  : AppComponent;
+const AppComponentTransformed = __USE_CSS_MODULES__ ? CssModules(AppComponent) : AppComponent;
 
 export default AppComponentTransformed;

src/js/index.js

@@ -1,20 +1,21 @@
 // @flow
-import ReactDOM from 'react-dom'
-import React from 'react'
-import App from './App'
-import type { AppPropsType } from '../types/flow'
-
+import ReactDOM from 'react-dom';
+import React from 'react';
+import App from './App';
+import type { AppPropsType } from '../types/flow';
 
 const appProps: AppPropsType = {
   headingText: 'React Flag Icon Css',
-  subHeadingText: `Webpack Example ${__USE_CSS_MODULES__ ? 'using CSS Modules' : 'with global CSS'}`
-}
+  useCssModules: __USE_CSS_MODULES__,
+  moduleVersionWebpack: MODULE_VERSION_WEBPACK,
+  moduleVersionReactFlagIconCss: MODULE_VERSION_REACT_FLAG_ICON_CSS
+};
 
-const rootEL = document.querySelector('#app')
+const rootEL = document.querySelector('#app');
 const render = () => {
   if (rootEL !== null) {
-    ReactDOM.render(<App {...appProps} />, rootEL)
+    ReactDOM.render(<App {...appProps} />, rootEL);
   }
-}
+};
 
-render()
+render();

src/styles/app.scss

@@ -27,6 +27,11 @@ body {
   font-size: 0.8rem;
 }
 
+.sup {
+  font-size: 0.9rem;
+  padding-left: 0.5rem;
+}
+
 // Flags
 
 .flag-container {

src/types/flow.js

@@ -12,7 +12,8 @@ export type AppFactoryOptionsType = {|
 
 export type AppPropsType = {|
   headingText: String,
-  subHeadingText: String
+  subHeadingText: String,
+  moduleVersionReactFlagIconCss: String
 |}
 
 export type KeyType = string | number

webpack/server.js

@@ -1,19 +1,26 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import WebpackDevServer from 'webpack-dev-server'
+import WebpackDevServer from 'webpack-dev-server';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import webpack from 'webpack'
-import configMaker, { outputPath } from './webpack.config'
+import webpack from 'webpack';
+import configMaker, { outputPath } from './webpack.config';
+import packageJson from '../package.json';
 
-const config = configMaker()
-const compiler = webpack(config)
+const {
+  dependencies,
+  devDependencies: { webpack: moduleVersionWebpack }
+} = packageJson;
+const moduleVersionReactFlagIconCss = dependencies['react-flag-icon-css'];
+
+const config = configMaker({ moduleVersionReactFlagIconCss, moduleVersionWebpack });
+const compiler = webpack(config);
 
 const server = new WebpackDevServer(compiler, {
   contentBase: outputPath,
   filename: config.output.filename,
   publicPath: config.output.publicPath,
   stats: {
-    colors: true,
-  },
-})
+    colors: true
+  }
+});
 
-server.listen(8080, '0.0.0.0', () => { })
+server.listen(8080, '0.0.0.0', () => {});

webpack/webpack.config.js

@@ -1,15 +1,14 @@
-import path from 'path'
-import webpack from 'webpack'
-import HtmlWebpackPlugin from 'html-webpack-plugin' // eslint-disable-line import/no-extraneous-dependencies
-import ExtractTextPlugin from 'extract-text-webpack-plugin' // eslint-disable-line import/no-extraneous-dependencies
-import autoprefixer from 'autoprefixer' // eslint-disable-line import/no-extraneous-dependencies
+import path from 'path';
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin'; // eslint-disable-line import/no-extraneous-dependencies
+import ExtractTextPlugin from 'extract-text-webpack-plugin'; // eslint-disable-line import/no-extraneous-dependencies
+import autoprefixer from 'autoprefixer'; // eslint-disable-line import/no-extraneous-dependencies
 
-
-const port = 8080
-const JS_REGEX = /\.js$|\.jsx$|\.es6$|\.babel$/
-const CSS_REGEX = /\.css$|\.scss$/
-const context = path.join(__dirname, '../src/js')
-export const outputPath = 'www'
+const port = 8080;
+const JS_REGEX = /\.js$|\.jsx$|\.es6$|\.babel$/;
+const CSS_REGEX = /\.css$|\.scss$/;
+const context = path.join(__dirname, '../src/js');
+export const outputPath = 'www';
 
 type GetRulesInputType = { useCssModules: boolean }
 
@@ -35,14 +34,12 @@ const getRules = ({ useCssModules }: GetRulesInputType): {}[] => [
         {
           loader: 'postcss-loader',
           options: {
-            plugins: [
-              autoprefixer({ browsers: ['last 4 versions'] }),
-            ],
+            plugins: [autoprefixer({ browsers: ['last 4 versions'] })]
           }
         },
         { loader: 'sass-loader', options: {} }
       ]
-    }),
+    })
   },
   {
     test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
@@ -52,23 +49,20 @@ const getRules = ({ useCssModules }: GetRulesInputType): {}[] => [
     test: /\.json$/,
     loader: 'json-loader'
   }
-]
-
+];
 
 const config = (options: {}): {} => {
-  const useCssModules = JSON.parse(process.env.USE_CSS_MODULES)
-  const computedOptions = { useCssModules, ...options }
+  const useCssModules = JSON.parse(process.env.USE_CSS_MODULES);
+  const computedOptions = { useCssModules, ...options };
+  const { moduleVersionReactFlagIconCss, moduleVersionWebpack } = computedOptions;
 
   return {
     context,
-    entry: [
-      `webpack-dev-server/client?http://0.0.0.0:${port}/`,
-      path.join(context, 'index.js'),
-    ],
+    entry: [`webpack-dev-server/client?http://0.0.0.0:${port}/`, path.join(context, 'index.js')],
     output: {
       path: path.join(__dirname, outputPath),
       filename: 'bundle.js',
-      publicPath: '/',
+      publicPath: '/'
     },
     plugins: [
       new webpack.HotModuleReplacementPlugin(),
@@ -81,7 +75,9 @@ const config = (options: {}): {} => {
       }),
       new ExtractTextPlugin('bundle.css'),
       new webpack.DefinePlugin({
-        __USE_CSS_MODULES__: JSON.stringify(JSON.parse(process.env.USE_CSS_MODULES || 'true'))
+        __USE_CSS_MODULES__: JSON.stringify(JSON.parse(process.env.USE_CSS_MODULES || 'true')),
+        MODULE_VERSION_REACT_FLAG_ICON_CSS: JSON.stringify(moduleVersionReactFlagIconCss),
+        MODULE_VERSION_WEBPACK: JSON.stringify(moduleVersionWebpack)
       })
     ],
     // Some libraries import Node modules but don't use them in the browser.
@@ -94,7 +90,7 @@ const config = (options: {}): {} => {
     module: {
       rules: getRules(computedOptions)
     }
-  }
-}
+  };
+};
 
-export default config
+export default config;