Merge pull request #53 from UI-Research/GDRI-108/prepare-map-upgrade

Gdri 108/prepare map upgrade

.env.development

@@ -0,0 +1 @@
+REACT_APP_DATA_LOCATION=''

.env.production

@@ -0,0 +1 @@
+REACT_APP_DATA_LOCATION=/modules/custom/greaterdc_data_explorer/map/build

.gitignore

@@ -22,10 +22,8 @@ Thumbs.db
 # NPM packages folder.
 node_modules/
 
-# Brunch output folder.
-public/
-
 # data is automatically generated from CSV sources under /data
 data/
-app/assets/data
+public/data
 templates/
+build

README.md

@@ -5,7 +5,7 @@ Setup
 ---
 
 #### Dev requirements:
-    * `node >= v8.6.0`
+    * `node >= v12.13.1`
 
 #### Run:
   * `yarn start` — watches the project with continuous rebuild. This will also launch HTTP server with [pushState](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history).
@@ -81,15 +81,15 @@ By default, the app is configured to render in a div with id `#app`. If you wish
 
 Assets Location
 ---
-Because the application is designed to work as standalone or embedded in a non-root location, the `DATA_LOCATION` ENV var is used to tell the application where to load the assets from. If not specified, it defaults to `"."`.
+Because the application is designed to work as standalone or embedded in a non-root location, the `REACT_APP_DATA_LOCATION` ENV var is used to tell the application where to load the assets from. If not specified, it defaults to `"."`.
 
 ### Example use:
 
-* `DATA_LOCATION=path/to/assets yarn build`
+* `REACT_APP_DATA_LOCATION=path/to/assets yarn build`
 
 ### Notes:
 
-* `DATA_LOCATION` _must not_ have a trailing slash (`"/"`)
+* `REACT_APP_DATA_LOCATION` _must not_ have a trailing slash (`"/"`)
 
 Filter dropdowns
 ---

package.json

@@ -5,54 +5,61 @@
   "author": "João Gradim",
   "version": "0.0.1",
   "repository": "",
+  "engines": {
+    "node": ">=12.13.1"
+  },
   "scripts": {
-    "start": "yarn verify-data && yarn convert-data && yarn create-filters && brunch watch --server",
-    "start-skip-verify": "yarn convert-data && yarn create-filters && brunch watch --server",
-    "build": "yarn verify-data && yarn convert-data && yarn create-filters && brunch build --production",
-    "build-skip-verify": "yarn convert-data && yarn create-filters && brunch build --production",
-    "convert-data": "yarn babel-node scripts/csv2json.js --from=./data --to=./app/assets/data",
-    "create-filters": "yarn babel-node scripts/create_filters.js --from=./data --to=./app/assets/data",
-    "verify-data": "yarn babel-node scripts/verify_data.js --from=./data",
-    "data-templates": "yarn babel-node scripts/generate_templates.js"
+    "start": "yarn verify-data && yarn convert-data && yarn create-filters && react-scripts start",
+    "start-skip-verify": "yarn convert-data && yarn create-filters && node ./scripts/build-no-split.cjs",
+    "build": "yarn verify-data && yarn convert-data && yarn create-filters && node ./scripts/build-no-split.cjs",
+    "build-skip-verify": "yarn convert-data && yarn create-filters && node ./scripts/build-no-split.cjs",
+    "convert-data": "node --experimental-modules scripts/csv2json.js --from=./data --to=./public/data",
+    "create-filters": "node --experimental-modules scripts/create_filters.js --from=./data --to=./public/data",
+    "verify-data": "node --experimental-modules scripts/verify_data.js --from=./data",
+    "data-templates": "node --experimental-modules scripts/generate_templates.js"
   },
