shakacode · hussainakram · Jul 2, 2020 · Jul 2, 2020 · Jul 3, 2020 · Jul 3, 2020
diff --git a/client/.bootstraprc → .bootstraprc b/client/.bootstraprc → .bootstraprc
@@ -32,7 +32,7 @@ extractStyles: false
 # For example, _variables.scss contains:
 # $input-color: $gray !default;
 # This means you can define $input-color before we load _variables.scss
-preBootstrapCustomizations: ./app/assets/styles/bootstrap-pre-customizations.scss
+preBootstrapCustomizations: ./client/app/assets/styles/bootstrap-pre-customizations.scss
 
 # This gets loaded after bootstrap/variables is loaded and before bootstrap is loaded.
 # A good example of this is when you want to override a bootstrap variable to be based

diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1 @@
+defaults
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,4 @@
+node_modules
+
+client/app/libs/i18n/translations.js
+client/app/libs/i18n/default.js
diff --git a/client/.eslintrc.yml → .eslintrc.yml b/client/.eslintrc.yml → .eslintrc.yml
@@ -26,11 +26,7 @@ rules:
 
   jsx-a11y/anchor-is-valid: off
 
-#  arrow-parens:
-#    - 0
-#    - "as-needed"
-
 settings:
   import/resolver:
     webpack:
-      config: 'webpack.client.base.config.js'
+      config: 'config/webpack/development.js'
diff --git a/client/.postcssrc → .postcssrc b/client/.postcssrc → .postcssrc
diff --git a/.rubocop.yml b/.rubocop.yml
@@ -15,7 +15,6 @@ AllCops:
     - 'db/**/*'
     - 'db/schema.rb'
     - 'db/seeds.rb'
-    - 'client/node_modules/**/*'
     - 'bin/**/*'
     - 'Procfile.*'
     - !ruby/regexp /old_and_unused\.rb$/

diff --git a/Procfile.static b/Procfile.static
@@ -2,7 +2,4 @@
 rails: rails s -b 0.0.0.0
 
 # Build client assets, watching for changes.
-rails-client-assets: rm -rf public/webpack/development || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
-
-# Build server assets, watching for changes. Remove if not server rendering.
-rails-server-assets: yarn run build:dev:server
+rails-client-assets: yarn run build:dev
diff --git a/README.md b/README.md
@@ -204,13 +204,9 @@ Save a change to a JSX file and see it update immediately in the browser! Note,
 line in the `rails_helper.rb` file. If you are using this project as an example and are not using RSpec, you may want to implement similar logic in your own project.
 
 ## Webpack
-### Configuration Files
 
-- `webpack.client.base.config.js`: Common **client** configuration file to minimize code duplication for `webpack.client.rails.build.config`, `webpack.client.rails.hot.config`, `webpack.client.express.config`
-- `webpack.client.express.config.js`: Webpack configuration for Express server [client/server-express.js](client/server-express.js)
-- `webpack.client.rails.build.config.js`: Client side js bundle for deployment and tests.
-- `webpack.client.rails.hot.config.js`: Webpack Dev Server bundler for serving rails assets on port 3500, used by [client/server-rails-hot.js](client/server-rails-hot.js), for hot reloading JS and CSS within Rails.
-- `webpack.server.rails.build.config.js`: Server side js bundle, used by server rendering.
+_Converted to use @rails/webpacker webpack configuration_.
+
 
 ### Additional Resources
 - [Webpack Docs](https://webpack.js.org/)

diff --git a/app/assets/javascripts/application_non_webpack.js b/app/assets/javascripts/application_non_webpack.js
@@ -1,3 +1,4 @@
 // All webpack assets in development will be loaded via webpack dev server
 
+// Fix this!
 // turbolinks comes from npm and is listed in webpack.client.base.config.js
diff --git a/app/assets/stylesheets/application_static.scss b/app/assets/stylesheets/application_static.scss
@@ -3,8 +3,6 @@
 
 // Super important: This file is loaded even for hot loading only, so we need to be sure
 // that we don't reference the static generated CSS files.
-@import 'vendor-bundle';
-@import 'app-bundle';
 
 // Non-webpack assets
 @import 'application_non_webpack';
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -3,16 +3,13 @@
 <head>
   <title>RailsReactTutorial</title>
 
-  <%= stylesheet_pack_tag('vendor-bundle',
-                          media: 'all',
-                          'data-turbolinks-track': true) %>
+  <%= stylesheet_packs_with_chunks_tag('clientRegistration',
+                                        media: 'all',
+                                        'data-turbolinks-track': true) %>
 
-  <%= stylesheet_pack_tag('app-bundle',
-                          media: 'all',
-                          'data-turbolinks-track': true) %>
-
-  <%= javascript_pack_tag('vendor-bundle', 'data-turbolinks-track': true) %>
-  <%= javascript_pack_tag('app-bundle', 'data-turbolinks-track': true) %>
+  <%= javascript_packs_with_chunks_tag('clientRegistration',
+                                       'data-turbolinks-track': true,
+                                       defer: true) %>
 
   <%= csrf_meta_tags %>
 </head>

diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,93 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+  const isHMR = process.env.WEBPACK_DEV_SERVER
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(currentEnv) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          // ???
+          forceAllTransforms: true,
+
+
+          useBuiltIns: 'entry',
+          corejs: 3,
+          modules: false,
+
+          bugfixes: true,
+          loose: true,
+
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      "@babel/preset-react",
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+
+      // VVVV ?
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
+      isDevelopmentEnv && isHMR && 'react-refresh/babel',
+      // ^^^^ ?
+
+      [
+        '@babel/plugin-proposal-class-properties',
+        {
+          loose: true
+        }
+      ],
+
+      // VVVVV ?
+      [
+        '@babel/plugin-proposal-object-rest-spread',
+        {
+          useBuiltIns: true
+        }
+      ],
+      // ^^^^ ?
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false
+        }
+      ],
+
+       // VVVVV ?
+      [
+        '@babel/plugin-transform-regenerator',
+        {
+          async: false
+        }
+      ]
+      // ^^^^ ?
+
+    ].filter(Boolean)
+  }
+}
diff --git a/bin/webpack b/bin/webpack
@@ -13,5 +13,6 @@ require "webpacker/webpack_runner"
 
 APP_ROOT = File.expand_path("..", __dir__)
 
