diff --git a/config/_old/webpack.config.vendor.babel.js b/config/_old/webpack.config.vendor.babel.js index fbbf388..da6272f 100644 --- a/config/_old/webpack.config.vendor.babel.js +++ b/config/_old/webpack.config.vendor.babel.js @@ -5,7 +5,7 @@ import webpack from 'webpack' * for instructions on resolving the errors by excluding the * vendor dependency that is throwing an error. */ -import entries from './dependencies.babel' +import entries from '../dependencies.babel' import PATHS from './paths' // NOTE: The library and the plugin's filename MUST match. diff --git a/config/alias.config.js b/config/alias.config.js deleted file mode 100644 index c553846..0000000 --- a/config/alias.config.js +++ /dev/null @@ -1,9 +0,0 @@ -import { - PATHS -} from './options' - -module.exports = { - '@': PATHS.app, - '%': PATHS.shared, - '#': PATHS.styles -} diff --git a/config/dependencies.babel.js b/config/dependencies.babel.js index 0546366..17f90f1 100644 --- a/config/dependencies.babel.js +++ b/config/dependencies.babel.js @@ -1,6 +1,4 @@ -import { - dependencies -} from '../package.json' +import { dependencies } from '../package.json' /** * Exclude any package.json dependencies that throw errors here. diff --git a/config/development.webpack.config.babel.js b/config/development.webpack.config.babel.js index 0e51842..91608ab 100644 --- a/config/development.webpack.config.babel.js +++ b/config/development.webpack.config.babel.js @@ -7,7 +7,7 @@ import path from 'path' import webpack from 'webpack' import { - devServerConfig, + alias, devPerformanceOptions, nodeOptions, PATHS, @@ -172,7 +172,7 @@ export default function developmentWebpack() { safe: false, }), new HtmlWebpackPlugin({ - // chunksSortMode: 'auto', + chunksSortMode: 'auto', favicon: PATHS.favicon, filename: 'index.html', inject: true, @@ -197,11 +197,7 @@ export default function developmentWebpack() { }), ], resolve: { - alias: { - '@': PATHS.appSrc, - '%': PATHS.sharedDir, - 'react-dom': '@hot-loader/react-dom', - }, + alias, aliasFields: ['browser'], descriptionFiles: ['package.json'], enforceExtension: false, diff --git a/config/helpers/is-vendor.js b/config/helpers/is-vendor.js index a26f1b5..a6e96ef 100644 --- a/config/helpers/is-vendor.js +++ b/config/helpers/is-vendor.js @@ -1,4 +1,2 @@ -export const isVendor = ({ - resource - }) => +export const isVendor = ({ resource }) => resource && resource.indexOf('node_modules') >= 0 && resource.match(/.js$/) diff --git a/config/loaders.js b/config/loaders.js deleted file mode 100644 index 9d8ecd6..0000000 --- a/config/loaders.js +++ /dev/null @@ -1,25 +0,0 @@ -export const loadCss = ({ include, exclude, options } = {}) => ({ - module: { - rules: [ - { - test: /\.css$/, - include, - exclude, - use: [ - 'style-loader', - { - loader: 'css-loader', - options: { - importLoaders: 1 - } - }, - { - loader: 'postcss-loader', - - options - } - ] - } - ] - } -}) diff --git a/config/options/alias.config.js b/config/options/alias.config.js new file mode 100644 index 0000000..fc1cc4f --- /dev/null +++ b/config/options/alias.config.js @@ -0,0 +1,8 @@ +import { PATHS } from './paths' + +export const alias = { + '@': PATHS.appSrc, + '%': PATHS.sharedDir, + '#': PATHS.stylesDir, + 'react-dom': '@hot-loader/react-dom', +} diff --git a/config/options/dev-server.js b/config/options/dev-server.js index 9c6d9e4..dff9111 100644 --- a/config/options/dev-server.js +++ b/config/options/dev-server.js @@ -1,9 +1,5 @@ -import { - stats -} from './stats' -import { - PATHS -} from './paths' +import { stats } from './stats' +import { PATHS } from './paths' export const devServerConfig = () => { console.log('dev server config') diff --git a/config/options/index.js b/config/options/index.js index 97e82eb..da19743 100644 --- a/config/options/index.js +++ b/config/options/index.js @@ -1,3 +1,4 @@ +export * from './alias.config' export * from './dev-server' export * from './node-options' export * from './paths' diff --git a/config/options/paths.js b/config/options/paths.js index 6926f48..6a3790d 100644 --- a/config/options/paths.js +++ b/config/options/paths.js @@ -1,9 +1,7 @@ import fs from 'fs' import path from 'path' -import { - dllPrefix -} from '../constants' +import { dllPrefix } from '../constants' const currentDir = process.cwd() const isProduction = process.env.NODE_ENV === 'production' @@ -23,7 +21,7 @@ export const PATHS = { favicon: resolvePath('public/favicon/favicon.ico'), // Uncomment this for `favicons-webpack-plugin` // image: resolvePath('src/shared/assets/images/spy_kid.png'), - indexHtml: resolvePath('public/index.html'), + indexHtml: resolvePath('public/index.ejs'), nodeModules: resolvePath('node_modules'), packageJson: resolvePath('package.json'), polyfills: resolvePath('config/helpers/polyfills'), @@ -31,6 +29,7 @@ export const PATHS = { publicPath: isProduction ? './' : '/', root: currentDir, sharedDir: resolvePath('src/shared'), + stylesDir: resolvePath('src/shared/styles'), vendors: { filepath: resolvePath(`node_modules/${dllPrefix}/vendors.dll.js`), manifest: resolvePath(`node_modules/${dllPrefix}/vendors-manifest.json`), diff --git a/config/options/performance-options.js b/config/options/performance-options.js index 46aa6e5..3fb2b1c 100644 --- a/config/options/performance-options.js +++ b/config/options/performance-options.js @@ -1,3 +1,3 @@ export const devPerformanceOptions = { - hints: false + hints: false, } diff --git a/config/options/stats.js b/config/options/stats.js index 1cb8253..d43d4b0 100644 --- a/config/options/stats.js +++ b/config/options/stats.js @@ -8,5 +8,5 @@ export const stats = { modules: false, publicPath: true, reasons: true, - warnings: true + warnings: true, } diff --git a/config/postcss.config.js b/config/postcss.config.js index 757d0a2..161de18 100644 --- a/config/postcss.config.js +++ b/config/postcss.config.js @@ -1,6 +1,35 @@ +// const postcssPresetEnv = require('postcss-preset-env'); + module.exports = { // This parser (may or may not) remove inline comments (not allowed in .css): // My Comment // parser: 'postcss-scss', - // plugins: [require('precss'), require('autoprefixer')], - plugins: [], + // plugins: { + // 'postcss-import': { + // path: ['src/shared/styles'], + // }, + // 'postcss-color-function': {}, + // 'postcss-cssnext': { + // browsers: 'last 2 versions', + // warnForDuplicates: false, + // }, + // cssnano: {}, + // }, + plugins: [ + // + require('precss'), + require('autoprefixer'), + require('postcss-color-function'), + require('postcss-import'), + require('postcss-strip-inline-comments'), + require('postcss-preset-env')({ + autoprefixer: { grid: true }, + browsers: 'last 2 versions', + // importFrom: 'path/to/file.css', + /* use stage 3 features + css color-mod (warning on unresolved) */ + stage: 3, + features: { + 'color-mod-function': { unresolved: 'warn' }, + }, + }), + ], } diff --git a/config/vendors.webpack.config.babel.js b/config/vendors.webpack.config.babel.js index c73c86b..08dfe63 100644 --- a/config/vendors.webpack.config.babel.js +++ b/config/vendors.webpack.config.babel.js @@ -7,12 +7,8 @@ import webpack from 'webpack' * for instructions on resolving the errors by excluding the * vendor dependency that is throwing an error. */ -import { - vendorEntries -} from './dependencies.babel' -import { - dllPrefix -} from './constants' +import { vendorEntries } from './dependencies.babel' +import { dllPrefix } from './constants' export default function vendorsWebpack() { const basePath = process.cwd() @@ -23,7 +19,7 @@ export default function vendorsWebpack() { target: 'web', mode: 'development', entry: { - vendors: vendorEntries + vendors: vendorEntries, }, output: { path: path.join(basePath, 'node_modules', dllPrefix), @@ -44,10 +40,10 @@ export default function vendorsWebpack() { }), ], optimization: { - minimize: false + minimize: false, }, performance: { - hints: false + hints: false, }, } } diff --git a/package-lock.json b/package-lock.json index a280be3..aa00794 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1923,28 +1923,6 @@ "integrity": "sha512-eyoaac3btgU8eJlvh01En8OCKzRqlLe2G5jDsCr3RiE2uLGMEEB1aaGwVVpwR8M95956tGH6R+9edC++OvzaVw==", "dev": true }, - "align-text": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", - "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", - "dev": true, - "requires": { - "kind-of": "^3.0.2", - "longest": "^1.0.1", - "repeat-string": "^1.5.2" - }, - "dependencies": { - "kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "dev": true, - "requires": { - "is-buffer": "^1.1.5" - } - } - } - }, "alphanum-sort": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", @@ -3269,16 +3247,6 @@ "integrity": "sha512-MOli1W+nfbPLlKEhInaxhRdp7KVLFxLN5ykwzHgLsLI3H3gs5jjFAK4Eoj3OzzcxCtumDaI8onoVDeQyWaNTkw==", "dev": true }, - "center-align": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", - "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=", - "dev": true, - "requires": { - "align-text": "^0.1.3", - "lazy-cache": "^1.0.3" - } - }, "chalk": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", @@ -5701,104 +5669,6 @@ "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==", "dev": true }, - "ejs-webpack-loader": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/ejs-webpack-loader/-/ejs-webpack-loader-2.2.2.tgz", - "integrity": "sha512-fuZ5djtVnvoMv4xlyQs3sh9JfIh167iPg7Q1ABFdQIbPHqRgeRWQCvodGybQhiRRCUIeqH9HPtfB8hJimPSPbA==", - "dev": true, - "requires": { - "ejs": "^2.0.0", - "html-minifier": "^3", - "loader-utils": "^0.2.7", - "merge": "^1.2.0", - "uglify-js": "~2.6.1" - }, - "dependencies": { - "async": { - "version": "0.2.10", - "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz", - "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E=", - "dev": true - }, - "big.js": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", - "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==", - "dev": true - }, - "camelcase": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", - "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=", - "dev": true - }, - "cliui": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", - "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=", - "dev": true, - "requires": { - "center-align": "^0.1.1", - "right-align": "^0.1.1", - "wordwrap": "0.0.2" - } - }, - "emojis-list": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", - "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", - "dev": true - }, - "json5": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", - "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=", - "dev": true - }, - "loader-utils": { - "version": "0.2.17", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz", - "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=", - "dev": true, - "requires": { - "big.js": "^3.1.3", - "emojis-list": "^2.0.0", - "json5": "^0.5.0", - "object-assign": "^4.0.1" - } - }, - "uglify-js": { - "version": "2.6.4", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.6.4.tgz", - "integrity": "sha1-ZeovswWck5RpLxX+2HwrNsFrmt8=", - "dev": true, - "requires": { - "async": "~0.2.6", - "source-map": "~0.5.1", - "uglify-to-browserify": "~1.0.0", - "yargs": "~3.10.0" - } - }, - "wordwrap": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", - "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=", - "dev": true - }, - "yargs": { - "version": "3.10.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", - "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=", - "dev": true, - "requires": { - "camelcase": "^1.0.2", - "cliui": "^2.1.0", - "decamelize": "^1.0.0", - "window-size": "0.1.0" - } - } - } - }, "electron-to-chromium": { "version": "1.3.483", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.483.tgz", @@ -8191,87 +8061,6 @@ "integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==", "dev": true }, - "html-minifier": { - "version": "3.5.21", - "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.21.tgz", - "integrity": "sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==", - "dev": true, - "requires": { - "camel-case": "3.0.x", - "clean-css": "4.2.x", - "commander": "2.17.x", - "he": "1.2.x", - "param-case": "2.1.x", - "relateurl": "0.2.x", - "uglify-js": "3.4.x" - }, - "dependencies": { - "camel-case": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz", - "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=", - "dev": true, - "requires": { - "no-case": "^2.2.0", - "upper-case": "^1.1.1" - } - }, - "commander": { - "version": "2.17.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", - "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", - "dev": true - }, - "lower-case": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", - "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", - "dev": true - }, - "no-case": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", - "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", - "dev": true, - "requires": { - "lower-case": "^1.1.1" - } - }, - "param-case": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz", - "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=", - "dev": true, - "requires": { - "no-case": "^2.2.0" - } - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, - "uglify-js": { - "version": "3.4.10", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", - "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==", - "dev": true, - "requires": { - "commander": "~2.19.0", - "source-map": "~0.6.1" - }, - "dependencies": { - "commander": { - "version": "2.19.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz", - "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==", - "dev": true - } - } - } - } - }, "html-minifier-terser": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", @@ -9469,12 +9258,6 @@ "integrity": "sha512-eYboRV94Vco725nKMlpkn3nV2+96p9c3gKXRsYqAJSswSENvBhN7n5L+uDhY58xQa0UukWsDMTGELzmD8Q+wTA==", "dev": true }, - "lazy-cache": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", - "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=", - "dev": true - }, "lcid": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz", @@ -10232,12 +10015,6 @@ } } }, - "longest": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", - "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true - }, "longest-streak": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz", @@ -10568,12 +10345,6 @@ } } }, - "merge": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz", - "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==", - "dev": true - }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -15664,15 +15435,6 @@ "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=", "dev": true }, - "right-align": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", - "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=", - "dev": true, - "requires": { - "align-text": "^0.1.1" - } - }, "rimraf": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", @@ -17765,12 +17527,6 @@ "integrity": "sha512-Esj5HG5WAyrLIdYU74Z3JdG2PxdIusvj6IWHMtlyESxc7kcDz7zYlYjpnSokn1UbpV0d/QX9fan7gkCNd/9BQA==", "dev": true }, - "uglify-to-browserify": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", - "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", - "dev": true - }, "unherit": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz", @@ -18004,12 +17760,6 @@ "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==", "dev": true }, - "upper-case": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz", - "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", - "dev": true - }, "uri-js": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", @@ -19130,12 +18880,6 @@ "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=", "dev": true }, - "window-size": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", - "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=", - "dev": true - }, "word-wrap": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", diff --git a/package.json b/package.json index 870e9bd..a924ace 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,6 @@ "cssnano": "^4.1.10", "dotenv": "^8.2.0", "dotenv-webpack": "^1.8.0", - "ejs-webpack-loader": "^2.2.2", "eslint": "^7.3.1", "eslint-loader": "^4.0.2", "eslint-plugin-import": "^2.21.2", @@ -68,7 +67,7 @@ "eslint-plugin-react": "^7.20.0", "file-loader": "^6.0.0", "friendly-errors-webpack-plugin": "^1.7.0", - "html-webpack-plugin": "^4.3.0", + "html-webpack-plugin": "^4.0.0-beta.14", "husky": "^4.2.5", "inline-chunk-manifest-html-webpack-plugin": "^2.0.0", "lint-staged": "^10.2.11", @@ -166,4 +165,4 @@ "email": "jordanmcardle@gmail.com", "url": "https://github.com/jmahc" } -} +} \ No newline at end of file diff --git a/public/index.html b/public/index.ejs similarity index 80% rename from public/index.html rename to public/index.ejs index e66a1d5..1be72ee 100644 --- a/public/index.html +++ b/public/index.ejs @@ -27,12 +27,6 @@ - - - - - - diff --git a/src/application.dev.js b/src/application.dev.js deleted file mode 100644 index 865f253..0000000 --- a/src/application.dev.js +++ /dev/null @@ -1,35 +0,0 @@ -import { - hot -} from 'react-hot-loader/root' -import React from 'react' -// import { render } from 'react-dom' -// @ resolves to `src/` -import App from '@/containers/App' -// # resolves to `src/shared/styles/` -// import '#/index.css' - -const renderApplication = (ApplicationComponent) => { - const AppContainer = require('react-hot-loader').AppContainer - // Trick babel to avoid hoisting `` - // via `babel-plugin-transform-react-constant-elements`. - // Discussed here: https://github.com/LWJGL/lwjgl3-www/ - const noHoist = {} - - render( - - - , - document.getElementById('⚛'), - ) -} - -// Render the application. -renderApplication(App) - -if (module.hot) { - module.hot.accept('@/containers/App', () => { - const NewApp = require('@/containers/App').default - - renderApplication(NewApp) - }) -} diff --git a/src/application.prod.js b/src/application.prod.js deleted file mode 100644 index 0b1d6ac..0000000 --- a/src/application.prod.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import { - render -} from 'react-dom' - -import App from '@/containers/App' - -// import '#/index.css' - -const renderApplication = (ApplicationComponent) => - render( < ApplicationComponent / > , document.getElementById('⚛')) - -// Render the application. -renderApplication(App) diff --git a/src/components/Button/index.js b/src/components/Button/index.js index cceace2..310e04c 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -1,56 +1,22 @@ -import React, { Component } from 'react' +import React, { Component, useState, useEffect, Fragment } from 'react' import '@/components/Button/styles.css' -class Button extends Component { - constructor(props) { - super(props) +export default function Button() { + const [buttonClickCount, setButtonClickCount] = useState(0) - this.state = { - Component: null, - lazyText: null - } + const handleOnClick = () => { + console.log('handle on clikc') + setButtonClickCount(buttonClickCount + 1) } - handleOnClick() { - /** - * Import the "lazy" text from the component file using the `import()` ES6 proposal syntax. - */ - import('@/components/CodeSplittingComponent/lazyText' /* webpackChunkName: "LazyText" */) - /** - * Pass the "lazy text" to the next `then` method to only `this.setState()` once - * and trimming down the number of times that the component renders. - */ - .then(lazyTextResponse => lazyTextResponse) - .then(lazyText => { - import('@/components/CodeSplittingComponent' /* webpackChunkName: "CodeSplittingComponent" */).then( - LoadedComponent => { - /** - * Set the state for the component and text using the default exports. - */ - this.setState({ - Component: LoadedComponent.default, - lazyText: lazyText.default - }) - } - ) - }) - } - - render() { - const { Component, lazyText } = this.state - return ( + return ( +
- {Component ? ( - - ) : ( - - )} +
- ) - } + + ) } - -export default Button diff --git a/src/components/CodeSplittingComponent/index.js b/src/components/CodeSplittingComponent/index.js deleted file mode 100644 index 03323f5..0000000 --- a/src/components/CodeSplittingComponent/index.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -import './styles.css' - -const CodeSplittingComponent = ({ text }) => ( -
- -
-) - -CodeSplittingComponent.propTypes = { - text: PropTypes.string -} - -export default CodeSplittingComponent diff --git a/src/components/CodeSplittingComponent/lazyText.js b/src/components/CodeSplittingComponent/lazyText.js deleted file mode 100644 index 4c1380f..0000000 --- a/src/components/CodeSplittingComponent/lazyText.js +++ /dev/null @@ -1,3 +0,0 @@ -const lazyText = 'I am lazily loaded text.' - -export default lazyText diff --git a/src/components/CodeSplittingComponent/styles.css b/src/components/CodeSplittingComponent/styles.css deleted file mode 100644 index 9301fd4..0000000 --- a/src/components/CodeSplittingComponent/styles.css +++ /dev/null @@ -1,5 +0,0 @@ -.CodeSplittingComponent-button { - color: red; - background-color: blue; - border-color: black; -} diff --git a/src/containers/App/index.js b/src/containers/App/index.js index 387d2a1..5723b88 100644 --- a/src/containers/App/index.js +++ b/src/containers/App/index.js @@ -1,35 +1,29 @@ +import { hot } from 'react-hot-loader/root' import React, { Component } from 'react' -// import Button from '@/components/Button' -// import Icon from '@/components/Icon' +import Button from '@/components/Button' +import Icon from '@/components/Icon' -/* - - Uncommenting the line below will break the linter. - - However, if you do include it, you will notice that when building, - `purifycss` removes any unused CSS. - */ -// import PurifiedCss from '@/containers/PurifiedCss' - -// import './styles.css' +import './styles.css' class App extends Component { render() { return (
- {/* */} -

this is that - react - app - you - want.

{' '} -
{' '} + +

this is that react app you want.

+

- Run the build command to check out{' '} + Run the build command to check out purifycss or click the button for some chunks & lazy - loading.{' '} -

{' '} + loading. +


- {/*