[WIP] Use webpacker for react

.babelrc

@@ -0,0 +1,26 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": "> 1%",
+          "uglify": true
+        },
+        "useBuiltIns": true
+      }
+    ],
+    "react",
+    "stage-2"
+  ],
+  "plugins": [
+    "syntax-dynamic-import",
+    [
+      "transform-class-properties",
+      {
+        "spec": true
+      }
+    ]
+  ]
+}

.eslintrc

@@ -3,5 +3,8 @@
   "extends": "airbnb",
   "globals": {
     "React": true
-    }
+    },
+  "env": {
+    "browser": true
+    },
 }

.gitignore

@@ -33,3 +33,5 @@ node_modules
 
 # Ignore redis dumps
 *.rdb
+/public/packs
+/node_modules

.postcssrc.yml

@@ -0,0 +1,4 @@
+plugins:
+  postcss-smart-import: {}
+  precss: {}
+  autoprefixer: {}

.travis.yml

@@ -4,7 +4,11 @@ rvm:
 dist: trusty
 sudo: false
 before_script:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.27.5
+  - export PATH=$HOME/.yarn/bin:$PATH
   - pip3 install https://github.com/sul-cidr/histonets-cv/archive/master.zip
   - RAILS_ENV=test bundle exec rake db:migrate
   - RAILS_ENV=test bundle exec rake assets:precompile
+cache:
+  yarn: true
 # sudo: false Leaving this commented out, as we may need this to install the correct python version etc.

Gemfile

@@ -19,6 +19,8 @@ gem 'coffee-rails', '~> 4.2'
 gem 'jquery-rails'
 gem 'react-rails'
 
+gem 'webpacker'
+
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
@@ -45,8 +47,6 @@ gem 'honeybadger', '~> 3.1'
 
 source 'https://rails-assets.org' do
   gem 'rails-assets-tether', '>= 1.1.0' # Required for tooltips/popover for twbs
-  gem 'rails-assets-leaflet-iiif', '~> 1.0'
-  gem 'rails-assets-leaflet', '~> 1.0'
   gem 'rails-assets-css-toggle-switch'
 end
 

Gemfile.lock

@@ -194,8 +194,6 @@ GEM
       railties (= 5.0.4)
       sprockets-rails (>= 2.0.0)
     rails-assets-css-toggle-switch (4.0.2)
-    rails-assets-leaflet (1.0.2)
-    rails-assets-leaflet-iiif (1.0.2)
     rails-assets-tether (1.3.7)
     rails-controller-testing (1.0.1)
       actionpack (~> 5.x)
@@ -216,9 +214,8 @@ GEM
     rb-fsevent (0.9.8)
     rb-inotify (0.9.7)
       ffi (>= 0.5.0)
-    react-rails (1.9.0)
+    react-rails (2.2.1)
       babel-transpiler (>= 0.7.0)
-      coffee-script-source (~> 1.8)
       connection_pool
       execjs
       railties (>= 3.2)
@@ -298,6 +295,10 @@ GEM
       activemodel (>= 5.0)
       debug_inspector
       railties (>= 5.0)
+    webpacker (2.0)
+      activesupport (>= 4.2)
+      multi_json (~> 1.2)
+      railties (>= 4.2)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.2)
@@ -334,8 +335,6 @@ DEPENDENCIES
   puma (~> 3.0)
   rails (~> 5.0.4)
   rails-assets-css-toggle-switch!
-  rails-assets-leaflet (~> 1.0)!
-  rails-assets-leaflet-iiif (~> 1.0)!
   rails-assets-tether (>= 1.1.0)!
   rails-controller-testing
   react-rails
@@ -350,6 +349,7 @@ DEPENDENCIES
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console
+  webpacker
   wicked
 
 BUNDLED WITH

app/assets/javascripts/application.js

@@ -10,16 +10,11 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require leaflet
-//= require leaflet-iiif
-//= require leaflet-areaselect
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
 //= require tether
-//= require bootstrap-sprockets
 //= require react
 //= require react_ujs
-//= require components
 //= require image-picker.min
 //= require_tree .

app/assets/stylesheets/application.scss