-puts "bin/webpack is running #{APP_ROOT}/bin/webpack.sh"
-exec "#{APP_ROOT}/bin/webpack.sh"
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end
diff --git a/bin/webpack-dev-server b/bin/webpack-dev-server
@@ -0,0 +1,19 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+ENV["WEBPACK_DEV_SERVER"] ||= "TRUE"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/dev_server_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::DevServerRunner.run(ARGV)
+end
diff --git a/client/.babelrc b/client/.babelrc
diff --git a/client/.eslintignore b/client/.eslintignore
diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx
@@ -9,7 +9,7 @@ import SelectLanguage from 'libs/i18n/selectLanguage';
 import { defaultMessages, defaultLocale } from 'libs/i18n/default';
 
 import CommentForm from './CommentForm/CommentForm';
-import CommentList, { CommentPropTypes } from './CommentList/CommentList';
+import CommentList, { commentPropTypes } from './CommentList/CommentList';
 import css from './CommentBox.scss';
 
 class CommentBox extends BaseComponent {
@@ -22,7 +22,7 @@ class CommentBox extends BaseComponent {
       isFetching: PropTypes.boolean,
       isSaving: PropTypes.boolean,
       submitCommentError: PropTypes.string,
-      $$comments: PropTypes.arrayOf(CommentPropTypes),
+      $$comments: PropTypes.arrayOf(commentPropTypes),
     }).isRequired,
     intl: intlShape.isRequired,
   };

diff --git a/client/app/bundles/comments/startup/clientRegistration.jsx b/client/app/bundles/comments/startup/clientRegistration.jsx
diff --git a/client/app/bundles/comments/startup/serverRegistration.jsx b/client/app/bundles/comments/startup/serverRegistration.jsx
@@ -1,5 +1,6 @@
 // Example of React + Redux
 import ReactOnRails from 'react-on-rails';
+// import 'bootstrap-loader/extractStyles';
 
 import App from './App';
 import RouterApp from './ServerRouterApp';

diff --git a/client/app/packs/clientRegistration.jsx b/client/app/packs/clientRegistration.jsx
@@ -0,0 +1,36 @@
+import ReactOnRails from 'react-on-rails';
+// import 'bootstrap-loader/extractStyles';
+
+import { addLocaleData } from 'react-intl';
+import en from 'react-intl/locale-data/en';
+import de from 'react-intl/locale-data/de';
+import ja from 'react-intl/locale-data/ja';
+import zh from 'react-intl/locale-data/zh';
+
+import App from '../bundles/comments/startup/App';
+import RouterApp from '../bundles/comments/startup/ClientRouterApp';
+import SimpleCommentScreen from '../bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen';
+import routerCommentsStore from '../bundles/comments/store/routerCommentsStore';
+import commentsStore from '../bundles/comments/store/commentsStore';
+import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp';
+
+// Initizalize all locales for react-intl.
+addLocaleData([...en, ...de, ...ja, ...zh]);
+
+ReactOnRails.setOptions({
+  // traceTurbolinks: process.env.TRACE_TURBOLINKS, // eslint-disable-line no-undef
+  // process.env.TRACE_TURBOLINKS -> error: development is not defined
+  traceTurbolinks: true,
+});
+
+ReactOnRails.register({
+  App,
+  RouterApp,
+  NavigationBarApp,
+  SimpleCommentScreen,
+});
+
+ReactOnRails.registerStore({
+  routerCommentsStore,
+  commentsStore,
+});
diff --git a/client/index.pug b/client/index.pug