Update webpacker and replace vue with react

.babelrc

@@ -1,54 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/env",
-      {
-        "modules": false,
-        "targets": {
-          "browsers": [
-            "> 1%",
-            "Chrome >= 50",
-            "IE >= 11",
-            "Edge >= 14",
-            "Firefox >= 50",
-            "Opera >= 40",
-            "Safari >= 8",
-            "iOS >= 8"
-          ],
-          "uglify": true
-        },
-        "forceAllTransforms": true,
-        "useBuiltIns": "entry"
-      }
-    ]
-  ],
-  "plugins": [
-    "@babel/plugin-transform-destructuring",
-    "@babel/plugin-syntax-dynamic-import",
-    [
-      "@babel/plugin-proposal-object-rest-spread",
-      {
-        "useBuiltIns": true
-      }
-    ],
-    [
-      "@babel/plugin-transform-runtime",
-      {
-        "helpers": false,
-        "regenerator": true
-      }
-    ],
-    [
-      "@babel/plugin-transform-regenerator",
-      {
-        "async": false
-      }
-    ],
-    [
-      "@babel/plugin-proposal-class-properties",
-      {
-        "loose": true
-      }
-    ]
-  ]
-}

.browserslistrc

@@ -0,0 +1,8 @@
+> 1%
+Chrome >= 50
+IE >= 11
+Edge >= 14
+Firefox >= 50
+Opera >= 40
+Safari >= 8
+iOS >= 8

.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2017,
     sourceType: 'module'
@@ -8,18 +9,24 @@ module.exports = {
     'process': true,
     'gon': true
   },
