Merge pull request #5677 from tchak/optimize-javascript

Optimize javascript

app/javascript/components/Chartkick.js

@@ -1,6 +1,6 @@
 import Chartkick from 'chartkick';
 import Highcharts from 'highcharts';
-import { toggle, delegate } from '@utils';
+import { toggle, delegate, fire } from '@utils';
 
 export default function () {
   return null;
@@ -34,3 +34,4 @@ delegate('click', '[data-toggle-chart]', toggleChart);
 
 Chartkick.use(Highcharts);
 window.Chartkick = Chartkick;
+fire(window, 'chartkick:ready');

app/javascript/components/Trix.js

@@ -0,0 +1,6 @@
+import 'trix';
+import '@rails/actiontext';
+
+export default function () {
+  return null;
+}

app/javascript/loaders/Trix.js

@@ -0,0 +1,3 @@
+import Loadable from '../components/Loadable';
+
+export default Loadable(() => import('../components/Trix'));

app/javascript/new_design/chartkick.js

@@ -0,0 +1,41 @@
+// Ruby chartkick helper implementation assumes Chartkick is already loaded.
+// It has no way to delay execution. So we wrap all the Chartkick classes
+// to queue rendering for when Chartkick is loaded.
+
+class AreaChart {
+  constructor(...args) {
+    charts.add(['AreaChart', args]);
+  }
+}
+
+class PieChart {
+  constructor(...args) {
+    charts.add(['PieChart', args]);
+  }
+}
+
+class LineChart {
+  constructor(...args) {
+    charts.add(['LineChart', args]);
+  }
+}
+
+class ColumnChart {
+  constructor(...args) {
+    charts.add(['ColumnChart', args]);
+  }
+}
+
+const charts = new Set();
+
+function initialize() {
+  for (const [ChartType, args] of charts) {
+    new window.Chartkick[ChartType](...args);
+  }
+  charts.clear();
+}
+
+if (!window.Chartkick) {
+  window.Chartkick = { AreaChart, PieChart, LineChart, ColumnChart };
+  addEventListener('chartkick:ready', initialize);
+}

app/javascript/new_design/messagerie.js

@@ -1,6 +1,6 @@
 import { scrollTo, scrollToBottom } from '@utils';
 
-export function scrollMessagerie() {
+function scrollMessagerie() {
   const ul = document.querySelector('.messagerie ul');
 
   if (ul) {

app/javascript/packs/application.js

@@ -1,8 +1,6 @@
 import '../shared/polyfills';
 import Rails from '@rails/ujs';
 import * as ActiveStorage from '@rails/activestorage';
-import 'trix';
-import '@rails/actiontext';
 import 'whatwg-fetch'; // window.fetch polyfill
 import ReactRailsUJS from 'react_ujs';
 
@@ -15,6 +13,7 @@ import '../shared/remote-input';
 import '../shared/franceconnect';
 import '../shared/toggle-target';
 
+import '../new_design/chartkick';
 import '../new_design/dropdown';
 import '../new_design/form-validation';
 import '../new_design/procedure-context';
@@ -29,14 +28,15 @@ import '../new_design/champs/carte';
 import '../new_design/champs/linked-drop-down-list';
 import '../new_design/champs/repetition';
 
-import { toggleCondidentielExplanation } from '../new_design/avis';
-import { scrollMessagerie } from '../new_design/messagerie';
+import {
+  toggleCondidentielExplanation,
+  replaceSemicolonByComma
+} from '../new_design/avis';
 import {
   showMotivation,
   motivationCancel,
   showImportJustificatif
 } from '../new_design/state-button';
-import { replaceSemicolonByComma } from '../new_design/avis';
 import {
   acceptEmailSuggestion,
   discardEmailSuggestionBox
@@ -46,7 +46,6 @@ import {
 const DS = {
   fire: (eventName, data) => Rails.fire(document, eventName, data),
   toggleCondidentielExplanation,
-  scrollMessagerie,
   showMotivation,
   motivationCancel,
   showImportJustificatif,

app/javascript/shared/rails-ujs-fix.js

@@ -1,26 +1,5 @@
-import Rails from '@rails/ujs';
 import jQuery from 'jquery';
 
-// `smart_listing` gem is overriding `$.rails.href` method. When using newer
-// jQuery-less version of rails-ujs it breaks.
-// https://github.com/Sology/smart_listing/blob/master/app/assets/javascripts/smart_listing.coffee.erb#L9
-addEventListener('load', () => {
-  const { href, handleRemote } = Rails;
-  Rails.href = function (element) {
-    return element.href || href(element);
-  };
-  Rails.handleRemote = function (e) {
-    if (this instanceof HTMLElement) {
-      handleRemote.call(this, e);
-    } else {
-      let element = e.find('[data-remote]')[0];
-      let event = new CustomEvent('click');
-      Object.defineProperty(event, 'target', { value: element });
-      return handleRemote.call(element, event);
-    }
-  };
-});
-
 // rails-ujs installs CSRFProtection for its own ajax implementation. We might need
 // CSRFProtection for jQuery initiated requests. This code is from jquery-ujs.
 jQuery.ajaxPrefilter((options, originalOptions, xhr) => {

app/views/new_administrateur/mail_templates/_form.html.haml

@@ -1,3 +1,6 @@
+-# Load Trix lazily, by using our React lazy-loader.
+-# (Trix itself doesn't use React though)
+= react_component('Trix')
 
 = f.label :subject do
   Objet de l'email