@@ -1,5 +1,3 @@
-@import "leaflet";
-@import "leaflet-areaselect";
 @import "css-toggle-switch";
 @import "bootstrap_custom_variables";
 @import "bootstrap";

app/javascript/app-styles.sass

@@ -0,0 +1 @@
+@import '~leaflet/dist/leaflet'

app/assets/javascripts/components/histogram.es6.jsx → app/javascript/components/histogram.jsx

@@ -1,4 +1,7 @@
-class Histogram extends React.Component {
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class Histogram extends React.Component {
   // Tried to push some of this into a seperate es6 model, but PhantomJS would
   // not comply. :(
   static formattedColor(color) {
@@ -69,12 +72,12 @@ class Histogram extends React.Component {
 }
 
 Histogram.propTypes = {
-  histogram: React.PropTypes.arrayOf(
-    React.PropTypes.string,
+  histogram: PropTypes.arrayOf(
+    PropTypes.string,
   ),
-  pathName: React.PropTypes.string.isRequired,
-  imagePaths: React.PropTypes.arrayOf(
-    React.PropTypes.string,
+  pathName: PropTypes.string.isRequired,
+  imagePaths: PropTypes.arrayOf(
+    PropTypes.string,
   ),
 };
 

app/assets/javascripts/components/iiif_cropper.es6.jsx → app/javascript/components/iiif_cropper.jsx

@@ -1,6 +1,9 @@
-/* global L, LeafletIiif, LeafletIiifCropper */
+import React from 'react';
+import PropTypes from 'prop-types';
+import LeafletIiif from './leaflet_iiif';
+import LeafletIiifCropper from './leaflet_iiif_cropper';
 
-class IiifCropper extends React.Component {
+export default class IiifCropper extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -20,7 +23,7 @@ class IiifCropper extends React.Component {
   }
 
   onLoad(leafletState) {
-    this.setState({ ...leafletState });
+    this.setState(leafletState);
   }
 
   onRegionChanged(region) {
@@ -50,6 +53,6 @@ class IiifCropper extends React.Component {
 }
 
 IiifCropper.propTypes = {
-  iiifImage: React.PropTypes.string.isRequired,
-  cropperName: React.PropTypes.string.isRequired,
+  iiifImage: PropTypes.string.isRequired,
+  cropperName: PropTypes.string.isRequired,
 };

app/assets/javascripts/components/image_match_results.es6.jsx → app/javascript/components/image_match_results.jsx

@@ -1,6 +1,9 @@
-/* global L, LeafletIiif, LeafletGeometry */
+import React from 'react';
+import PropTypes from 'prop-types';
+import LeafletIiif from './leaflet_iiif';
+import LeafletGeometry from './leaflet_geometry';
 
-class ImageMatchResults extends React.Component {
+export default class ImageMatchResults extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -18,7 +21,7 @@ class ImageMatchResults extends React.Component {
   }
 
   onLoad(leafletState) {
-    this.setState({ ...leafletState });
+    this.setState(leafletState);
   }
 
   render() {
@@ -42,8 +45,8 @@ class ImageMatchResults extends React.Component {
 }
 
 ImageMatchResults.propTypes = {
-  iiifImage: React.PropTypes.string.isRequired,
-  matches: React.PropTypes.arrayOf(
-    React.PropTypes.array,
+  iiifImage: PropTypes.string.isRequired,
+  matches: PropTypes.arrayOf(
+    PropTypes.array,
   ),
 };

app/assets/javascripts/components/image_template_container.es6.jsx → app/javascript/components/image_template_container.jsx

@@ -1,6 +1,11 @@
-/* global ImageTemplateCropper, ImageTemplateList, $  */
+/* global $ */
 
-class ImageTemplateContainer extends React.Component {
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImageTemplateCropper from './image_template_cropper';
+import ImageTemplateList from './image_template_list';
+
+export default class ImageTemplateContainer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -82,11 +87,11 @@ class ImageTemplateContainer extends React.Component {
 }
 
 ImageTemplateContainer.propTypes = {
-  imageTemplates: React.PropTypes.arrayOf(
-    React.PropTypes.object,
+  imageTemplates: PropTypes.arrayOf(
+    PropTypes.object,
   ),
-  iiifImage: React.PropTypes.string,
-  templateDestroyRoute: React.PropTypes.string,
+  iiifImage: PropTypes.string,
+  templateDestroyRoute: PropTypes.string,
 };
 
 ImageTemplateContainer.defaultProps = {

app/assets/javascripts/components/image_template_cropper.es6.jsx → app/javascript/components/image_template_cropper.jsx

@@ -1,6 +1,8 @@
-/* global IiifCropper */
+import React from 'react';
+import PropTypes from 'prop-types';
+import IiifCropper from './iiif_cropper';
 
-class ImageTemplateCropper extends React.Component {
+export default class ImageTemplateCropper extends React.Component {
   addTemplate() {
     this.props.onAddNewTemplate(this.cropper.state);
   }
@@ -27,5 +29,5 @@ class ImageTemplateCropper extends React.Component {
 }
 
 ImageTemplateCropper.propTypes = {
-  onAddNewTemplate: () => {},
+  onAddNewTemplate: PropTypes.func,
 };

app/assets/javascripts/components/image_template_list.es6.jsx → app/javascript/components/image_template_list.jsx

@@ -1,6 +1,8 @@
-/* global ImageTemplateViewer */
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImageTemplateViewer from './image_template_viewer';
 
-class ImageTemplateList extends React.Component {
+export default class ImageTemplateList extends React.Component {
   constructor(props) {
     super(props);
 
@@ -45,11 +47,11 @@ class ImageTemplateList extends React.Component {
 }
 
 ImageTemplateList.propTypes = {
-  imageTemplates: React.PropTypes.arrayOf(
-    React.PropTypes.object,
+  imageTemplates: PropTypes.arrayOf(
+    PropTypes.object,
   ),
-  updateRemovedItems: React.PropTypes.func,
-  updateImageTemplates: React.PropTypes.func,
+  updateRemovedItems: PropTypes.func,
+  updateImageTemplates: PropTypes.func,
 };
 
 ImageTemplateList.defaultProps = {

app/assets/javascripts/components/image_template_viewer.es6.jsx → app/javascript/components/image_template_viewer.jsx

@@ -1,6 +1,8 @@
-/* global Range */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Range from './range';
 
-class ImageTemplateViewer extends React.Component {
+export default class ImageTemplateViewer extends React.Component {
   constructor(props) {
     super(props);
     this.state = { value: parseInt(props.match_options.threshold, 10) };
@@ -84,20 +86,20 @@ class ImageTemplateViewer extends React.Component {
 }
 
 ImageTemplateViewer.propTypes = {
-  image_url: React.PropTypes.string,
-  id: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.number,
+  image_url: PropTypes.string,
+  id: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
   ]),
-  match_options: React.PropTypes.shape({
-    threshold: React.PropTypes.oneOfType([
-      React.PropTypes.number,
-      React.PropTypes.string,
+  match_options: PropTypes.shape({
+    threshold: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
     ]),
   }),
-  removeItem: React.PropTypes.func,
-  index: React.PropTypes.number,
-  updateImageTemplates: React.PropTypes.func,
+  removeItem: PropTypes.func,
+  index: PropTypes.number,
+  updateImageTemplates: PropTypes.func,
 };
 
 ImageTemplateViewer.defaultProps = {

app/assets/javascripts/components/leaflet_geometry.es6.jsx → app/javascript/components/leaflet_geometry.jsx

@@ -1,6 +1,8 @@
-/* global L */
+import L from 'leaflet';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-class LeafletGeometry extends React.Component {
+export default class LeafletGeometry extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -27,8 +29,8 @@ class LeafletGeometry extends React.Component {
 }
 
 LeafletGeometry.propTypes = {
-  matches: React.PropTypes.arrayOf(
-    React.PropTypes.array,
+  matches: PropTypes.arrayOf(
+    PropTypes.array,
   ),
-  unprojectZoom: React.PropTypes.number,
+  unprojectZoom: PropTypes.number,
 };