-  plugins: ['prettier'],
-  extends: ['eslint:recommended', 'prettier'],
+  plugins: ['prettier', 'react-hooks'],
+  extends: ['eslint:recommended', 'prettier', 'plugin:react/recommended'],
   env: {
     es6: true,
     browser: true
   },
   rules: {
-    'prettier/prettier': 'error'
+    'prettier/prettier': 'error',
+    'react-hooks/rules-of-hooks': 'error'
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
   },
   overrides: [
     {
-      files: ['config/webpack/**/*.js'],
+      files: ['config/webpack/**/*.js', 'babel.config.js', 'postcss.config.js'],
       env: {
         node: true
       }

.gitignore

@@ -26,3 +26,9 @@ storage/
 yarn-debug.log*
 .yarn-integrity
 /.vscode
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

.postcssrc.yml

@@ -1,3 +0,0 @@
-plugins:
-  postcss-import: {}
-  postcss-cssnext: {}

Gemfile

@@ -49,6 +49,7 @@ gem 'rack-mini-profiler'
 gem 'rails'
 gem 'rails-i18n' # Locales par défaut
 gem 'rake-progressbar', require: false
+gem 'react-rails'
 gem 'rest-client'
 gem 'rgeo-geojson'
 gem 'sanitize-url'
@@ -63,7 +64,7 @@ gem 'spreadsheet_architect'
 gem 'turbolinks' # Turbolinks makes following links in your web application faster
 gem 'typhoeus'
 gem 'warden'
-gem 'webpacker', '>= 4.0.x'
+gem 'webpacker'
 gem 'zxcvbn-ruby', require: 'zxcvbn'
 
 group :test do

Gemfile.lock

@@ -99,6 +99,10 @@ GEM
     axlsx_styler (0.2.0)
       activesupport (>= 3.1)
       axlsx (>= 2.0, < 4)
+    babel-source (5.8.35)
+    babel-transpiler (0.7.0)
+      babel-source (>= 4.0, < 6)
+      execjs (~> 2.0)
     bcrypt (3.1.12)
     bindata (2.4.4)
     bindex (0.5.0)
@@ -149,6 +153,7 @@ GEM
       execjs
     coffee-script-source (1.12.2)
     concurrent-ruby (1.1.5)
+    connection_pool (2.2.2)
     copy_carrierwave_file (1.3.0)
       carrierwave (>= 0.9)
     crack (0.4.3)
@@ -278,7 +283,7 @@ GEM
       domain_name (~> 0.5)
     http_parser.rb (0.6.0)
     httpclient (2.8.3)
-    i18n (1.5.3)
+    i18n (1.6.0)
       concurrent-ruby (~> 1.0)
     ipaddress (0.8.3)
     jaro_winkler (1.5.2)
@@ -465,6 +470,12 @@ GEM
     rb-fsevent (0.10.3)
     rb-inotify (0.10.0)
       ffi (~> 1.0)
+    react-rails (2.4.7)
+      babel-transpiler (>= 0.7.0)
+      connection_pool
+      execjs
+      railties (>= 3.2)
+      tilt
     regexp_parser (1.3.0)
     request_store (1.4.1)
       rack (>= 1.4)
@@ -637,7 +648,7 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff
-    webpacker (4.0.0.rc.2)
+    webpacker (4.0.2)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
       railties (>= 4.2)
@@ -720,6 +731,7 @@ DEPENDENCIES
   rails-controller-testing
   rails-i18n
   rake-progressbar
+  react-rails
   rest-client
   rgeo-geojson
   rspec-rails
@@ -747,7 +759,7 @@ DEPENDENCIES
   warden
   web-console
   webmock
-  webpacker (>= 4.0.x)
+  webpacker
   xray-rails
   zxcvbn-ruby
 

app/javascript/packs/application.js

@@ -4,6 +4,7 @@ import Rails from 'rails-ujs';
 import * as ActiveStorage from 'activestorage';
 import Chartkick from 'chartkick';
 import Highcharts from 'highcharts';
+import ReactUJS from '../shared/react-ujs';
 
 import '../shared/activestorage/ujs';
 import '../shared/rails-ujs-fix';
@@ -23,8 +24,6 @@ import '../new_design/champs/carte';
 import '../new_design/champs/linked-drop-down-list';
 import '../new_design/champs/repetition';
 
-import '../new_design/administrateur/champs-editor';
-
 import { toggleCondidentielExplanation } from '../new_design/avis';
 import { scrollMessagerie } from '../new_design/messagerie';
 import { showMotivation, motivationCancel } from '../new_design/state-button';
@@ -48,6 +47,7 @@ Rails.start();
 Turbolinks.start();
 ActiveStorage.start();
 
+
 // Expose globals
 window.DS = window.DS || DS;
 window.Chartkick = Chartkick;

app/javascript/shared/polyfills.js

@@ -1,5 +1,5 @@
 // Include runtime-polyfills for older browsers.
-// Due to .babelrc's 'useBuiltIns', only polyfills actually
+// Due to babel.config.js's 'useBuiltIns', only polyfills actually
 // required by the browsers we support will be included.
 import '@babel/polyfill';
 import 'dom4';

app/javascript/shared/react-ujs.js

@@ -0,0 +1,61 @@
+import ReactDOM from 'react-dom';
+
+// This attribute holds the name of component which should be mounted
+// example: `data-react-class="MyApp.Items.EditForm"`
+const CLASS_NAME_ATTR = 'data-react-class';
+
+// This attribute holds JSON stringified props for initializing the component
+// example: `data-react-props="{\"item\": { \"id\": 1, \"name\": \"My Item\"} }"`
+const PROPS_ATTR = 'data-react-props';
+
+// This attribute holds which method to use between: ReactDOM.hydrate, ReactDOM.render
+const RENDER_ATTR = 'data-hydrate';
+
+function findDOMNodes() {
+  return document.querySelectorAll(`[${CLASS_NAME_ATTR}]`);
+}
+
+export default class ReactUJS {
+  constructor(loadComponent) {
+    this.loadComponent = loadComponent;
+  }
+
+  async mountComponents() {
+    const nodes = findDOMNodes();
+
+    for (let node of nodes) {
+      const className = node.getAttribute(CLASS_NAME_ATTR);
+      const createReactUJSElement = await this.loadComponent(className).catch(
+        () => null
+      );
+
+      if (!createReactUJSElement) {
+        const message = "Cannot find component: '" + className + "'";
+        // eslint-disable-next-line no-console
+        console.error(
+          '%c[react-rails] %c' + message + ' for element',
+          'font-weight: bold',
+          '',
+          node
+        );
+        throw new Error(
+          message + '. Make sure your component is available to render.'
+        );
+      } else {
+        const propsJson = node.getAttribute(PROPS_ATTR);
+        const props = propsJson && JSON.parse(propsJson);
+        const hydrate = node.getAttribute(RENDER_ATTR);
+
+        if (hydrate && typeof ReactDOM.hydrate === 'function') {
+          ReactDOM.hydrate(createReactUJSElement(props), node);
+        } else {
+          ReactDOM.render(createReactUJSElement(props), node);
+        }
+      }
+    }
+  }
+
+  start() {
+    addEventListener('turbolinks:load', () => this.mountComponents());
+  }
+}

babel.config.js

@@ -0,0 +1,83 @@
+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');
+
+  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 && [
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        require('@babel/preset-env').default,
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      [
+        require('@babel/preset-react').default,
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      require('babel-plugin-macros'),
+      require('@babel/plugin-syntax-dynamic-import').default,
+      isTestEnv && require('babel-plugin-dynamic-import-node'),
+      require('@babel/plugin-transform-destructuring').default,
+      [
+        require('@babel/plugin-proposal-class-properties').default,
+        {
+          loose: true
+        }
+      ],
+      [
+        require('@babel/plugin-proposal-object-rest-spread').default,
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-runtime').default,
+        {
+          helpers: false,
+          regenerator: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-regenerator').default,
+        {
+          async: false
+        }
+      ],
+      isProductionEnv && [
+        require('babel-plugin-transform-react-remove-prop-types').default,
+        {
+          removeImport: true
+        }
+      ]
+    ].filter(Boolean)
+  };
+};

config/initializers/browser.rb

@@ -1,4 +1,4 @@
-# See .babelrc
+# See .browserslistrc
 Browser.modern_rules.clear
 Browser.modern_rules << -> b { b.chrome? && b.version.to_i >= 50 }
 Browser.modern_rules << -> b { b.ie? && b.version.to_i >= 11 && !b.compatibility_view? }

config/webpack/environment.js

@@ -1,7 +1,5 @@
 const path = require('path');
 const { environment } = require('@rails/webpacker');
-const { VueLoaderPlugin } = require('vue-loader');
-const vue = require('./loaders/vue');
 
 const resolve = {
   alias: {
@@ -10,7 +8,4 @@ const resolve = {
 };
 
 environment.config.merge({ resolve });
-
-environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin());
-environment.loaders.append('vue', vue);
 module.exports = environment;

config/webpack/loaders/vue.js

@@ -1,8 +0,0 @@
-module.exports = {
-  test: /\.vue(\.erb)?$/,
-  use: [
-    {
-      loader: 'vue-loader'
-    }
-  ]
-};

config/webpacker.yml

@@ -3,8 +3,11 @@
 default: &default
   source_path: app/javascript
   source_entry_path: packs
+  public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
+  webpack_compile_output: false
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
@@ -13,8 +16,25 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
+  # Extract and emit a css file
+  extract_css: false
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
   extensions:
-    - .vue
+    - .mjs
     - .js
     - .sass
     - .scss
@@ -32,6 +52,9 @@ development:
   <<: *default
   compile: true
 
+  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
+  check_yarn_integrity: true
+
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
@@ -49,7 +72,7 @@ development:
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:
-      ignored: /node_modules/
+      ignored: '**/node_modules/**'
 
 
 test:
@@ -65,5 +88,8 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
+  # Extract and emit a css file
+  extract_css: true
+
   # Cache manifest.json for performance
   cache_manifest: true

package.json

@@ -2,9 +2,10 @@
   "dependencies": {
     "@rails/webpacker": "4.0.0-pre.3",
     "@sentry/browser": "^4.6.5",
+    "@babel/preset-react": "^7.0.0",
     "@turf/area": "^6.0.1",
-    "activestorage": "^5.2.2-rc1",
-    "autocomplete.js": "^0.31.0",
+    "activestorage": "^5.2.2",
+    "autocomplete.js": "^0.36.0",
     "chartkick": "^3.0.1",
     "debounce": "^1.2.0",
     "dom4": "^2.1.3",
@@ -12,21 +13,26 @@
     "jquery": "^3.3.1",
     "leaflet": "^1.3.4",
     "leaflet-freedraw": "^2.9.0",
-    "rails-ujs": "^5.2.1",
+    "prop-types": "^15.7.2",
+    "rails-ujs": "^5.2.2",
     "ramda": "^0.25.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-sortable-hoc": "^1.7.1",
+    "react_ujs": "^2.4.4",
     "select2": "^4.0.6-rc.1",
-    "turbolinks": "^5.2.0",
-    "vue": "^2.5.21",
-    "vue-loader": "^15.5.1",
-    "vue-template-compiler": "^2.5.21",
-    "vuedraggable": "^2.16.0",
-    "vue-scrollto": "^2.13.0"
+    "turbolinks": "^5.2.0"
   },
   "devDependencies": {
+    "babel-eslint": "^10.0.1",
+    "babel-plugin-macros": "^2.5.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "eclint": "^2.8.0",
     "eslint": "^5.9.0",
     "eslint-config-prettier": "^3.3.0",
     "eslint-plugin-prettier": "^3.0.0",
+    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^1.5.1",
     "prettier": "^1.15.3",
     "webpack-dev-server": "^3.1.9"
   },

postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009'
+      },
+      stage: 3
+    })
+  ]
+};