+  "type": "module",
   "dependencies": {
-    "axios": "^0.17.1",
-    "babel-polyfill": "^6.26.0",
+    "axios": "^0.19.0",
     "bluebird": "^3.5.1",
     "classnames": "^2.2.5",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.compact": "^3.0.1",
     "lodash.groupby": "^4.6.0",
     "lodash.map": "^4.6.0",
     "lodash.some": "^4.6.0",
     "lodash.sorteduniq": "^4.2.0",
     "lodash.throttle": "^4.1.1",
-    "preact": "^8.1.0",
-    "preact-compat": "^3.17.0",
+    "node-sass": "^4.13.0",
+    "parse": "^2.10.0",
     "query-string": "^5.0.1",
+    "react": "^16.12.0",
     "react-click-outside": "tj/react-click-outside",
+    "react-dom": "^16.12.0",
+    "react-scripts": "^3.3.0",
     "react-select": "1.2.1"
   },
   "devDependencies": {
-    "auto-reload-brunch": "^2",
-    "babel-brunch": "^6.1.1",
-    "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.6.1",
-    "brunch": "^2",
-    "clean-css-brunch": "^2",
-    "csv-parse": "^2.0.0",
-    "eslint-brunch": "^3.12.0",
-    "eslint-config-standard-preact": "^1.1.6",
-    "eslint-plugin-react": "^7.4.0",
+    "csv-parse": "^4.8.2",
     "glob": "^7.1.2",
-    "jsenv-brunch": "^2.0.0",
     "lodash.isequal": "^4.5.0",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
-    "sass-brunch": "^2.10.4",
-    "uglify-js-brunch": "^2"
+    "rewire": "^4.0.1"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

public/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" class="not-embedded">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <link href="https://greaterdc.urban.org/themes/custom/greaterdc_theme/dest/style.css" rel="stylesheet" />
+    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css" rel="stylesheet" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Greater DC Data Explorer</title>
+    <script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js"></script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="app"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

scripts/build-no-split.cjs

@@ -0,0 +1,28 @@
+
+const rewire = require('rewire');
+const defaults = rewire('react-scripts/scripts/build.js');
+const config = defaults.__get__('config');
+
+// Use external version of React
+config.externals = {
+  "react": "React",
+  "react-dom": "ReactDOM"
+};
+
+// Consolidate chunk files instead
+config.optimization.splitChunks = {
+  cacheGroups: {
+    default: false,
+  },
+};
+// Move runtime into bundle instead of separate file
+config.optimization.runtimeChunk = false;
+
+// JS
+config.output.filename = 'static/js/[name].js';
+// CSS. "5" is MiniCssPlugin
+// Force rename un-chunked file.
+config.plugins[5].options.moduleFilename = () => 'static/css/main.css';
+
+// I may need this again.
+// config.plugins[5].options.filename = 'static/css/main.css';

scripts/create_filters.js

@@ -28,13 +28,14 @@
  *
  * */
 
-import path from "path";
 import fs from "fs";
 import glob from "glob";
-import parse from "csv-parse/lib/sync";
+import minimist from 'minimist'
+import parse from "csv-parse/lib/sync.js";
+import path from "path";
 
-import { geographies, topics } from "../app/constants/taxonomy.js";
-import { filterColumn } from "../app/support/filters.js";
+import { geographies, topics } from "../src/constants/taxonomy.js";
+import { filterColumn } from "../src/helpers/filters.js";
 
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 
@@ -119,7 +120,7 @@ function yearsFor(geography, topic, indicator) {
 //-----------------------------------------------------------------------------
 // Main script
 
-const argv = require("minimist")(process.argv.slice(2));
+const argv = minimist(process.argv.slice(2));
 let { from, to } = argv;
 
 // remove trailing slashes from `from`/`to` args

scripts/csv2json.js

@@ -1,10 +1,11 @@
 /* eslint-disable no-console */
 
-import path from "path";
 import fs from "fs";
 import glob from "glob";
 import mkdirp from "mkdirp";
-import parse from "csv-parse/lib/sync";
+import parse from "csv-parse/lib/sync.js";
+import path from "path";
+import minimist from 'minimist'
 
 const geographiesKeys = [
   "geo2010_nf",
@@ -58,7 +59,7 @@ function csv2json(file, from, to) {
 //-----------------------------------------------------------------------------
 // Main script
 
-const argv = require("minimist")(process.argv.slice(2));
+const argv = minimist(process.argv.slice(2));
 const { from, to } = argv;
 
 if (!from || !to) {

scripts/generate_templates.js

@@ -1,11 +1,11 @@
 /* eslint-disable no-console */
 
-import path from "path";
 import fs from "fs";
 import mkdirp from "mkdirp";
+import path from "path";
 
 function generateHelpTextTemplate() {
-  const file = fs.readFileSync(path.resolve(__dirname, "../", "app", "assets", "data", "filters.json"))
+  const file = fs.readFileSync(path.resolve(__dirname, "../", "public", "data", "filters.json"))
   const json = JSON.parse(file);
 
   const csv = [
@@ -39,4 +39,3 @@ mkdirp.sync(path.resolve(__dirname, "../", "templates"));
 fs.writeFileSync(path.resolve(__dirname, "../", "templates", "help-text.csv"), csv);
 
 console.log("Template written to /templates/help-text.csv")
-